:root{
  /* Ytor: fem steg i stället för tre, så paneler, kort och kontroller kan
     ligga ovanpå varandra utan att någon behöver en extra skugga. */
  --bg:#05060a; --panel:#0c0f15; --panel2:#12161f; --panel3:#1a202c; --panel4:#222a3a;
  --border:#202836; --border2:#2f3950; --line:rgba(255,255,255,.055);

  --text:#eef2f8; --dim:#8e97ab; --dim2:#5c657a;

  --accent:#5b6cff; --accent2:#8e9bff; --accent-soft:rgba(91,108,255,.14);
  --warm:#ff5f7c; --ok:#2fc45f; --warn:#f5a524; --danger:#f4485c;
  --censor:#ff2d9b;

  /* Spårfärger — samma skala som TRACK_ROLES i tracks.js. Färgen är
     information: den säger vilken roll spåret har, inte bara att det finns. */
  --trk-main:#5b6cff; --trk-overlay:#35d1e6; --trk-text:#f5a524; --trk-audio:#2fc45f;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  /* Radie: proffsverktyg är kantigare än konsumentappar. Pillerformen
     sparas till statusmärken och tidkod, där den betyder "läsvärde". */
  --r:8px; --r2:12px; --pill:999px;
  --shadow:0 12px 32px rgba(0,0,0,.45);
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent2);
  --t:.13s cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;
  display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased;
  /* Siffror i ett klippverktyg jämförs kolumnvis: tidkod, procent, px.
     Proportionella siffror får dem att hoppa vid varje uppdatering. */
  font-variant-numeric:tabular-nums;letter-spacing:-.005em;
}
:focus-visible{outline:none;box-shadow:var(--focus)}
.spacer{flex:1}
.vsep{width:1px;height:20px;background:var(--border);margin:0 4px}
.muted{color:var(--dim)} .small{font-size:11px}
.hint{font-size:11px;color:var(--dim2);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Knappar ---------- */
button{
  background:var(--panel3);border:1px solid var(--border);color:var(--text);
  padding:6px 11px;border-radius:var(--r);cursor:pointer;font-size:12px;font-family:inherit;
  font-variant-numeric:tabular-nums;
  transition:background var(--t),border-color var(--t),color var(--t);white-space:nowrap;
}
button:hover:not(:disabled){background:var(--panel4);border-color:var(--border2)}
button:active:not(:disabled){background:var(--panel3);transform:translateY(.5px)}
button:disabled{opacity:.3;cursor:not-allowed}
button.icon{padding:6px 9px;min-width:32px;display:inline-flex;align-items:center;justify-content:center}
button.primary{background:var(--accent);border:1px solid #6f7dff;color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
button.primary:hover:not(:disabled){background:var(--accent2)}
button.primary-ghost{background:var(--accent-soft);border-color:var(--accent);color:var(--accent2)}
button.danger{background:rgba(255,77,94,.14);border-color:var(--danger);color:#ff8a95}
/* The Weave Studio är appens tyngsta kreativa verktyg och ska gå att
   hitta direkt i headern — men får INTE konkurrera visuellt med den enda
   riktiga slutknappen (Exportera, button.primary). Därför en egen
   gradient-accent i stället för ännu en fylld primary: tydligt mest
   framträdande bland de VERKTYG som står till vänster, utan att bli en
   andra "avsluta här"-knapp. */
button.weave-cta{
  background:linear-gradient(135deg,rgba(143,124,255,.22),rgba(255,95,124,.20));
  border:1px solid var(--accent);color:#e9e6ff;font-weight:600;
}
button.weave-cta:hover:not(:disabled){
  background:linear-gradient(135deg,rgba(143,124,255,.34),rgba(255,95,124,.30));
  border-color:var(--accent2);
}
button.play{min-width:46px;font-size:14px;border-radius:var(--r)}
button.on{background:var(--accent);border-color:#6f7dff;color:#fff}
button.censor-on{background:var(--censor);border-color:#ff5fb4;color:#fff}

input,select,textarea{
  background:#080b11;border:1px solid var(--border);color:var(--text);
  padding:6px 9px;border-radius:var(--r);width:100%;font-family:inherit;font-size:12px;
  font-variant-numeric:tabular-nums;transition:border-color var(--t),background var(--t);
}
input:hover,select:hover,textarea:hover{border-color:var(--border2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:#0a0e16}
input[type=range]{padding:0;height:22px;background:none;border:none;accent-color:var(--accent);cursor:pointer}
input[type=checkbox]{width:auto;height:16px}
input[type=color]{padding:2px;height:30px;cursor:pointer}
.toggle{display:inline-flex;gap:6px;align-items:center;font-size:11px;color:var(--dim);cursor:pointer;user-select:none;white-space:nowrap}
/* Kompakt select för verktygsrader — den globala regeln ovan sätter
   width:100%, vilket sprängde radens layout. */
select.mini{width:auto;padding:3px 7px;font-size:11px}
select.mini:disabled{opacity:.4;cursor:not-allowed}

/* ---------- Header ---------- */
#appHeader{
  display:flex;align-items:center;gap:12px;padding:8px 14px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-bottom:1px solid var(--border);flex:0 0 auto;
}
/* Sidhuvudets ca femton knappar (Compilation, Weave, export …) ryms inte under ca 1 430 px: raden scrollar i sidled i stället för att klippas bort
   (på en telefon, men också på en smal dator eller surfplatta). */
#appHeader{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#appHeader::-webkit-scrollbar{display:none}
#appHeader>*{flex:0 0 auto}
#appHeader>.spacer{flex:1 1 auto}
@media (max-width:900px){#appHeader .spacer{display:none}}
.brand{display:flex;align-items:center;gap:9px}
.logo{color:var(--accent);font-size:17px}
.proj-icon{ cursor:pointer; font-size:14px; opacity:.7; transition:opacity var(--t); }
.proj-icon:hover{ opacity:1; }
.proj-name{width:170px;background:transparent;border:1px solid transparent;font-weight:600;font-size:13px}
.proj-name:hover{border-color:var(--border)}
.save-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--dim2);white-space:nowrap;padding:2px 4px}
.save-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dim2);transition:background .25s,box-shadow .25s}
.save-status.saved::before{background:var(--ok);box-shadow:0 0 5px var(--ok)}
.save-status.dirty::before{background:var(--warn)}
.save-status.saving::before{background:var(--accent2);animation:pulse 1s infinite}
.save-status.error::before{background:var(--danger)}
.hgroup{display:flex;gap:6px;align-items:center}
#aspectSel{width:auto;min-width:130px}

.main-area{display:flex;flex:1;min-height:0}

/* ---------- Bibliotek ---------- */
/* Sidopanelerna och tidslinjen följer skärmen: med fasta 320 + 326 + 322 px blev förhandsvisningen 417×235 på en 1280×720-dator. */
.library{width:clamp(240px,20vw,320px);flex:0 0 clamp(240px,20vw,320px);background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.lib-tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--border)}
.lib-tabs button{flex:1;padding:6px;font-size:11px}
.lib-tabs button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent2);font-weight:600}
.lib-pane{display:none;flex:1;min-height:0;flex-direction:column}
/* Allt man lägger till samlat i mediapanelen (låg förut i sidhuvudet). */
.lib-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 10px 0}
.lib-actions button{min-width:0;padding:7px 6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-actions button.primary-ghost{grid-column:1 / -1;padding:8px 6px;font-weight:600}
.lib-actions button.wide{grid-column:1 / -1}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px;max-height:52vh;overflow:auto}
.lib-pane.active{display:flex;animation:paneIn .15s ease}
/* Musik-panelen (music-ui.js) injicerar sina .psec-block direkt som barn
   till panen själv, till skillnad från Media/Presets som har en egen
   inre scrollbehållare (.media-grid/.preset-list) — panen behöver
   alltså sin EGEN scroll här, annars klipps innehållet bara av utan
   något sätt att nå det som hamnar under synligt område. */
#ltMusic{overflow-y:auto;padding:0 10px 10px}
@keyframes paneIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}

.dropzone{margin:10px;padding:18px 12px;border:1.5px dashed var(--border2);border-radius:var(--r2);text-align:center;color:var(--dim);display:flex;flex-direction:column;gap:9px;align-items:center;transition:.15s}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent2)}
.dz-icon{font-size:20px}
.media-grid{flex:1;overflow-y:auto;padding:0 10px 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.media-card{background:var(--panel2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;position:relative;transition:.14s}
.media-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.media-card .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:#000;display:block}
.media-card .mc-body{padding:6px 7px}
.media-card .mc-name{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-card .mc-meta{font-size:11px;color:var(--dim2);font-family:var(--mono);margin-top:2px}
.media-card .badge{position:absolute;top:5px;left:5px;background:rgba(0,0,0,.72);border-radius:6px;padding:1px 5px;font-size:10px}
.media-card .tstat{position:absolute;top:5px;right:5px;font-size:10px;padding:1px 5px;border-radius:6px}
.tstat.done{background:rgba(56,209,106,.85)} .tstat.run{background:rgba(255,176,46,.85);color:#000} .tstat.none{background:rgba(0,0,0,.6);color:var(--dim)}

/* ---------- AI ---------- */
.ai-head{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--border);font-size:11px;color:var(--dim)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 7px var(--ok)}
.dot.busy{background:var(--warn);box-shadow:0 0 7px var(--warn);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
.progress{height:2px;background:var(--accent);width:0;transition:width .25s}
.chat-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:7px}
.msg{padding:8px 11px;border-radius:12px;max-width:92%;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.msg.user{background:var(--accent-soft);border:1px solid var(--accent);align-self:flex-end}
.msg.ai{background:var(--panel2);border:1px solid var(--border);align-self:flex-start}
.msg.sys{background:rgba(255,176,46,.1);border:1px solid rgba(255,176,46,.35);align-self:stretch;font-size:11px;color:#ffd48a}
.ai-chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 12px 8px}
.ai-chips button{font-size:11px;padding:5px 9px;background:var(--panel2)}
.chat-input{display:flex;gap:6px;padding:10px;border-top:1px solid var(--border)}
.chat-input button{min-width:36px}

.sticker-grid{flex:1;overflow-y:auto;padding:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-content:start}
.sticker-grid button{aspect-ratio:1;padding:0;font-size:20px;border-radius:var(--r);display:flex;align-items:center;justify-content:center}

/* ---------- Preview ---------- */
/* Neutral, jämn omgivning: en färgad gradient eller glöd runt bilden påverkar hur färgerna i den uppfattas (därför har proffsprogram grått). */
.preview{flex:1;min-width:0;display:flex;flex-direction:column;background:#141518}
.canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;position:relative}
.canvas-wrap canvas{position:absolute;max-width:calc(100% - 32px);max-height:calc(100% - 32px);border-radius:14px}
.canvas-wrap #ambientBg.ambient-bg{
  position:absolute;
  width:100%; height:100%;
  max-width:none; max-height:none;
  border-radius:18px;
  z-index:0;
  opacity:0.55;
  filter:saturate(1.3) blur(40px);
  pointer-events:none;
  transition:opacity .4s ease;
}
.canvas-wrap #stage{ z-index:1 }
.canvas-wrap #overlay{ z-index:2 }
/* Glöden runt bilden bara i fullskärm (uppspelning för att titta); i redigeringen stör den färgbedömningen. */
.canvas-wrap:not(:fullscreen):not(:-webkit-full-screen) #ambientBg.ambient-bg{display:none}
.canvas-wrap.playing #ambientBg.ambient-bg{ opacity:0.4 }
.canvas-wrap.paused #ambientBg.ambient-bg{ opacity:0.55 }
.canvas-wrap:fullscreen,.canvas-wrap:-webkit-full-screen{
  width:100vw;height:100vh;padding:0;background:#000;display:flex;align-items:center;justify-content:center}
.canvas-wrap:fullscreen canvas,.canvas-wrap:-webkit-full-screen canvas{
  max-width:100vw;max-height:100vh;border-radius:0}
#stage{box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);background:#000}
#overlay{touch-action:none;cursor:default}
.viewer-bar{display:flex;align-items:center;gap:6px;padding:7px 14px;border-top:1px solid var(--border);background:linear-gradient(180deg,var(--panel),var(--panel2));flex-wrap:wrap}
.time-badge{padding:5px 11px;border-radius:var(--pill);background:#080b11;border:1px solid var(--border);font-family:var(--mono);font-size:12px;min-width:86px;text-align:center;letter-spacing:.02em}
input.time-badge{
  width:86px;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  color:var(--text);cursor:text;transition:border-color var(--t),background var(--t);
}
input.time-badge:hover{border-color:var(--border2)}
input.time-badge:focus{outline:none;border-color:var(--accent2);background:#0c111c;box-shadow:0 0 0 2px var(--accent-soft)}
#zoomFit{width:auto;min-width:96px}

/* ---------- Egenskaper ---------- */
.properties{width:clamp(280px,21vw,340px);flex:0 0 clamp(280px,21vw,340px);background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.prop-tabs[hidden]{display:none}
.prop-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--border)}
.prop-tabs button{padding:5px 9px;font-size:11px}
.prop-tabs button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent2);font-weight:600}
.prop-tabs button.hot{border-color:var(--censor);color:#ff9ed1}
.prop-tabs button.hot.active{background:rgba(255,45,155,.16);border-color:var(--censor);color:#ff9ed1}
.prop-body{flex:1;overflow-y:auto;padding-bottom:30px}
/* Egenskapspanelen byter innehåll med innerHTML, inte display:none/flex som
   fliktexterna i biblioteket — så samma "animera vid display-none-utsläpp"
   knep funkar inte här. renderProps() lägger till/tar bort klassen manuellt
   i stället, men BARA vid ett faktiskt FLIKBYTE — kör man den vid varje
   renderProps() (dvs varje reglage-ändring) skulle panelen "poppa" varje
   gång man drar i ett reglage, vilket känns precis motsatt premium. */
.prop-body.tabswitch{animation:paneIn .15s ease}
.psec{padding:13px 14px;border-bottom:1px solid var(--border)}
.psec h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);display:flex;justify-content:space-between;align-items:center}
.row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.row>label{flex:0 0 92px;font-size:11px;color:var(--dim)}
.row>.ctl{flex:1;display:flex;gap:6px;align-items:center;min-width:0}
.row .num{flex:0 0 50px;font-family:var(--mono);font-size:11px;text-align:right;padding:5px 6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button{font-size:11px;padding:6px 9px}
.chips.segchips{gap:6px}
.chips.segchips button.has-thumb{
  padding:4px 6px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;width:64px;
}
.chips.segchips button.has-thumb img{
  width:56px;height:35px;border-radius:4px;display:block;background:#000;
  border:1px solid rgba(255,255,255,.08);
}
.chips.segchips button.has-thumb.on img{border-color:var(--accent2)}
.chips.segchips button.has-thumb span{font-size:11px;line-height:1.2;text-align:center}
.empty{padding:36px 20px;text-align:center;color:var(--dim2);font-size:12px;line-height:1.7}
.empty-icon{color:var(--dim2);opacity:0.5;margin-bottom:14px;font-size:24px}
.warnbox{margin:0 14px 12px;padding:9px 11px;border-radius:var(--r);background:rgba(255,176,46,.1);border:1px solid rgba(255,176,46,.3);font-size:11px;color:#ffd48a;line-height:1.5}
.okbox{margin:0 14px 12px;padding:9px 11px;border-radius:var(--r);background:rgba(56,209,106,.09);border:1px solid rgba(56,209,106,.3);font-size:11px;color:#9ff0bd;line-height:1.5}
.workbox{margin:0 14px 12px;padding:9px 11px;border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--accent2);font-size:11px;color:var(--accent2);line-height:1.5}
.small.warn{color:#ffb02e}

.preset-list{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:8px;padding:0 6px 12px 10px;
  box-sizing:border-box;
}
.bigbtn{width:100%;padding:11px;border-radius:var(--r);font-size:12px;font-weight:600;margin-bottom:7px;text-align:left;display:flex;align-items:center;gap:9px}
.bigbtn .ico{font-size:16px}
.kf-dot{width:16px;height:16px;flex:0 0 16px;border-radius:3px;background:var(--panel3);border:1px solid var(--border);cursor:pointer;font-size:10px;line-height:14px;text-align:center;padding:0}
.kf-dot.on{background:var(--warm);border-color:var(--warm);color:#fff}

/* ==========================================
   TIDSLINJE
   Signaturen i hela gränssnittet: varje spår har en färgad rygg som säger
   vilken ROLL spåret har (huvud, överlägg, text, ljud). Samma färg går
   igen som en tunn list överst på klippen, så en stapel med sex
   videospår går att läsa på en halv sekund i stället för att man får
   räkna sig nedåt. Färgerna kommer från TRACK_ROLES i tracks.js.
   ========================================== */
.timeline-area{position:relative;height:clamp(180px,36vh,340px);min-height:150px;background:var(--panel);border-top:1px solid var(--border);display:flex;flex-direction:column;flex:0 0 auto;resize:vertical;overflow:hidden}
.timeline-toolbar{display:flex;align-items:center;gap:5px;padding:7px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;flex:0 0 auto;background:linear-gradient(180deg,var(--panel2),var(--panel))}
.timeline-toolbar button{padding:5px 10px}
.zoom-group{display:flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--r);background:#080b11;border:1px solid var(--border)}
.zoom-group input[type=range]{width:110px}
.zoom-label{font-size:11px;color:var(--dim2);font-family:var(--mono);min-width:52px;text-align:center}
.timeline-scroll{flex:1;overflow:auto;position:relative;scroll-behavior:auto;background:#070910}

/* --- Linjal --- */
.tl-ruler{position:sticky;top:0;z-index:30;height:32px;background:rgba(10,13,19,.96);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:col-resize}
.tl-tick{position:absolute;top:22px;bottom:0;width:1px;background:rgba(255,255,255,.09)}
.tl-tick.major{top:9px;background:rgba(255,255,255,.22)}
.tl-tick .lbl{position:absolute;top:-11px;left:5px;font-size:10px;color:var(--dim);font-family:var(--mono);white-space:nowrap;letter-spacing:.02em}
.tl-marker{position:absolute;top:0;width:0;height:32px;z-index:31}
.tl-marker i{position:absolute;top:4px;left:-5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:9px solid var(--warn);cursor:pointer}
.tl-marker i:hover{border-top-color:#ffd074}
.tl-marker span{position:absolute;top:2px;left:8px;font-size:10px;color:var(--warn);white-space:nowrap}

/* --- Spår --- */
.tl-body{position:relative}
.trk{display:flex;border-bottom:1px solid var(--line);position:relative;transition:height .1s cubic-bezier(.2,.7,.3,1)}
.trk.drop{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);transition:background var(--t),box-shadow var(--t)}
.trk.hidden-trk .trk-lane{opacity:.4}
.trk.locked-trk .trk-lane{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px)}
/* Draget känns instant, inte fjädrande — samma princip som .clip.dragging. */
.trk.resizing{transition:none}
.trk.resizing .trk-lane{background:linear-gradient(180deg,rgba(91,108,255,.06),rgba(255,255,255,0))}

/* --- Spårhöjd-handtag --- */
.trk-resize{
  position:absolute;left:0;right:0;bottom:-3px;height:7px;z-index:26;cursor:ns-resize;touch-action:none;
}
.trk-resize::after{
  content:'';position:absolute;left:172px;right:0;top:3px;height:1px;
  background:transparent;transition:background var(--t),height var(--t);
}
.trk-resize:hover::after{background:var(--accent2);height:2px;top:2.5px}
.trk.resizing .trk-resize::after{background:var(--accent2);height:2px;top:2.5px}

.trk-head{
  flex:0 0 172px;width:172px;position:sticky;left:0;z-index:22;
  background:var(--panel2);border-right:1px solid var(--border);
  padding:6px 9px 6px 12px;display:flex;flex-direction:column;gap:5px;justify-content:center;
}
/* Ryggen: 3 px färg i spårets roll, hela huvudets höjd. */
.trk-head::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--trk,var(--accent))}
.trk-head .tn-row{display:flex;align-items:center;gap:7px;min-width:0}
.trk-head .tbadge{
  flex:0 0 auto;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.03em;
  padding:2px 5px;border-radius:5px;color:var(--trk,var(--accent));
  background:color-mix(in srgb,var(--trk,var(--accent)) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--trk,var(--accent)) 42%,transparent);
}
.trk-head .tn{font-size:11px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk-head .tb{display:flex;gap:2px;align-items:center}
.trk-head .tb .tb-sp{flex:1}
.trk-head .tb button{
  padding:2px 4px;font-size:10px;min-width:20px;border-radius:5px;
  background:transparent;border-color:transparent;color:var(--dim2);
}
.trk-head .tb button:hover:not(:disabled){background:var(--panel4);color:var(--text);border-color:var(--border)}
.trk-head .tb button.act{background:var(--panel4);color:var(--warm);border-color:var(--border2)}
.trk-head .tb button.del:hover{background:rgba(244,72,92,.16);color:#ff97a1}

.trk-lane{position:relative;flex:1;background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0))}
.trk-lane.role-overlay{background:linear-gradient(180deg,rgba(53,209,230,.045),rgba(255,255,255,0))}
.trk-lane.role-text{background:linear-gradient(180deg,rgba(245,165,36,.04),rgba(255,255,255,0))}
.trk-lane.role-audio{background:linear-gradient(180deg,rgba(47,196,95,.04),rgba(255,255,255,0))}

/* --- Klipp --- */
.clip{
  position:absolute;top:4px;bottom:4px;border-radius:6px;
  border:1px solid rgba(255,255,255,.1);overflow:hidden;cursor:grab;user-select:none;
  box-shadow:0 2px 8px rgba(0,0,0,.35);touch-action:none;min-width:8px;
  transition:box-shadow var(--t),border-color var(--t),transform var(--t);
}
/* Färglisten överst binder ihop klippet med sitt spårhuvud. */
.clip::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--trk,var(--accent));opacity:.9;z-index:5;pointer-events:none}
.clip.video{background:linear-gradient(180deg,#26314a,#18202f)}
.clip.audio{background:linear-gradient(180deg,#17402f,#102921)}
.clip.text{background:linear-gradient(180deg,#3d3f7d,#2a2c5c)}
.clip.image{background:linear-gradient(180deg,#3f2f56,#2a1f3c)}
.clip.sticker,.clip.shape{background:linear-gradient(180deg,#3a3350,#26213a)}
.clip:hover{border-color:rgba(255,255,255,.22)}
.clip.sel{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2),0 6px 18px rgba(0,0,0,.5);z-index:6;transform:translateY(-1px)}
.clip.dragging.sel{transform:none}   /* draget har redan sin egen lyft-skugga, dubbla inte upp */
.clip.locked{opacity:.5;cursor:not-allowed}
.clip .thumbs{position:absolute;inset:0;display:flex;opacity:.45;pointer-events:none}
.clip .thumbs img{height:100%;flex:1 1 0;min-width:0;object-fit:cover}
.clip .wave{position:absolute;inset:0;opacity:.6;pointer-events:none;width:100%;height:100%}
.clip .cl{
  position:absolute;left:7px;right:7px;top:5px;font-size:10px;font-weight:600;
  letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.85);pointer-events:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:3;
}
.clip .cbadges{position:absolute;left:6px;bottom:4px;display:flex;gap:3px;z-index:3;pointer-events:none}
.clip .cbadge{font-size:10px;padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);font-family:var(--mono)}
.clip .cbadge.cz{background:var(--censor);font-family:var(--sans)}
.clip .cbadge.linked{background:color-mix(in srgb,var(--accent) 55%,rgba(0,0,0,.6))}
.clip .h{position:absolute;top:0;bottom:0;width:11px;cursor:ew-resize;z-index:9;touch-action:none}
.clip .h::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:60%;max-height:20px;border-radius:2px;background:rgba(255,255,255,0);transition:background var(--t)}
.clip:hover .h::after,.clip.sel .h::after{background:rgba(255,255,255,.6)}
.clip .h.l{left:0} .clip .h.r{right:0}
.clip .fadeh{position:absolute;top:3px;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.4);cursor:pointer;z-index:10;touch-action:none}
.clip .kfl{position:absolute;left:0;right:0;bottom:0;height:10px;z-index:4;pointer-events:none}
.clip .kf{position:absolute;bottom:2px;width:6px;height:6px;background:var(--warm);transform:rotate(45deg);margin-left:-3px}
/* Rytm-motorns beat-prickar (icke-destruktiva, se timeline.js) — egen
   färg och lite mindre så de syns som en distinkt "puls" i stället för
   att förväxlas med riktiga nyckelramar. */
.clip .kfl.rhl{bottom:1px}
.clip .kf.rh{background:var(--accent2);width:4px;height:4px;transform:none;border-radius:50%;bottom:1px}
.clip .fadetri{position:absolute;top:0;bottom:0;pointer-events:none;background:rgba(0,0,0,.42)}

/* --- Lasso --- */
/* position:fixed + skärmkoordinater, precis som showCtx() gör för
   kontextmenyn — då slipper vi räkna om mot timeline-scrollen för hand,
   och lassot fungerar likadant oavsett hur långt tidslinjen är scrollad. */
.lasso{
  position:fixed;z-index:45;pointer-events:none;border-radius:2px;
  border:1px solid var(--accent2);background:rgba(91,108,255,.14);
  box-shadow:0 0 0 1px rgba(91,108,255,.25) inset;
}

.playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--warm);z-index:40;pointer-events:none;box-shadow:0 0 8px rgba(255,95,124,.5)}
.playhead i{position:absolute;top:0;left:-7px;width:15px;height:13px;background:var(--warm);border-radius:3px 3px 7px 7px;cursor:ew-resize;pointer-events:auto;touch-action:none}
.snapline{position:absolute;top:0;bottom:0;width:1px;background:var(--ok);z-index:39;pointer-events:none;box-shadow:0 0 6px var(--ok)}

/* --- Zonmarkeringsläge (skyddade zoner, B-Roll-vävaren) --- */
/* Bara KLIPP-redigering (flytta/trimma/spårknappar) stängs av medan
   läget är aktivt — linjal, spår-lane och spelhuvud förblir HELT
   interaktiva, eftersom det numera ÄR mekanismen för att sätta In/Ut-
   punkter (se enterZoneSelectionMode(), timeline.js): användaren
   scrubbar fram till önskad bildruta med BEFINTLIG scrubbning, trycker
   sedan "Sätt In"/"Sätt Ut" i den flytande panelen. */
.tl-zone-mode .clip,
.tl-zone-mode .trk-resize,
.tl-zone-mode .trk-head{pointer-events:none}

.zone-select-layer{position:absolute;inset:0;z-index:38;pointer-events:none}
.zone-select-overlay{position:absolute;top:0;bottom:0;pointer-events:none}
/* Lager 1: zoner som redan fanns INNAN läget öppnades — dämpad,
   streckad referensstil så de aldrig förväxlas med det man faktiskt
   håller på att lägga till nu. */
.zone-select-overlay--existing{
  background:rgba(255,77,94,.12);border-left:1px dashed var(--danger);border-right:1px dashed var(--danger);
}
/* Lager 2: zoner tillagda i DEN HÄR sessionen (via "➕ Lägg till zon")
   — full färg, samma stil som förut var den enda overlayen. */
.zone-select-overlay--session{
  background:rgba(255,77,94,.3);border-left:1px solid var(--danger);border-right:1px solid var(--danger);
}
/* Lager 3: det In/Ut-par som redigeras JUST NU — samma nyans som
   session-zoner men med en extra innerglow så den aktiva zonen ändå
   går att särskilja från redan tillagda. */
.zone-select-overlay--pending{
  background:rgba(255,77,94,.3);border-left:1px solid var(--danger);border-right:1px solid var(--danger);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.zone-select-panel{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:210;
  display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;
  background:rgba(18,22,31,.92);-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
  border:1px solid var(--border2);box-shadow:0 20px 50px rgba(0,0,0,.5);
  font-size:12px;flex-wrap:wrap;justify-content:center;max-width:92vw;animation:tin .18s ease;
}
.zone-select-panel button{border-radius:999px;padding:6px 14px;white-space:nowrap}
.zone-select-times{color:var(--dim);white-space:nowrap}
.zone-select-times b{color:var(--text);font-family:var(--mono);font-weight:600}
.zone-select-count{color:var(--accent2);white-space:nowrap;font-weight:600}

/* ---------- Modal / toast / ctx ---------- */
.modal-back{position:fixed;inset:0;background:rgba(3,4,7,.72);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:backIn .15s ease}
.modal{background:rgba(18,22,31,.85);-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);border:1px solid var(--border2);border-radius:18px;max-width:560px;width:100%;max-height:86vh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:modalIn .16s cubic-bezier(.2,.7,.3,1)}
@keyframes backIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal h3{margin:0;padding:16px 20px;border-bottom:1px solid var(--border);font-size:14px}
.modal .mb{padding:18px 20px}
.modal .mf{padding:14px 20px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
/* ---------- The Weave Studio (B-Roll-modal) ---------- */
/* Egen, mycket bredare modal-variant — den vanliga .modal (max 560px)
   räcker inte till TRE hink-kolumner + en vågforms-canvas i taget.
   Klassen sätts/tas bort på #modal av weave-studio.js (inte av modal()
   själv, som inte vet något om vilket innehåll som just laddats). */
.modal.weave-studio-modal{max-width:min(96vw,1180px);width:100%;max-height:94vh}
.weave-studio{padding:16px 20px 20px}
.weave-studio-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.weave-studio-head h3{padding:0;border:none;font-size:14px}

.weave-studio-canvas-wrap{position:relative;width:100%;height:170px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--panel2);margin-bottom:2px}
.weave-studio-canvas-wrap canvas{display:block;width:100%;height:100%}
/* Spelhuvudet ligger på ett EGET, tunt overlay-lager ovanpå vågform/
   segment/zon-canvasen (#weaveCanvas) — se drawWeavePlayhead() i
   weave-studio.js. Det låter rAF-loopen rita om BARA en enda linje 60
   ggr/s i stället för att rendera om hela vågformen (peaks-loop +
   per-pixel skuggning av huvudklippets täckning) varje bildruta även
   när ingenting annat än spelhuvudet faktiskt rör sig. */
#weavePlayheadCanvas{position:absolute;top:0;left:0;pointer-events:none}
.weave-legend{position:absolute;top:6px;right:8px;display:flex;gap:10px;font-size:11px;color:var(--dim);background:rgba(5,6,10,.55);padding:3px 8px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.weave-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
/* Frekvenslegenden sitter i motsatt hörn mot hinklegenden — de beskriver
   två olika saker (klangfärg respektive hinktillhörighet) och ska inte
   läsas som en enda lista. */
.weave-legend--bands{top:auto;bottom:6px;right:auto;left:8px}
.weave-preview-wrap{position:relative;width:100%;height:140px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#000}
.weave-preview-wrap canvas{display:block;width:100%;height:100%}
.weave-preview-badge{position:absolute;top:6px;left:8px;font-size:11px;color:#fff;background:rgba(5,6,10,.55);padding:2px 8px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}

/* Hopfällbara sektioner i studion — se kommentaren vid wsSection() i
   weave-studio.js för varför kontrollerna grupperas alls. list-style:none
   (+ ::-webkit-details-marker) tar bort webbläsarens egen triangel så vi
   kan rita en egen som roterar, konsekvent i alla webbläsare. */
.ws-sec{border:1px solid var(--border);border-radius:10px;background:var(--panel2);margin:8px 0}
.ws-sec>summary{
  display:flex;align-items:baseline;gap:8px;cursor:pointer;user-select:none;
  padding:9px 12px;border-radius:10px;list-style:none;transition:background var(--t);
}
.ws-sec>summary::-webkit-details-marker{display:none}
.ws-sec>summary:hover{background:var(--panel3)}
.ws-sec>summary:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px}
.ws-sec>summary::before{
  content:'▸';color:var(--dim);font-size:11px;flex:none;
  transition:transform var(--t);display:inline-block;
}
.ws-sec[open]>summary::before{transform:rotate(90deg)}
.ws-sec[open]>summary{border-bottom:1px solid var(--border);border-radius:10px 10px 0 0}
.ws-sec-title{font-size:12px;font-weight:600;letter-spacing:.01em}
.ws-sec-hint{font-size:11px;color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-sec-body{padding:10px 12px 4px}
/* De två matriserna (in-animation, Stem-FX) bär egna .psec-rubriker som
   underavdelningar INUTI en sektion — dämpa deras ram så hierarkin blir
   sektion > underavdelning i stället för två konkurrerande kort. */
.ws-sec-body .psec{border:none;padding:0;margin:0 0 10px;background:none}

.weave-pool-buckets{display:grid;grid-template-columns:200px 1fr;gap:12px;margin:6px 0 4px}
.weave-available{border:1px solid var(--border);border-radius:10px;padding:8px;background:var(--panel2)}
.weave-available h5,.weave-bucket h5{margin:0 0 4px;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.weave-chip-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.weave-buckets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.weave-bucket{border:1px solid var(--border);border-radius:10px;padding:8px;background:var(--panel2);min-width:0}
.weave-bucket-drop{display:flex;flex-direction:column;gap:6px;min-height:64px;border-radius:8px;padding:4px;transition:background var(--t),outline var(--t)}
.weave-bucket-drop.over,.weave-available.over{background:var(--accent-soft);outline:2px dashed var(--accent2)}
.weave-drop-hint{margin:0;padding:10px 4px;text-align:center;border:1px dashed var(--border2);border-radius:6px}

.weave-chip{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--border);border-radius:8px;background:var(--panel3);cursor:grab;user-select:none}
.weave-chip.dragging{opacity:.4}
.weave-chip img{width:32px;height:18px;object-fit:cover;border-radius:3px;flex:none}
.weave-chip-noimg{width:32px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;background:var(--panel4);border-radius:3px;flex:none}
.weave-chip-name{flex:1;min-width:0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weave-chip-weight{width:44px;flex:none}
.weave-chip-remove{flex:none;padding:1px 5px;font-size:11px}

.kbd{display:inline-block;padding:2px 6px;border-radius:5px;background:var(--panel3);border:1px solid var(--border2);font-family:var(--mono);font-size:11px}
.klist{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:12px;align-items:center}

.toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none}
.toast{background:rgba(18,22,31,.85);-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);border:1px solid var(--border2);padding:9px 15px;border-radius:999px;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.45);animation:tin .22s ease}
.toast.ok{border-color:var(--ok);color:#9ff0bd} .toast.err{border-color:var(--danger);color:#ff97a1} .toast.warn{border-color:var(--warn);color:#ffd48a}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}

.ctxmenu{
  position:fixed;z-index:400;background:rgba(18,22,31,.85);-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);border:1px solid var(--border2);border-radius:10px;
  padding:5px;min-width:190px;box-shadow:0 14px 36px rgba(0,0,0,.55);
  transform-origin:top left;animation:ctxIn .13s cubic-bezier(.2,.7,.3,1);
}
/* [hidden] är display:none, så animationen är "pausad" medan menyn är
   dold och spelas om varje gång showCtx() gör den synlig igen — samma
   knep som toast-in-animationen redan använder. */
@keyframes ctxIn{from{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.ctxmenu button{display:block;width:100%;text-align:left;border:none;background:none;border-radius:6px;padding:7px 10px;font-size:12px;transition:background var(--t),transform var(--t)}
.ctxmenu button:hover{background:var(--accent-soft)}
.ctxmenu button:active{transform:scale(.98)}
.ctxmenu hr{border:none;border-top:1px solid var(--border);margin:4px 0}


::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a3346;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#3a4560}

@media (max-width:900px){
  .main-area{flex-direction:column}
  .library,.properties{width:100%;flex-basis:auto;max-height:240px;border:none;border-top:1px solid var(--border)}
  .timeline-area{height:250px}
}

#modalBack[hidden] {
  display: none !important;
}
/* ---------- Censurpanel v2 ---------- */
button.ghost{background:transparent;border-color:var(--border);color:var(--dim)}
button.ghost:hover:not(:disabled){color:var(--text);border-color:var(--border2)}

.cz-modes{display:flex;gap:6px}
.cz-modes button{flex:1;justify-content:center;text-align:center}

.cz-zone{
  display:flex;align-items:center;gap:8px;margin-top:6px;padding:6px 8px;
  background:var(--panel3);border:1px solid var(--border);border-radius:var(--r);
}
.cz-zn{font-weight:600;font-size:11px;white-space:nowrap}
.cz-zone .small{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cz-za{display:flex;gap:4px;flex:0 0 auto}
.cz-za button{padding:4px 7px;font-size:11px}

/* ---------- Bröstkalibrering ---------- */
.cz-ok-tag{color:#9ff0bd;font-weight:400;font-size:11px}

/* ==========================================
   HYPNOS, ÖVERLÄGG & PRESETS
   ========================================== */

/* ---------- Varningsruta (blinkande effekter) ---------- */
.warnbox{
  margin:8px 0 12px;padding:9px 11px;border-radius:var(--r);
  background:rgba(255,176,46,.08);border:1px solid rgba(255,176,46,.35);
}
.warnbox b{color:var(--warn);font-size:12px}
.warnbox p{margin:5px 0 0;color:var(--dim);line-height:1.45}
.warnbox.hot{background:rgba(255,77,94,.09);border-color:rgba(255,77,94,.42)}
.warnbox.hot b{color:var(--danger)}
p.warn,.small.warn{color:var(--warn)}

/* Blinkande effektknappar märks ut redan i listan, så man inte råkar
   aktivera en utan att veta om det. */
.chips button.flashfx{border-color:rgba(255,176,46,.4)}
.chips button.flashfx::after{content:" ⚡";opacity:.65;font-size:10px}
.chips button.flashfx.on{background:rgba(255,176,46,.18);border-color:var(--warn)}
/* Markerar effekter med en egen takt — dessa (och bara dessa) påverkas av
   "🔗 Synka takt mot ljud". Se fxChipButton() i props.js. */
.chips button .fx-syncable{opacity:.55;font-size:10px;margin-right:3px;vertical-align:middle}
.chips button.on .fx-syncable{opacity:.9}

/* ---------- Textarea i egenskapsraderna ---------- */
.row.col{display:block}
.row.col label{display:block;margin-bottom:5px}
.row.col textarea,.prop-body textarea{
  width:100%;background:var(--panel3);border:1px solid var(--border);color:var(--text);
  border-radius:var(--r);padding:7px 9px;font-family:inherit;font-size:12px;
  resize:vertical;line-height:1.4;
}
.row.col textarea:focus,.prop-body textarea:focus{outline:none;border-color:var(--accent)}

/* ---------- Placeringsrutnät (3×3) ---------- */
.spotgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  width:104px;margin:0 0 10px;aspect-ratio:16/9;
}
.spotgrid button{
  padding:0;border-radius:4px;background:var(--panel3);border:1px solid var(--border);
  min-height:0;position:relative;
}
.spotgrid button:hover{background:var(--accent-soft);border-color:var(--accent)}
.spotgrid button::after{
  content:"";position:absolute;inset:30%;border-radius:2px;background:var(--dim2);
}
.spotgrid button:hover::after{background:var(--accent2)}

/* ---------- Presetgrupper (kollapsbara kategorier) ---------- */
.preset-group{
  margin-bottom:4px;
  border-radius:var(--r);
  flex-shrink:0;
  width:100%;
  box-sizing:border-box;
}
.preset-group-header{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; cursor:pointer;
  background:var(--panel2); border:1px solid var(--border);
  border-radius:var(--r); margin-bottom:0;
  transition:background var(--t);
  user-select:none;
  width:100%;
  box-sizing:border-box;
}
.preset-group-header:hover{ background:var(--panel3); }
.preset-group-header h5{
  margin:0; flex:1; font-size:11px; font-weight:600;
  color:var(--text); text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.preset-group-arrow{
  font-size:10px; color:var(--dim); transition:transform var(--t);
  flex:0 0 auto;
}
.preset-group-arrow.collapsed{ transform:rotate(-90deg); }
.preset-group-count{
  flex:0 0 auto; font-size:11px; color:var(--dim2);
  background:var(--panel3); padding:1px 7px; border-radius:var(--pill);
  white-space:nowrap;
}
.preset-group-body{
  padding:8px 4px;
  display:flex; flex-direction:column; gap:8px;
  width:100%;
  box-sizing:border-box;
}
.preset-group-body .preset-card{ margin:0 2px; flex-shrink:0; }

.preset-card{
  display:flex; flex-direction:column; gap:8px;
  background:var(--panel2); border:1px solid var(--border);
  border-radius:var(--r); padding:12px; transition:.14s;
  width:100%; box-sizing:border-box;
}
.preset-card:hover{border-color:var(--accent)}
.preset-card-top{
  display:flex; gap:10px; align-items:flex-start;
}
.preset-icon{font-size:22px;flex:0 0 auto}
.preset-body{flex:1;min-width:0}
.preset-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preset-tagline{margin-top:2px;line-height:1.4;font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.preset-card>button{flex:0 0 auto;white-space:nowrap; width:100%; margin-top:4px;}
.preset-card.flashing{border-color:rgba(255,176,46,.3)}
.tag-flash{color:var(--warn);font-size:11px}
.preset-card button.icon{padding:5px 8px;flex:0 0 auto}
.preset-card button.danger{
  background:transparent;border-color:rgba(255,77,94,.35);color:var(--danger);
}

/* ---------- Drag i tidslinjen ---------- */
/* Klippet följer musen live (se layoutDragged i timeline.js). Lyft det ur
   spåret visuellt så man ser vilket block som faktiskt flyttas. */
.clip.dragging{
  z-index:40;
  cursor:grabbing;
  box-shadow:0 6px 20px rgba(0,0,0,.55);
  outline:1px solid rgba(255,255,255,.35);
  opacity:.94;
  transition:none;             /* ingen eftersläpning mot pekaren */
}
/* Fästlinjen blir tydlig i det ögonblick klippet snäpper fast. */
.snapline.hit{
  box-shadow:0 0 0 1px rgba(124,249,255,.9), 0 0 10px 2px rgba(124,249,255,.55);
}

/* Markerat läge i placeringsrutnätet (＋ Överlägg och Överlägg-fliken). */
.spotgrid button.on{background:var(--accent-soft);border-color:var(--accent)}
.spotgrid button.on::after{background:var(--accent2)}


/* ==========================================
   PROFFSLAGER
   Sista passet: det som skiljer ett verktyg man arbetar i hela dagar från
   en app man provar en gång. Inget av det här syns var för sig — men allt
   ihop är skillnaden.
   ========================================== */

/* --- Sektionsrubriker i egenskapspanelen ---
   Versaler + spärrad text bara här, aldrig på knappar eller värden. */
.psec h4{
  font-size:11px;letter-spacing:.1em;color:var(--dim2);font-weight:600;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
.psec{padding:12px 14px}
.row>label{font-size:11px;color:var(--dim);line-height:1.3}
.row .num{background:#080b11;font-family:var(--mono)}

/* --- Riktig strömbrytare i stället för systemets kryssruta ---
   Ett läge som är PÅ ska gå att se med perifert seende. */
.toggle input[type=checkbox]{
  appearance:none;-webkit-appearance:none;position:relative;
  width:28px;height:16px;flex:0 0 28px;border-radius:var(--pill);
  background:var(--panel4);border:1px solid var(--border2);cursor:pointer;
  transition:background var(--t),border-color var(--t);
}
.toggle input[type=checkbox]::after{
  content:'';position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;
  background:var(--dim);transition:transform var(--t),background var(--t);
}
.toggle input[type=checkbox]:checked{background:var(--accent);border-color:#6f7dff}
.toggle input[type=checkbox]:checked::after{transform:translateX(12px);background:#fff}
.toggle:hover{color:var(--text)}

/* --- Reglage --- */
input[type=range]{-webkit-appearance:none;appearance:none;height:20px;background:none}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--panel4)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;
  background:var(--text);border:1px solid rgba(0,0,0,.5);box-shadow:0 1px 3px rgba(0,0,0,.5);
  transition:background var(--t);
}
input[type=range]:hover::-webkit-slider-thumb{background:#fff}
input[type=range]:active::-webkit-slider-thumb{background:var(--accent2)}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--panel4)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--text)}

/* --- Mediakort --- */
.media-card{border-radius:var(--r);transition:border-color var(--t),transform var(--t)}
.media-card:hover{transform:none;border-color:var(--border2);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.media-card:active{border-color:var(--accent)}
.media-card .mc-meta{letter-spacing:.02em}

/* --- Verktygsfältets avdelare --- */
.vsep{background:var(--border);height:18px;margin:0 5px}

/* --- Modal --- */
.modal{border-radius:14px;box-shadow:var(--shadow)}
.modal h3{font-size:13px;letter-spacing:-.01em}

/* --- Aviseringar --- */
.toast{border-radius:var(--r);font-size:12px;box-shadow:var(--shadow)}

/* --- Rullningslister som inte tar plats i medvetandet --- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#242c3c;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#38425c;background-clip:padding-box}

/* --- Kvalitetsgolv ---
   Tangentbordsfokus ska alltid synas: en videoredigerare styrs med
   kortkommandon, och den som tabbar sig fram måste se var hen är. */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.clip:focus-visible{box-shadow:var(--focus);position:relative;z-index:50}

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

/* Pekskärm: handtagen på klippen är 11 px breda, vilket är för lite för
   ett finger. Vidga dem när det inte finns någon musmarkör. */
@media (pointer:coarse){
  .clip .h{width:18px}
  .clip .fadeh{width:13px;height:13px}
  .trk-head .tb button{min-width:26px;padding:4px 6px}
  .trk-resize{height:14px;bottom:-7px}
}

/* ---------- Tidskod-badge vid drag ---------- */
.drag-badge{
  position:fixed; z-index:500;
  background:rgba(18,22,31,.92); -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
  border:1px solid var(--border2); border-radius:8px;
  padding:5px 10px; font-family:var(--mono); font-size:11px;
  color:var(--text); box-shadow:0 6px 18px rgba(0,0,0,.5);
  pointer-events:none; white-space:nowrap;
  letter-spacing:.02em;
}

/* ---------- Minimap ---------- */
.minimap-bar{
  position:relative; height:28px; flex:0 0 auto;
  background:var(--panel2); border-bottom:1px solid var(--border);
  overflow:hidden; cursor:pointer;
}
.minimap-canvas{
  position:absolute; top:0; left:0;
  width:100%; height:100%; display:block;
}
.minimap-viewport{
  position:absolute; top:0; height:100%;
  background:rgba(91,108,255,.12);
  border:1px solid rgba(91,108,255,.5);
  border-radius:2px;
  pointer-events:none;
  box-sizing:border-box;
  transition:left .08s ease, width .08s ease;
}

/* Klippenergi (motion.js) — märke på biblioteksbilden */
.media-card .estat{position:absolute;top:24px;left:5px;font-size:10px;padding:1px 5px;border-radius:6px;cursor:pointer;background:rgba(0,0,0,.6);color:var(--dim)}
.estat.lo{background:rgba(74,163,255,.85);color:#000} .estat.mid{background:rgba(255,200,61,.9);color:#000}
.estat.hi{background:rgba(255,92,92,.9);color:#000} .estat.manual{background:rgba(190,120,255,.9);color:#000}

/* Compilation (compilation-ui.js) */
.modal.compilation-modal{max-width:min(97vw,1320px);width:100%;max-height:95vh}
.cp-wrap{padding:14px 18px 6px}
.cp-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:980px){.cp-cols{grid-template-columns:minmax(0,1fr)}}
.cp-src{display:flex;gap:8px;align-items:center;padding:3px 0;font-size:12px}
.cp-src-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-filters{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px;align-items:center}
.cp-gridbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:58vh;overflow:auto;padding-right:4px}
.cp-card{position:relative;border:2px solid var(--border);border-radius:8px;overflow:hidden;background:var(--panel2);cursor:pointer}
.cp-card img,.cp-nothumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.cp-nothumb{display:flex;align-items:center;justify-content:center;color:var(--dim)}
.cp-card.keep{border-color:#38d16a}.cp-card.drop{opacity:.35;border-color:#d14b4b}.cp-card.star{box-shadow:0 0 0 2px #ffc83d}.cp-card.sel{outline:2px solid #4aa3ff;outline-offset:1px}
.cp-chips{position:absolute;top:4px;left:4px;display:flex;gap:4px}
.cp-chips span{background:rgba(0,0,0,.72);border-radius:6px;padding:1px 5px;font-size:10px}
.cp-chips .cp-score{background:rgba(74,163,255,.9);color:#000;font-weight:600}
.cp-btns{position:absolute;top:4px;right:4px;display:flex;gap:3px}
.cp-btns button{width:22px;height:22px;padding:0;border-radius:6px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.15);font-size:11px;line-height:1}
.cp-btns button.on{background:#ffc83d;color:#000}
.cp-btns button[data-act=keep].on{background:#38d16a}.cp-btns button[data-act=drop].on{background:#d14b4b;color:#fff}
.cp-name{padding:3px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-layout{position:relative;width:100%;background:#000;border:1px solid var(--border);border-radius:6px;margin-bottom:6px}
.cp-cell{position:absolute;box-sizing:border-box;background:rgba(74,163,255,.28);border:1px solid rgba(74,163,255,.8);display:flex;align-items:center;justify-content:center;font-size:12px}
.cp-lanes{display:flex;flex-direction:column;gap:3px}
.cp-lane{display:flex;gap:6px;align-items:center}.cp-lane>span{width:1em}
.cp-lane-bar{position:relative;flex:1;height:12px;background:rgba(128,128,128,.18);border-radius:3px;overflow:hidden}
.cp-lane-bar>div{position:absolute;top:0;bottom:0;border-right:1px solid rgba(0,0,0,.5);box-sizing:border-box}

.cp-tabs{display:inline-flex;gap:4px;text-transform:none;letter-spacing:0}
.cp-tabs button{padding:3px 10px;border-radius:6px;background:transparent;border:1px solid var(--border);font-size:12px;color:var(--dim)}
.cp-tabs button.active{background:var(--accent,#4a6dff);border-color:transparent;color:#fff}
.cp-strip{display:block;width:100%;height:130px;border:1px solid var(--border);border-radius:6px;margin:8px 0 6px;cursor:crosshair;touch-action:none}
.cp-stripbar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}

.cp-eplayer{position:relative;margin:8px 0 0}
.cp-eplayer video{display:block;width:100%;max-height:46vh;background:#000;border-radius:8px}
.cp-badge{position:absolute;left:10px;top:10px;padding:3px 9px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.04em;pointer-events:none}
.cp-badge.gone{background:rgba(209,75,75,.92);color:#fff}.cp-badge.mark{background:rgba(255,200,61,.95);color:#000}.cp-badge:empty{display:none}
.cp-rates{display:inline-flex;gap:3px}.cp-rates button{padding:2px 9px;border-radius:6px;background:transparent;border:1px solid var(--border);font-size:12px;color:var(--dim)}
.cp-rates button.on{background:var(--accent,#4a6dff);color:#fff;border-color:transparent}
.cp-stripwrap{position:relative}
.cp-hover{position:absolute;bottom:calc(100% + 4px);width:164px;background:#000;border:1px solid var(--border);border-radius:6px;padding:2px;pointer-events:none;z-index:5}
.cp-hover canvas{display:block;width:160px;height:90px;background:#000}.cp-hover span{display:block;text-align:center;font-size:11px;color:#ddd;padding:1px 0}

.cp-off{opacity:.4}
.cp-sections{height:20px;margin:2px 0 6px}
.cp-sections>div{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#111;opacity:.9}

/* ---------- Compilation på pekskärm (telefon) ---------- */
@media (pointer:coarse){
  .modal.compilation-modal button,.modal.compilation-modal select,.modal.compilation-modal input[type=number]{min-height:40px}
  .modal.compilation-modal input[type=checkbox]{width:22px;height:22px;flex:0 0 auto}
  .modal.compilation-modal .cp-src{padding:7px 0;gap:10px}
  .modal.compilation-modal .cp-src button,.modal.compilation-modal #cpClose{min-width:40px}
  .modal.compilation-modal .row{margin:6px 0}
}
@media (max-width:600px){
  .modal.compilation-modal{max-height:100dvh;border-radius:12px}
  .modal.compilation-modal .row{flex-wrap:wrap}
}

/* ---------- Compilation: sidopanel (standard), enkelt/avancerat, liveförhandsvisning ---------- */
#modalBack.cp-dock{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;justify-content:flex-end;align-items:stretch;padding:0;animation:none}
#modalBack.cp-dock .modal.compilation-modal{pointer-events:auto;width:460px;max-width:100vw;height:100vh;max-height:100vh;border-radius:0;border-width:0 0 0 1px;box-shadow:-18px 0 50px rgba(0,0,0,.45);display:flex;flex-direction:column}
#modalBack.cp-dock .cp-wrap{flex:1;min-height:0;overflow-y:auto}
#modalBack.cp-dock .cp-cols{grid-template-columns:minmax(0,1fr)}
/* Ingen sidledsscroll: en 1fr-kolumn blir aldrig smalare än sitt bredaste innehåll (långa filnamn, rullistor), så allt måste få krympa till panelens bredd. */
.compilation-modal .cp-cols>*,.compilation-modal .row>*,.compilation-modal .ctl{min-width:0}
.compilation-modal select,.compilation-modal input:not([type=checkbox]):not([type=radio]){max-width:100%}
#modalBack.cp-dock .cp-review,#modalBack.cp-dock .cp-player,#modalBack.cp-dock .cp-sub{display:none}
#modalBack.cp-dock .modal .mf{flex:0 0 auto;background:rgba(18,22,31,.97);position:sticky;bottom:0}
@media (max-width:600px){#modalBack.cp-dock .modal.compilation-modal{width:100%}}
.cp-head-btns{display:flex;gap:6px;align-items:center}
.cp-help{margin:-2px 0 8px;line-height:1.4}
#cpAdv{margin-top:10px;border-top:1px solid var(--border);padding-top:6px}
#cpAdv>summary{cursor:pointer;font-size:12px;color:var(--dim);padding:6px 0;list-style:none}
#cpAdv>summary::before{content:'▸ ';color:var(--dim2)}
#cpAdv[open]>summary::before{content:'▾ '}
#cpAdv h5{margin:12px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim2);font-weight:600}
.cp-tempo{display:flex;align-items:center;gap:8px}
.cp-tempo input[type=range]{flex:1;min-width:80px}
.cp-minis{display:flex;flex-wrap:wrap;gap:8px}
.cp-mini-fig{margin:0;text-align:center}
.cp-mini-fig figcaption{font-size:11px;color:var(--dim);margin-top:2px}
svg.cp-mini{display:block;border-radius:3px}
.cp-result{padding:8px 10px;margin-bottom:8px;border:1px solid rgba(95,214,154,.4);background:rgba(95,214,154,.08);border-radius:var(--r);font-size:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (pointer:coarse){#cpAdv>summary{padding:12px 0}.cp-tempo input[type=range]{min-height:32px}}

/* ---------- Sidhuvud: Skapa-menyn ---------- */
.hmenu{position:relative}
#createBtn .caret{font-size:10px;opacity:.7;margin-left:2px}
#createBtn.has-on{position:relative}
#createBtn.has-on::after{content:'';position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--accent2);box-shadow:0 0 6px var(--accent2)}
.hmenu-list{position:fixed;z-index:400;min-width:300px;max-width:min(360px,calc(100vw - 16px));padding:6px;border-radius:12px;
  background:rgba(18,22,31,.98);border:1px solid var(--border2);box-shadow:0 18px 50px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px}
.hmenu-list[hidden]{display:none}
.hmenu-list button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:9px 11px;border:none;background:transparent;border-radius:8px;white-space:normal}
.hmenu-list button b{font-size:13px;font-weight:600;color:var(--text)}
.hmenu-list button span{font-size:12px;color:var(--dim);line-height:1.35}
.hmenu-list button:hover,.hmenu-list button:focus-visible{background:var(--accent-soft)}
.hmenu-list button.on b::after{content:' · på';color:var(--accent2);font-weight:500}
.hmenu-list kbd{font-family:var(--mono);font-size:11px;padding:0 4px;border:1px solid var(--border2);border-radius:4px;color:var(--dim2)}
.vmenu{min-width:260px;gap:4px;padding:10px 12px}
.vmenu .toggle{font-size:12px;color:var(--text);padding:6px 0;white-space:normal}
.vmenu-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;padding:6px 0;border-top:1px solid var(--line)}
#viewBtn .caret{font-size:10px;opacity:.7;margin-left:2px}
/* Dropzonen blir en tunn rad när det finns media (＋ Importera ovanför gör samma sak); hela ytan går att klicka. */
.dropzone{cursor:pointer}
#ltMedia:has(.media-card) .dropzone{flex-direction:row;justify-content:center;padding:8px 12px;gap:8px;font-size:12px}
#ltMedia:has(.media-card) .dropzone .dz-icon{font-size:13px}
#dzBtn{display:none}
/* Telefon/smal skärm: sidhuvudet scrollar fortfarande i sidled, men Exportera ligger fast vid högerkanten (det enda alla projekt slutar med),
   och det som kräver tangentbord (⌘K, kortkommandon) och historiktexten döljs. */
@media (max-width:900px){
  #appHeader{padding-right:104px}
  #exportBtn{position:fixed;top:9px;right:10px;z-index:60;box-shadow:-14px 0 16px 4px var(--panel,#0b0d12),14px 0 0 10px var(--panel,#0b0d12)}
  /* Inget markerat: inspektörens tomma ruta tog 240 px av telefonskärmen från förhandsvisningen. */
  .properties:has(#propTabs[hidden]){display:none}
  .library{max-height:200px}
  #cmdpBtn,#helpBtn,#histLabel{display:none}
  .proj-name{width:118px}
}

/* Saknade mediefiler (medialink.js): rutan ovanför mediakorten */
.media-missing{margin:0 10px 10px;padding:10px;border:1px solid var(--border2);border-radius:var(--r2);background:var(--accent-soft);font-size:12px;display:flex;flex-direction:column;gap:7px}
.media-missing[hidden]{display:none}
.media-missing .mm-list{display:flex;flex-direction:column;gap:2px;color:var(--dim)}
.media-missing .mm-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-missing .mm-actions{display:flex;flex-wrap:wrap;gap:6px}

/* --- Inspektören: fyra grupper + den öppna gruppens flikar (propgroups.js) --- */
.prop-tabs{flex-direction:column;flex-wrap:nowrap;gap:6px;padding:8px}
.prop-groups{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.prop-groups button{padding:7px 6px;font-size:12px;position:relative}
.prop-subtabs{display:flex;gap:2px;padding:2px;background:var(--panel2);border-radius:var(--r)}
.prop-subtabs[hidden]{display:none}
.prop-subtabs button{flex:1;padding:5px 6px;font-size:11px;border-color:transparent;background:none;color:var(--dim);position:relative}
.prop-subtabs button:hover{color:var(--text)}
.prop-subtabs button.active{background:var(--accent-soft);border-color:transparent;color:var(--accent2);font-weight:600}
/* Prick = något är inställt i fliken (effekter på, censur på, nyckelramar …) */
.tab-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent2);margin-left:5px;vertical-align:middle}

/* Hopfällbara avsnitt: klick på rubriken. Bara i inspektören — .psec används även i Musik och Weave Studio. */
#propBody .psec.foldable>h4{cursor:pointer;user-select:none;justify-content:flex-start;gap:6px}
#propBody .psec.foldable>h4::before{content:'▾';font-size:11px;width:10px;flex:none;color:var(--dim2);transition:transform .12s}
#propBody .psec.foldable>h4>:last-child:not(:only-child){margin-left:auto}
#propBody .psec.foldable>h4:hover{color:var(--text)}
#propBody .psec.foldable>h4:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
#propBody .psec.collapsed>h4{margin-bottom:0;padding-bottom:0;border-bottom:none}
#propBody .psec.collapsed>h4::before{transform:rotate(-90deg)}
#propBody .psec.collapsed>:not(h4){display:none}