/*
 * Marcare documente PR Vest — foaie de stil.
 *
 * Direcția: „registratura românească" — rubrici, coduri, specimen de ștampilă,
 * semne de tipar. Identitatea vizuală ADR Vest: antet tip letterhead alb, cu
 * bandă navy sus (bara superioară a site-ului adrvest.ro), sigla oficială în
 * stânga, eyebrow instituțional deasupra titlului și filetul mozaic sub
 * subtitlu — ecoul punctelor colorate din siglă.
 *
 * Tipografia poartă trei roluri distincte, fiecare cu un motiv:
 *   Archivo         → voce instituțională (titluri, butoane, insigne, cifrele pașilor);
 *   IBM Plex Mono   → orice este un COD citit de om și de mașină (rubrica SMIS,
 *                     dimensiunile fișierelor, eticheta specimenului);
 *   stiva de sistem → proza (paragrafe, etichete, legende) — se citește nativ.
 *
 * Element-semnătură: previzualizarea, prezentată ca un „specimen de marcaj"
 * detașabil — carton alb cu chenar interior punctat și etichetă tipografică,
 * cum arată un specimen de ștampilă depus la dosar.
 *
 * Coralul oficial (#F05B41) este accentul cald, folosit reținut: plăcuțele
 * pașilor (într-o nuanță deschisă, ca să rămână contrast AA cu cifra navy),
 * semnele de tipar și starea de tragere a fișierelor, starea „în lucru".
 * Nicăieri text mic pe coral plin — raportul ar fi 3.35:1.
 */

/* ---------- Tokens ---------- */
:root {
  /* Paleta oficială ADR Vest */
  --navy: #103863;              /* primar: butoane, focus, bandă antet */
  --navy-text: #27344C;         /* titluri și text principal */
  --slate: #43597C;             /* text secundar, etichete, contururi hover */
  --coral: #F05B41;             /* accent cald oficial */

  /* Punctele mozaicului din siglă — DOAR decorativ, fără text deasupra */
  --mozaic-albastru: #0A98D8;
  --mozaic-verde: #2E9F48;
  --mozaic-rosu: #DC3030;
  --mozaic-mov: #806CA0;

  /* Derivate din paletă */
  --navy-hover: #0B2A4A;        /* apăsare/hover pe navy */
  --coral-deschis: #F58270;     /* fond plăcuță pas: 4.94:1 cu --navy-text */
  --coral-contur: #E05336;      /* coral adâncit pentru contururi de stare:
                                   3.20:1 pe --tenta și 3.31:1 pe --cald-fundal,
                                   deci peste pragul WCAG 1.4.11 de 3:1 (coralul
                                   plin rămânea la 2.78:1, respectiv 2.88:1) */
  --tenta: #E4EBF3;             /* navy foarte deschis: insignă, hover contur */
  --tenta-forte: #DDE7F2;       /* notiță */
  --carouri: #E4EAF2;           /* carourile de transparență din previzualizare */

  /* Neutre */
  --fundal: #F4F6F9;
  --alb: #ffffff;
  --rand-fundal: #F7F9FC;       /* rândurile din lista de fișiere */
  --dropzone-fundal: #FBFCFE;
  --linie: #E1E7EF;             /* separatoare, contur card */
  --linie-forte: #8093B0;       /* contur controale (3.13:1, WCAG 1.4.11) */
  --placeholder: #66748C;       /* 4.73:1 pe alb */

  /* Stări */
  --verde-fundal: #E2F3E8;
  --verde-text: #1C6B3A;
  --rosu-fundal: #FBE6E6;
  --rosu-text: #A11B1B;
  --rosu-linie: #D8B4B4;
  --cald-fundal: #FDEAE6;
  --cald-text: #8A2B16;
  --notita-linie: #C4D5EA;

  /* Dezactivat */
  --dezactivat-fundal: #E4E9F0;
  --dezactivat-text: #5A6579;   /* 4.82:1 pe --dezactivat-fundal */
  --dezactivat-linie: #CBD3E0;

  /* Semne de tipar pe dropzone: navy la 45%, coral la interacțiune */
  --crop: rgba(16, 56, 99, .45);
  --crop-activ: rgba(240, 91, 65, .9);
  --punctat: rgba(67, 89, 124, .4);

  --raza: 10px;
  --raza-mica: 8px;
  --umbra: 0 1px 2px rgba(16, 56, 99, .05), 0 10px 24px -14px rgba(16, 56, 99, .18);

  /* Proza: stiva nativă. Titlurile: Archivo. Codurile: IBM Plex Mono. */
  --font: system-ui, "Segoe UI", Arial, sans-serif;
  --font-titlu: "Archivo", system-ui, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--navy-text);
  background: var(--fundal);
}

h1, h2, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; }

/* Elementele comutate din JS prin proprietatea `.hidden`: #btn-zip (`.btn`
   declară `display: inline-flex`), #logo-antet și #preview-stampila (ambele
   `display: block` mai jos). Fără `!important`, un selector de clasă bate
   selectorul de atribut la specificitate egală și elementele ar rămâne
   vizibile. `.notita`, `.eroare` și `#fisiere` nu declară `display`, deci
   pentru ele ar fi fost suficient stilul implicit al browserului. */
[hidden] { display: none !important; }

/* ---------- Antet ---------- */
.antet {
  background: var(--alb);
  border-top: 8px solid var(--navy);
  border-bottom: 1px solid var(--linie);
  padding: 24px 0 26px;
}

.antet-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

#logo-antet {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: center;
  display: block;
  width: auto;
  height: 64px;
  margin-right: 18px;
}

/* Eyebrow de letterhead: cine emite documentul, înaintea titlului. */
.eyebrow {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 6px;
  font-family: var(--font-titlu);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--slate);
}

.antet h1 {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-titlu);
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--navy-text);
}

.antet > .antet-inner > p:not(.eyebrow) {
  grid-column: 2;
  grid-row: 3;
  margin-top: 8px;
  max-width: 60ch;
  font-size: 0.9375rem;
  color: var(--slate);
}

/* Filet mozaic: ecoul punctelor din siglă. Decorativ, deci ascuns de la
   tehnologiile asistive prin faptul că e pseudo-element fără conținut. */
.antet-inner::after {
  content: '';
  grid-column: 2;
  grid-row: 4;
  width: min(420px, 100%);
  height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--mozaic-albastru) 0 25%,
    var(--mozaic-verde) 25% 50%,
    var(--mozaic-rosu) 50% 75%,
    var(--mozaic-mov) 75% 100%);
}

/* ---------- Coloană principală ---------- */
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 26px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------- Card / pas ---------- */
.card {
  background: var(--alb);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  box-shadow: var(--umbra);
  padding: 22px;
}

.card h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-titlu);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--navy);
}

.pas {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--raza-mica);
  background: var(--coral-deschis);
  color: var(--navy-text);
  font-family: var(--font-titlu);
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---------- Rânduri de formular ---------- */
.rand { margin-top: 18px; }

label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

input[type="text"],
select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--navy-text);
  background: var(--alb);
  border: 1px solid var(--linie-forte);
  border-radius: var(--raza-mica);
  padding: 10px 12px;
  transition: border-color .12s ease, box-shadow .12s ease;
}

input[type="text"]:hover,
select:hover { border-color: var(--slate); }

input[type="text"]:focus,
select:focus { border-color: var(--navy); }

/* Rubrica de cod, ca pe un formular oficial: mono, cifre egale, lățime fixă
   cât încap cele 8 cifre ale codului SMIS. Fiind mono, spațierea manuală nu
   mai e necesară — o păstrăm minimă, doar pentru aerisire. */
#smis {
  max-width: 12ch;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 11px 14px;
}

#smis::placeholder {
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--placeholder);
  opacity: 1; /* Firefox aplică implicit opacity .54 */
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23103863' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}

/* Un singur câmp pe rând („Se aplică pe"): poziția marcajului nu mai e o
   opțiune, aplicația o alege singură în zona liberă a paginii. Lățimea e
   plafonată, ca selectorul rămas să nu se întindă pe toată coloana și să
   păstreze ritmul rubricii de cod de deasupra. */
.optiuni {
  display: grid;
  grid-template-columns: minmax(0, 260px);
}

/* ---------- Specimen de marcaj (previzualizarea) ---------- */
/* Cartonul de specimen: chenar exterior plin, chenar interior punctat și
   etichetă tipografică — cum arată un specimen de ștampilă depus la dosar.
   `min-height` rezervă locul imaginii, care pornește ascunsă și apare abia
   după prima generare reușită: fără salt de layout la primul paint. */
.preview {
  position: relative;
  margin-top: 20px;
  padding: 18px;
  /* Lățimea specimenului = lățimea marcajului + gardă: cartonul arată ca o
     fișă detașabilă, nu ca un panou întins pe tot cardul. */
  max-width: 378px;
  min-height: 200px;
  border: 1px solid var(--linie-forte);
  border-radius: var(--raza-mica);
  background: var(--alb);
  /* Coloană flex, nu bloc: între elementele unui container flex marginile NU
     se comasează, iar distanțierul de mai jos poate rezerva exact înălțimea
     imaginii. Ca bloc, marginea etichetei se comasa cu cea a legendei în
     momentul în care imaginea ieșea din flux, și rezervarea ieșea cu 10px
     mai mică. */
  display: flex;
  flex-direction: column;
}

.preview::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--punctat);
  border-radius: 4px;
  pointer-events: none;
}

/* Rezervarea exactă a locului imaginii, cât timp ea e încă ascunsă: un
   distanțier cu padding procentual, care se raportează la LĂȚIMEA cartonului,
   deci ține pasul cu imaginea la orice dimensiune de ecran (108/340 = raportul
   marcajului). Dispare în momentul în care imaginea apare. `min-height` de mai
   sus rămâne ca prag pentru browserele fără `:has()`. */
.preview:has(#preview-stampila[hidden])::after {
  content: '';
  display: block;
  padding-top: 31.47%; /* 321/1020 = raportul exact al marcajului generat */
}

.specimen-eticheta {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Fără chenar propriu: cartonul și chenarul punctat delimitează deja zona, iar
   marcajul își desenează singur bordura navy în PNG. Al treilea chenar era
   redundant, iar unul suficient de deschis ca să nu fie zgomot ajungea oricum
   invizibil (1.24:1). Caroiajul marchează marginea foii. */
.preview img {
  display: block;
  width: 100%;
  max-width: 340px;
  border-radius: 4px;
  /* Carouri deschise: se vede transparența marcajului. */
  background-color: var(--alb);
  background-image:
    linear-gradient(45deg, var(--carouri) 25%, transparent 25%, transparent 75%, var(--carouri) 75%),
    linear-gradient(45deg, var(--carouri) 25%, transparent 25%, transparent 75%, var(--carouri) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* Micro-mișcarea de „ștampilare": o singură apăsare, la fiecare regenerare a
   previzualizării. Nimic altceva din pagină nu se animă. */
@keyframes stampare {
  from { transform: scale(0.96); }
  70% { transform: scale(1.008); }
  to { transform: scale(1); }
}

.preview img.stampat {
  animation: stampare 170ms ease-out 1;
  transform-origin: 20% 50%;
}

.preview figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--slate);
}

/* ---------- Zonă de încărcare ---------- */
/* Semne de tipar (crop marks) în cele patru colțuri, ca pe un bun de tipar:
   opt benzi de fundal, două pe colț. Culoarea vine din --crop, deci starea de
   hover/tragere se schimbă redefinind un singur token.
   ATENȚIE: aici NU se folosește scurtătura `background`, ar șterge benzile. */
.dropzone {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  text-align: center;
  margin-top: 18px;
  padding: 30px 20px;
  border: 1px dashed var(--linie-forte);
  border-radius: var(--raza);
  background-color: var(--dropzone-fundal);
  background-image:
    linear-gradient(var(--crop) 0 0), linear-gradient(var(--crop) 0 0),
    linear-gradient(var(--crop) 0 0), linear-gradient(var(--crop) 0 0),
    linear-gradient(var(--crop) 0 0), linear-gradient(var(--crop) 0 0),
    linear-gradient(var(--crop) 0 0), linear-gradient(var(--crop) 0 0);
  background-repeat: no-repeat;
  background-size:
    14px 2px, 2px 14px,
    14px 2px, 2px 14px,
    14px 2px, 2px 14px,
    14px 2px, 2px 14px;
  background-position:
    9px 9px, 9px 9px,
    calc(100% - 9px) 9px, calc(100% - 9px) 9px,
    9px calc(100% - 9px), 9px calc(100% - 9px),
    calc(100% - 9px) calc(100% - 9px), calc(100% - 9px) calc(100% - 9px);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.dropzone strong {
  font-family: var(--font-titlu);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.dropzone span {
  font-size: 0.875rem;
  color: var(--slate);
}

.dropzone:hover {
  --crop: var(--crop-activ);
  border-color: var(--coral-contur);
  background-color: var(--tenta);
}

.dropzone:hover strong { color: var(--cald-text); }

/* Coralul marchează „ceva e în curs": fișiere trase peste zonă. */
.dropzone.activ {
  --crop: var(--crop-activ);
  border-style: solid;
  border-color: var(--coral-contur);
  background-color: var(--cald-fundal);
}

.dropzone.activ strong { color: var(--cald-text); }

/* ---------- Lista de fișiere ---------- */
.lista {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lista:empty { display: none; }

/* Un rând = o linie de registru: nume | stare | acțiuni. */
.fisier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie-forte);
  border-radius: var(--raza-mica);
  background: var(--rand-fundal);
}

.fisier.stare-lucru { border-left-color: var(--coral); }
.fisier.stare-ok { border-left-color: var(--verde-text); }
.fisier.stare-eroare { border-left-color: var(--rosu-text); }

.fisier-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fisier-nume {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-text);
  overflow-wrap: anywhere;
}

.fisier-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--slate);
}

.fisier-eroare {
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--rosu-text);
  overflow-wrap: anywhere;
}

/* Avertisment reținut, nu eroare: fișierul e marcat și valid, dar pagina nu
   avea nicio zonă liberă. Poartă coralul cald (--cald-text, 8.1:1 pe rând),
   nu roșul de eroare — altfel ar citi ca o procesare eșuată. */
.fisier-atentie {
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--cald-text);
  overflow-wrap: anywhere;
}

/* Insignele au lățime egală, ca să formeze o coloană de stare regulată. */
.insigna {
  justify-self: end;
  min-width: 84px;
  text-align: center;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-titlu);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--tenta);
  color: var(--navy);
}

.stare-pregatit .insigna { background: var(--tenta); color: var(--navy); }
.stare-lucru .insigna { background: var(--cald-fundal); color: var(--cald-text); }
.stare-ok .insigna { background: var(--verde-fundal); color: var(--verde-text); }
.stare-eroare .insigna { background: var(--rosu-fundal); color: var(--rosu-text); }

.fisier-actiuni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fisier-actiuni:empty { display: none; }

/* ---------- Butoane ---------- */
.butoane {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titlu);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 11px 18px;
  border: 1.5px solid var(--navy);
  border-radius: var(--raza-mica);
  background: var(--alb);
  color: var(--navy);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn:hover {
  background: var(--tenta);
  border-color: var(--navy-hover);
}

.btn.primar {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--alb);
}

.btn.primar:hover {
  background: var(--navy-hover);
  border-color: var(--navy-hover);
}

/* Acțiunea principală a unui rând din listă: „Descarcă". */
.btn.mic {
  font-size: 0.8125rem;
  padding: 6px 11px;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--alb);
}

.btn.mic:hover {
  background: var(--navy-hover);
  border-color: var(--navy-hover);
}

.btn.contur {
  background: var(--alb);
  border-color: var(--navy);
  color: var(--navy);
}

.btn.contur:hover {
  background: var(--tenta);
  border-color: var(--navy-hover);
  color: var(--navy);
}

/* După .contur: varianta de eliminare o rescrie (aceeași specificitate). */
.btn.sterge {
  background: var(--alb);
  border-color: var(--rosu-linie);
  color: var(--rosu-text);
}

.btn.sterge:hover {
  background: var(--rosu-fundal);
  border-color: var(--rosu-text);
  color: var(--rosu-text);
}

/* Ultimul în ordine: învinge variantele de mai sus la specificitate egală.
   Textul rămâne la 4.82:1 — dezactivat, dar lizibil. */
.btn:disabled,
.btn:disabled:hover {
  background: var(--dezactivat-fundal);
  border-color: var(--dezactivat-linie);
  color: var(--dezactivat-text);
  cursor: not-allowed;
}

/* ---------- Notițe și erori ---------- */
.notita {
  padding: 12px 14px;
  border: 1px solid var(--notita-linie);
  border-radius: var(--raza-mica);
  background: var(--tenta-forte);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--navy);
}

.eroare {
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rosu-text);
}

/* ---------- Subsol ---------- */
footer {
  flex: 0 0 auto;
  max-width: 780px;
  margin: 0 auto;
  padding: 26px 20px 34px;
  text-align: center;
}

footer p {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--slate);
}

footer p:first-child { font-weight: 600; }

footer p + p {
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* Pe butoanele pline, decalajul lasă să se vadă fundalul alb al cardului
   între buton și inel, deci același inel navy funcționează peste tot. */
.btn.primar:focus-visible,
.btn.mic:focus-visible { outline-offset: 3px; }

/* Browserele fără :focus-visible păstrează inelul implicit. */
@supports not selector(:focus-visible) {
  :focus { outline: 3px solid var(--navy); outline-offset: 2px; }
}

/* ---------- Responsiv ---------- */
/* Sub 700px rândul de fișier se desface pe trei linii. Pragul e dat de rândul
   cel mai plin — nume marcat + insignă + trei butoane: sub această lățime
   coloana numelui scădea la ~140px, adică trei rânduri de text lângă trei
   butoane. Desfăcut, numele are toată lățimea. */
@media (max-width: 700px) {
  .fisier {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .insigna { justify-self: start; }
}

@media (max-width: 560px) {
  /* Sigla trece deasupra eyebrow-ului; antetul rămâne o singură coloană. */
  .antet-inner { grid-template-columns: minmax(0, 1fr); }

  #logo-antet {
    grid-row: 1;
    height: 46px;
    margin: 0 0 14px;
    justify-self: start;
  }

  .eyebrow { grid-row: 2; }
  .antet h1 { grid-row: 3; }
  .antet > .antet-inner > p:not(.eyebrow) { grid-row: 4; }
  .antet-inner::after { grid-row: 5; }

  .eyebrow,
  .antet h1,
  .antet > .antet-inner > p:not(.eyebrow),
  .antet-inner::after { grid-column: 1; }

  .card { padding: 18px 16px; }
}

@media (max-width: 400px) {
  .antet-inner,
  main,
  footer { padding-left: 14px; padding-right: 14px; }

  .card h2 { font-size: 1.0625rem; gap: 10px; }

  .dropzone { padding: 24px 14px; }

  /* Acțiunile principale pe toată lățimea; cele din listă rămân compacte,
     ca „Elimină" să nu arate ca un buton principal. */
  .btn { width: 100%; }

  .btn.mic { width: auto; flex: 0 0 auto; }
}

/* ---------- Mișcare redusă ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Ștampilarea se anulează complet, nu doar se scurtează. */
  .preview img.stampat {
    animation: none !important;
    transform: none !important;
  }
}