/* Mobile-first deliberat: se foloseste de pe telefon, cu WhatsApp deschis in
   paralel. Desktop-ul e cazul secundar, nu invers.

   Trei straturi de adancime, si asta e toata ideea temei:
     --fundal  pagina        (cel mai inchis in light, cel mai inchis in dark)
     --card    panoul/formul (ridicat peste pagina)
     --camp    campul        (adancitura din panou)
   Un camp NU are voie sa aiba culoarea paginii - asa erau invizibile inainte. */
:root{
  --fundal:#e9ecf2; --card:#fff; --camp:#f5f7fb; --camp-focus:#fff;
  --text:#15181d; --slab:#5f6875;
  --linie:#d3d9e3; --linie-camp:#b9c2d0; --linie-tare:#c2cad6;
  --accent:#7d5f2b; --accent-viu:#9a763a; --accent-text:#fff;
  --inel:color-mix(in srgb,var(--accent) 28%,transparent);
  --ok:#1f6b43; --rau:#a52121;
  --umbra:0 1px 2px rgba(16,24,40,.05),0 8px 24px -8px rgba(16,24,40,.12);
  --umbra-tare:0 2px 4px rgba(16,24,40,.06),0 14px 38px -12px rgba(16,24,40,.20);
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --fundal:#0e1014; --card:#191c22; --camp:#101318; --camp-focus:#141820;
    --text:#eef0f4; --slab:#98a1b0;
    --linie:#2a2f38; --linie-camp:#3a414d; --linie-tare:#454d5a;
    --accent:#d3aa55; --accent-viu:#e2bc6c; --accent-text:#15120a;
    --ok:#5fc48d; --rau:#f2837f;
    --umbra:0 1px 2px rgba(0,0,0,.5),0 10px 30px -10px rgba(0,0,0,.6);
    --umbra-tare:0 2px 6px rgba(0,0,0,.55),0 18px 46px -14px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundal);color:var(--text);
  font:16px/1.55 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.card:focus-visible{outline:2px solid var(--accent-viu);
  outline-offset:2px}
.wrap{max-width:920px;margin:0 auto;padding:16px 16px 72px}

/* ------------------------------------------------------------------- bara */
header.bara{display:flex;align-items:center;gap:14px;padding:13px 16px;
  border-bottom:1px solid var(--linie);
  background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  position:sticky;top:0;z-index:10}
header.bara .marca{font-weight:680;letter-spacing:-.015em;text-decoration:none}
header.bara .spatiu{flex:1}
header.bara a.mic{font-size:14px;color:var(--slab);text-decoration:none;
  padding:5px 2px;border-radius:8px}
header.bara a.mic:hover{color:var(--text)}
header.bara a.cine{font-weight:600;color:var(--text)}

/* ------------------------------------------------------------------ titluri */
h1{font-size:26px;letter-spacing:-.025em;margin:22px 0 6px;font-weight:700}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--slab);margin:30px 0 12px;font-weight:700;
  display:flex;align-items:center;gap:9px}
h2::before{content:"";width:3px;height:14px;border-radius:2px;
  background:var(--accent);flex:none}
p.sub{color:var(--slab);margin:0 0 20px;max-width:62ch}

/* -------------------------------------------------------------------- carduri */
.grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}
.card{display:block;background:var(--card);border:1px solid var(--linie);
  border-radius:var(--r);padding:15px 17px;text-decoration:none;
  box-shadow:var(--umbra);
  transition:transform .12s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{border-color:var(--linie-tare);box-shadow:var(--umbra-tare);
  transform:translateY(-1px)}
.card:active{transform:scale(.995)}
.card .nume{font-weight:650;margin-bottom:3px}
.card .nota{font-size:13.5px;color:var(--slab);line-height:1.45}

/* --------------------------------------------------------------- formularul
   Formularul devine PANOU: fundal --card peste pagina --fundal. Fara asta,
   campurile pluteau direct pe pagina si nu se vedea unde incepe formularul.
   `:has()` filtreaza formularele care sunt doar un buton (ex. „trimite la
   gravat") - alea n-au ce cauta intr-o cutie. `.rand` sunt formularele in linie
   din tabelul de conturi. */
form:not(.rand):has(input:not([type=hidden]),select,textarea){
  background:var(--card);border:1px solid var(--linie);border-radius:18px;
  padding:6px 18px 20px;box-shadow:var(--umbra);margin-top:18px}
@media(max-width:480px){
  form:not(.rand):has(input:not([type=hidden]),select,textarea){
    padding:4px 14px 18px;border-radius:16px}
}
/* Blocurile care se ascund/arata (verso, facturare) nu primesc panou propriu. */
form .incadrare,form #bl_text,form #bl_poza,form #bl_fact{background:none}

label{display:block;font-weight:650;font-size:14px;margin:18px 0 7px;
  letter-spacing:-.005em}

/* Toate tipurile de camp, nu doar text/password - `email` si `tel` erau
   nestilizate si ieseau cu aspectul brut al browserului. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
select,textarea{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--linie-camp);border-radius:11px;
  background:var(--camp);color:var(--text);font:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
input:hover:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select:hover,textarea:hover{border-color:var(--linie-tare)}
input:focus:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select:focus,textarea:focus{
  outline:none;border-color:var(--accent-viu);background:var(--camp-focus);
  box-shadow:0 0 0 3.5px var(--inel)}
::placeholder{color:var(--slab);opacity:.72}
textarea{min-height:80px;resize:vertical;line-height:1.5}

select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--slab) 50%),
    linear-gradient(135deg,var(--slab) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:focus{background-color:var(--camp-focus)}

input[type=file]{width:100%;padding:16px 14px;
  border:1.5px dashed var(--linie-camp);border-radius:11px;
  background:var(--camp);color:var(--slab);font:inherit;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease}
input[type=file]:hover{border-color:var(--accent-viu);
  background:color-mix(in srgb,var(--accent) 6%,var(--camp))}
input[type=file]::file-selector-button{
  margin-right:12px;padding:8px 14px;border:1px solid var(--linie-camp);
  border-radius:9px;background:var(--card);color:var(--text);
  font:600 14px/1 inherit;cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--accent-viu)}

input[type=checkbox],input[type=radio]{accent-color:var(--accent-viu);
  width:18px;height:18px;cursor:pointer}
input[type=range]{accent-color:var(--accent-viu)}

.ajutor{font-size:13.5px;color:var(--slab);margin-top:7px;line-height:1.45}

/* -------------------------------------------------------------------- butoane */
button,.buton{display:inline-block;width:100%;padding:14px 18px;border:0;
  border-radius:12px;background:var(--accent);color:var(--accent-text);
  font:650 16px/1 inherit;text-align:center;text-decoration:none;cursor:pointer;
  margin-top:24px;letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(16,24,40,.12);
  transition:background-color .15s ease,transform .1s ease,box-shadow .15s ease}
button:hover,.buton:hover{background:var(--accent-viu);
  box-shadow:0 2px 10px -2px color-mix(in srgb,var(--accent) 55%,transparent)}
button:active,.buton:active{transform:translateY(1px)}
.buton.sec,button.sec{background:var(--card);color:var(--text);
  border:1.5px solid var(--linie-camp);font-weight:600;margin-top:10px;
  box-shadow:none}
.buton.sec:hover,button.sec:hover{background:var(--camp);
  border-color:var(--linie-tare);box-shadow:none}
button[disabled]{opacity:.55;cursor:progress;transform:none}
button[disabled]:hover{background:var(--accent)}

/* ------------------------------------------------------------------- mesaje */
.eroare{background:color-mix(in srgb,var(--rau) 11%,var(--card));
  border:1px solid color-mix(in srgb,var(--rau) 45%,transparent);
  color:var(--rau);border-left:4px solid var(--rau);
  padding:12px 15px;border-radius:11px;margin:16px 0;font-size:14.5px;
  font-weight:500}
.reusit{background:color-mix(in srgb,var(--ok) 11%,var(--card));
  border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);
  color:var(--ok);border-left:4px solid var(--ok);
  padding:12px 15px;border-radius:11px;margin:16px 0;font-size:14.5px;
  font-weight:500}

/* ------------------------------------------------------------- rezultate */
.stiva{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){.stiva{grid-template-columns:1fr 1fr}}
figure{margin:0;background:var(--card);border:1px solid var(--linie);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--umbra)}
figure img{display:block;width:100%;height:auto;background:#fff}
figcaption{padding:11px 14px;font-size:13.5px;color:var(--slab);
  border-top:1px solid var(--linie)}

.fisiere{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fisiere a{padding:9px 14px;border:1px solid var(--linie-camp);border-radius:999px;
  font-size:14px;text-decoration:none;background:var(--card);font-weight:550;
  transition:border-color .15s ease,background-color .15s ease}
.fisiere a:hover{border-color:var(--accent-viu);
  background:color-mix(in srgb,var(--accent) 8%,var(--card))}

/* ------------------------------------------------------------------ tabele */
.scroll{overflow-x:auto;background:var(--card);border:1px solid var(--linie);
  border-radius:var(--r);box-shadow:var(--umbra);margin-top:12px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--linie)}
tr:last-child td{border-bottom:0}
th{color:var(--slab);font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;background:color-mix(in srgb,var(--fundal) 55%,var(--card))}
tbody tr:hover td,table tr:hover td{background:color-mix(in srgb,var(--fundal) 30%,transparent)}

.eticheta{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12.5px;
  font-weight:650;background:color-mix(in srgb,var(--slab) 16%,transparent);
  color:var(--slab);border:1px solid color-mix(in srgb,var(--slab) 25%,transparent)}
.eticheta.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.eticheta.rau{background:color-mix(in srgb,var(--rau) 14%,transparent);color:var(--rau);
  border-color:color-mix(in srgb,var(--rau) 35%,transparent)}

/* ------------------------------------------------------------- incadrarea
   Caseta ARE raportul panoului si nu se schimba; poza se misca inauntrul ei.
   Asa ce vede omul in chenar e exact ce taie serverul - daca s-ar desena in
   schimb un dreptunghi peste poza intreaga, ar trebui sa se potriveasca doua
   geometrii in loc de una. */
.incadrare{margin-top:12px}
.incadrare .cadru{position:relative;overflow:hidden;width:100%;
  border:1.5px solid var(--linie-camp);border-radius:12px;background:#0a0a0c;
  touch-action:none;cursor:grab;user-select:none;box-shadow:var(--umbra)}
.incadrare .cadru:active{cursor:grabbing}
.incadrare .cadru img{position:absolute;top:0;left:0;max-width:none;
  display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.incadrare .randza{display:flex;align-items:center;gap:11px;margin-top:10px}
/* `display:flex` bate regula implicita a browserului pentru [hidden]: fara
   randurile astea, cadrul si cursoarele raman vizibile la tipurile
   segmentate, unde tocmai le-am stins din JS. Prins doar in browser. */
.incadrare .randza[hidden],.incadrare .cadru[hidden],
.incadrare .ajutor[hidden]{display:none}
#bl_schimb{display:flex;align-items:center;gap:11px;margin-top:10px;flex-wrap:wrap}
#bl_schimb[hidden]{display:none}
.oglinda[aria-pressed=true]{border-color:var(--accent-viu);color:var(--accent-viu)}
.incadrare .randza span{font-size:13px;color:var(--slab);white-space:nowrap;
  min-width:52px;font-weight:600}
.incadrare input[type=range]{flex:1;accent-color:var(--accent-viu)}

/* --------------------------------------------------------- reglajele fine
   Sunt intr-un <details> inchis: pentru cele mai multe poze implicitul e bun,
   iar sase cursoare deschise pe fiecare panou ar face formularul sa arate ca un
   panou de mixaj. Cine are nevoie de ele stie ca le are.

   Previzualizarea sta SUS, deasupra cursoarelor, nu sub: cand e dedesubt, ea
   iese din ecran exact in momentul in care se trage de cursor. */
.reglaje{margin-top:12px;border:1px solid var(--linie);border-radius:12px;
  background:var(--camp);padding:0 13px}
.reglaje[open]{padding-bottom:13px}
/* Pe pagina lucrarii blocul e mereu deschis: acolo nu e un detaliu optional al
   unui formular lung, e motivul pentru care tehnicul intra in pagina. */
.panou-reg{padding:13px}
.panou-reg h3{margin:0 0 10px;font-size:15px}
.rand-butoane{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rand-butoane .buton{margin:0;padding:8px 13px;font-size:13.5px;width:auto}
/* Pastila „activă" apare si in tabelul de versiuni, in afara blocului de
   reglaje - de aia regula de culoare nu poate sta doar sub `.reglaje`. */
.pastila{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--accent);color:var(--accent-text);margin-left:7px}
.reglaje summary{cursor:pointer;padding:11px 0;font-weight:650;font-size:14px;
  list-style-position:inside;user-select:none}
.reglaje .randza{display:flex;align-items:center;gap:11px;margin-top:10px;
  flex-wrap:wrap}
.reglaje .randza span{font-size:13px;color:var(--slab);white-space:nowrap;
  min-width:104px;font-weight:600}
.reglaje input[type=range]{flex:1;min-width:120px;accent-color:var(--accent-viu)}
/* Cifra e cu latime fixa si font tabular: fara ele, eticheta danseaza la
   fiecare miscare de cursor si se citeste mai greu decat daca ar lipsi. */
.reglaje .randza b{font-size:13px;font-variant-numeric:tabular-nums;
  min-width:52px;text-align:right;color:var(--slab);font-weight:600}
.reglaje .pastila{font-size:11.5px;font-weight:700;padding:2px 8px;
  border-radius:999px;background:var(--accent);color:var(--accent-text);
  margin-left:7px;vertical-align:1px}
.reglaje .rg-mesaj{margin-top:0;flex:1;min-width:120px}
.linie-bifa{display:flex;align-items:center;gap:9px;font-size:13.5px;
  color:var(--slab);margin-top:11px;cursor:pointer;font-weight:600}
.linie-bifa input{width:auto;margin:0;flex:none}

.previz{display:flex;gap:11px;margin-top:4px;flex-wrap:wrap}
.previz figure{margin:0;flex:1;min-width:min(100%,240px)}
/* Fundal deschis, nu inchis ca la cadrul de incadrare: artwork-ul e negru pe
   ALB, iar pe fundal negru marginea alba a piesei ar parea o rama desenata. */
.previz img{display:block;width:100%;border-radius:10px;background:#fff;
  border:1.5px solid var(--linie-camp);box-shadow:var(--umbra)}
.previz figcaption{font-size:12.5px;color:var(--slab);margin-top:5px;
  text-align:center;font-weight:600}

/* Pe telefon eticheta trece DEASUPRA cursorului, in loc sa se inghesuie langa
   el: la 375 px, eticheta + cursor + cifra nu incap pe un rand, iar rupturile
   automate lasau cursorul singur pe linia a doua, fara sa se mai vada al carui
   reglaj e. Cifra ramane pe rand cu eticheta, unde e citibila. */
@media (max-width:520px){
  .reglaje .randza{flex-wrap:wrap;gap:6px 11px}
  .reglaje .randza span{min-width:0;flex:1}
  .reglaje .randza b{min-width:0}
  /* `order` mutat pe cursor, nu pe cifra: cursorul e singurul care trebuie sa
     ajunga pe randul urmator, iar eticheta si cifra raman in ordinea din DOM.
     Fara asta, cursorul rupe randul si impinge cifra pe a treia linie, departe
     de reglajul al carui numar e. */
  .reglaje .randza input[type=range]{flex:1 0 100%;min-width:0;order:1}
}

/* ------------------------------------------------- autentificare si conturi */
.autentificare{max-width:420px;margin:24px auto 0}
.autentificare h1{text-align:center;margin-top:0}
.autentificare p.sub{text-align:center}
label.bifa{display:flex;align-items:center;gap:10px;font-weight:500;
  margin-top:16px;cursor:pointer}
label.bifa input{width:auto;margin:0;flex:none}

form.rand{display:flex;gap:7px;align-items:center;margin:0 0 7px;
  background:none;border:0;padding:0;box-shadow:none}
form.rand input,form.rand select{width:auto;min-width:0;flex:1;padding:8px 10px;
  border-radius:9px;font-size:14px;border-width:1px}
form.rand select{padding-right:32px;background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px)}
button.mic{padding:8px 13px;font-size:13.5px;margin:0;width:auto;white-space:nowrap;
  border-radius:9px}
button.mic.sec{background:var(--card);color:var(--text);
  border:1px solid var(--linie-camp)}
td form{margin:0;background:none;border:0;padding:0;box-shadow:none}
input.copiaza{width:100%;margin-top:9px;padding:10px 12px;border-radius:9px;
  border:1.5px solid var(--linie-camp);background:var(--camp);color:var(--text);
  font:inherit;font-size:13px;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}

/* Camp gresit, marcat pe loc - fara reload, ca sa nu se piarda fisierele alese */
.camp-rau{border-color:var(--rau) !important;
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--rau) 20%,transparent) !important}
.eroare-camp{color:var(--rau);font-size:13.5px;margin-top:7px;font-weight:650}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}


/* Ghidul „care model pe ce poza". Inchis implicit: cine stie ce alege nu-l
   deschide niciodata, cine nu stie il are la un click, fara sa iasa din pagina. */
.ghid-fundal { margin: 6px 0 10px; font-size: .86rem; }
.ghid-fundal summary { cursor: pointer; color: var(--slab); padding: 4px 0; }
.ghid-fundal summary:hover { color: var(--text, inherit); }
.ghid-fundal table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.ghid-fundal td { padding: 4px 8px 4px 0; vertical-align: top; border-top: 1px solid var(--linie, rgba(128,128,128,.25)); }
.ghid-fundal .gf-nume { white-space: nowrap; font-weight: 600; }
.ghid-fundal .gf-pentru { color: var(--slab); }
.ghid-fundal .gf-nota { margin-top: 8px; color: var(--slab); font-style: italic; }
@media (max-width: 560px) {
  .ghid-fundal .gf-nume { white-space: normal; }
  .ghid-fundal td { display: block; padding-right: 0; }
  .ghid-fundal .gf-pentru { border-top: 0; padding-top: 0; }
}

/* Pensula de reparat masca de fundal. Doua panze suprapuse: poza dedesubt,
   tusele deasupra. `touch-action: none` e obligatoriu - fara el, pe telefon
   tragerea cu degetul deruleaza pagina in loc sa picteze, iar `pointermove`
   nu mai vine deloc dupa primul pixel. */
.panza-pensula { position: relative; margin: .6rem 0; line-height: 0; }
.panza-pensula canvas { width: 100%; height: auto; border-radius: 6px; }
.panza-pensula .pv-pensula {
  position: absolute; inset: 0; cursor: crosshair; touch-action: none;
  /* Transparenta stă AICI, pe toata panza, nu in fiecare tusa: altfel tusele
     care se suprapun se aduna si ies pete. */
  opacity: .5;
}
.pensula .randza span { min-width: 5.5rem; }