/**
 * studio.css — ecranul „Voce și negativ", profudecanto.ro
 *
 * Fișierul vechi avea culorile scrise direct în el (#14171C, Public Sans,
 * Instrument Serif) și de aceea a rămas în paleta veche când s-a schimbat
 * designul site-ului. Acum totul vine din app-tokens.css. Dacă vezi un cod
 * de culoare mai jos, e o greșeală — singurele excepții admise sunt cele
 * două culori de formă de undă, care trebuie să difere vizibil între ele
 * și sunt luate din paleta de brand (magenta pentru voce, cyan pentru negativ).
 *
 * Layoutul: o singură coloană, în trei faze. Vezi blocul FAZE de mai jos —
 * până pe 03.09 toate cele șase secțiuni și coloana de setări stăteau pe
 * ecran de la intrare, aproape toate goale sau cu lacăt.
 *
 * Bucățile de cap (pastila, titlul cu jumătatea în gradient, unda de bare,
 * cardurile cu semn colorat) sunt aceleași ca pe prima pagină a site-ului,
 * rescrise pe tokenurile aplicației: aici nu se încarcă style.css.
 */

/* ═══════════ SCHELET ═══════════ */

#studio-app {
  max-width: var(--app-lat-continut);
  margin: 0 auto;
}

/* ═══════════ FAZE ═══════════
   `data-faza` pe rădăcină spune unde suntem: alegere · lucru · gata.
   `data-faze` pe o secțiune spune în care dintre ele are ce arăta. Fără
   `data-faze`, se vede peste tot (sertarul de detalii, panoul de ecrane
   secundare). Regula e o singură linie, iar JavaScript-ul schimbă un singur
   atribut — nimic nu se poate desincroniza. */

#studio-app[data-faza="alegere"] [data-faze]:not([data-faze~="alegere"]),
#studio-app[data-faza="lucru"]   [data-faze]:not([data-faze~="lucru"]),
#studio-app[data-faza="gata"]    [data-faze]:not([data-faze~="gata"]) {
  display: none;
}

/* ═══════════ CAPUL DE PAGINĂ ═══════════ */

.st-erou {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: center;
  gap: var(--app-sp-6);
  padding-bottom: var(--app-sp-5);
  margin-bottom: var(--app-sp-6);
  border-bottom: 1px solid var(--app-linie);
}

.st-pastila {
  display: inline-block;
  margin: 0 0 var(--app-sp-3);
  padding: var(--app-sp-1) var(--app-sp-3);
  border: 1px solid var(--app-linie-violet);
  border-radius: var(--app-raza-rot);
  font-size: var(--app-tf-mic);
  color: var(--app-lila-text);
}

.st-titlu {
  margin: 0;
  font-family: var(--app-sans);
  font-size: var(--app-tf-titlu);
  font-weight: 700;
  letter-spacing: var(--app-ls-titlu);
  line-height: var(--app-ir-strans);
  color: var(--app-text);
}

/* Jumătatea în gradient, ca în titlul primei pagini. `background-clip: text`
   cere culoarea transparentă, altfel textul acoperă umplerea. */
.st-grad {
  background: var(--app-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.st-subtitlu {
  margin: var(--app-sp-3) 0 0;
  max-width: 42rem;
  color: var(--app-text-2);
  font-size: var(--app-tf-mediu);
  line-height: var(--app-ir-baza);
}

/* Cota rămasă e informația pe care omul o caută primul. Stă sub promisiune,
   nu îngropată într-o coloană de setări. */
.st-cota {
  display: inline-block;
  margin-top: var(--app-sp-4);
  padding: var(--app-sp-2) var(--app-sp-4);
  border: 1px solid var(--app-linie-tare);
  border-radius: var(--app-raza-rot);
  font-size: var(--app-tf-mic);
  color: var(--app-accent);
  white-space: nowrap;
}
.st-cota:empty { display: none; }

/* Unda de bare — același decor ca în hero-ul primei pagini, aceeași formă
   fixă. E `aria-hidden` în JavaScript: nu spune nimic, doar arată că ecranul
   ăsta e despre sunet. */
.st-erou-vizual {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.st-unda {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
  height: 96px;
}
.st-unda i {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: var(--app-grad);
  opacity: 0.55;
}

/* Capul se strânge de îndată ce s-a ales o piesă. Promisiunea a fost citită
   o dată; de acolo încolo, trei rânduri de reclamă deasupra zonei de lucru
   sunt doar drum de derulat — mai ales pe telefon. Rămân numele ecranului și
   cota zilei. */
#studio-app:not([data-faza="alegere"]) .st-erou {
  padding-bottom: var(--app-sp-4);
  margin-bottom: var(--app-sp-4);
}
#studio-app:not([data-faza="alegere"]) .st-pastila,
#studio-app:not([data-faza="alegere"]) .st-subtitlu { display: none; }
#studio-app:not([data-faza="alegere"]) .st-titlu { font-size: var(--app-tf-mare); }
#studio-app:not([data-faza="alegere"]) .st-cota { margin-top: var(--app-sp-3); }
#studio-app:not([data-faza="alegere"]) .st-unda { height: 48px; }

/* ═══════════ CE PRIMEȘTI ═══════════
   Trei carduri în locul celor șase secțiuni goale de dinainte. */

.st-promisiune { margin-bottom: var(--app-sp-6); }

.st-eticheta-brand {
  background: var(--app-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.st-grila-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--app-sp-4);
}

.st-card-p {
  padding: var(--app-sp-5);
  background: var(--app-suprafata);
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza-mare);
}

.st-card-semn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: var(--app-sp-3);
  border-radius: var(--app-raza);
}
.st-card-semn-violet  { color: var(--app-nivel-1); background: rgba(201, 165, 255, 0.14); }
.st-card-semn-magenta { color: var(--app-nivel-2); background: rgba(255, 45, 149, 0.14); }
.st-card-semn-cyan    { color: #00C2FF;           background: rgba(0, 194, 255, 0.14); }

.st-card-titlu {
  margin: 0 0 var(--app-sp-2);
  font-size: var(--app-tf-mediu);
  font-weight: 600;
  color: var(--app-text);
}
.st-card-text {
  margin: 0;
  color: var(--app-text-2);
  font-size: var(--app-tf-baza);
  line-height: var(--app-ir-baza);
}

/* Aceeași notă mică de sub banda de instrumente a primei pagini. */
.st-mic-explicatie {
  margin: var(--app-sp-4) 0 0;
  color: var(--app-text-2);
  font-size: var(--app-tf-mic-2);
  line-height: var(--app-ir-baza);
}

/* ═══════════ BARA PIESEI ALESE ═══════════
   Înlocuiește zona de încărcare de 220px după ce s-a ales ceva. */

.st-piesa-bara {
  display: flex;
  align-items: center;
  gap: var(--app-sp-4);
  padding: var(--app-sp-3) var(--app-sp-4);
  margin-bottom: var(--app-sp-5);
  background: var(--app-suprafata);
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza-mare);
}

.st-piesa-semn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: var(--app-raza-mic);
  color: var(--app-accent);
  background: var(--app-accent-slab);
}

.st-piesa-text { min-width: 0; flex: 1 1 auto; }
.st-piesa-nume {
  margin: 0;
  color: var(--app-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-piesa-meta {
  margin: 2px 0 0;
  color: var(--app-text-3);
  font-size: var(--app-tf-mic);
}
.st-piesa-bara .st-buton { flex: 0 0 auto; }

.st-coloana { display: flex; flex-direction: column; gap: var(--app-sp-6); min-width: 0; }

/* ═══════════ SECȚIUNI ═══════════
   Fără cifre de pas: separarea nu mai se comandă, deci nu mai există o ordine
   de urmat cu degetul. Rămâne titlul, care spune CE e secțiunea, și de pe
   03.09 o propoziție care spune LA CE FOLOSEȘTE — jumătate din titluri erau
   termeni pe care publicul nu-i cunoaște. */

.st-sectiune[hidden] { display: none; }

.st-sectiune-cap {
  display: flex;
  align-items: center;
  gap: var(--app-sp-3);
  margin-bottom: var(--app-sp-2);
}

.st-sectiune-titlu {
  margin: 0;
  font-size: var(--app-tf-mare);
  font-weight: 600;
  color: var(--app-text);
  letter-spacing: var(--app-ls-titlu);
}

.st-sectiune-indiciu {
  margin: 0 0 var(--app-sp-4);
  max-width: 48rem;
  color: var(--app-text-2);
  font-size: var(--app-tf-baza);
  line-height: var(--app-ir-baza);
}

/* ═══════════ CARDURI ═══════════ */

.st-card {
  background: var(--app-suprafata);
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza-mare);
  padding: var(--app-sp-5);
}

.st-eticheta {
  display: block;
  margin: 0 0 var(--app-sp-2);
  font-size: var(--app-tf-mic);
  font-weight: 600;
  letter-spacing: var(--app-ls-mono);
  text-transform: uppercase;
  color: var(--app-text-3);
}

/* Starea goală se SCRIE. Un spațiu alb în locul ei arată ca o defecțiune. */
.st-gol { margin: 0; color: var(--app-text-3); font-size: var(--app-tf-baza); }
.st-nume-fisier { margin: 0; color: var(--app-text); font-weight: 500; word-break: break-word; }

/* Grila numără PERECHI (`.st-data`), nu celule: vezi adaugaData(). */
.st-date {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--app-sp-3) var(--app-sp-4);
  margin: var(--app-sp-4) 0 0;
}
.st-date dt {
  font-size: var(--app-tf-mic);
  font-weight: 600;
  letter-spacing: var(--app-ls-mono);
  text-transform: uppercase;
  color: var(--app-text-3);
  margin-bottom: var(--app-sp-1);
}
.st-date dd {
  margin: 0;
  font-family: var(--app-mono);
  font-variant-numeric: tabular-nums;
  color: var(--app-text);
}

/* ═══════════ ÎNCĂRCARE ═══════════ */

.st-incarcare {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--app-sp-4);
}

/* Zona de drop e singura cale de încărcare, deci trebuie să arate ca o
   țintă, nu ca o decorație: chenar întrerupt, mare, cu stare de hover. */
.st-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--app-sp-2);
  min-height: 220px;
  padding: var(--app-sp-5);
  text-align: center;
  cursor: pointer;
  border: 1.5px dashed var(--app-linie-tare);
  border-radius: var(--app-raza-mare);
  background: var(--app-suprafata);
  transition: border-color var(--app-tranzitie), background var(--app-tranzitie);
}
.st-drop:hover,
.st-drop:focus-visible,
.st-drop.peste {
  border-color: var(--app-accent);
  background: var(--app-accent-slab);
}

.st-drop-semn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--app-raza-rot);
  background: var(--app-accent-slab);
  color: var(--app-accent);
  font-size: 20px;
}
.st-drop-titlu { margin: 0; color: var(--app-text); font-weight: 500; }
.st-drop-sau   { margin: 0; color: var(--app-text-3); font-size: var(--app-tf-mic); }
.st-drop-info  { margin: var(--app-sp-2) 0 0; color: var(--app-text-3); font-size: var(--app-tf-mic); }

.st-ascuns {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}

.st-camp { display: block; margin-top: var(--app-sp-4); }

/* Cererea de cont, în cardul piesei (05.09.2026). A luat locul căsuței de
   email: aia cerea o adresă fără să dea nimic, asta spune ce primești și te
   duce acolo. Marginea colorată o desparte de datele piesei fără s-o facă să
   pară o eroare — nu e o greșeală a omului, e pasul următor. */
.st-cere-cont {
  margin-top: var(--app-sp-4);
  padding: var(--app-sp-4);
  border: 1px solid var(--app-linie-tare);
  border-left: 3px solid var(--app-accent);
  border-radius: var(--app-raza);
  background: var(--app-fundal);
}
.st-cere-cont-titlu {
  margin: 0;
  font: 600 var(--app-tf-baza) var(--app-sans);
  color: var(--app-text);
}
.st-cere-cont-actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-sp-3);
  margin-top: var(--app-sp-4);
}
/* Pe telefon butoanele se întind: două ținte de 44px una lângă alta, pe 375px,
   ajung sub prag și se ratează. Măsurat, nu presupus. */
@media (max-width: 480px) {
  .st-cere-cont-actiuni > .st-buton { flex: 1 1 100%; }
}

.st-input {
  width: 100%;
  min-height: var(--app-atingere);
  padding: var(--app-sp-3);
  background: var(--app-fundal);
  color: var(--app-text);
  border: 1px solid var(--app-linie-tare);
  border-radius: var(--app-raza);
  font: 400 var(--app-tf-baza) var(--app-sans);
}
.st-input:focus { border-color: var(--app-accent); outline: none; }
.st-input:disabled { opacity: 0.45; cursor: not-allowed; }

/* ═══════════ BUTOANE ═══════════ */

.st-rand { display: flex; flex-wrap: wrap; gap: var(--app-sp-3); align-items: center; }

.st-buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--app-atingere);
  padding: var(--app-sp-3) var(--app-sp-5);
  border: 1px solid transparent;
  border-radius: var(--app-raza);
  font: 600 var(--app-tf-baza) var(--app-sans);
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--app-tranzitie), transform var(--app-tranzitie),
              border-color var(--app-tranzitie);
}
.st-buton-1 {
  background: var(--app-grad);
  color: var(--app-grad-contra);
  box-shadow: var(--app-glow);
}
.st-buton-1:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.st-buton-2 {
  background: transparent;
  color: var(--app-text);
  border-color: var(--app-linie-tare);
}
.st-buton-2:hover { border-color: var(--app-accent); }
.st-buton:disabled {
  opacity: 0.4; cursor: not-allowed; box-shadow: none; filter: none; transform: none;
}
/* `display: inline-flex` de mai sus bate regula implicită a atributului
   `hidden`, deci un buton ascuns din JavaScript rămânea pe ecran. Butonul de
   reluare chiar se ascunde, deci regula asta nu e decor. */
.st-buton[hidden] { display: none; }

/* Inactiv ≠ ascuns. Ecranul arata TOT de la intrare — inclusiv ce vei putea
   face dupa ce separi piesa. Un buton lipsa nu spune ce urmeaza; unul stins, da. */
.st-inactiv {
  opacity: 0.4;
  pointer-events: none;
  box-shadow: none;
  filter: none;
  transform: none;
}

.st-mic {
  min-height: 32px;
  padding: var(--app-sp-1) var(--app-sp-3);
  background: transparent;
  color: var(--app-text-2);
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza-mic);
  font: 500 var(--app-tf-mic) var(--app-sans);
  text-decoration: none;
  cursor: pointer;
}
.st-mic:hover { border-color: var(--app-accent); color: var(--app-text); }
.st-mic.activ {
  border-color: transparent;
  background: var(--app-accent);
  color: var(--app-accent-contra);
}

.st-eroare {
  margin: var(--app-sp-3) 0 0;
  color: var(--app-acum);
  font-size: var(--app-tf-mic-2);
}
.st-eroare[hidden] { display: none; }

/* ═══════════ PROGRES ═══════════
   Separarea e cea mai lungă așteptare din tot site-ul (minute, nu secunde), și
   e singurul lucru care se întâmplă pe ecran cât ține. Deci nu e o informație
   de sprijin: cifra are mărime de cifră-erou și stă pe mijloc, iar sub ea unda
   se vede din capătul mesei. */

.st-progres { margin-top: var(--app-sp-5); }
.st-progres[hidden] { display: none; }

/* Cifra pe mijloc, singură pe rândul ei, cu etapa și ceasul dedesubt (cererea
   userului, 04.09). Înainte era în stânga, iar etapa și ceasul erau împinse în
   dreapta, cu un gol lat între ele. */
.st-progres-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--app-sp-2);
  margin-bottom: var(--app-sp-4);
  text-align: center;
}

/* Mono + tabular-nums: la trecerea de la 9 la 10 lățimea nu are voie să salte,
   altfel cifra țopăie lateral la fiecare zece procente. */
.st-procent {
  display: flex;
  align-items: baseline;
  font-family: var(--app-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--app-text);
}
.st-procent-cifra { display: inline-block; font-size: 3.5rem; }
.st-procent-semn  { margin-left: 4px; font-size: 1.35rem; color: var(--app-text-2); }

/* Animația e MICĂ și pornește doar când cifra chiar se schimbă — vezi
   scrieProcentul(). Un puls continuu, pe un ecran ținut deschis șase minute,
   ar fi devenit zgomot, nu semn de viață. */
@keyframes st-procent-puls {
  0%   { transform: translateY(0);    opacity: 1; }
  40%  { transform: translateY(-3px); opacity: 0.65; }
  100% { transform: translateY(0);    opacity: 1; }
}
.st-procent-cifra.st-puls { animation: st-procent-puls 320ms ease-out; }

/* Etapa și ceasul, pe un rând sub cifră, despărțite de un punct. */
.st-progres-linie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-sp-3);
  flex-wrap: wrap;
}
.st-progres-etapa { margin: 0; }
.st-progres-linie .st-progres-etapa::after {
  content: "·";
  margin-left: var(--app-sp-3);
  color: var(--app-text-3);
}
.st-progres-timp {
  margin: 0;
  font-family: var(--app-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--app-tf-mic-2);
  color: var(--app-text-2);
}

/* ═══════════ UNDA CARE LUCREAZĂ ═══════════
   Cererea userului, 04.09: sub procent, o animație care merge tot timpul.
   Bara dreaptă a ieșit — unda o înlocuiește ȘI ca bară de progres: barele
   aprinse sunt cele de până la procentul curent (clasa `plin`, pusă din
   aprindeVal()), restul stau stinse. Vezi construiesteVal() pentru culori,
   înălțimi și decalaje, toate calculate o dată, în JavaScript. */

.st-val {
  display: flex;
  align-items: center;      /* barele cresc în ambele sensuri, ca o undă audio,
                               nu în sus dintr-o podea ca un egalizator */
  justify-content: space-between;
  gap: 2px;
  height: 84px;
  padding: 0 2px;
}

.st-val i {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  /* 0,16 făcea barele nestinse aproape invizibile pe fundalul închis — unda
     părea că se termină brusc la procentul curent, în loc să arate cât mai e.
     La 0,28 jgheabul se citește, dar partea aprinsă rămâne clar despărțită. */
  opacity: 0.28;
  transform-origin: center;
  animation: st-val-salt var(--st-val-d, 900ms) ease-in-out var(--st-val-t, 0ms) infinite;
  transition: opacity 400ms linear;
}
.st-val i.plin { opacity: 1; }

@keyframes st-val-salt {
  0%, 100% { transform: scaleY(0.30); }
  50%      { transform: scaleY(1); }
}

/* Cele trei etape, sub bară. O bară spune CÂT, nu spune CE — iar aici omul se
   uită la ea minute întregi. Bulina are trei stări, iar starea „acum" are și
   al doilea semnal, textul îngroșat, nu doar culoarea (daltonism). */

.st-etape {
  list-style: none;
  margin: var(--app-sp-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--app-sp-3);
}

/* Culoarea de bază e --app-text-2, nu --app-text-3: etapele sunt informație,
   iar text-3 cade sub 4.5:1 pe suprafață. Ierarhia o face bulina, nu contrastul
   textului — și tot ea e al doilea semnal, pentru cine nu distinge culorile. */
.st-etapa {
  display: flex;
  align-items: center;
  gap: var(--app-sp-3);
  color: var(--app-text-2);
  font-size: var(--app-tf-baza);
}

.st-etapa-semn {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--app-linie-tare);
}

.st-etapa.gata .st-etapa-semn {
  border-color: var(--app-tinta);
  background: var(--app-tinta);
}

.st-etapa.acum { color: var(--app-text); font-weight: 600; }
.st-etapa.acum .st-etapa-semn {
  border-color: var(--app-accent-tare);
  background: var(--app-accent-tare);
  animation: st-etapa-puls 1.4s ease-in-out infinite;
}
@keyframes st-etapa-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 149, 0.55); }
  60%      { box-shadow: 0 0 0 6px rgba(255, 45, 149, 0); }
}

.st-progres-nota {
  margin: var(--app-sp-4) 0 0;
  color: var(--app-text-2);
  font-size: var(--app-tf-mic-2);
  line-height: var(--app-ir-baza);
}

/* ═══════════ PISTE ═══════════ */

.st-pista {
  background: var(--app-suprafata);
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza-mare);
  padding: var(--app-sp-4);
  margin-bottom: var(--app-sp-3);
}
.st-pista-cap { display: flex; align-items: center; gap: var(--app-sp-2); }
.st-pista-nume {
  margin-right: auto;
  font-weight: 600;
  color: var(--app-text);
  font-size: var(--app-tf-baza);
}

.st-forma {
  display: block;
  width: 100%;
  height: 64px;
  margin: var(--app-sp-3) 0;
  background: var(--app-fundal);
  border-radius: var(--app-raza-mic);
}

.st-pista-jos { display: flex; align-items: center; gap: var(--app-sp-3); }
.st-pista-jos .st-eticheta { margin: 0; }

.st-volum { flex: 1; min-width: 80px; accent-color: var(--app-accent-tare); height: 32px; }
.st-volum:disabled { opacity: 0.4; }
.st-descarca { margin-left: auto; }

.st-transport {
  display: flex;
  align-items: center;
  gap: var(--app-sp-3);
  padding: var(--app-sp-3) var(--app-sp-4);
  background: var(--app-suprafata-2);
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza-mare);
}
.st-reda {
  width: var(--app-atingere);
  height: var(--app-atingere);
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--app-raza-rot);
  background: var(--app-grad);
  color: var(--app-grad-contra);
  font-size: 14px;
  cursor: pointer;
}
.st-reda:disabled { opacity: 0.35; cursor: not-allowed; }
.st-timp {
  font-family: var(--app-mono);
  font-variant-numeric: tabular-nums;
  color: var(--app-text-2);
  font-size: var(--app-tf-mic-2);
}
.st-info {
  margin: var(--app-sp-4) 0 0;
  font-family: var(--app-mono);
  font-size: var(--app-tf-mic);
  letter-spacing: 0.06em;
  color: var(--app-text-2);
}

/* Avertismentul de ștergere nu e mărunțiș juridic, e o promisiune de produs.
   Stă lângă butoanele de descărcare, unde omul decide, nu în subsol. */
.st-atentie {
  margin: var(--app-sp-4) 0 0;
  padding: var(--app-sp-3) var(--app-sp-4);
  border-left: 3px solid var(--app-accent-tare);
  border-radius: 0 var(--app-raza) var(--app-raza) 0;
  background: var(--app-accent-slab);
  color: var(--app-text-2);
  font-size: var(--app-tf-mic-2);
  line-height: var(--app-ir-baza);
}

/* ═══════════ COLOANA DE SETĂRI ═══════════ */

/* ═══════════ TRANSPUNERE ȘI TEMPO ═══════════

   Două comenzi, nu una singură cu opțiuni: transpunerea și tempo-ul sunt
   lucruri diferite pentru cel care cântă, iar motorul le face independent.
   Fiecare are cifra ei (mono, e o măsurătoare) și, dedesubt, propoziția care
   spune ce NU se schimbă — singura întrebare pe care o are omul înainte să
   apese.

   Pași cu minus/plus, nu cursoare: valorile sunt discrete (semitonuri întregi,
   trepte de 5%), iar pe telefon un cursor nu poate fi pus exact pe „−2".
   Țintele sunt de 44px, ca peste tot în aplicație. */

.st-redare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--app-sp-4);
  margin-bottom: var(--app-sp-4);
}
.st-redare .st-grup {
  margin-bottom: 0;
  padding: var(--app-sp-4);
  background: var(--app-suprafata);
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza-mare);
}

.st-pas {
  display: flex;
  align-items: center;
  gap: var(--app-sp-3);
  margin-top: var(--app-sp-2);
}
.st-pas-buton {
  width: var(--app-atingere);
  height: var(--app-atingere);
  flex: 0 0 auto;
  border: 1px solid var(--app-linie-tare);
  border-radius: var(--app-raza-mic);
  background: transparent;
  color: var(--app-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.st-pas-buton:hover:not(:disabled) { border-color: var(--app-accent); }
.st-pas-buton:disabled { opacity: 0.35; cursor: not-allowed; }

.st-pas-valoare {
  flex: 1;
  text-align: center;
  font-family: var(--app-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--app-tf-mic-2);
  color: var(--app-text);
}

.st-pas-masura {
  margin: var(--app-sp-3) 0 0;
  min-height: 1em;
  font-family: var(--app-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  font-size: var(--app-tf-mic);
  color: var(--app-text-2);
}
.st-pas-nota {
  margin: var(--app-sp-1) 0 0;
  color: var(--app-text-3);
  font-size: var(--app-tf-mic);
  line-height: var(--app-ir-baza);
}

/* Înainte de separare secțiunea se vede, dar stinsă: omul află că poate
   transpune ÎNAINTE să încarce piesa, nu după. */
.st-sectiune-stinsa .st-redare { opacity: 0.5; }

/* ═══════════ SERTARUL DE DETALII ═══════════
   Fostă coloană de 320px, permanentă pe ecran. Conținutul e neatins; s-a
   schimbat doar cine îl cere. */

.st-detalii {
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza-mare);
  background: var(--app-suprafata);
}

.st-detalii-cap {
  display: flex;
  align-items: center;
  gap: var(--app-sp-2);
  min-height: var(--app-atingere);
  padding: var(--app-sp-3) var(--app-sp-5);
  cursor: pointer;
  color: var(--app-text-2);
  font-size: var(--app-tf-baza);
  font-weight: 500;
  list-style: none;
}
/* Săgeata implicită a lui <summary> diferă de la browser la browser; o
   desenăm noi, ca să arate la fel peste tot. */
.st-detalii-cap::-webkit-details-marker { display: none; }
.st-detalii-cap::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--app-tranzitie);
}
.st-detalii[open] .st-detalii-cap::after { transform: rotate(-135deg); }
.st-detalii-cap:hover { color: var(--app-text); }

.st-detalii-corp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;   /* fără el, cardul scurt se întinde cât cel lung */
  gap: var(--app-sp-4);
  padding: 0 var(--app-sp-5) var(--app-sp-5);
}
/* Cardurile dinăuntru stau pe suprafața sertarului, deci coboară cu o treaptă
   ca să rămână distincte de el. */
.st-detalii-corp .st-card { background: var(--app-fundal); }

/* ═══════════ REGLAJELE DIN SERTAR ═══════════ */

.st-grup { margin-bottom: var(--app-sp-4); }
.st-grup:last-of-type { margin-bottom: 0; }

/* Blocat ≠ invizibil. Se vede ce urmează, dar nu se poate atinge. */
.st-blocat { opacity: 0.5; }
.st-blocat * { cursor: not-allowed; }

.st-segmente {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--app-fundal);
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza);
}
.st-segment {
  flex: 1;
  min-height: 32px;
  border: 0;
  border-radius: var(--app-raza-mic);
  background: transparent;
  color: var(--app-text-2);
  font: 500 var(--app-tf-mic) var(--app-sans);
  cursor: pointer;
}
.st-segment.activ { background: var(--app-suprafata-2); color: var(--app-text); }
.st-segment:disabled { cursor: not-allowed; }

.st-linie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--app-sp-3);
  padding: var(--app-sp-2) 0;
  color: var(--app-text);
  font-size: var(--app-tf-mic-2);
}
.st-linie + .st-linie { border-top: 1px solid var(--app-linie); }
.st-linie-stinsa { color: var(--app-text-3); }

.st-valoare {
  font-family: var(--app-mono);
  font-variant-numeric: tabular-nums;
  color: var(--app-text-2);
  font-size: var(--app-tf-mic);
}

.st-bifa { color: var(--app-tinta); }

/* „În lucru" NU arată ca un lacăt de plată: nu e ceva ce se cumpără, e ceva
   ce nu există încă. Un abonat pe treapta cea mai mare n-are ce face cu el. */
.st-in-lucru {
  padding: 2px var(--app-sp-2);
  border: 1px dashed var(--app-linie-tare);
  border-radius: var(--app-raza-mic);
  font-size: var(--app-tf-mic);
  color: var(--app-text-3);
  white-space: nowrap;
}

.st-lacat {
  margin: var(--app-sp-3) 0 0;
  color: var(--app-text-3);
  font-size: var(--app-tf-mic);
  line-height: var(--app-ir-baza);
}

/* ═══════════ PANOUL ECRANELOR SECUNDARE ═══════════ */

.st-panou {
  position: relative;
  margin-top: var(--app-sp-5);
  padding: var(--app-sp-5);
  background: var(--app-suprafata);
  border: 1px solid var(--app-accent);
  border-radius: var(--app-raza-mare);
}
.st-panou[hidden] { display: none; }

.st-inchide {
  position: absolute;
  top: var(--app-sp-3);
  right: var(--app-sp-3);
  width: var(--app-atingere);
  height: var(--app-atingere);
  border: 1px solid var(--app-linie-tare);
  border-radius: var(--app-raza-rot);
  background: transparent;
  color: var(--app-text-2);
  font-size: 18px;
  cursor: pointer;
}
.st-inchide:hover { border-color: var(--app-accent); color: var(--app-text); }

/* ═══════════════════════════════════════════════════════════
   CLASELE VECHI — calibrarea latenței și înregistrarea

   Fluxul de înregistrare nu a fost rescris; desenează acum în panou, dar
   folosește în continuare numele de clase vechi. Le stilez aici, pe aceiași
   tokeni, ca să nu apară nestilizat. Când se rescrie și el, secțiunea asta
   dispare.
   ═══════════════════════════════════════════════════════════ */

.studio-titlu {
  margin: 0 0 var(--app-sp-2);
  font-family: var(--app-sans);
  font-size: var(--app-tf-mare);
  font-weight: 700;
  letter-spacing: var(--app-ls-titlu);
  color: var(--app-text);
}
.studio-sub { margin: 0 0 var(--app-sp-5); color: var(--app-text-2); line-height: var(--app-ir-baza); }

.studio-eticheta,
.studio-info,
.mono {
  font-family: var(--app-mono);
  font-size: var(--app-tf-mic);
  letter-spacing: var(--app-ls-mono);
  text-transform: uppercase;
  color: var(--app-text-3);
}
.studio-info { text-transform: none; letter-spacing: 0.06em; }

.studio-eroare { color: var(--app-acum); font-size: var(--app-tf-mic-2); }

.studio-controale { margin: var(--app-sp-5) 0; }
.studio-controale input[type="range"] {
  width: 100%; accent-color: var(--app-accent-tare); height: 32px;
}

.studio-forma {
  display: block; width: 100%; height: 60px;
  background: var(--app-fundal); border-radius: var(--app-raza-mic);
}

.studio-input {
  width: 100%; min-height: var(--app-atingere); padding: var(--app-sp-3);
  background: var(--app-fundal); color: var(--app-text);
  border: 1px solid var(--app-linie-tare); border-radius: var(--app-raza);
  font: 400 var(--app-tf-baza) var(--app-sans);
  margin-bottom: var(--app-sp-3);
}

.numar-erou {
  font-family: var(--app-sans);
  font-size: var(--app-tf-cifra);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--app-text);
  line-height: 1;
}

.buton-mare {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: var(--app-sp-3) var(--app-sp-6);
  border: 0; border-radius: var(--app-raza);
  background: var(--app-grad); color: var(--app-grad-contra);
  font: 600 var(--app-tf-mediu) var(--app-sans);
  cursor: pointer; box-shadow: var(--app-glow);
}
.buton-mare:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.secundar {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--app-atingere); padding: var(--app-sp-2) var(--app-sp-4);
  background: transparent; color: var(--app-text);
  border: 1px solid var(--app-linie-tare); border-radius: var(--app-raza);
  font: 500 var(--app-tf-baza) var(--app-sans); cursor: pointer;
}
.secundar:hover { border-color: var(--app-accent); }

/* ═══════════ TELEFON ═══════════
   Traficul vine din TikTok, deci telefonul nu e cazul particular, e cazul. */

@media (max-width: 900px) {
  .st-erou { grid-template-columns: 1fr; gap: var(--app-sp-4); }
  /* Unda trece sub text și se subțiază: pe lat n-are unde să stea, iar pe
     înalt ar fura jumătate din primul ecran. */
  .st-unda { height: 56px; }
  .st-incarcare { grid-template-columns: 1fr; }

  /* Cardurile se culcă pe orizontală: în trei coloane suprapuse ocupau vreo
     600px, adică zona de încărcare — singurul lucru de apăsat pe ecran —
     ajungea la două degete distanță de fund. Semnul trece în stânga, textul
     scade cu o treaptă, iar cele trei intră în ~300px. */
  .st-grila-3 { gap: var(--app-sp-3); }
  .st-card-p {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--app-sp-4);
    align-items: start;
    padding: var(--app-sp-4);
  }
  .st-card-semn  { grid-row: 1 / span 2; margin-bottom: 0; }
  .st-card-titlu { grid-column: 2; margin-bottom: var(--app-sp-1); }
  .st-card-text  { grid-column: 2; font-size: var(--app-tf-mic-2); line-height: 1.55; }

  /* Pe telefon nu există tragere de fișiere. Rândul rămâne pe desktop, unde
     chiar descrie ceva; aici era un gest imposibil scris sub buton. */
  .st-drop .st-drop-sau { display: none; }

  /* „Solo", „Mute" și segmentele de calitate au 32px pe desktop, unde se apasă
     cu mausul. Pe degete asta e sub ținta de 44px a sistemului — măsurat în
     browser la 398px, nu dedus dintr-o sumă de padding. Segmentele sunt stinse
     pe treptele gratuite, dar pe treapta Studio chiar se apasă. */
  .st-mic,
  .st-segment { min-height: var(--app-atingere); }
}

@media (max-width: 520px) {
  .st-titlu { font-size: 1.75rem; }
  .st-subtitlu { font-size: var(--app-tf-baza); }
  .st-sectiune-titlu { font-size: var(--app-tf-mediu); }
  .st-cota { margin-left: 0; }
  .st-rand > .st-buton { flex: 1 1 auto; }
  .st-drop { min-height: 180px; padding: var(--app-sp-4); }
  .st-drop .st-buton { width: 100%; }
  .st-pista-jos { flex-wrap: wrap; }
  .st-descarca { margin-left: 0; }
  .st-procent-cifra { font-size: 2.75rem; }
  /* Unda scade, dar rămâne mult mai groasă decât bara de 16px de dinainte.
     La 375px cele 64 de bare ies de ~3px fiecare — încă se disting. */
  .st-val { height: 62px; gap: 1px; }
  /* Numele piesei și cifrele ei rămân pe un rând, butonul coboară pe al
     doilea: la 375px cele trei alături lăsau numelui vreo opt caractere. */
  .st-piesa-bara { flex-wrap: wrap; }
  .st-piesa-text { flex: 1 1 60%; }
  .st-piesa-bara .st-buton { width: 100%; }
  .st-detalii-cap, .st-detalii-corp { padding-left: var(--app-sp-4); padding-right: var(--app-sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .st-buton-1:hover:not(:disabled) { transform: none; }
  /* Forma rămâne, mișcarea nu: informația e în valoare, nu în animație.
     Unda stă atunci la înălțimile ei de bază, tot aprinsă până la procentul
     curent — deci cine cere mai puțină mișcare pierde animația, nu progresul. */
  .st-procent-cifra.st-puls { animation: none; }
  .st-val i { animation: none; transition: none; }
  .st-etapa.acum .st-etapa-semn { animation: none; }
}

/* Sarituri de 5 secunde. Aceeasi tinta de atingere ca redarea (44px, regula
   sistemului de design), dar secundare vizual: in transport ramane un singur
   buton plin, cel de redare. Eticheta e MONO fiindca sunt secunde — o masuratoare,
   nu un cuvant. */
.st-sari {
  width: var(--app-atingere);
  height: var(--app-atingere);
  flex: 0 0 auto;
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza-rot);
  background: transparent;
  color: var(--app-text-2);
  font-family: var(--app-mono);
  font-size: var(--app-tf-mic-2);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.st-sari:hover:not(:disabled) { border-color: var(--app-accent); color: var(--app-text); }
.st-sari:disabled { opacity: 0.35; cursor: not-allowed; }

/* Forma de unda e si bara de progres: primeste clicul cu care sari in piesa.
   `touch-action: none` — altfel pe telefon gestul e inghitit de derulare. */
.st-forma { cursor: pointer; touch-action: none; }

/* Piesa dintr-un link YouTube — DOAR asezare, zero culori proprii: campul si
   butonul poarta clasele care exista deja (.st-input, .st-buton, .st-drop-info,
   .st-drop-sau), deci raman legate de paleta, nu de fisierul asta. */
.st-sursa { display: flex; flex-direction: column; gap: 1rem; }

.st-link-rand { display: flex; gap: .5rem; flex-wrap: wrap; }
/* `min-width: 0` — fara el, campul refuza sa se stranga sub latimea lui
   implicita si impinge butonul afara din ecran la 375px. */
.st-link-rand .st-input { flex: 1 1 12rem; min-width: 0; }
/* 44px, ca toate tintele de atingere din sistem. `.st-buton-2` e un MODIFICATOR:
   folosit singur, tinta scade la 21px. */
.st-link-rand .st-buton { min-height: 44px; flex: 0 0 auto; }

/* ═══════════ VERSURI ȘI TELEPROMPTER ═══════════
   Trei linii: cea trecută stinsă, cea curentă mare, cea următoare palidă.
   Mai mult de trei ar cere ochiului să caute; mai puțin nu spune ce urmează. */
.st-tp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--app-sp-2);
  min-height: 152px;
  padding: var(--app-sp-4);
  background: var(--app-suprafata-2);
  border: 1px solid var(--app-linie);
  border-radius: var(--app-raza-mare);
  text-align: center;
}
.st-tp-l { line-height: 1.35; }
.st-tp-trecut { font-size: var(--app-tf-baza); color: var(--app-text-3); }
/* Linia curentă e la `mare`, nu la `mediu`: se citește cântând, de la un metru
   de laptop, nu de aproape ca restul interfeței. */
.st-tp-acum { font-size: var(--app-tf-mare); font-weight: 600; color: var(--app-text); }
.st-tp-urmator { font-size: var(--app-tf-baza); color: var(--app-text-2); }
/* Fără depărtare artificială: spațiul dintre cuvinte e un spațiu adevărat, pus
   de `scrieLinie`, ca linia să se citească și să se copieze ca text. */
.st-tp-c { display: inline-block; }

/* Cuvântul deja cântat rămâne în accent; cel curent se umple de la stânga la
   dreapta. Umplerea e un gradient tăiat pe literă — dacă browserul nu știe
   `background-clip: text`, cuvântul rămâne pur și simplu în accent, adică tot
   corect, doar fără mișcare. */
.st-tp-cantat { color: var(--app-accent); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  /* DOUĂ straturi, nu unul, și literele TRANSPARENTE.
     Prima variantă avea doar gradientul de accent și `background-clip: text`,
     dar literele rămâneau vopsite normal — deci acopereau complet fundalul, iar
     umplerea se calcula corect și nu se vedea niciodată. De aici raportul
     „textul nu are highlight".
     Stratul de deasupra e accentul și crește cu cântatul; cel de dedesubt e
     culoarea obișnuită a textului, pe toată lățimea, ca partea încă necântată
     să rămână citibilă. Fără el, restul cuvântului ar fi invizibil. */
  .st-tp-acum-c {
    background-image:
      linear-gradient(var(--app-accent), var(--app-accent)),
      linear-gradient(var(--app-text), var(--app-text));
    background-repeat: no-repeat;
    background-size: 0 100%, 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.st-tp:fullscreen, .st-tp-mare {
  min-height: 100vh;
  padding: var(--app-sp-5);
  background: var(--app-fundal);
}
.st-tp:fullscreen .st-tp-acum, .st-tp-mare .st-tp-acum { font-size: var(--app-tf-cifra); }

/* Editorul e un REGIM al aceluiași panou, nu alt ecran: altfel ai fi ascultat
   într-un loc și ai fi scris în altul. */
.st-tp-editor {
  display: flex;
  flex-direction: column;
  gap: var(--app-sp-2);
  max-height: 340px;
  overflow-y: auto;
}
.st-tp-rand { display: flex; align-items: center; gap: var(--app-sp-3); }
.st-tp-ceas {
  flex: 0 0 64px;
  min-height: var(--app-atingere);
  padding: 0;
  background: none;
  border: 0;
  color: var(--app-accent);
  font-family: var(--app-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--app-tf-mic);
  text-align: left;
  cursor: pointer;
}
.st-tp-camp {
  flex: 1 1 auto;
  min-height: var(--app-atingere);
  padding: var(--app-sp-2) var(--app-sp-3);
  background: var(--app-fundal);
  color: var(--app-text);
  border: 1px solid var(--app-linie-tare);
  border-radius: var(--app-raza);
  font: 400 var(--app-tf-baza) var(--app-sans);
}
.st-tp-camp:focus { outline: none; border-color: var(--app-accent); }

@media (max-width: 640px) {
  .st-tp { min-height: 128px; padding: var(--app-sp-3); }
  .st-tp-acum { font-size: var(--app-tf-mediu); }
  .st-tp-ceas { flex-basis: 56px; }
}