/* ==========================================
   PREMIUM.CSS — förfiningslager

   Laddas EFTER style.css och rör aldrig dess struktur (bredder, flex,
   grid). Det är ett medvetet val: style.css bär appens identitet — fem
   ytnivåer, tabulära siffror, rollfärgade spår, medvetet kantiga radier
   — och den identiteten är redan genomtänkt. Att skriva om den vore att
   byta ut något som fungerar mot något nytt, inte att göra det bättre.

   Den här filen gör tre saker i stället:

     1. STYR DET NYA. Kommandopaletten och solo-knappen finns inte i
        style.css alls.
     2. TÄPPER TILL KVALITETSGOLVET. Rullningslister, respekt för
        prefers-reduced-motion, tydligare fokusmarkering, riktiga
        inaktiverade tillstånd. Det är sådant som ingen lägger märke
        till när det finns, men som alltid känns billigt när det saknas.
     3. LÄGGER TILL DJUP DÄR HIERARKIN ÄR OTYDLIG. Enstaka skuggor och
        kantljus på de ytor som faktiskt ligger ovanpå varandra — inte
        överallt.

   Vill man ångra allt räcker det att ta bort <link>-raden i index.html.
   ========================================== */

:root{
  /* Skuggskala i tre steg i stället för style.css enda --shadow.
     En panel, en meny och en modal ligger på tre olika höjder; att ge
     dem samma skugga gör att de ser ut att sväva lika högt, vilket är
     precis det som får ett gränssnitt att kännas platt trots att det
     har djup. */
  --lift-1:0 1px 2px rgba(0,0,0,.30);
  --lift-2:0 4px 14px rgba(0,0,0,.38), 0 1px 2px rgba(0,0,0,.30);
  --lift-3:0 18px 44px rgba(0,0,0,.52), 0 2px 6px rgba(0,0,0,.34);

  /* Ett hårfint ljus längs ovankanten. Mörka gränssnitt tappar annars
     kanten mot bakgrunden helt, och paneler flyter ihop till en enda
     grå massa. */
  --edge:inset 0 1px 0 rgba(255,255,255,.045);

  /* Två tempon i stället för style.css enda --t. Direkt återkoppling på
     något man just klickade ska vara nästan omedelbar; något som glider
     in av sig självt får ta lite längre tid. */
  --t-fast:.10s cubic-bezier(.2,.7,.3,1);
  --t-slow:.22s cubic-bezier(.2,.7,.3,1);
}

/* ==========================================
   RULLNINGSLISTER

   Standardlisten i Chrome på mörk bakgrund är en ljus, bred stapel som
   drar till sig blicken mer än innehållet den hör till. I ett verktyg
   med fyra samtidigt rullningsbara paneler blir det fyra ljusa streck
   som konkurrerar med tidslinjen om uppmärksamheten.
   ========================================== */
*{scrollbar-width:thin;scrollbar-color:var(--panel4) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--panel4);
  border-radius:99px;
  /* Genomskinlig ram som beskärs bort ger en smalare synlig list utan
     att träffytan krymper — den är fortfarande 10 px att sikta på. */
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--border2);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ==========================================
   FOKUS

   style.css har redan en fokusring. Den här regeln gör bara att den
   syns ovanpå intilliggande element i täta verktygsrader, där ringen
   annars klipps av grannknappen.
   ========================================== */
:focus-visible{position:relative;z-index:5}

/* ==========================================
   KNAPPAR

   Två ändringar, båda om tydlighet snarare än utseende:

   · Inaktiverade knappar hade opacity:.3, vilket gör TEXTEN oläslig
     samtidigt som knappen fortfarande ser tryckbar ut. Nu dämpas
     färgen i stället för genomskinligheten, och markören säger
     tydligt att det inte går.
   · Primärknappen fick en skugga i sin egen accentfärg. Den lyfter
     den från raden av sekundärknappar utan att bli större.
   ========================================== */
button:disabled{
  opacity:1;
  background:var(--panel2);
  border-color:var(--border);
  color:var(--dim2);
  box-shadow:none;
  cursor:not-allowed;
}
button.primary{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 10px rgba(91,108,255,.30);
}
button.primary:active:not(:disabled){box-shadow:inset 0 1px 3px rgba(0,0,0,.30)}
button:active:not(:disabled){transition-duration:0s}   /* nedtryckning ska aldrig kännas fördröjd */

/* ==========================================
   PANELER OCH RUBRIKRAD
   ========================================== */
#appHeader{box-shadow:var(--edge), 0 1px 0 rgba(0,0,0,.5)}
.library,.properties{box-shadow:var(--edge)}
.modal{box-shadow:var(--lift-3)}
.ctxmenu{box-shadow:var(--lift-2)}
.toast{box-shadow:var(--lift-2)}

/* Mediakortet lyfter redan 1 px vid hover; skuggan gör att lyftet
   läses som djup i stället för som ett hopp. */
.media-card{box-shadow:var(--lift-1);transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.media-card:hover{box-shadow:var(--lift-2)}

/* ==========================================
   SPÅRHUVUD — SOLO

   Solo-knappen är den enda i raden som bär en BOKSTAV i stället för en
   symbol, så den får en egen, smalare form. Aktiv solo lyser i
   accentfärgen — inte i --warm som mute/dölj/lås använder, eftersom
   solo inte är en varning utan ett läge man aktivt valt.
   ========================================== */
.trk-head .tb button.solo{
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.04em;
  min-width:22px;
}
.trk-head .tb button.solo.act{
  background:var(--accent);
  border-color:#6f7dff;
  color:#fff;
  box-shadow:0 0 10px rgba(91,108,255,.45);
}
.trk-head .tb button.solo.act:hover:not(:disabled){background:var(--accent2);color:#fff}

/* Spåret som ÄR soloat får en tydlig kant i sin egen rollfärg, så att
   man ser vilket det är utan att läsa knapparna. */
.trk.solo-trk .trk-head{box-shadow:inset 0 0 0 1px var(--trk,var(--accent))}

/* Spår som dämpats av NÅGON ANNANS solo. Skiljer sig medvetet från
   .hidden-trk (som är ett val användaren gjort på just det spåret):
   här är orsaken ett annat spår, så bandet i kanten pekar tillbaka mot
   var man ska leta. */
.trk.solo-dimmed .trk-lane{opacity:.28;filter:saturate(.4)}
.trk.solo-dimmed .trk-head{opacity:.55}
.trk.solo-dimmed .trk-head::before{background:repeating-linear-gradient(
  180deg, var(--trk,var(--accent)) 0 3px, transparent 3px 6px)}

/* ==========================================
   KOMMANDOPALETT

   Formspråket är lånat rakt av från .modal (samma blur, samma
   kantfärg, samma radie) — paletten ska kännas som samma app, inte som
   en påklistrad komponent. Skillnaden är att den sitter i övre
   tredjedelen i stället för centrerat: man skriver medan man läser
   listan under, och en centrerad ruta hade lagt listan i underkant av
   synfältet.
   ========================================== */
.cmdp-back{
  position:fixed;inset:0;z-index:400;
  background:rgba(3,4,7,.62);
  -webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%);
  display:flex;align-items:flex-start;justify-content:center;
  padding:12vh 20px 20px;
  animation:cmdpBack .12s ease;
}
.cmdp-back[hidden]{display:none}
@keyframes cmdpBack{from{opacity:0}to{opacity:1}}

.cmdp{
  width:100%;max-width:560px;
  background:rgba(18,22,31,.90);
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  border:1px solid var(--border2);
  border-radius:16px;
  box-shadow:var(--lift-3);
  overflow:hidden;
  display:flex;flex-direction:column;
  max-height:min(560px,72vh);
  animation:cmdpIn .16s cubic-bezier(.2,.7,.3,1);
}
@keyframes cmdpIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}

.cmdp-input-row{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.cmdp-icon{color:var(--accent2);font-size:15px;flex:0 0 auto;opacity:.9}
.cmdp-input{
  flex:1;min-width:0;
  background:transparent;border:none;outline:none;
  color:var(--text);font-family:inherit;font-size:15px;
  letter-spacing:-.01em;
}
.cmdp-input::placeholder{color:var(--dim2)}
/* Fokusringen hör hemma runt HELA panelen, inte runt ett osynligt
   fält mitt i den. */
.cmdp-input:focus-visible{box-shadow:none}
.cmdp-esc{
  flex:0 0 auto;padding:2px 7px;border-radius:5px;
  background:var(--panel3);border:1px solid var(--border2);
  font-family:var(--mono);font-size:11px;color:var(--dim);
}

.cmdp-list{overflow-y:auto;padding:6px;flex:1;min-height:0}

.cmdp-cat{
  padding:10px 10px 5px;
  font-size:11px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--dim2);font-weight:600;
}
.cmdp-cat:first-child{padding-top:4px}

.cmdp-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;
  cursor:pointer;
  /* Ingen övergång på markeringen: den flyttas med piltangenterna, och
     en intoning gör att markören verkar släpa efter fingret. */
}
.cmdp-item.sel{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.cmdp-label{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdp-item.sel .cmdp-label{color:var(--text)}
.cmdp-hint{font-size:11px;color:var(--dim2);white-space:nowrap}
.cmdp-kbd{
  flex:0 0 auto;padding:2px 6px;border-radius:5px;
  background:var(--panel3);border:1px solid var(--border2);
  font-family:var(--mono);font-size:11px;color:var(--dim);
}
.cmdp-item.sel .cmdp-kbd{border-color:var(--accent);color:var(--accent2)}

/* Tomt resultat är en anvisning, inte en ursäkt: den visar VAD som inte
   matchade så att man ser sitt eget stavfel. */
.cmdp-empty{padding:28px 16px;text-align:center;color:var(--dim2);font-size:12px;line-height:1.6}
.cmdp-empty b{color:var(--dim);font-weight:600}

.cmdp-foot{
  display:flex;gap:16px;align-items:center;
  padding:9px 16px;border-top:1px solid var(--border);
  font-size:11px;color:var(--dim2);
  background:rgba(0,0,0,.18);
}
.cmdp-foot kbd{
  display:inline-block;padding:1px 5px;margin-right:3px;border-radius:4px;
  background:var(--panel3);border:1px solid var(--border);
  font-family:var(--mono);font-size:11px;
}

/* ==========================================
   RÖRELSE

   Hela filen (och style.css) stängs av här för den som bett systemet om
   mindre rörelse. Det är inte en artighet: blinkande och glidande
   gränssnitt utlöser illamående vid vestibulära besvär, och appen tar
   redan fotosensitiv epilepsi på allvar via blixtskyddet. Samma
   omsorg bör gälla gränssnittet, inte bara videon som exporteras.

   Tillstånd (fokus, markering, hover) behålls förstås — det är BARA
   själva förflyttningen som tas bort.
   ========================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .media-card:hover{transform:none}
  .ctxmenu button:active{transform:none}
}

/* ==========================================
   SMALA SKÄRMAR

   Verktyget är byggt för en stor skärm och ska vara det. Men paletten
   är det enda i appen som är meningsfullt på en telefon (den ger
   åtkomst till allt utan att sidopanelerna får plats), så den får en
   egen anpassning i stället för att svämma över kanten.
   ========================================== */
@media (max-width: 640px){
  .cmdp-back{padding:8vh 12px 12px}
  .cmdp{max-height:80vh}
  .cmdp-foot{display:none}          /* genvägsraden hjälper inte utan tangentbord */
  .cmdp-kbd{display:none}
}

/* ==========================================
   ARBETSOMRÅDE (in-/utpunkt och loop)

   Området ska läsas i EN blick, från vilken del av gränssnittet man än
   tittar: ett band i tidslinjen, ett märke i visarens rad, och
   nedtoning av allt som ligger utanför. Tre uttryck för samma sak, med
   samma färg — accentfärgen, eftersom området är ett val användaren
   gjort, inte en varning.
   ========================================== */

/* --- Bandet i tidslinjen --- */
.tl-range{
  position:absolute;top:0;height:26px;
  background:linear-gradient(180deg,rgba(91,108,255,.30),rgba(91,108,255,.10));
  border-left:2px solid var(--accent2);
  border-right:2px solid var(--accent2);
  border-radius:3px;
  pointer-events:none;
  z-index:6;
}
/* Loopen är ett LÄGE, inte ett andra område — därför en textur på samma
   band i stället för en egen färg. Diagonalerna säger "det här upprepas"
   utan att införa ännu en färg att lära sig. */
.tl-range.looping{
  background:linear-gradient(180deg,rgba(91,108,255,.34),rgba(91,108,255,.12)),
             repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 5px,transparent 5px 10px);
}
/* Handtagen: klamrar som pekar inåt, så att man ser vilken kant som är
   vilken även när området är för smalt för att läsa. */
.tl-range i{
  position:absolute;top:0;width:2px;height:26px;
  background:var(--accent2);
  box-shadow:0 0 8px rgba(142,155,255,.6);
}
.tl-range i::after{
  content:'';position:absolute;top:0;width:6px;height:7px;
  background:var(--accent2);
}
.tl-range-in{left:-2px}
.tl-range-in::after{left:0;border-radius:0 0 3px 0}
.tl-range-out{right:-2px}
.tl-range-out::after{right:0;border-radius:0 0 0 3px}

/* --- Allt utanför området --- */
.tl-outside{
  position:absolute;top:0;bottom:0;
  background:rgba(3,4,7,.55);
  pointer-events:none;
  z-index:5;
}

/* --- Märket i visarens rad --- */
.range-badge{
  padding:4px 10px;border-radius:var(--pill);
  background:var(--accent-soft);border:1px solid var(--accent);
  color:var(--accent2);font-family:var(--mono);font-size:11px;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.range-badge:hover{background:rgba(91,108,255,.24);border-color:var(--accent2)}
/* Märket ÄR knappen som rensar området, så den affordansen måste synas.
   Krysset dyker upp vid hover i stället för att alltid ta plats. */
.range-badge::after{content:'';margin-left:0;opacity:0;transition:opacity var(--t-fast),margin-left var(--t-fast)}
.range-badge:hover::after{content:'✕';margin-left:7px;opacity:.75}
.range-badge[hidden]{display:none}

/* --- Knapparna --- */
.range-btn{font-family:var(--mono);font-weight:700;font-size:13px;line-height:1}
#loopBtn.on,.range-btn.on{
  background:var(--accent);border-color:#6f7dff;color:#fff;
  box-shadow:0 0 10px rgba(91,108,255,.45);
}

/* ==========================================
   ÖVRIGT SOM TILLKOMMIT

   .small.ok fanns inte — bara .small.warn. En panel som kan säga att
   något är fel men aldrig att det är rätt lämnar användaren i tvivel
   om den ens läste inställningen.
   ========================================== */
p.ok,.small.ok{color:#9ff0bd}

/* Ett litet märke i spårnamnet när spåret duckas automatiskt. Utan det
   är duckningen helt osynlig i tidslinjen — man hör att musiken sjunker
   men ser ingen orsak, och letar i fel panel. */
.trk-head .tflag{
  flex:0 0 auto;font-size:10px;opacity:.75;
  filter:drop-shadow(0 0 4px var(--accent));
}

/* ==========================================
   KLIPPMÄRKNING

   Ett band längs överkanten i stället för färgad bakgrund: bakgrunden
   bär miniatyrer och vågform, alltså det som gör klippet igenkännbart.
   Bandet kostar fyra pixlar och syns ändå när man sveper med blicken
   över hundra klipp — vilket är exakt vad märkningen finns för.
   ========================================== */
.clip .ctag{
  position:absolute;left:0;right:0;top:0;height:4px;
  border-radius:var(--r) var(--r) 0 0;
  pointer-events:none;
  z-index:4;
}
/* Ett svagt sken i samma färg nedanför bandet, så märkningen syns även
   när klippet är för smalt för att bandet ska läsas som en färg. */
.clip.tagged::after{
  content:'';position:absolute;inset:0;border-radius:var(--r);
  box-shadow:inset 0 6px 10px -6px currentColor;
  pointer-events:none;
}

/* Färgprick i kontextmenyn. */
.ctxmenu button.has-swatch{display:flex;align-items:center;gap:8px}
.ctx-swatch{
  flex:0 0 auto;width:9px;height:9px;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

/* ==========================================
   MÄRKNINGSPRICKAR I EGENSKAPSPANELEN

   Alla färger synliga samtidigt, inte gömda i en rullgardin: det är så
   man lär sig vilken siffertangent som hör till vilken färg utan att
   någonsin läsa en hjälptext.
   ========================================== */
.tagdots{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:9px}
.tagdot{
  width:22px;height:22px;padding:0;flex:0 0 auto;
  border-radius:7px;
  background:var(--tc,var(--panel3));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.tagdot:hover:not(:disabled){transform:translateY(-1px)}
/* Vald färg får en ring i BAKGRUNDSFÄRGEN med en yttre kant i sin egen
   färg. En ljus ring hade suddat ut skillnaden mellan de ljusare
   färgerna, som är precis de som är svårast att skilja åt. */
.tagdot.on{
  box-shadow:inset 0 0 0 2px var(--panel), 0 0 0 2px var(--tc,var(--border2)),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.tagdot.clear{
  background:var(--panel3);color:var(--dim);
  font-size:11px;line-height:1;
}
.tagdot.clear.on{box-shadow:inset 0 0 0 1px var(--border2), 0 0 0 2px var(--border2)}

/* ==========================================
   LÅTSTRUKTUR-REMSAN

   Segmenten färgas efter samma logik som SECTION_STYLES i
   songstructure.js beskriver — mörkast och lugnast i intro/outro,
   hetast i droppen — så att FÄRGEN i sig läser som "hur intensivt blir
   det här". Ingen legend behövs; man ser direkt var det händer mest.
   ========================================== */
.structstrip{
  display:flex;height:26px;border-radius:8px;overflow:hidden;
  position:relative;
  box-shadow:inset 0 0 0 1px var(--border2);
}
.structseg{
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding:0 4px;
  border-right:1px solid rgba(0,0,0,.35);
}
.structseg:last-child{border-right:none}
.struct-intro,.struct-outro{ background:#2a3142 }
.struct-buildup{             background:#3a4a6b }
.struct-verse{               background:#3f5c78 }
.struct-breakdown{           background:#3a4058 }
.struct-drop{                background:linear-gradient(135deg,#ff2d5f,#ff8a2d) }
.struct-full{                background:#3a4a6b }

/* Droppmarkörerna sitter OVANPÅ remsan som små trianglar — samma
   visuella språk som markörflaggorna i tidslinjen, så kopplingen till
   "det här blir en markör" känns igen. */
.structpeak{
  position:absolute;top:-6px;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid #ffd23f;
  transform:translateX(-50%);
  filter:drop-shadow(0 0 3px rgba(255,210,63,.7));
}

/* ==========================================
   FÄRGSKOPOR (scopes.js / scopes-ui.js)

   En glaspanel uppe till höger i förhandsvisningen. Samma formspråk
   som kommandopaletten (blur, kantfärg, lyft) — den ligger OVANPÅ
   bilden och ska kännas som ett instrument, inte som en del av den.
   ========================================== */
.scope-panel{
  position:absolute;top:22px;right:22px;z-index:3;
  width:min(340px,42%);
  background:rgba(10,13,19,.82);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--border2);border-radius:12px;
  box-shadow:var(--lift-2);
  padding:8px;display:flex;flex-direction:column;gap:6px;
  animation:cmdpIn .16s cubic-bezier(.2,.7,.3,1);
}
.scope-panel[hidden]{display:none}
.scope-head{display:flex;align-items:center;gap:6px}
.scope-modes{display:flex;gap:3px;flex:1;min-width:0}
.scope-modes button{font-size:11px;padding:4px 7px;border-radius:6px;background:transparent;border-color:transparent;color:var(--dim)}
.scope-modes button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent2);font-weight:600}
.scope-close{font-size:11px;padding:3px 7px;background:transparent;border-color:transparent;color:var(--dim)}
/* style.css ger ALLA canvasar i .canvas-wrap position:absolute + max-
   mått (för staget/överlägget). Skopets canvas ligger i samma wrap men
   ska flöda i panelen — därför den mer specifika selektorn här. */
.canvas-wrap .scope-canvas{position:static;max-width:none;max-height:none;width:100%;height:auto;aspect-ratio:16/9;display:block;border-radius:8px;background:#07090d}
.scope-verdict{font-size:11px;color:var(--dim);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.scope-verdict[data-level=warn]{color:var(--warn)}
.scope-verdict[data-level=err]{color:var(--danger)}
#scopesBtn.on{background:var(--accent);border-color:#6f7dff;color:#fff}
.canvas-wrap:fullscreen .scope-panel,.canvas-wrap:-webkit-full-screen .scope-panel{display:none}

/* ==========================================
   JUSTERINGSLAGER (adjust.js)

   Diagonalt randigt, som i Premiere/Resolve — det signalerar "det här
   klippet ÄR ingen bild, det gör något med bilderna under". Bärnstens-
   ton så det inte förväxlas med text (lila) eller video (blå).
   ========================================== */
.clip.adjust{background:repeating-linear-gradient(135deg,#3d3016 0 8px,#2a2210 8px 16px)}
.clip.adjust .cl{font-style:italic}

/* ==========================================
   SHOT MATCH (shotmatch.js) — referensraden i Färg-fliken
   ========================================== */
.shotmatch-ref{font-size:11px;color:var(--accent2);font-family:var(--mono);margin:0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shotmatch-ref.none{color:var(--dim2);font-style:italic;font-family:var(--sans)}

/* ==========================================
   TRANSBÅGEN (trance.js / trance-ui.js)

   Kurveditorn i en bredare modal. Lila är bågens egen färg — den ska
   varken förväxlas med spårfärgerna eller med accentblått, eftersom
   den ligger OVANPÅ hela projektet, inte i ett spår.
   ========================================== */
.modal.trance-modal{max-width:min(94vw,880px)}
.trance-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.trance-top .toggle select{width:auto;padding:3px 6px;margin-left:4px}
.trance-readout{font-family:var(--mono);font-size:11px;color:#c484ff;white-space:nowrap}
.trance-canvas{width:100%;height:240px;display:block;border-radius:10px;background:#07090d;border:1px solid var(--border);cursor:crosshair;touch-action:none;user-select:none}
#tranceBtn.on{background:rgba(196,132,255,.16);border-color:#c484ff;color:#e2c6ff}
.trance-fxpick{max-height:220px;overflow-y:auto;padding:8px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.18);margin-bottom:8px}
.trance-fxpick[hidden]{display:none}
.ws-trance-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ws-trance-row .chips{flex:1}

/* ==========================================
   INDUKTIONSFASER (induction.js / trance-ui.js)

   Faserna är den diskreta axeln ovanpå bågen. Varje fastyp har sin
   egen färg (PHASE_COLORS i induction.js) — samma färg i listan, i
   ord-editorn och i kurveditorns band, så de tre alltid går att
   koppla ihop med blicken.
   ========================================== */
.trance-phases{display:flex;flex-direction:column;gap:4px;margin-bottom:2px}
.trance-phase{display:flex;align-items:center;gap:8px}
.trance-phase select{flex:1;min-width:0}
.trance-phase-dot{width:8px;height:8px;border-radius:50%;background:var(--pc,var(--accent));flex:0 0 auto;box-shadow:0 0 6px var(--pc,var(--accent))}
.trance-phase-time{font-family:var(--mono);font-size:11px;color:var(--dim2);white-space:nowrap;min-width:84px;text-align:right}
.trance-wordgrid{display:flex;flex-direction:column;gap:8px}
.trance-words{border-left:2px solid var(--pc,var(--accent));padding-left:8px;display:flex;flex-direction:column;gap:4px}
.trance-words-head{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.trance-words textarea{resize:vertical;min-height:38px;font-family:inherit}

/* ==========================================
   FREKVENSBÄDDEN (sessionaudio.js)

   Bandremsan visar hur stor del av sessionen som ligger i varje
   hjärnvågsband — samma information som texten under, fast som yta.
   ========================================== */
.bed-strip{display:flex;height:20px;border-radius:6px;overflow:hidden;border:1px solid var(--border);margin-bottom:2px}
.bed-seg{background:var(--bc,var(--accent));display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:rgba(0,0,0,.65);white-space:nowrap;overflow:hidden;min-width:0}

/* ===== Frasrutnätet (phrase.js) =====
   Fras-ettorna är det man klipper efter och får en tydlig linje med
   etikett; taktettor och slag är bara en viskning. */
.tl-grid{position:absolute;top:0;bottom:0;right:0;pointer-events:none;z-index:4}
.tl-grid i{position:absolute;top:0;bottom:0;width:1px}
.tl-grid i.beat{background:rgba(255,255,255,.035)}
.tl-grid i.bar{background:rgba(255,255,255,.08)}
.tl-grid i.phrase{background:rgba(255,196,92,.38)}
.tl-grid i.phrase::before{content:attr(data-n);position:absolute;top:1px;left:3px;font:600 8.5px/1 var(--mono);color:rgba(255,196,92,.85);letter-spacing:.04em}
.phrase-pos{color:rgba(255,196,92,.9);font-family:var(--mono);white-space:nowrap;margin-left:6px}
/* Ackordnamn (harmony.js): dur ljust, moll kallt blått — samma känsla
   som den harmoniska färgen ger bilden. */
.tl-grid b.chord{position:absolute;top:12px;padding:0 3px;font:600 9px/13px var(--mono);color:rgba(255,226,170,.9);background:rgba(10,13,19,.55);border-left:1px solid rgba(255,226,170,.6);border-radius:0 3px 3px 0;white-space:nowrap}
.tl-grid b.chord.min{color:rgba(160,200,255,.92);border-left-color:rgba(160,200,255,.6)}
.compare-split{width:90px;accent-color:#fff}

/* ==========================================
   TEXT HÅLLER SIG I SIN RUTA

   Uppmätt i 1180 px bredd (sidopaneler på 240 och 280 px): knappar,
   rad-etiketter och effektbrickor stack ut ur sina rutor på ett
   tjugotal ställen. Tre orsaker, tre regler:

   · Alla knappar hade white-space:nowrap. Rätt i verktygsrader, fel i
     paneler och dialoger där knapptexten är en hel mening.
   · .grid2/.grid3 hade kolumnerna 1fr, som aldrig blir smalare än
     innehållet. minmax(0,1fr) låter dem krympa.
   · Barn i en flexrad krymper inte under sin innehållsbredd utan
     min-width:0.
   ========================================== */
.prop-body button,.lib-pane button,.modal button,.ai-chips button,.chat-log button,.hmenu-list button,.media-missing button{
  white-space:normal;overflow-wrap:anywhere;max-width:100%;line-height:1.3;
}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row>.ctl>*{min-width:0}
.row>.ctl>span,.row>.ctl>label{flex:1 1 auto;overflow-wrap:anywhere}
.row>label{overflow-wrap:break-word;hyphens:auto}
.row>.ctl>select,.prop-body select,.lib-pane select,.modal select{min-width:0;max-width:100%;text-overflow:ellipsis}
.psec p,.psec h4,.small,.empty,.msg,.modal .mb,.klist>span,.toast{overflow-wrap:anywhere}
.psec h4{gap:8px}
.psec h4>.small{text-align:right}
.chips.segchips{align-items:flex-start}
.chips.segchips button.has-thumb span{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.prop-body,.lib-pane{overflow-x:hidden}
.toast{max-width:min(560px,calc(100vw - 32px));text-align:center}

/* ==========================================
   TYPOGRAFI

   Inter står först i --sans men följer inte med projektet, så på
   Windows föll texten tillbaka på gamla Segoe UI. Windows 11 har
   Segoe UI Variable inbyggd: samma släkt, men med optiska storlekar
   som gör 11–13 px märkbart skarpare. Ingen fil att ladda.
   ========================================== */
:root{
  --sans:Inter,"Segoe UI Variable Text","Segoe UI Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
body{text-rendering:optimizeLegibility;font-optical-sizing:auto}
/* Rubriker och korta rutor bryts i jämnlånga rader; löptext undviker ensamma ord på sista raden. */
.modal h3,.empty,.hmenu-list b,.toast,.psec h4{text-wrap:balance}
.psec p,.modal p,.msg,.klist>span,.hmenu-list span{text-wrap:pretty}
.psec p,.modal .mb p{line-height:1.5}
::selection{background:rgba(91,108,255,.38);color:#fff}
input,textarea{caret-color:var(--accent2)}
/* Sifferfältens pilar är 6 px breda träffytor som bara stjäl plats — reglaget bredvid gör jobbet. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ==========================================
   ANVISNINGAR SOM INTE TAR ÖVER PANELEN

   Inspektören har ett femtiotal förklarande stycken. De behövs första
   gången och står sedan i vägen för reglagen. Långa stycken visar två
   rader; ett klick fäller ut resten (props.js märker dem .pnote och
   minns vilka som är utfällda).
   ========================================== */
#propBody .pnote{position:relative;border-left:2px solid var(--border2);padding-left:9px;color:var(--dim)}
#propBody .pnote.more{cursor:pointer;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;padding-right:16px}
#propBody .pnote.more::after{content:'▾';position:absolute;right:0;top:0;font-size:11px;color:var(--dim2);transition:transform var(--t-fast)}
#propBody .pnote.more:hover{color:var(--text);border-left-color:var(--accent)}
#propBody .pnote.more.open{display:block;-webkit-line-clamp:unset;line-clamp:unset}
#propBody .pnote.more.open::after{transform:rotate(180deg)}

/* ==========================================
   DJUP OCH YTA

   Små saker som tillsammans skiljer ett verktyg från en webbsida:
   knappar med en ljus överkant, paneler som inte är helt platta,
   lägen som syns utan att skrika.
   ========================================== */
button{box-shadow:var(--edge)}
button.icon,.prop-subtabs button,.tagdot,.kf-dot{box-shadow:none}
button.on:not(.tagdot):not(.kf-dot){box-shadow:inset 0 0 0 1px rgba(142,155,255,.35),var(--edge)}
.library,.properties{background:linear-gradient(180deg,var(--panel) 0%,#0a0d13 100%)}
.psec{transition:background var(--t-fast)}
#propBody .psec.foldable:hover{background:rgba(255,255,255,.012)}
.prop-groups button.active{box-shadow:inset 0 -2px 0 var(--accent),var(--edge)}
.row>label{transition:color var(--t-fast)}
.row:focus-within>label,.row:hover>label{color:var(--text)}
input[type=checkbox]{accent-color:var(--accent);cursor:pointer}
input[type=color]{border-radius:var(--r);overflow:hidden}
.media-card:active{transform:scale(.985)}
.empty-icon{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--border);opacity:1;font-size:16px;box-shadow:var(--edge)}

/* ==========================================
   VERKTYGSTIPS (tooltip.js)

   Webbläsarens egna tips kommer efter en dryg sekund, i systemets
   typsnitt och utan att visa kortkommandot som en tangent. De här
   kommer efter 0,4 s och ser ut som resten av appen.
   ========================================== */
.tip{position:fixed;z-index:400;pointer-events:none;max-width:280px;padding:6px 9px;border-radius:var(--r);
  background:rgba(22,27,38,.97);border:1px solid var(--border2);box-shadow:var(--lift-2);
  font-size:12px;line-height:1.4;color:var(--text);overflow-wrap:anywhere;text-wrap:pretty;
  opacity:0;transform:translateY(3px);transition:opacity var(--t-fast),transform var(--t-fast)}
.tip.show{opacity:1;transform:none}
.tip .tip-more{display:block;margin-top:3px;color:var(--dim);font-size:11px}
.tip kbd{display:inline-block;margin-left:7px;padding:1px 5px;border-radius:4px;background:var(--panel4);border:1px solid var(--border2);
  font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.tip{transition:none}}

/* ==========================================
   IKONER

   Linjeikoner i samma vikt som texten, i stället för emoji som ritas
   olika på varje system.
   ========================================== */
.ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

/* ==========================================
   SIDHUVUD: SÖKFÄLT OCH MER-MENY

   Kommandopaletten når allt i appen, men låg bakom en ⌘K-ikon. Som ett
   sökfält mitt i sidhuvudet säger den vad den är.
   ========================================== */
.cmdp-field{display:flex;align-items:center;gap:8px;width:clamp(200px,28vw,400px);padding:6px 8px 6px 10px;
  background:rgba(0,0,0,.28);border-color:var(--border);color:var(--dim);font-size:12px;text-align:left;cursor:text}
.cmdp-field>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdp-field kbd{font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:4px;border:1px solid var(--border2);background:var(--panel3);color:var(--dim)}
.cmdp-field:hover:not(:disabled){background:rgba(0,0,0,.4);border-color:var(--border2);color:var(--text)}
#moreBtn{font-size:16px;line-height:1}

/* ==========================================
   VÄNSTERPANELEN: IKONLIST + PANEL

   Fem flikar i en rad tog höjd och gick inte att fälla undan. Nu ligger
   de som en list längs kanten; panelen bredvid kan fällas ihop helt.
   ========================================== */
/* Ingen övergång på bredden: bilden och tidslinjen ritas om direkt efter bytet och skulle annars mäta en halvfärdig layout. */
.library{flex-direction:row;width:clamp(296px,calc(20vw + 56px),376px);flex:0 0 clamp(296px,calc(20vw + 56px),376px)}
.lib-tabs{flex:0 0 56px;flex-direction:column;gap:4px;padding:8px 6px;border-bottom:none;border-right:1px solid var(--border);background:rgba(0,0,0,.18)}
.lib-tabs button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 6px;
  font-size:11px;line-height:1;color:var(--dim);background:none;border-color:transparent;box-shadow:none;position:relative}
.lib-tabs button .ico{width:20px;height:20px;vertical-align:0}
.lib-tabs button:hover:not(:disabled){background:var(--panel3);border-color:transparent;color:var(--text)}
.lib-tabs button.active{background:var(--accent-soft);border-color:transparent;color:var(--accent2)}
.lib-tabs button.active::before{content:'';position:absolute;left:-6px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--accent)}
.lib-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
body.left-collapsed .library{width:56px;flex-basis:56px}
body.left-collapsed .lib-body{display:none}
body.left-collapsed .lib-tabs{border-right:none}
/* Ihopfälld: ingen flik är "öppen", så ingen är markerad. */
body.left-collapsed .lib-tabs button.active{background:none;color:var(--dim)}
body.left-collapsed .lib-tabs button.active::before{display:none}

/* Inspektören fälls ihop helt; knappen i förhandsvisningens verktygsrad tar fram den igen. */
body.right-collapsed .properties{display:none}

/* Smalt fönster (men inte telefonlayouten): den öppna panelen läggs OVANPÅ
   bilden i stället för att knuffa undan den. */
@media (min-width:901px) and (max-width:1100px){
  .main-area{position:relative}
  .library{width:56px;flex-basis:56px}
  .lib-body{position:absolute;left:56px;top:0;bottom:0;width:min(300px,calc(100vw - 80px));z-index:40;
    background:var(--panel);border-right:1px solid var(--border);box-shadow:var(--lift-3)}
  .properties{width:260px;flex-basis:260px}
}
/* Telefonlayouten staplar panelerna: listen ligger då vågrätt igen. */
@media (max-width:900px){
  .library{flex-direction:column;width:100%;flex-basis:auto}
  .lib-tabs{flex:0 0 auto;flex-direction:row;border-right:none;border-bottom:1px solid var(--border);padding:6px 8px}
  .lib-tabs button{flex:1;flex-direction:row;justify-content:center;gap:6px;padding:7px 4px}
  .lib-tabs button.active::before{display:none}
  .lib-tabs button .ico{width:16px;height:16px}
  body.left-collapsed .library{width:100%;flex-basis:auto}
  .cmdp-field{display:none}
}

/* ==========================================
   VERKTYGSRAD VID FÖRHANDSVISNINGEN
   ========================================== */
.stage-bar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel2),var(--panel));flex:0 0 auto;min-width:0}
.tool-group{display:flex;gap:2px;padding:2px;border-radius:var(--r);background:rgba(0,0,0,.25);border:1px solid var(--border)}
.tool-group button{border-color:transparent;background:none;padding:5px 8px;min-width:30px;color:var(--dim)}
.tool-group button:hover:not(:disabled){background:var(--panel4);border-color:transparent;color:var(--text)}
.tool-group button.on{background:var(--accent-soft);color:var(--accent2);box-shadow:none}
.tool-group button:disabled{background:none;border-color:transparent;color:var(--dim2);opacity:.55}
.stage-hint{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--accent2)}
.stage-bar #aspectSel{width:auto;min-width:0;max-width:170px;padding:5px 8px;font-size:12px}
#inspectorBtn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent2)}

/* ==========================================
   TIDSLINJELISTEN: MENYER I STÄLLET FÖR RADER AV KRYSSRUTOR
   ========================================== */
.timeline-toolbar .hmenu>button{display:inline-flex;align-items:center;gap:6px}
#snapBtn.on{border-color:var(--accent);color:var(--accent2);background:var(--accent-soft)}
#snapBtn:not(.on){color:var(--dim)}
.vmenu .toggle{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.vmenu .vmenu-note{flex:1 0 100%;padding-left:36px;margin-top:-2px;font-size:11px;line-height:1.35;color:var(--dim)}
.vmenu .vmenu-row select{width:auto;max-width:60%}
.vmenu .toggle+.toggle,.vmenu .vmenu-row+.toggle{border-top:1px solid var(--line)}

/* ==========================================
   MUSIKPANELEN (music-ui.js)

   Tre flikar efter arbetsgången — Låten, Klipp, Effekter — i stället för
   en enda lång rullning. Handlingar är rader med rubrik och en mening om
   vad de gör, inte emoji-knappar med förklaringen gömd i en tooltip.
   ========================================== */
#ltMusic{padding:0 0 12px}
.mx-tabs{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0;padding:8px 10px;
  background:var(--panel);border-bottom:1px solid var(--border)}
.mx-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 4px;font-size:12px;color:var(--dim);
  background:none;border-color:transparent;box-shadow:none;white-space:nowrap}
.mx-tabs button i{font-style:normal;font-family:var(--mono);font-size:11px;width:17px;height:17px;line-height:17px;border-radius:50%;
  background:var(--panel3);color:var(--dim);flex:none}
.mx-tabs button:hover:not(:disabled){background:var(--panel3);border-color:transparent;color:var(--text)}
.mx-tabs button.active{background:var(--accent-soft);color:var(--accent2);font-weight:600}
.mx-tabs button.active i{background:var(--accent);color:#fff}

#ltMusic .mx-card{padding:14px 12px;border-bottom:1px solid var(--border)}
#ltMusic .mx-card>h4{margin-bottom:10px}

/* Låten överst */
.mx-song{display:flex;gap:10px;align-items:center}
.mx-song-ico{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(91,108,255,.30),rgba(47,196,95,.22));border:1px solid var(--border2);color:var(--text)}
.mx-song-ico .ico{width:18px;height:18px}
.mx-song-body{flex:1;min-width:0}
.mx-song-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-song-pick{width:100%;font-weight:600;padding:5px 8px}
.mx-facts{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.mx-facts span{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:var(--pill);background:var(--panel3);border:1px solid var(--border);color:var(--dim)}
.mx-facts span:first-child{color:var(--accent2);border-color:rgba(91,108,255,.45);background:var(--accent-soft)}

/* Vad analysen hunnit med */
.mx-checks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px;font-size:12px;color:var(--dim)}
.mx-checks li{display:flex;gap:8px;align-items:baseline;overflow-wrap:anywhere}
.mx-checks li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--dim2);transform:translateY(-1px)}
.mx-checks li.ok{color:var(--text)}
.mx-checks li.ok::before{background:var(--ok)}
.mx-checks li.warn{color:#ffd48a}
.mx-checks li.warn::before{background:var(--warn)}
.mx-checks li.wait::before{background:var(--accent2);animation:pulse 1.2s infinite}
.mx-top>.mx-act{margin-top:12px}

/* Handlingar: rubrik + vad som händer */
.mx-acts{display:grid;gap:5px}
.mx-act{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:8px 10px;
  background:var(--panel2);border-color:var(--border)}
.mx-act b{font-size:12px;font-weight:600;color:var(--text)}
.mx-act span{font-size:11px;line-height:1.4;color:var(--dim)}
.mx-act:hover:not(:disabled){background:var(--panel3);border-color:var(--accent)}
.mx-act.primary{background:var(--accent);border-color:#6f7dff}
.mx-act.primary b{color:#fff}
.mx-act.primary span{color:rgba(255,255,255,.82)}
.mx-act.primary:hover:not(:disabled){background:var(--accent2)}
.mx-act:disabled b,.mx-act:disabled span{color:var(--dim2)}
.mx-toggle{display:flex;white-space:normal;font-size:12px;color:var(--text);margin-top:10px;line-height:1.35}
.mx-toggle.mx-sub{padding-top:12px;border-top:1px solid var(--line)}
.mx-nested{margin:8px 0 0 14px;padding-left:10px;border-left:2px solid var(--border2)}
.mx-checksrow{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:8px}
.mx-checksrow label{display:flex;align-items:center;gap:5px;cursor:pointer}
.mx-apply{width:100%;margin-top:12px;padding:9px 10px}
.mx-band+.mx-band{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}

/* Mönstrets slag */
.mx-steps-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;margin:0 0 5px}
.mx-steps{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;padding:6px;border-radius:var(--r);background:rgba(0,0,0,.22);border:1px solid var(--border)}
.mx-steps .music-step{flex:1 1 74px;min-width:0;width:auto;padding:5px 6px;font-size:12px}
.mx-steps input.music-step{flex:1 1 52px;text-align:center}
.mx-steps button.icon{flex:none;min-width:28px;padding:4px 6px}

/* Låtens form */
#ltMusic .structseg{cursor:pointer;transition:filter var(--t-fast)}
#ltMusic .structseg:hover{filter:brightness(1.25)}
.mx-letters{display:flex;flex-wrap:wrap;gap:3px}
.mx-letters span{min-width:20px;padding:2px 5px;border-radius:4px;text-align:center;font:600 11px/15px var(--mono);
  color:#0b0d12;background:hsl(var(--h) 55% 58%)}
.mx-letters span.chorus{box-shadow:0 0 0 2px #fff}

/* Ingen låt */
.mx-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:38px 22px}
.mx-empty-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;
  background:linear-gradient(135deg,rgba(91,108,255,.30),rgba(47,196,95,.22));border:1px solid var(--border2)}
.mx-empty-ico .ico{width:24px;height:24px}
.mx-empty b{font-size:14px}
.mx-empty p{margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--dim);text-wrap:pretty;overflow-wrap:anywhere}
/* Sektionsnamnen kapades i båda ändar när de inte fick plats (centrerad flex): nu kapas de i slutet med punkter. */
#ltMusic .structstrip{height:30px}
#ltMusic .structseg{display:block;line-height:30px;text-align:center;font-size:11px}

/* ==========================================
   AUTO-PMV-DIALOGEN (autopmv-ui.js)

   Tre steg till vänster — låten, klippen, stilen — och resultatet till
   höger: förhandsvisningen, ny variant och delarna av låten som kan
   slumpas om var för sig.
   ========================================== */
.modal.pmv-modal{max-width:min(96vw,1040px);width:100%;max-height:94vh}
.pmv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:18px;align-items:start}
.pmv-step{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.pmv-step:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.pmv-step>h4,.pmv-side>h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text);text-transform:none}
.pmv-step>h4 i{font-style:normal;font-family:var(--mono);font-size:11px;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;background:var(--accent);color:#fff;flex:none}
.pmv-step>h4 .small{margin-left:auto;font-weight:400}
.pmv-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.pmv-row3>label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--dim);min-width:0}
.pmv-row3 select{width:100%}
.pmv-info{margin:8px 0 0;line-height:1.5;text-wrap:pretty;overflow-wrap:anywhere}
.pmv-info:empty{display:none}
.pmv-allnone{display:flex;gap:4px;justify-content:flex-end}
.pmv-allnone button{padding:6px 10px}

/* Klipplistan */
.pmv-clips{margin-top:10px;max-height:30vh;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r);background:rgba(0,0,0,.2)}
.pmv-clip{display:grid;grid-template-columns:minmax(0,1fr) auto 132px;gap:10px;align-items:center;padding:5px 8px;border-bottom:1px solid var(--line)}
.pmv-clip:last-child{border-bottom:none}
.pmv-clip.off{opacity:.45}
.pmv-clip.off .apRule{visibility:hidden}
.pmv-clip-main{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer;font-size:12px}
.pmv-clip-main img,.pmv-nothumb{width:46px;height:26px;border-radius:4px;object-fit:cover;flex:none;background:var(--panel3);border:1px solid var(--border)}
.pmv-clip-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmv-clip-meta{display:flex;align-items:center;gap:8px;font-size:11px;font-family:var(--mono);white-space:nowrap}
.pmv-badge{font-family:var(--sans);padding:1px 7px;border-radius:var(--pill);background:var(--accent-soft);border:1px solid rgba(91,108,255,.4);color:var(--accent2)}
.pmv-ok{color:var(--warn)}
.pmv-clip .apRule{width:100%}

/* Förval som kort, mängd som segment */
.pmv-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.pmv-preset{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 8px;font-size:12px;white-space:normal;line-height:1.25;background:var(--panel2)}
.pmv-preset-ico{font-size:20px;line-height:1}
.pmv-preset.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent2);box-shadow:inset 0 0 0 1px var(--accent)}
.pmv-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;border-radius:var(--r);background:rgba(0,0,0,.25);border:1px solid var(--border)}
.pmv-seg button{padding:5px 4px;font-size:12px;background:none;border-color:transparent;box-shadow:none;color:var(--dim)}
.pmv-seg button.on{background:var(--accent-soft);color:var(--accent2);font-weight:600;box-shadow:none}
.pmv-adv{margin-top:12px}
.pmv-adv>summary{cursor:pointer;font-size:12px;padding:4px 0}
.pmv-adv[open]>summary{margin-bottom:8px}
.pmv-parts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px}
.pmv-part{font-size:12px;color:var(--text);white-space:normal}

/* Resultatet */
.pmv-side{position:sticky;top:0;padding:14px;border-radius:var(--r2);background:rgba(0,0,0,.22);border:1px solid var(--border)}
.pmv-prev-empty{line-height:1.5;text-wrap:pretty}
.pmv-strip{display:block;width:100%;height:44px;border-radius:6px;background:rgba(128,128,128,.12)}
.pmv-prev-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.pmv-partlist h5{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:16px 0 6px;font-size:12px;font-weight:600}
.pmv-partlist h5 .small{font-weight:400}
.pmv-partrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot name roll" "dot meta roll";column-gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.pmv-partdot{grid-area:dot;width:8px;height:26px;border-radius:3px}
.pmv-partname{grid-area:name;font-size:12px;font-weight:600}
.pmv-partrow>.small{grid-area:meta;font-family:var(--mono)}
.pmv-partrow>button{grid-area:roll;padding:4px 9px;font-size:11px}
@media (max-width:820px){
  .pmv-cols{grid-template-columns:minmax(0,1fr)}
  .pmv-side{position:static}
  .pmv-row3{grid-template-columns:minmax(0,1fr)}
  .pmv-row3>label{grid-column:auto !important}
  .pmv-clip{grid-template-columns:minmax(0,1fr) auto}
  .pmv-clip .apRule{grid-column:1 / -1}
}

/* Compilation: inställningarna i flikar, och textsökning bland höjdpunkterna */
.cp-stabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;margin:8px 0 12px;border-radius:var(--r);background:rgba(0,0,0,.25);border:1px solid var(--border)}
.cp-stabs button{padding:6px 4px;font-size:11px;line-height:1.25;background:none;border-color:transparent;box-shadow:none;color:var(--dim);white-space:normal}
.cp-stabs button:hover:not(:disabled){color:var(--text);background:var(--panel3);border-color:transparent}
.cp-stabs button.active{background:var(--accent-soft);color:var(--accent2);font-weight:600}
[data-cptab][hidden]{display:none}
.cp-search{display:inline-flex;gap:4px;align-items:center}
.cp-search input{width:190px;padding:4px 8px;font-size:12px}
.cp-search button{padding:4px 9px;font-size:11px}
.pmv-link{margin-top:8px;padding:5px 10px;font-size:12px;color:var(--accent2);border-color:var(--accent)}

/* ==========================================
   COMPILATION-MENYN (compilation-ui.js)

   Fyra numrerade steg i arbetsgångens ordning: klippen, granskningen,
   utseendet och resultatet. De två stora valen — vad som visas och hur
   det ser ut — är kort i stället för rullistor, och varje steg börjar
   med en rad som säger vad det handlar om.
   ========================================== */
.compilation-modal .cp-head h3{display:flex;align-items:baseline;gap:8px;font-size:15px;letter-spacing:-.01em}
.compilation-modal .cp-icon{min-width:30px;padding-left:0;padding-right:0}
.compilation-modal .cp-wrap{padding:6px 18px 10px}
.compilation-modal .psec{padding:16px 0;border-bottom:1px solid var(--line)}
.compilation-modal .psec:last-child{border-bottom:none}

/* Stegrubriker: siffra i en rund bricka, ingen versal-spärrning */
.compilation-modal .cp-step>h4{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:-.005em;
  text-transform:none;color:var(--text);border-bottom:none;padding-bottom:0}
.compilation-modal .cp-step>h4>i{font-style:normal;font-family:var(--mono);font-size:11px;width:20px;height:20px;line-height:20px;text-align:center;
  border-radius:50%;background:var(--accent);color:#fff;flex:none}
.compilation-modal .cp-step>h4 #cpCount{margin-left:auto;font-weight:400}
.compilation-modal .cp-opt{padding:1px 7px;border-radius:var(--pill);border:1px solid var(--border2);font-weight:400}
.compilation-modal .cp-player>h4{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--text);border-bottom:none;padding-bottom:0}

/* Steg 1: vad ska visas */
.cp-contents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.cp-content{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;text-align:left;white-space:normal;background:var(--panel2);line-height:1.35}
.cp-content b{font-size:13px;color:var(--text)}
.cp-content span{font-size:11px;color:var(--dim)}
.cp-content.on{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cp-content.on b{color:var(--accent2)}
.cp-srclist{border:1px solid var(--border);border-radius:var(--r);background:rgba(0,0,0,.18);padding:2px 10px}
.cp-srclist .cp-src{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.cp-srclist .cp-src:last-child{border-bottom:none}
.cp-srclist .cp-src>.small:not(.muted){color:var(--ok)}
.cp-src-btns{display:flex;gap:4px;min-width:0}
.cp-src-btns button{padding:3px 9px;font-size:11px}

/* Steg 2: i sidopanelen en sammanfattning; i helbild rutnätet */
.cp-review-mini-wrap{display:none}
#modalBack.cp-dock .cp-review-mini-wrap{display:block}
.cp-review-open{width:100%}
.cp-vtabs{display:inline-flex;gap:2px;padding:2px;margin-left:8px;border-radius:var(--r);background:rgba(0,0,0,.25);border:1px solid var(--border)}
.cp-vtabs button{padding:4px 12px;font-size:12px;background:none;border-color:transparent;box-shadow:none;color:var(--dim)}
.cp-vtabs button:hover:not(:disabled){color:var(--text);background:var(--panel3);border-color:transparent}
.cp-vtabs button.active{background:var(--accent-soft);color:var(--accent2);font-weight:600}
.compilation-modal .cp-filters{gap:8px 12px;padding:8px 10px;margin-bottom:10px;border:1px solid var(--border);border-radius:var(--r);background:rgba(0,0,0,.18)}
.compilation-modal .cp-filters label{display:inline-flex;align-items:center;gap:6px;color:var(--dim)}
.compilation-modal .cp-filters select{width:auto}
.compilation-modal .cp-search{flex:1 1 220px;order:-1}
.compilation-modal .cp-search input{flex:1;width:auto;min-width:0}
.cp-keys{margin:0 0 10px;font-size:12px;color:var(--dim)}
.cp-keys>summary{cursor:pointer;display:inline-block}
.cp-keylist{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0}
.cp-keylist kbd{display:inline-block;min-width:18px;padding:1px 5px;margin-right:2px;border-radius:4px;border:1px solid var(--border2);background:var(--panel3);
  font-family:var(--mono);font-size:11px;text-align:center;color:var(--text)}

/* Höjdpunkterna som kort */
.compilation-modal .cp-gridbox{gap:10px}
.compilation-modal .cp-card{border:1px solid var(--border);border-radius:10px;transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
.compilation-modal .cp-card:hover{transform:translateY(-1px);border-color:var(--border2);box-shadow:var(--lift-2)}
.compilation-modal .cp-card.keep{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.compilation-modal .cp-card.drop{opacity:.32}
.compilation-modal .cp-card.star{box-shadow:inset 0 0 0 2px #ffc83d}
.compilation-modal .cp-card.sel{outline:2px solid var(--accent2);outline-offset:2px}
.compilation-modal .cp-btns{opacity:.75;transition:opacity var(--t-fast)}
.compilation-modal .cp-card:hover .cp-btns,.compilation-modal .cp-card.sel .cp-btns{opacity:1}
.compilation-modal .cp-btns button{width:24px;height:24px;border-radius:7px;background:rgba(10,12,18,.78);box-shadow:none}
.compilation-modal .cp-name{padding:5px 8px;font-size:11px}

/* Steg 3: layoutlägena som kort */
.cp-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}
.cp-mode{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;font-size:12px;background:var(--panel2);white-space:normal}
.cp-mode b{font-weight:600;color:var(--text)}
.cp-mode-ico{width:48px;height:28px;fill:var(--dim)}
.cp-mode-ico .cp-mode-frame{fill:none;stroke:var(--border2)}
.cp-mode.on{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cp-mode.on .cp-mode-ico{fill:var(--accent2)}
.cp-mode.on b{color:var(--accent2)}

/* Steg 4: nyckeltal */
.cp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px}
.cp-stats>div{padding:8px 8px 7px;border-radius:var(--r);background:var(--panel2);border:1px solid var(--border);min-width:0}
.cp-stats b{display:block;font-family:var(--mono);font-size:15px;font-weight:600;color:var(--text);line-height:1.2}
.cp-stats span{display:block;font-size:11px;color:var(--dim);line-height:1.25;overflow-wrap:anywhere}
.compilation-modal .cp-minis{margin-bottom:6px}
.compilation-modal .cp-result{font-size:12px}

/* Vald höjdpunkt, tomt läge */
.cp-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 12px;text-align:center;border:1px dashed var(--border2);border-radius:var(--r)}
.cp-empty-ico{width:36px;height:36px;line-height:36px;border-radius:50%;background:var(--panel3);color:var(--dim)}
.cp-empty p{margin:0;text-wrap:pretty}

/* Byggknappen visar vad ett klick ger */
.compilation-modal .mf #cpBuild{min-width:150px;font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .cp-contents,.cp-modes{grid-template-columns:minmax(0,1fr)}
  .cp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Helbild: bara innehållet rullar, så Stäng och Bygg alltid syns (förut hamnade knappraden under skärmkanten i 900 px höjd). */
.modal.compilation-modal:not(.cp-dock){display:flex;flex-direction:column;overflow:hidden;max-height:94vh}
.modal.compilation-modal:not(.cp-dock) .cp-wrap{flex:1;min-height:0;overflow-y:auto}
.modal.compilation-modal>.mf{flex:none}
/* Auto-PMV: bildrutor ur den provbyggda PMV:n */
.pmv-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
.pmv-frames figure{margin:0;min-width:0}
.pmv-frames img{display:block;width:100%;max-height:150px;object-fit:contain;border-radius:6px;background:#000;border:1px solid var(--border)}
.pmv-frames figcaption{font-size:11px;color:var(--dim);margin-top:3px;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Compilation: behåll alla som syns, och uppspelning när pekaren är över en höjdpunkt */
.cp-bulk{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 8px}
.cp-bulk button{padding:5px 10px;font-size:12px}
.cp-hoverhint{margin-left:auto}
.cp-card{position:relative}
.cp-hovervid{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;pointer-events:none;z-index:1}
.cp-card .cp-chips,.cp-card .cp-btns{z-index:2}
.pmv-where{margin-right:auto;align-self:center}
.build-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}
.build-row .ok{color:var(--ok,#4ade80)}
/* Compilation · spellista */
.cp-playlist{margin:4px 0 10px}
.cp-pl-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.cp-pl{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:3px}
.cp-pl li{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:var(--panel2,rgba(255,255,255,.04));min-width:0}
.cp-pl-n{width:1.4em;text-align:center;color:var(--muted,#8a8fa3);font-variant-numeric:tabular-nums}
.cp-pl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-pl li button{padding:2px 7px;min-height:0}
.cp-playlist select{width:100%}
/* Musik-panelen: Ton & binaural beat (music-ui.js) */
.mx-tone{display:flex;align-items:center;gap:10px;width:calc(100% - 20px);margin:10px;padding:10px 12px;text-align:left;border-radius:12px;
  background:var(--panel2);border:1px solid var(--border)}
.mx-tone:hover{border-color:var(--border2)}
.mx-tone-ico{font-size:20px;flex:none}
.mx-tone>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mx-tone small{color:var(--dim);font-size:11px;line-height:1.35}
.mx-tone-go{color:var(--dim);font-size:18px}
/* Hemskärmsappen: "Ny version finns" (js/pwa.js) */
.pwa-update{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:500;display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 16px;border-radius:999px;background:var(--panel2);border:1px solid var(--border2);box-shadow:0 14px 40px rgba(0,0,0,.55);font-size:13px;white-space:nowrap}
.pwa-update button{padding:6px 14px}
.pwa-update button.ghost{padding:6px 10px}
body.phone .pwa-update{bottom:calc(var(--mob-nav) + 12px)}
/* Weave Studio: tryck på ett klipp och sedan på en hink (weave-studio.js pickedChip) */
.weave-chip{cursor:pointer}
.weave-chip.picked{outline:2px solid var(--accent2);outline-offset:1px;background:var(--accent-soft)}
.weave-bucket-drop.can-drop,.weave-available.can-drop{outline:2px dashed var(--accent2);outline-offset:-2px;cursor:pointer}
.weave-tap-hint{margin:0 0 6px;color:var(--accent2);font-weight:600}
/* Utan muspekare finns ingen "håll pekaren över" */
@media (hover:none){ .cp-hoverhint{display:none} }
/* Analyser pågår (js/analysisprogress.js) */
.ana-pill{position:fixed;left:12px;bottom:14px;z-index:450;width:min(340px,calc(100vw - 24px));border-radius:14px;background:var(--panel2);
  border:1px solid var(--border2);box-shadow:0 12px 34px rgba(0,0,0,.5);overflow:hidden;font-size:12px}
.ana-pill[hidden]{display:none}
body.phone .ana-pill{left:8px;bottom:calc(var(--mob-nav) + 8px);width:calc(100vw - 16px)}
.ana-head{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:none;color:var(--text);text-align:left;min-height:38px}
.ana-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ana-pct{font-variant-numeric:tabular-nums;color:var(--accent2);font-weight:600}
.ana-more{padding:1px 7px;border-radius:999px;background:var(--panel4);color:var(--dim);font-size:11px}
.ana-spin{width:14px;height:14px;flex:none;border-radius:50%;border:2px solid var(--border2);border-top-color:var(--accent2);animation:anaSpin .8s linear infinite}
@keyframes anaSpin{to{transform:rotate(360deg)}}
.ana-bar{display:block;height:3px;background:var(--panel4);position:relative;overflow:hidden}
.ana-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent2);transition:width .2s}
.ana-bar.indet i{animation:anaIndet 1.2s ease-in-out infinite}
@keyframes anaIndet{0%{left:-35%}100%{left:100%}}
.ana-list{list-style:none;margin:0;padding:6px 12px 10px;max-height:40vh;overflow:auto;display:flex;flex-direction:column;gap:4px}
.ana-list li{display:flex;justify-content:space-between;gap:10px;color:var(--dim)}
.ana-list li.run{color:var(--text)}
.ana-list small{color:var(--dim2)}
.ana-list b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.ana-spin,.ana-bar.indet i{animation:none}}
/* ==========================================
   WEAVE STUDIO I FYRA STEG (weave-studio.js studioHTML, weavestyles.js)
   ========================================== */
.ws-stepnav{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.ws-stepnav button{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);color:var(--dim);font-size:12px}
.ws-stepnav button i{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--panel4);font-size:11px;font-weight:700}
.ws-stepnav button.on{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}
.ws-stepnav button.on i{background:var(--accent);color:#fff}
.ws-step{border-top:1px solid var(--border);padding:12px 0 6px;scroll-margin-top:8px}
.ws-step:first-of-type{border-top:none}
.ws-step-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px}
.ws-step-h i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700}
.ws-help{margin:-2px 0 10px;line-height:1.45}
.ws-auto{width:100%;margin:0 0 8px}
.ws-styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 12px}
.ws-style{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;text-align:left;border-radius:12px;background:var(--panel2);border:1px solid var(--border);min-height:74px}
.ws-style:hover{border-color:var(--border2)}
.ws-style.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.ws-style-ico{font-size:18px}
.ws-own{grid-column:1/-1;margin:0}
.ws-tempo #wsTempoLabel{min-width:70px;text-align:right;font-weight:600;color:var(--accent2)}
.ws-fine{margin:10px 0 0;border:1px solid var(--border);border-radius:12px;padding:0 10px;background:rgba(255,255,255,.015)}
.ws-fine>summary{cursor:pointer;padding:12px 2px;list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ws-fine>summary::-webkit-details-marker{display:none}
.ws-fine>summary::before{content:'▸';color:var(--dim)}
.ws-fine[open]>summary::before{content:'▾'}
.weave-studio .mf .ws-prev,.weave-studio .mf .ws-next{display:none}
.weave-studio .mf #wsGenerate{flex:1}

/* ==========================================
   OMGÅNG 127 — en ikonstil, Synka-arket och stegraden
   ========================================== */
/* Fyllda ikoner (spela, pausa) */
.ico.ico-fill{fill:currentColor;stroke:none}
#playBtn{display:inline-grid;place-items:center}
#createBtn .ico{margin-right:6px}
.proj-icon{display:inline-grid;place-items:center}
/* Menyraderna i sidhuvudet: ikon till vänster, rubrik och förklaring till höger */
.hmenu-list button:has(>.ico){display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:11px;row-gap:2px;align-items:center}
.hmenu-list button>.ico{grid-row:1 / span 2;width:20px;height:20px;color:var(--accent2)}

/* Stegraden (stepsheet.js) och dess knappar syns bara på telefonen (mobile.css) */
.stp-nav,.stp-prev,.stp-next{display:none}
.stp-nav button{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);color:var(--dim);font-size:12px}
.stp-nav button i{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;background:var(--panel4);font-size:11px;font-weight:700}
.stp-nav button.on{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}
.stp-nav button.on i{background:var(--accent);color:#fff}

/* ---------- Synka-arket (syncsheet.js) ---------- */
.sync-modal{max-width:520px}
.mb.sy{display:flex;flex-direction:column;gap:14px}
.mb.sy>*{flex:none}   /* annars kläms grupperna ihop i stället för att arket rullar */
.sy-song{padding:14px;border-radius:14px;background:var(--panel2);border:1px solid var(--border)}
.sy-song[data-level='ok']{border-color:color-mix(in srgb,var(--ok,#38d16a) 45%,var(--border))}
.sy-song-head{display:flex;align-items:center;gap:12px;min-width:0}
.sy-song-ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:11px;background:var(--accent-soft);color:var(--accent2)}
.sy-song-ico .ico{width:20px;height:20px}
.sy-song-body{flex:1 1 auto;min-width:0}
.sy-song-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sy-song-pick{width:100%;font-weight:600}
.sy-facts{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px;font-size:12px;color:var(--dim);font-family:var(--mono)}
.sy-facts .sy-level{font-family:var(--sans);color:var(--text)}
.sy-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.sy-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;color:var(--dim);background:rgba(255,255,255,.04);border:1px solid var(--border)}
.sy-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dim2,#5a6278);flex:none}
.sy-chip.ok{color:var(--text)} .sy-chip.ok::before{background:var(--ok,#38d16a)}
.sy-chip.warn::before{background:#f5a524}
.sy-chip.wait::before{background:#f5a524;animation:syPulse 1s ease-in-out infinite}
.sy-song-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sy-song-btns button{flex:1 1 120px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:13px}
.sy-song-btns .ico{width:18px;height:18px}
.sy-toggle{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel2);border:1px solid var(--border);cursor:pointer}
.sy-toggle input{width:22px;height:22px;flex:none}
.sy-toggle>span,.sy-act-t{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.sy-toggle b,.sy-act b{font-size:14px;font-weight:600;color:var(--text)}
.sy-toggle span span,.sy-act-t span{font-size:12px;color:var(--dim);line-height:1.35}
.sy-group{border-radius:14px;background:var(--panel2);border:1px solid var(--border);overflow:hidden}
.sy-group h4{margin:0;padding:12px 14px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.modal .sy-act{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:9px 14px;border:none;border-radius:0;background:none;box-shadow:none;text-align:left}
.modal .sy-act+.sy-act{border-top:1px solid var(--border)}
.sy-act>.ico{width:18px;height:18px;color:var(--dim);flex:none}
.sy-act:hover:not(:disabled),.sy-act:active:not(:disabled){background:var(--accent-soft)}
.sy-act:disabled{opacity:1;cursor:default}
.sy-act:disabled b{color:var(--dim)}
.sy-act:disabled>.ico{visibility:hidden}
.sy-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 12px}
.sy-empty-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--accent-soft);color:var(--accent2)}
.sy-empty-ico .ico{width:28px;height:28px}
.sy-empty p{margin:0 0 8px;color:var(--dim);font-size:13px;line-height:1.45;max-width:38ch}
.sy-empty button{min-height:44px;padding:0 20px}
/* Analysraden under låtväljaren i Auto-PMV och Weave Studio */
#apAnalysis .sy-chips,#wsAnalysis .sy-chips{margin:8px 0 10px}
@keyframes syPulse{50%{opacity:.35}}
.lib-actions button .ico{margin-right:6px}
.dz-icon .ico{width:20px;height:20px}
#ltMedia:has(.media-card) .dropzone .dz-icon .ico{width:14px;height:14px}

/* ---------- Synka mot musiken i effektfliken (fxsync.js, props.js) ---------- */
.fxsync{margin:0 0 12px;padding:12px;border-radius:12px;background:var(--panel2);border:1px solid var(--border)}
.fxsync.on{border-color:color-mix(in srgb,var(--ok,#38d16a) 45%,var(--border))}
.fxsync-head{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13px}
.fxsync-badge{padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;color:var(--ok,#38d16a);background:color-mix(in srgb,var(--ok,#38d16a) 14%,transparent)}
.fxsync .row{margin-bottom:6px}
.fxsync select{width:100%;min-width:0}
.fxsync-info{margin:6px 0 10px}
.fxsync-btns{display:flex;flex-wrap:wrap;gap:8px}
.fxsync-btns button{flex:1 1 auto}
.fxsync-btns .primary{flex:2 1 140px}
.fxsync-empty p{margin:0 0 10px}

/* Spara-knapparna i exportdialogen (telefon, savefile.js) */
.e-files{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.e-files[hidden]{display:none}
.modal .e-save{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;width:100%}
.e-save b{font-size:15px}
.e-save span{font-size:12px;opacity:.85}
.e-play{width:100%;max-height:40vh;border-radius:10px;background:#000}

/* ---------- Filmlook-arket (lookpanel.js) ---------- */
.look-modal{max-width:620px}
.mb.lk{display:flex;flex-direction:column;gap:16px}
.mb.lk>*{flex:none}
.lk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.modal .lk-card{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:0 0 10px;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);background:var(--panel2);text-align:left;min-height:0}
.lk-card img,.lk-noimg{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.lk-card b{padding:6px 10px 0;font-size:14px}
.lk-card span{padding:0 10px;font-size:12px;color:var(--dim);line-height:1.3}
.lk-card.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.lk-ctl{display:flex;flex-direction:column;gap:6px}
.lk-ctl[hidden]{display:none}
.lk-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px}
.lk-row span{font-size:13px;font-weight:600}
.lk-row output{font:500 12px var(--mono);color:var(--dim)}
.lk-row input{grid-column:1 / -1;width:100%}
.lk-toggle{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-top:4px;border-radius:14px;background:var(--panel2);border:1px solid var(--border);cursor:pointer}
.lk-toggle input{width:22px;height:22px;flex:none}
.lk-toggle>span{display:flex;flex-direction:column;gap:2px}
.lk-toggle b{font-size:14px}
.lk-toggle span span{font-size:12px;color:var(--dim)}
@media (max-width:700px){ .lk-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .lk-row input{height:40px} }