/* dj.magicevents.me — stile allineato al brand del sito (Cormorant italic +
   Inter, crema/nero/pesca), tokens presi 1:1 da wp-content/themes/
   magicevents-2026/assets/main.css. Decks in trattamento scuro cinematico
   (stesso linguaggio delle sezioni .cine/.svc-hero del sito) per contrasto
   funzionale sui controlli; shell/libreria in crema chiaro come il resto
   del sito. */

:root {
  --accent: #ffac66;
  --accent-dim: #e88a3a;
  --bg: #f4ece2;
  --bg-rgb: 244, 236, 226;
  --ink: #0a0303;
  --ink-rgb: 10, 3, 3;
  --ink-soft: #5b504a;
  --card-bg: #fffdfa;
  --line: rgba(10, 3, 3, 0.1);
  --line-dark: rgba(244, 236, 226, 0.14);
  --serif: "Cormorant", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --radius: 18px;
  /* deck: chiaro in tema light (sabbia calda), scuro in tema dark — mai un
     riquadro buio sopra uno sfondo chiaro */
  --deck-start: #efe0c8;
  --deck-end: #e2cca1;
  --deck-fg: #0a0303;
  --deck-fg-soft: rgba(10, 3, 3, 0.55);
  --deck-fg-soft-2: rgba(10, 3, 3, 0.5);
  --deck-overlay: rgba(10, 3, 3, 0.05);
  --deck-overlay-hover: rgba(10, 3, 3, 0.09);
  --deck-line: rgba(10, 3, 3, 0.14);
  --ctrl-bg: rgba(244, 236, 226, 0.9);
}

:root[data-theme="dark"] {
  --bg: #15100d;
  --bg-rgb: 21, 16, 13;
  --ink: #f4ece2;
  --ink-rgb: 244, 236, 226;
  --ink-soft: #c9bcae;
  --card-bg: #241b14;
  --line: rgba(244, 236, 226, 0.12);
  --line-dark: rgba(244, 236, 226, 0.16);
  --deck-start: #2b2016;
  --deck-end: #1c150f;
  --deck-fg: #f4ece2;
  --deck-fg-soft: rgba(244, 236, 226, 0.55);
  --deck-fg-soft-2: rgba(244, 236, 226, 0.5);
  --deck-overlay: rgba(244, 236, 226, 0.07);
  --deck-overlay-hover: rgba(244, 236, 226, 0.12);
  --deck-line: rgba(244, 236, 226, 0.16);
  --ctrl-bg: rgba(21, 16, 13, 0.86);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
  transition: background 0.25s, color 0.25s;
}

/* ------------------------------------------------------------- controlli (tema + account)
   Stanno nella colonna centrale, in mezzo ai due deck. */

.center-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: auto; /* spinge il crossfader verso il basso */
}
.icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(var(--ink-rgb), 0.14);
  background: var(--ctrl-bg);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 6px 18px rgba(10, 3, 3, 0.1);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.icon-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-2px); }
.icon-btn:active { transform: translateY(0); }
.icon-btn svg { display: block; flex-shrink: 0; }
#themeToggle .icon-moon { display: none; }
[data-theme="dark"] #themeToggle .icon-sun { display: none; }
[data-theme="dark"] #themeToggle .icon-moon { display: block; }

/* ------------------------------------------------------------- pills (CTA) */

.pill {
  border: none;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 22px rgba(255, 172, 102, 0.4);
  transition: background 0.2s, color 0.2s, transform 0.18s, box-shadow 0.2s;
}
.pill:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 3, 3, 0.25); }
.pill:active { transform: translateY(0); }
.pill svg { flex-shrink: 0; }

.pill-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(var(--ink-rgb), 0.18);
  box-shadow: none;
}
.pill-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: 0 10px 24px rgba(10, 3, 3, 0.18); }

/* variante compatta: stessa area di tocco (40px), meno ingombro visivo —
   per toolbar dense come quella della libreria */
.pill-sm { padding: 8px 14px; min-height: 40px; font-size: 0.62rem; gap: 6px; }

/* ------------------------------------------------------------- layout */

.app {
  max-width: 1680px;
  margin: 0 auto;
  padding: 14px 24px 64px; /* i deck partono dall'alto */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.decks {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: stretch;
  flex: none;
  /* height AUTO: i deck si adattano al contenuto (con o senza cue chips) —
     niente piu' taglio in basso. Restano sticky in cima. */
  position: sticky;
  top: 10px;
  z-index: 30;
}

/* Sfondo sfocato dietro/attorno ai deck sticky: il pseudo-elemento si
   estende OLTRE i bordi della sezione (sopra fino al bordo del viewport,
   ai lati fino al padding della .app) così quando la libreria scorre
   sotto non resta nessuna striscia leggibile né in alto né nei gap del
   grid. Solo da desktop in su: da mobile i deck sono statici (non sticky,
   vedi media query sotto), niente da coprire. */
@media (min-width: 781px) {
  .decks::before {
    content: "";
    position: absolute;
    top: -24px;
    left: -24px;
    right: -24px;
    /* la "mensola" sborda sotto i deck e svanisce sulla libreria che scorre */
    bottom: -34px;
    z-index: -1;
    /* velo color-crema del sito: piu' denso in cima, tenue verso il basso —
       da' l'idea di una superficie in rilievo sospesa sopra il contenuto */
    background: linear-gradient(
      to bottom,
      rgba(var(--bg-rgb), 0.9) 0%,
      rgba(var(--bg-rgb), 0.82) 72%,
      rgba(var(--bg-rgb), 0.5) 90%,
      rgba(var(--bg-rgb), 0) 100%
    );
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    /* sfuma ANCHE il blur sul bordo inferiore: niente taglio netto, il vetro
       si dissolve morbido sulla libreria (effetto bordo in rilievo) */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
    border-radius: 0 0 var(--radius) var(--radius);
    pointer-events: none;
  }

  /* Ombra morbida sotto i deck sticky: rinforza la percezione di pannello
     sollevato sopra la libreria (elevation). Separata dal ::before cosi' la
     maschera non la ritaglia. */
  .decks::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -20px;
    height: 26px;
    z-index: -2;
    background: radial-gradient(60% 100% at 50% 0%, rgba(var(--ink-rgb), 0.16), rgba(var(--ink-rgb), 0) 70%);
    pointer-events: none;
  }
}

/* ------------------------------------------------------------- deck (console caldo, non nero) */

.deck {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--deck-start) 0%, var(--deck-end) 100%);
  border: 1px solid var(--deck-line);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  color: var(--deck-fg);
  box-shadow: 0 24px 56px rgba(10, 3, 3, 0.16);
  transition: background 0.25s;
}
.deck-a { border-top: 2px solid var(--accent); }
.deck-b { border-top: 2px solid var(--accent-dim); }

/* Lettera gigante in trasparenza in ALTO A DESTRA del deck — firma visiva
   del canale (nessuna etichetta "Deck A/B" nell'header), dietro tutti i
   controlli (z-index qui sotto li tiene sopra). */
.deck-a::before,
.deck-b::before {
  content: "A";
  position: absolute;
  top: 4px;
  right: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 11rem;
  line-height: 0.85;
  color: var(--deck-fg);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.deck-b::before { content: "B"; }
.deck > * { position: relative; z-index: 1; }

/* Il deck UDIBILE (in play E favorito dal crossfader): niente glow sul bordo
   — "respirano" le barre della waveform con un blink di opacita'/luminosita'.
   Un deck in play ma spostato via col crossfader NON lampeggia, perche' non
   si sente: lampeggia solo quello che sta effettivamente suonando. */
.deck-audible .waveform-canvas { animation: wave-blink 1.5s ease-in-out infinite; }
@keyframes wave-blink {
  0%, 100% { opacity: 1; filter: brightness(1.35); }
  50% { opacity: 0.62; filter: brightness(1.05); }
}

.deck-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.track-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--deck-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nota della traccia caricata (da tag del file e/o nota manuale) — sotto il
   titolo, discreta. */
.track-note {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--deck-fg-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-note[hidden] { display: none; }

.seek-row { display: flex; align-items: center; gap: 10px; }
.time {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  color: var(--deck-fg-soft);
  width: 3.2em;
  text-align: center;
  flex: none;
}
.waveform {
  position: relative;
  flex: 1;
  height: 46px;
  border-radius: 8px;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.waveform-canvas { display: block; width: 100%; height: 100%; }

.transport { display: flex; align-items: center; gap: 10px; }
.btn {
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 46px;
  min-height: 44px;
  border: 1.5px solid var(--deck-line);
  background: var(--deck-overlay);
  color: var(--deck-fg);
  transition: transform 0.15s, background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn-play {
  flex: 1;
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 6px 18px rgba(255, 172, 102, 0.3);
}
.deck-b .btn-play { background: var(--accent-dim); border-color: var(--accent-dim); box-shadow: 0 6px 18px rgba(232, 138, 58, 0.3); }
.btn-play:hover { filter: brightness(1.08); }
.btn-ghost:hover { background: var(--deck-overlay-hover); }
.btn-file svg { display: block; }

.strip { display: flex; gap: 18px; align-items: flex-end; flex: 1; }
.eq { display: flex; gap: 12px; }
.knob { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.knob label, .fader-block label {
  font-family: var(--sans);
  font-size: 0.6rem;
  color: var(--deck-fg-soft-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.fader-block { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-left: auto; }
.fader-block + .fader-block { margin-left: 14px; }
/* riserva sotto i fader senza numero (VOL) lo stesso spazio del readout BPM,
   cosi' i due cursori risultano allineati in altezza */
.fader-block:not(.bpm-block)::after { content: ""; display: block; height: 18px; }
.bpm-val {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--deck-fg);
  cursor: pointer;
  min-height: 18px;
}
.bpm-val:hover { color: var(--accent-dim); text-decoration: underline; }

/* Filtro voce: Full / Karaoke (via la voce) / Voce (via la musica).
   Elaborazione mid/side lato client — vedi wireVoiceFx() in app.js. */
.voice-row { display: flex; gap: 6px; }
.voice-btn {
  flex: 1;
  border-radius: 999px;
  border: 1.5px solid var(--deck-line);
  background: var(--deck-overlay);
  color: var(--deck-fg);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 6px;
  min-height: 36px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.voice-btn:hover { background: var(--deck-overlay-hover); }
.voice-btn.active { background: var(--accent); border-color: var(--accent); color: #0a0303; }
.deck-b .voice-btn.active { background: var(--accent-dim); border-color: var(--accent-dim); }
/* separazione in corso: pulsante che "respira" finche' lo stem non e' pronto */
.voice-btn.working { animation: voice-working 1s ease-in-out infinite; }
@keyframes voice-working { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* stem di qualita' attivo: piccolo indicatore "HD" */
.voice-btn.hd::after {
  content: "HD";
  margin-left: 5px;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  vertical-align: super;
  opacity: 0.8;
}

.pitch-row { display: flex; flex-direction: column; gap: 6px; }
.pitch-row label {
  font-family: var(--sans);
  font-size: 0.65rem;
  color: var(--deck-fg-soft-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: flex;
  justify-content: space-between;
}

/* ------------------------------------------------------------- cue points
   Punti di partenza salvati sul brano: chip cliccabili sotto la waveform
   (salta+parti da li') + marker disegnati sul grafo (vedi drawWaveform). */
.cue-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cue-row[hidden] { display: none; }
.cue-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--deck-line);
  background: var(--deck-overlay);
  color: var(--deck-fg);
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  min-height: 30px;
  transition: background 0.15s, border-color 0.15s;
}
.cue-chip:hover { background: var(--deck-overlay-hover); }
.deck-a .cue-chip { border-left: 3px solid var(--accent); }
.deck-b .cue-chip { border-left: 3px solid var(--accent-dim); }
.cue-chip .cue-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--deck-fg-soft);
}
.cue-chip .cue-x:hover { background: rgba(var(--ink-rgb), 0.12); color: var(--deck-fg); }
.btn-cue-add { flex: none; }

/* ------------------------------------------------------------- center / crossfader */

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 6px;
  min-width: 64px;
}
#crossfader { width: 140px; accent-color: var(--ink); }
.cross-labels {
  display: flex;
  justify-content: space-between;
  width: 140px;
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.btn-cross {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 999px;
  border: 1.5px solid rgba(var(--ink-rgb), 0.16);
  background: var(--accent);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 6px 16px rgba(255, 172, 102, 0.35);
  transition: background 0.2s, color 0.2s, transform 0.15s, opacity 0.2s;
}
.btn-cross:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.btn-cross:active { transform: translateY(0); }
.btn-cross:disabled { opacity: 0.5; cursor: default; transform: none; }

/* ------------------------------------------------------------- range inputs */
/* Controlli nativi ricolorati via accent-color (nessuno skin custom): meno
   bug cross-browser e coerente con la guida "preferisci i controlli di
   sistema, personalizza solo quando serve al brand". */

input[type="range"] { cursor: pointer; }
.deck-a input[type="range"] { accent-color: var(--accent); }
.deck-b input[type="range"] { accent-color: var(--accent-dim); }

input[type="range"][orient="vertical"] {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: slider-vertical;
  width: 5px;
  height: 116px;
}
.fader { width: 5px; height: 116px; }

/* ------------------------------------------------------------- coda */

.queue { margin-top: 24px; }
.queue-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.queue-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.queue-count {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.queue-head .lib-btn { margin-left: auto; }
.queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.queue-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px dashed rgba(var(--ink-rgb), 0.22);
  border-radius: 10px;
  padding: 8px 12px;
}
.queue-pos {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-soft);
  width: 1.6em;
  text-align: right;
  flex: none;
}

/* ------------------------------------------------------------- library */

.library { margin-top: 28px; }

/* Barra unica: breadcrumb + (input nuova cartella, quando aperto) +
   azioni, tutto su UNA riga. Su schermi stretti va a capo. */
.library-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.library-actions { display: flex; flex-wrap: nowrap; gap: 6px; flex: none; margin-left: auto; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  flex: 0 1 auto;
}
.crumb {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px;
  min-height: 24px;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s;
}
/* la prima voce ("Libreria") funge da titolo di sezione: stessa identità
   tipografica dei titoli h2 del sito */
.crumb:first-child {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  min-height: auto;
}
.crumb:first-child.current { font-weight: 500; }
.crumb:hover { color: var(--ink); text-decoration: underline; }
.crumb.current { color: var(--ink); font-weight: 700; cursor: default; text-decoration: none; }
.crumb-sep { color: var(--ink-soft); font-size: 0.72rem; opacity: 0.55; }

/* inline nella barra; [hidden] deve vincere sul display:flex (gotcha cascade) */
.new-folder-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1 1 220px;
  min-width: 0;
  flex-wrap: nowrap;
}
.new-folder-row[hidden] { display: none; }
.new-folder-row input[type="text"] {
  flex: 1;
  min-width: 120px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(var(--ink-rgb), 0.16);
  background: var(--card-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
}
.new-folder-row input[type="text"]:focus { outline: none; border-color: var(--accent); }

.library-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.library-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 2px 10px rgba(10, 3, 3, 0.03);
}
.lib-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lib-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.86rem; color: var(--ink); }
.lib-note {
  display: block;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-size { color: var(--ink-soft); font-size: 0.7rem; flex: none; }
.lib-btn {
  border: 1.5px solid rgba(var(--ink-rgb), 0.14);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  flex: none;
  min-height: 36px;
  transition: all 0.2s;
}

.lib-item.folder { cursor: pointer; }
.lib-icon { flex: none; color: var(--accent); cursor: pointer; }
.lib-item.folder .lib-name { cursor: pointer; font-weight: 600; }
.lib-btn.a:hover { background: var(--accent); border-color: var(--accent); }
.lib-btn.b:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: #fff; }
.lib-btn.q:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.lib-btn.note:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.lib-btn.note.has-note { border-color: var(--accent); color: var(--accent-dim); }
.lib-btn.del { color: #a53a3a; border-color: rgba(165, 58, 58, 0.35); }
.lib-btn.del:hover { background: #a53a3a; border-color: #a53a3a; color: #fff; }
.lib-empty { color: var(--ink-soft); font-family: var(--serif); font-style: italic; font-size: 1rem; padding: 10px 2px; }

/* Editor di nota inline (riga sotto il brano) */
.note-editor { align-items: flex-start; }
.note-editor .note-editor-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.note-file-hint { margin: 0; font-size: 0.68rem; font-style: italic; color: var(--ink-soft); }
.note-editor textarea {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  border-radius: 8px;
  border: 1.5px solid rgba(var(--ink-rgb), 0.16);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  padding: 6px 9px;
}
.note-editor textarea:focus { outline: none; border-color: var(--accent); }
.note-editor .note-editor-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }

/* La libreria intera è anche drop target silenzioso per drag&drop di file
   audio (niente barra visibile, vedi app.js setupLibraryUi): un leggero
   feedback sul bordo della barra durante il trascinamento basta. */
.library-bar.drag-over {
  outline: 1.5px dashed var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Barra di avanzamento upload: appare solo durante un caricamento (file
   singolo o intera cartella), sopra la lista libreria. [hidden] deve
   vincere su display:flex (stesso gotcha di .new-folder-row). */
.upload-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.upload-progress[hidden] { display: none; }
.upload-progress-track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.upload-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.15s ease;
}
/* Modalita' indeterminata: usata finche' non abbiamo un totale byte
   affidabile (lengthComputable=false, capita su alcune reti/proxy) o
   durante l'elaborazione lato server dopo che tutti i byte sono stati
   inviati (scrivere molti file piccoli puo' richiedere qualche secondo) -
   senza questo la barra resta visivamente "ferma" a 0% anche se qualcosa
   sta succedendo. */
.upload-progress-fill.indeterminate {
  width: 35%;
  transition: none;
  animation: upload-indeterminate 1.1s ease-in-out infinite;
}
@keyframes upload-indeterminate {
  0% { left: -35%; }
  100% { left: 100%; }
}
.upload-progress-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  flex: none;
  min-width: 8em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 780px) {
  .decks {
    grid-template-columns: 1fr;
    /* Su mobile i deck sono impilati (A + centro + B): tenerli "sticky"
       coprirebbe l'intero schermo mentre si scorre la libreria. Restano
       fissi solo su schermi larghi dove stanno affiancati. */
    position: static;
    top: auto;
    z-index: auto;
    height: auto;         /* impilati in verticale: niente tetto a metà schermo */
    min-height: 0;
  }
  .center { flex-direction: row; flex-wrap: wrap; padding: 12px 4px; }
  .center-controls { flex-direction: row; width: 100%; justify-content: center; margin-bottom: 0; }
  #crossfader { width: 100%; }
  .cross-labels { width: 100%; }
  .btn-cross { margin-top: 0; }
  .library-actions { flex-wrap: wrap; margin-left: 0; }
  .deck-a::before, .deck-b::before { font-size: 6rem; right: 8px; top: 2px; }
}


/* == bpm+search v1 == */
/* ------------------------------------------------------------- colonna centrale v3
   Tema/account restano in alto; il blocco crossfader + auto-cross sta a META'
   altezza fra i due deck (margini automatici sopra e sotto); in fondo, nello
   spazio liberato, il pulsante di ricerca della libreria. */
.center { justify-content: flex-start; }
.center-controls { margin-bottom: 0; }
.cross-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  margin-bottom: auto;
}
.icon-btn.search-btn { flex: none; }
.icon-btn.active { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ------------------------------------------------------------- ricerca libreria */
.search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 7px 14px;
  border: 1.5px solid rgba(var(--ink-rgb), 0.16);
  border-radius: 999px;
  background: var(--card-bg);
}
.search-row[hidden] { display: none; }
.search-row > svg { flex: none; opacity: 0.55; }
.search-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9rem;
}
.search-row input::-webkit-search-cancel-button { display: none; }
.search-info {
  flex: none;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------------- BPM per traccia */
.lib-bpm {
  flex: none;
  font-family: var(--sans);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.lib-folder {
  display: block;
  font-size: 0.66rem;
  color: var(--ink-soft);
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bpm-orig {
  margin-top: 3px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 1px 8px;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.bpm-orig:hover:not(:disabled) { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.bpm-orig:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 780px) {
  .cross-block { margin: 0; width: 100%; }
  .lib-bpm { display: none; }
}


/* == search overlay v2 == */
/* La ricerca non e' piu' una riga nel flusso della libreria: e' un overlay in
   primo piano. Il pulsante lente della colonna centrale "cresce" fino a
   diventare questa barra (si anima width + left + top da un cerchio di 44px
   alla pillola centrata), e il pulsante sotto sparisce durante la morph. */

.search-backdrop {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(10, 3, 3, 0.06);
  opacity: 0;
  /* SOLO decorativo: senza questo copriva tutta la pagina e si mangiava i
     click sui pulsanti "-> A" / "-> B" / "+ Coda" dei risultati di ricerca. */
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.search-backdrop[hidden] { display: none; }
.search-backdrop.open { opacity: 1; }

.search-row {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border-radius: 999px;
  border: 1.5px solid rgba(var(--ink-rgb), 0.16);
  background: var(--ctrl-bg);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 20px 50px rgba(10, 3, 3, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              left 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              top 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s ease,
              box-shadow 0.3s ease;
}
.search-row[hidden] { display: none; }
.search-row.open { opacity: 1; pointer-events: auto; }

/* Il contenuto compare solo a barra quasi aperta: cosi' sembra davvero che il
   pulsante si allarghi, invece di mostrare testo schiacciato dentro il cerchio. */
.search-row > svg,
.search-row input,
.search-row .search-info,
.search-row .search-x {
  opacity: 0;
  transition: opacity 0.16s ease;
}
.search-row.open > svg,
.search-row.open input,
.search-row.open .search-info,
.search-row.open .search-x {
  opacity: 1;
  transition: opacity 0.2s ease 0.14s;
}
.search-row > svg { flex: none; opacity: 0; color: var(--ink-soft); }
.search-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
}
.search-row input::-webkit-search-cancel-button { display: none; }
.search-x {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 0;
  background: rgba(var(--ink-rgb), 0.08);
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.search-x:hover { background: var(--ink); color: var(--bg); }

/* Il pulsante lente sparisce mentre la barra si apre (effetto morph). */
#searchToggle {
  transition: opacity 0.18s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.2s, color 0.2s, border-color 0.2s;
}
#searchToggle.morphed {
  opacity: 0;
  transform: scale(0.45);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .search-row, #searchToggle, .search-backdrop { transition: opacity 0.15s ease; }
}


/* == bpm strip align v3 == */
/* Prima le colonne dello strip erano allineate in BASSO (align-items:flex-end):
   la colonna BPM, piu' alta delle altre per il readout, spingeva la sua
   etichetta sopra a quella di VOL. Ora sono allineate in ALTO — tutte le
   etichette (High/Mid/Low/BPM/VOL) partono dalla stessa riga — e il fader BPM
   e' accorciato quanto basta perche' la colonna finisca alla stessa altezza
   delle altre pur contenendo il pulsante "orig". */
.strip { align-items: flex-start; }

/* Lo spaziatore che compensava il vecchio readout sotto al fader non serve
   piu': il numero BPM ora sta accanto all'etichetta. */
.fader-block:not(.bpm-block)::after { display: none; }

.bpm-block label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
/* La colonna BPM deve finire ESATTAMENTE dove finiscono EQ e VOL (misurato:
   erano 26px piu' in basso). Recuperati stringendo le spaziature interne (8
   dei 26) e accorciando il fader (i restanti 18). */
.bpm-block { gap: 4px; }
/* NOTA specificita': `input[type="range"][orient="vertical"]` vale (0,2,1) e
   batte `.bpm-block .fader` (0,2,0) — con quel selettore l'altezza non veniva
   MAI applicata. Serve includere l'elemento e l'attributo. */
.bpm-block input.fader[orient="vertical"] { height: 98px; }
.bpm-val {
  min-height: 0;
  font-size: 0.72rem;
  letter-spacing: 0;
}
.bpm-orig { margin-top: 0; }

@media (max-width: 780px) {
  /* Su mobile i deck sono impilati e c'e' spazio: fader BPM un po' piu' lungo. */
  .bpm-block input.fader[orient="vertical"] { height: 108px; }
  .fader, input[type="range"][orient="vertical"] { height: 126px; }
}


/* ── Modalita' ospite ──────────────────────────────────────────────────────
   La console e' pubblica in sola lettura. Chi non ha fatto login vede e usa
   tutto quello che c'e' in libreria, ma non i comandi che la modificano.
   Il backend rifiuta comunque quelle chiamate: questo e' solo il livello UI. */
/* Comandi che modificano la libreria: nascosti agli ospiti. */
body.guest .library-actions,
body.guest .lib-btn.del,
body.guest .lib-btn.note,
body.guest #uploadProgress,
body.guest #newFolderRow,
body.guest [data-requires-auth] { display: none !important; }