/* ContID - stiluri globale (fundatia partajata).
   Variabile (:root), reset, tipografie, layout, componente comune si paginile publice.
   Stilurile paginilor de autentificare stau in auth.css.
   Stilurile fiecarui modul vor sta in app/modules/<nume>/<nume>.css */

/* --- Variabile (design tokens) --- */
:root {
  /* Culori */
  --culoare-primara: #333777;
  /* ⚠️⚠️ Pana pe 5 Sep 2026 aici scria `#1d4ed8` — un albastru VIU din paleta veche, care facea butonul
     MAI LUMINOS la trecerea cu mausul (luminanta 0,048 -> 0,107), nu mai inchis cum e randuiala. Acum e
     o inchidere a chiar culorii aplicatiei, deci urmeaza orice culoare s-ar alege. Rezerva de aici e
     REZULTATUL formulei, nu valoarea veche: asa, browserele fara `color-mix` arata la fel cu celelalte. */
  --culoare-primara-hover: #2b2f65;
  --culoare-text: #22557a;
  /* ⚠️ Închis cu o idee pe 6 Sep 2026 (de la #6b7280): pe rândul ATINS cu mausul dădea 4,42:1 — cu opt
     sutimi sub prag, adică tocmai în clipa în care omul citește rândul. Ochiul nu vede schimbarea;
     socoteala, da (4,69:1). ⚠️ E o valoare IMPLICITĂ: administratorul o poate schimba oricând. */
  --culoare-text-secundar: #666e7c;
  /* Mai stins decat textul secundar. Pentru ce e SUGESTIE, nu continut: textul de indrumare din campuri
     (`placeholder`). ⚠️ Nu se foloseste pentru text care trebuie citit — contrastul lui e sub pragul
     cerut de accesibilitate, tocmai fiindca e menit sa se stearga in fundal. */
  --culoare-text-slab: #9ca3af;
  --culoare-fundal: #f8fafc;
  --culoare-suprafata: #ffffff;
  --culoare-bordura: #e5e7eb;
  --culoare-succes: #16a34a;
  --culoare-eroare: #dc2626;

  /* ── Culorile CALCULATE din cele de sus (pasul 3a, 5 Sep 2026) ────────────────────────────────
     ⚠️⚠️ DE CE EXISTA. Pana acum nuantele palide erau scrise de mana: `#eff3ff` la butonul sters,
     `#eef2ff` la campuri, `#eff6ff` la mesajele de informare. Toate erau derivate dintr-un albastru
     VIU (#2563eb) ramas dintr-o paleta mai veche — nu din `--culoare-primara`, care e bleumarinul
     stins de mai sus. Adica in vitrina traiau DOUA albastruri, iar nimeni n-a bagat de seama fiindca
     nuantele palide sunt discrete. Legate acum de jeton, ele urmeaza culoarea aleasa: cand
     administratorul va schimba culoarea aplicatiei, se schimba si starile o data cu ea.
     📌 O stare NU primeste rand propriu in ecranul administratorului (hotararea userului, 5 Sep): e o
     variatie a aceleiasi culori, nu o alegere de sine statatoare.
     ⚠️ Valorile de aici sunt REZERVELE, pentru browserele care nu stiu `color-mix`. Cele adevarate se
     pun mai jos, in blocul `@supports`. */
  --culoare-pe-plin: #ffffff;          /* litera de pe butoanele plino-colorate */
  /* ── TREPTELE CERNELII (pasul E2, 6 Sep 2026, cererea userului) ────────────────────────────────
     ⚠️⚠️ „Să putem selecta culori diferite pe anumite trepte, nu pe toată aplicația." Culoarea
     aplicației e cerneală în 163 de locuri; patru dintre ele au acum rândul lor în ecranul
     administratorului, iar restul rămân pe ea.
     ⚠️⚠️ IMPLICITUL E CHIAR CULOAREA APLICAȚIEI, nu o valoare scrisă alături. Deci NIMIC nu se mișcă
     până când administratorul nu pune o culoare pe treapta aceea — iar dacă el schimbă culoarea
     aplicației, treptele neatinse merg cu ea, ca până acum. O valoare scrisă aici ar fi fost a doua
     părere, care s-ar fi despărțit de prima la prima alegere.
     ⚠️ Nu au pereche în tema întunecată, și e dinadins: fiind aliasuri, ele urmează orice ar fi
     `--culoare-primara` în tema de față. Un rând în plus acolo ar fi înghețat treapta pe întuneric. */
  --culoare-buton-gol: var(--culoare-primara);      /* litera de pe butonul cu chenar */
  --culoare-selector: var(--culoare-primara);       /* anii, perioada, registrul, filele de secțiune */
  --culoare-legatura: var(--culoare-primara);       /* legăturile din text */
  --culoare-titlu-card: var(--culoare-primara);     /* titlurile cardurilor */
  /* ⚠️⚠️ CU CE se amesteca nuantele calculate. In tema clara e albul suprafetelor; in cea intunecata
     devine chiar culoarea cardului — altfel „spalarea palida" a culorii aplicatiei ar iesi aproape ALBA
     pe fond inchis, adica exact pe dos. Iar `--culoare-apasat` spune INCOTRO merge apasarea: pe lumina
     se inchide (spre negru), pe intuneric se deschide (spre alb) — altfel butonul apasat ar disparea. */
  --culoare-apasat: #000;
  /* ⚠️ Chihlimbarul de „ia seama" NU e in paleta pe care o alege administratorul: e un INTELES, ca
     felurile benzii de mentenanta (hotararea userului, 5 Sep 2026). Are insa nevoie de o pereche
     intunecata, altfel avertismentele ar ramane luminoase pe fond inchis. */
  --culoare-atentie: #b45309;
  --culoare-atentie-stins: #f6eae1;    /* ⚠️ socotit, nu ales: 12% chihlimbar peste suprafață */
  --culoare-atentie-tare: #873e07;
  /* Cerneala INCHISA pe fundalurile palide de stare (mesajul verde, mesajul rosu). ⚠️ Culoarea de baza
     e prea deschisa acolo: verdele #16a34a pe #dcfce7 da 2,8:1 — sub orice prag. */
  --culoare-succes-tare: #117a38;
  --culoare-eroare-tare: #a51d1d;
  /* Fundalul randului atins cu mausul: o spalare de cerneala peste suprafata. ⚠️ Scris asa, nu ca gri
     fix, merge in amandoua temele — pe intuneric iese un bleumarin mai deschis, nu un gri luminos. */
  --culoare-atins: #f2f5f7;            /* ⚠️ socotit, nu ales: 6% cerneală peste suprafață */
  --culoare-primara-stins: #efeff4;    /* spalare palida a culorii aplicatiei */
  --culoare-primara-stins-tare: #e7e7ef;
  --culoare-primara-inel: rgba(51, 55, 119, .15);   /* inelul campului selectat */
  --culoare-eroare-stins: #fdf2f2;
  --culoare-eroare-hover: #bb2020;     /* rosul, inchis, la trecerea cu mausul */
  --culoare-succes-stins: #eff9f2;
  --culoare-succes-hover: #138b3f;     /* verdele, inchis, la trecerea cu mausul */
  /* ⚠️⚠️ TREAPTA DE CHENAR (6 Sep 2026, pasul C0). Pana acum, un chenar palid si spalarea de sub el
     cadeau pe ACELASI jeton — deci chenarul se topea in fundal si cutia ramanea fara contur (asa au
     patit `.banda-parola` si `.dialog__veghe` la curatenia shell-ului). O treapta la 28% e destul cat
     sa se vada (1,26-1,46:1 peste spalare, masurat in amandoua temele) si prea putin cat sa tipe. */
  --culoare-primara-margine: #c6c7d9;
  --culoare-succes-margine: #bee5cc;
  --culoare-eroare-margine: #f5c2c2;
  --culoare-atentie-margine: #eacfba;
  /* ⚠️ Al patrulea semnal, langa verde/rosu/chihlimbar. ⚠️⚠️ E numit dupa CULOARE, nu dupa inteles,
     fiindca poarta trei: arhiva unei firme, stornarea unei facturi si eticheta de mesaj. Un nume ca
     `--culoare-storno` ar fi mintit in doua locuri din trei.
     Nu primeste rand in ecranul administratorului (e un inteles, ca si chihlimbarul), dar are nevoie de
     pereche intunecata: movul inchis pe bleumarin inchis nu s-ar mai vedea deloc. */
  --culoare-mov: #6d28d9;
  --culoare-mov-stins: #ede5fa;
  /* Cerneala de pe un buton plin, STINSA: linia subtire dintre doua jumatati de buton, un strop de
     lumina peste o banda colorata. ⚠️ Scrisa `rgba(255,255,255,.25)` ar fi pierit pe intuneric, unde
     butonul e deschis si cerneala lui e inchisa. */
  --culoare-pe-plin-stins: rgba(255, 255, 255, .25);
  /* Cardurile „de sticla": suprafata care lasa fundalul sa se ghiceasca prin ea. ⚠️ Nu e
     `--culoare-suprafata` cu alta parere — e ANUME strvezie, iar pe intuneric limpezimea se face cu
     alb PUTIN, nu cu alb mult: .62 din tema clara ar fi dat un card aproape luminos. */
  --culoare-sticla: rgba(255, 255, 255, .62);

  /* Spatiere */
  --spatiu-mic: 8px;
  --spatiu-mediu: 16px;
  --spatiu-mare: 32px;

  /* Forme */
  --raza: 10px;
  --umbra: 0 1px 3px rgba(0, 0, 0, 0.1);
  --umbra-card: 0 4px 16px rgba(0, 0, 0, 0.06);

  /* Layout */
  --latime-container: 1080px;

  /* Tipografie */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ⚠️⚠️ PAZA. Aici s-ar fi putut naste EXACT defectul reparat in dimineata de 5 Sep 2026: o declaratie
   care cuprinde `var()` e socotita buna la citire si abia la calcul se dovedeste nevalida — iar atunci
   proprietatea NU cade pe declaratia de dinaintea ei, ci pe valoarea INITIALA. Adica, pe un browser
   care nu stie `color-mix`, `background: color-mix(in srgb, var(--culoare-primara) 8%, #fff)` n-ar fi
   lasat rezerva sa lucreze, ci ar fi facut fundalul TRANSPARENT. Fara niciun semn.
   De aceea intrebarea se pune cu `@supports`, pe o valoare FARA `var()`: browserele care nu stiu
   `color-mix` nici nu ajung sa vada randurile de mai jos si raman cu rezervele.
   ⚠️ Totul intr-un SINGUR loc: regulile de mai jos cer jetoane, nu amestecuri — deci paza se scrie o
   data, nu la fiecare intrebuintare.
   📌 Blocul cu formulele NU sta aici, ci DUPA tema intunecata — vezi pricina scrisa acolo. */

/* ═══════════ TEMA ÎNTUNECATĂ (6 Sep 2026) ═══════════
   Se aprinde punand `data-tema="dark"` pe radacina paginii. ⚠️ NUMAI in aplicatie: paginile publice
   n-o pun niciodata, deci vitrina ramane neatinsa.
   ⚠️⚠️ NU E O INVERSARE. Inversarea mecanica ar fi facut culoarea aplicatiei un galben noroios
   (#333777 → #ccc888) si verdele de „a mers" ROZ (#16a34a → #e95cb5). Fiecare valoare de mai jos e
   aleasa dupa rostul ei si masurata: toate perechile de text trec de 4,5:1, cele mai multe cu mult.
   ⚠️ Se schimba DOAR jetoanele de temelie — nuantele calculate (spalarile, apasarile, inelul) se refac
   singure din ele, fiindca amesteca tot cu jetoane. Un rand in plus aici ar fi fost o a doua parere. */
/* ⚠️⚠️ `@media screen` — NU o scapare, ci miezul: la TIPAR tema intunecata nu are ce cauta. Fara randul
   asta, cine tipareste un registru fiind pe intuneric ar fi scos pe hartie fundal negru — cerneala
   irosita si un document greu de citit. Asa, la tipar se cade singur pe paleta clara, fara ca ea sa fie
   scrisa a doua oara (o a doua copie s-ar fi despartit de prima la prima indreptare). */
@media screen {
:root[data-tema="dark"] {
  --culoare-fundal: #0f1524;           /* bleumarin foarte inchis, nu negru: negrul pur oboseste */
  /* ⚠️⚠️ MAI DESCHISA decat fundalul, pe dos fata de tema clara: pe intuneric ridicarea se face prin
     lumina, fiindca umbrele nu se vad pe fond inchis. */
  --culoare-suprafata: #1a2133;
  --culoare-bordura: #2e3752;
  --culoare-text: #e3e9f5;             /* alb-albastrui; albul pur „vibreaza" pe fond inchis */
  --culoare-text-secundar: #a7b0c4;
  --culoare-text-slab: #6f7a91;        /* ⚠️ ramane ANUME sub prag: e indrumarea din campuri */
  --culoare-primara: #8f97e8;          /* aceeasi nuanta, luminata — bleumarinul e nevazut pe intuneric */
  --culoare-pe-plin: #0f1524;          /* ⚠️⚠️ se INTOARCE: pe o culoare deschisa, cerneala e inchisa */
  --culoare-succes: #4ade80;
  --culoare-eroare: #fb7185;
  --culoare-atentie: #fbbf24;
  --culoare-atentie-tare: #fccf5b;
  --culoare-succes-tare: #77e6a0;
  --culoare-eroare-tare: #fc95a4;
  --culoare-apasat: #fff;              /* ⚠️ apasarea DESCHIDE, nu inchide: altfel butonul ar pieri */
  /* ⚠️⚠️ STRATUL DESENAT DE BROWSER, nu de noi (6 Sep 2026, odata cu bara de derulare). `color-scheme`
     spune browserului pe ce fond lucreaza, iar el isi inchide singur lucrurile pe care CSS-ul nostru nu
     le poate atinge: lista care se desface dintr-un `select`, calendarul unui camp de data, fondul de
     sub pagina cat timp se incarca. Fara randul acesta, ele ramaneau albe in mijlocul unui ecran inchis
     — si nu se puteau colora din nicio foaie de stil. */
  color-scheme: dark;
  --culoare-mov: #c4b5fd;              /* movul, luminat: cel inchis ar pieri pe bleumarin */
  --culoare-sticla: rgba(255, 255, 255, .05);   /* ⚠️ alb PUTIN: .62 ar fi facut cardul luminos */
  --culoare-pe-plin-stins: rgba(15, 21, 36, .25);   /* ⚠️ se INTOARCE, ca si cerneala plina */
  /* Rezervele, pentru browserele fara `color-mix` — socotite din valorile de mai sus. */
  --culoare-primara-hover: #a0a7eb;
  --culoare-eroare-hover: #fc8697;
  --culoare-succes-hover: #65e393;
  --culoare-primara-stins: #232a41;
  --culoare-primara-stins-tare: #282f49;
  --culoare-primara-inel: rgba(143, 151, 232, .15);
  --culoare-eroare-stins: #282638;
  --culoare-succes-stins: #1d2e38;
  --culoare-atentie-stins: #353431;
  --culoare-mov-stins: #2e334b;
  --culoare-primara-margine: #3b4266;
  --culoare-succes-margine: #275649;
  --culoare-eroare-margine: #59374a;
  --culoare-atentie-margine: #594d2f;
  --culoare-atins: #262d3f;
  /* ⚠️ Umbrele nu se vad pe fond inchis, dar nici nu strica — raman cum sunt, ca sa nu se nasca o a
     doua socoteala. Despartirea zonelor o face suprafata mai deschisa, nu umbra. */
}
}   /* sfarsitul lui `@media screen` — tema intunecata nu trece pe hartie */

/* ═══════════ NUANTELE CALCULATE, PENTRU AMANDOUA TEMELE (mutate aici pe 6 Sep 2026) ═══════════
   ⚠️⚠️ DEFECT DE TEMELIE, GASIT LA PASUL C0. Blocul acesta statea mai sus si vorbea numai despre
   `:root`. Dar `:root[data-tema="dark"]` are greutate MAI MARE (o pseudo-clasa + un atribut, fata de
   o pseudo-clasa) SI vine mai tarziu in fisier — deci, pe intuneric, rezervele scrise de mana bateau
   formulele. Urmarea: comentariul de la tema intunecata spunea „nuantele se refac singure din ele",
   iar in realitate NU se refaceau NICIODATA pe intuneric. Cand administratorul si-ar fi ales alta
   culoare de aplicatie pentru tema Dark, spalarile, apasarile si inelul ar fi ramas la valorile
   vechi — adica un ecran cu doua pareri despre aceeasi culoare. Pe tema clara mergea; pe cea
   intunecata mergea PE JUMATATE, felul cel mai greu de vazut cu ochiul.
   ⚠️ Leacul: aceleasi formule, o singura data, pentru AMANDOUA radacinile, si DUPA amandoua seturile
   de rezerve. Asa fiecare selector bate rezerva lui — cea de sus pe cea clara, cea de jos pe cea
   intunecata — fara ca formulele sa fie scrise de doua ori (o a doua copie s-ar fi despartit de
   prima la prima indreptare).
   ⚠️ Blocul sta ANUME in afara lui `@media screen`: la tipar, jetoanele de temelie ale temei
   intunecate nu se aplica, deci formulele socotesc din cele CLARE — exact ce trebuie pe hartie.
   ⚠️⚠️ Paza `@supports` se pune tot pe o valoare FARA `var()` — vezi pricina scrisa mai sus. */
@supports (color: color-mix(in srgb, red 50%, white)) {
  :root, :root[data-tema="dark"] {
    /* ⚠️⚠️ Se amesteca cu JETOANE, nu cu `#fff` si `#000` scrise de mana: asa aceleasi formule slujesc
       si tema clara, si pe cea intunecata. Cu literali, „spalarea palida" ar fi iesit alba pe fond
       inchis, iar apasarea ar fi inchis o culoare care e deja deschisa — adica ar fi disparut. */
    --culoare-primara-hover: color-mix(in srgb, var(--culoare-primara) 85%, var(--culoare-apasat));
    --culoare-eroare-hover: color-mix(in srgb, var(--culoare-eroare) 85%, var(--culoare-apasat));
    --culoare-succes-hover: color-mix(in srgb, var(--culoare-succes) 85%, var(--culoare-apasat));
    --culoare-primara-stins: color-mix(in srgb, var(--culoare-primara) 8%, var(--culoare-suprafata));
    --culoare-primara-stins-tare: color-mix(in srgb, var(--culoare-primara) 12%, var(--culoare-suprafata));
    --culoare-primara-inel: color-mix(in srgb, var(--culoare-primara) 15%, transparent);
    --culoare-eroare-stins: color-mix(in srgb, var(--culoare-eroare) 6%, var(--culoare-suprafata));
    --culoare-succes-stins: color-mix(in srgb, var(--culoare-succes) 7%, var(--culoare-suprafata));
    --culoare-atentie-stins: color-mix(in srgb, var(--culoare-atentie) 12%, var(--culoare-suprafata));
    --culoare-mov-stins: color-mix(in srgb, var(--culoare-mov) 12%, var(--culoare-suprafata));
    /* ⚠️⚠️ CERNEALA TARE SE SOCOTEȘTE, NU SE MAI SCRIE (6 Sep 2026, defect văzut de user: valorile
       anilor din REF nu se schimbau oricât ai fi schimbat verdele). Erau valori FIXE, deci alegerea ta
       nu ajungea niciodată la ele — nici la pastilele de stare, nici la mesajele de reușită.
       ⚠️ „Tare" înseamnă „mai departe de fond decât baza": pe lumină mai închis, pe întuneric mai
       deschis. Adică exact încotro arată `--culoare-apasat` — deci o singură formulă slujește amândouă
       temele, ca la toate celelalte stări. La 75% valorile ies aproape de cele scrise până acum (cel
       mult 21 pe canal), iar fiecare pereche cerneală/spălare trece pragul cu mult (5,05–9,07:1). */
    --culoare-succes-tare: color-mix(in srgb, var(--culoare-succes) 75%, var(--culoare-apasat));
    --culoare-eroare-tare: color-mix(in srgb, var(--culoare-eroare) 75%, var(--culoare-apasat));
    --culoare-atentie-tare: color-mix(in srgb, var(--culoare-atentie) 75%, var(--culoare-apasat));
    --culoare-pe-plin-stins: color-mix(in srgb, var(--culoare-pe-plin) 25%, transparent);
    /* Treapta de chenar: destul cat sa se vada peste spalarea ei, prea putin cat sa tipe. */
    --culoare-primara-margine: color-mix(in srgb, var(--culoare-primara) 28%, var(--culoare-suprafata));
    --culoare-succes-margine: color-mix(in srgb, var(--culoare-succes) 28%, var(--culoare-suprafata));
    --culoare-eroare-margine: color-mix(in srgb, var(--culoare-eroare) 28%, var(--culoare-suprafata));
    --culoare-atentie-margine: color-mix(in srgb, var(--culoare-atentie) 28%, var(--culoare-suprafata));
    /* Rândul atins: o spălare de CERNEALĂ peste suprafață — merge în amândouă temele. */
    --culoare-atins: color-mix(in srgb, var(--culoare-text) 6%, var(--culoare-suprafata));
  }
}

/* ═══════════ BARA DE DERULARE (6 Sep 2026, cerut de user) ═══════════
   ⚠️⚠️ Până acum n-o atingea nimic: browserul o desena cu cenușiul lui, iar pe o paletă întunecată
   rămânea o dungă albă lipită de bara laterală — singurul lucru din ecran care nu asculta de temă.
   ⚠️ Se leagă de JETOANE, nu de o culoare scrisă de mână: așa urmează orice paletă, inclusiv cele
   Custom, fără să fie nevoie ca aplicația să știe „pe ce fond sunt". Degetul e treapta de chenar a
   culorii aplicației (28%), iar șanțul rămâne STRĂVEZIU — sub el trec zone cu fundaluri deosebite
   (pagina, cardurile, sertarul), iar o culoare fixă s-ar fi bătut cap în cap cu ele.
   ⚠️ Se pune pe `:root` și se moștenește peste tot; caruselele care își ascund bara au regulile lor,
   mai grele, deci rămân neatinse. */
:root { scrollbar-color: var(--culoare-primara-margine) transparent; }
/* ⚠️ Numai pentru browserele care NU știu `scrollbar-color` (WebKit mai vechi). Puse necondiționat,
   aceste reguli ar fi luat locul celei de sus chiar acolo unde ea lucrează bine — iar bara ar fi
   căpătat desenul nostru în loc de cel al sistemului, fără să fi cerut nimeni asta. */
@supports not (scrollbar-color: red blue) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--culoare-primara-margine); border-radius: 8px;
    border: 3px solid transparent; background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--culoare-primara); background-clip: content-box; }
}

/* --- Reset de baza --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--culoare-text);
  background: var(--culoare-fundal);
  line-height: 1.26;
  min-height: 100vh;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--spatiu-mediu); }
p { margin: 0 0 var(--spatiu-mediu); }
a { color: var(--culoare-legatura); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Container central reutilizabil */
.container {
  width: 100%;
  max-width: var(--latime-container);
  margin: 0 auto;
  padding: 0 var(--spatiu-mediu);
}

/* --- Butoane (componenta comuna) --- */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--raza);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.btn:hover { text-decoration: none; }

/* V2 - micro-apasare: butonul se afunda usor la click */
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { cursor: default; }

/* V1 - stare "in lucru": spinner rotativ inaintea textului */
.btn.is-loading { cursor: progress; }
.btn.is-loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* V1 - confirmare de succes pe buton (verde, scurt) */
.btn.is-succes { background: var(--culoare-succes); border-color: var(--culoare-succes); color: var(--culoare-pe-plin); }
.btn-primary { background: var(--culoare-primara); color: var(--culoare-pe-plin); }
.btn-primary:hover { background: var(--culoare-primara-hover); }
.btn-ghost { background: transparent; color: var(--culoare-buton-gol); border-color: var(--culoare-bordura); }
.btn-ghost:hover { background: var(--culoare-primara-stins); }
.btn-periculos { background: var(--culoare-eroare); color: var(--culoare-pe-plin); }
.btn-periculos:hover { background: var(--culoare-eroare-hover); }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; text-align: center; }

/* --- Antet site (zona publica) --- */
.site-header {
  background: var(--culoare-suprafata);
  border-bottom: 1px solid var(--culoare-bordura);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--spatiu-mare);
  height: 64px;
}
.logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--culoare-text);
}
.logo:hover { text-decoration: none; }
.logo span { color: var(--culoare-primara); }
/* Logo ca imagine: incadrat pe inaltimea header-ului (valabil in toate headerele) */
.logo img { height: 100px; width: auto; display: block; }
/* In topbar-ul aplicatiei (mai compact, 60px) logo-ul e putin mai mic */
.app-topbar .logo img { height: 88px; }
.site-nav { display: flex; gap: var(--spatiu-mediu); margin-right: auto; }
.site-nav a { color: var(--culoare-text-secundar); font-weight: 500; }
.site-nav a:hover { color: var(--culoare-text); text-decoration: none; }
.site-header__actions { display: flex; gap: var(--spatiu-mic); }

/* --- Hero: doua zone, 50%-50% (6 Aug 2026) ---
   Textul in stanga (`.container`), imaginile in dreapta (`.image-container`).
   ⚠️ `.hero` e ACUM el insusi coloana de 1080px: asa cele doua jumatati stau in aceeasi latime ca
   restul paginii, deci textul rămâne aliniat cu antetul si cu cardurile. Padding-ul lateral de 16px
   e acelasi ca la `.container`, ca marginile sa se potriveasca la pixel.
   ⚠️ `.container` e o clasa GLOBALA (antet, functionalitati, despre, subsol). De aceea regulile de
   mai jos sunt legate de `.hero > .container` - altfel s-ar strange toate secțiunile paginii. */
.hero {
  display: flex;
  align-items: center;
  gap: var(--spatiu-mare);
  max-width: var(--latime-container);
  margin: 0 auto;
  padding: 90px var(--spatiu-mediu) 64px;
  /* ⚠️ Reazemul filmului de fundal (5 Sep 2026): el se aseaza absolut fata de erou. */
  position: relative;
}

/* ── FILMUL DE FUNDAL, pus de administrator (5 Sep 2026) ──────────────────────────────────────────
   ⚠️⚠️ Culoarea paginii RAMANE dedesubt: filmul e un strat peste ea, niciodata in locul ei. Daca
   lipseste, intarzie ori e refuzat de browser, vitrina arata intocmai ca fara el.
   ⚠️⚠️ Se intinde cat TOT ecranul, desi eroul e o coloana de 1080px. Latimea vine din `--ecran`, scris
   de `pagini.js` cu `documentElement.clientWidth` — NU `100vw`, care numara si bara de derulare si ar
   fi nascut o derulare pe orizontala de vreo 15px, vazuta abia pe alt calculator.
   ⚠️ `pointer-events: none`: filmul nu prinde niciun clic, deci butoanele din erou raman apasabile. */
.fundal-video {
  position: absolute; top: 0; bottom: 0;
  left: calc(50% - var(--ecran, 100%) / 2); width: var(--ecran, 100%);
  z-index: 0; overflow: hidden; pointer-events: none;
}
/* ⚠️ Cat de tare se vede filmul se pune din JS, PE CHIAR ELEMENT (`opacity`): asa el se ingana cu
   CULOAREA paginii de dedesubt. Pana pe 5 Sep 2026 statea aici un strat negru deasupra lui — dar acela
   nu imbina nimic, doar intuneca spre negru. Stratul a fost scos odata cu schimbarea. */
.fundal-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ⚠️⚠️ Continutul eroului RAMANE DEASUPRA filmului. Fara randul asta, titlul si butoanele ar fi ramas
   sub el — nevazute, desi scrise: cel mai tacut fel de a strica o pagina. */
.hero > *:not(.fundal-video) { position: relative; z-index: 1; }
.hero > .container,
.hero > .image-container { flex: 1 1 0; min-width: 0; }   /* 50%-50%; `min-width:0` lasa textul sa se rupa */
.hero > .container { max-width: none; margin: 0; padding: 0; text-align: left; }
.hero__title { font-size: 2.6rem; margin-bottom: var(--spatiu-mediu); }
.hero__subtitle {
  margin: 0 0 var(--spatiu-mare);
  font-size: 1.15rem;
  color: var(--culoare-text-secundar);
}
.hero__actions { display: flex; gap: var(--spatiu-mediu); flex-wrap: wrap; }

/* Zona de imagini: cadrul caruselului, apoi punctele de dedesubt.
   ⚠️ `[hidden]` are nevoie de regula lui EXPLICITA. `hidden` din HTML se traduce, in foaia de stil a
   browserului, in `display: none` - dar `display: flex` de mai jos are aceeasi specificitate si vine
   dupa, deci ar CASTIGA, iar zona s-ar vedea desi e marcata ascunsa. JS-ul o ascunde pana afla daca
   are capturi de arătat; fara regula asta, cadrul gol ar clipi la fiecare incarcare a paginii. */
.image-container { display: flex; flex-direction: column; gap: var(--spatiu-mediu); }
.image-container[hidden] { display: none; }
/* --- Caruselul cu capturi (6 Aug 2026) ---
   Imaginile NU sunt scrise in pagina: serverul citeste folderul si le trimite, iar `prezentare.js`
   construieste pista. Vezi `/api/prezentare/imagini` in server/app.js.
   ⚠️ `aspect-ratio` pe cadru, nu inaltime din imagine: altfel hero-ul ar SARI in inaltime la fiecare
   schimbare de captura, fiindca nu toate au aceleasi proportii. Cadrul rămâne fix, imaginea se
   incadreaza in el cu `object-fit: contain` (nu `cover` - o captura tăiată nu mai arata nimic). */
.carusel__cadru {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--culoare-bordura);
  border-radius: var(--raza);
  background: var(--culoare-suprafata);
  box-shadow: 0 4px 9px rgba(15, 23, 42, .18), 0 2px 4px rgba(15, 23, 42, .10);
}
/* Pista: toate capturile una langa alta, mutata cu `translateX`. Alunecarea e pe transform, nu pe
   `left`, ca sa fie facuta de placa video si sa nu recalculeze asezarea paginii. */
.carusel__pista {
  display: flex; height: 100%;
  transition: transform .4s cubic-bezier(.22, .7, .2, 1);
}
.carusel__pista img {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--spatiu-mic);
}
/* Sagetile: aparute peste imagine, cu fundal semitransparent ca sa se vada pe orice captura */
.carusel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--culoare-bordura); border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--culoare-selector);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
  transition: background .15s, box-shadow .15s;
}
.carusel__nav:hover { background: #fff; box-shadow: 0 4px 10px rgba(15, 23, 42, .24); }
.carusel__nav--prev { left: var(--spatiu-mic); }
.carusel__nav--next { right: var(--spatiu-mic); }
/* O singura captura -> sagetile si punctele n-au ce comuta, deci dispar (clasa o pune JS-ul) */
.image-container.e-una .carusel__nav,
.image-container.e-una .carusel__puncte { display: none; }

/* Punctele de dedesubt: si indicator, si buton de sarit direct la o captura */
.carusel__puncte { display: flex; justify-content: center; gap: var(--spatiu-mic); }
.carusel__punct {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--culoare-bordura);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.carusel__punct:hover { background: var(--culoare-text-secundar); }
.carusel__punct.e-activ { background: var(--culoare-primara); transform: scale(1.25); }

/* Cine a cerut mai putina mișcare: capturile se schimba pe loc, fara alunecare */
@media (prefers-reduced-motion: reduce) {
  .carusel__pista { transition: none; }
  .carusel__punct { transition: none; }
}

/* --- LUPA: captura marita peste toata pagina (7 Aug 2026) ---
   Clic pe captura din carusel -> se deschide aici, la 70% din ecran, in centru. Fereastra e
   construita din JS (ca dialogurile din aplicatie), nu scrisa in index.html.
   ⚠️ `z-index: 1600` - peste antetul lipicios (10). In aplicatie scara e: continut < meniu de
   actiuni < dialog (1400) < tooltip (1500); pagina publica n-are dialoguri, dar pastram ordinea. */
.carusel__pista img { cursor: zoom-in; }
.lupa {
  position: fixed; inset: 0; z-index: 1600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .82);
  opacity: 0;
  transition: opacity .18s;
}
.lupa.e-vizibila { opacity: 1; }
/* ⚠️ ACEEASI CAPCANA ca la `.image-container`: `hidden` din HTML se traduce in `display: none` din
   foaia BROWSERULUI, iar orice regula scrisa de noi o bate. Fara rândul de mai jos, fereastra
   inchisa rămâne intinsa peste pagina la `opacity: 0` - nevazuta, dar tot prinde clicurile, si
   pagina pare intepenita. */
.lupa[hidden] { display: none; }
/* 70% din ecran pe AMBELE laturi: imaginea intra intreaga in dreptunghiul acela, pastrandu-si
   proportiile. Fara `max-height`, o captura inalta ar fi ieșit din ecran. */
.lupa__img {
  max-width: 70vw; max-height: 70vh;
  width: auto; height: auto;
  border-radius: var(--raza);
  background: var(--culoare-suprafata);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  cursor: zoom-out;
}
/* Butoanele lupei: acelasi desen ca sagetile caruselului, doar mai mari */
.lupa__nav, .lupa__x {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff; cursor: pointer;
  transition: background .15s;
}
.lupa__nav:hover, .lupa__x:hover { background: rgba(255, 255, 255, .28); }
.lupa__nav--prev { left: 3vw; top: 50%; transform: translateY(-50%); }
.lupa__nav--next { right: 3vw; top: 50%; transform: translateY(-50%); }
.lupa__x { top: 3vh; right: 3vw; }
/* Numarul capturii, sub imagine */
.lupa__nr {
  position: absolute; bottom: 3vh; left: 0; right: 0;
  text-align: center; color: rgba(255, 255, 255, .8);
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
/* O singura captura -> sagetile n-au ce comuta */
.lupa.e-una .lupa__nav, .lupa.e-una .lupa__nr { display: none; }
/* Pe ecran mic, 70% ar fi prea putin ca sa se vada ceva: lasam 92% */
@media (max-width: 640px) {
  .lupa__img { max-width: 92vw; max-height: 78vh; }
  .lupa__nav { width: 38px; height: 38px; }
  .lupa__nav--prev { left: 2vw; } .lupa__nav--next { right: 2vw; }
}
@media (prefers-reduced-motion: reduce) {
  .lupa { transition: none; }
}

/* Sub 900px cele doua zone nu mai incap una langa alta: se asaza pe verticala, iar textul revine
   centrat (intr-o coloana de toata latimea, textul aliniat stanga ar arata dezechilibrat). */
@media (max-width: 900px) {
  .hero { flex-direction: column; align-items: stretch; padding-top: 64px; }
  .hero > .container { text-align: center; }
  .hero__subtitle { max-width: 640px; margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
}

/* --- Sectiuni --- */
.section-title { text-align: center; font-size: 1.8rem; margin-bottom: var(--spatiu-mare); }

/* Functionalitati */
.features { padding: 64px 0; }
/* Exact 3 carduri pe rand (6 module -> 2 randuri egale). Nu `auto-fit`: acela ar fi asezat 4 pe
   primul rand si 2 pe al doilea, dupa cat loc gaseste. Pe ecrane mai mici scade la 2, apoi la 1. */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spatiu-mediu);
}
@media (max-width: 900px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features__grid { grid-template-columns: 1fr; } }
/* Cardul are DOUA zone: banda colorata cu titlul (sus) si corpul alb (jos). De aceea padding-ul
   nu mai sta pe card, ci pe fiecare zona - altfel banda n-ar ajunge la marginile cardului.
   `overflow: hidden` taie banda pe rotunjirea de sus. */
.feature-card {
  --banda: var(--culoare-primara);      /* culoarea benzii; fiecare card o schimba mai jos */
  --banda-text: #fff;                   /* litera de pe banda; pe benzi DESCHISE devine inchisa */
  /* STICLA MATA (6 Aug 2026). `backdrop-filter: blur()` NU se putea folosi: el estompeaza ce e IN
     SPATE, iar in spate e fundalul paginii, aproape alb (#f8fafc) - estomparea albului da alb, deci
     efectul ar fi fost invizibil. Deci o IMITAM, din trei straturi:
       1. granulatie foarte fina (SVG cu `feTurbulence`, ~250 de octeti, inline - fara alt request);
       2. un val de alb la 93%, prin care se vede 7% din culoarea benzii;
       3. culoarea benzii dedesubt.
     ⚠️ Valul e scris ca `linear-gradient` cu doua capete identice, NU cu `color-mix`: asa merge in
     orice browser cu variabile CSS, fara rezerva. Rezultatul e identic.
     ⚠️ Sta pe CARD, nu pe corpul lui: cardurile dintr-un rand se intind la inaltimea celui mai
     inalt, iar corpul se opreste la sfarsitul textului - pusa pe corp, sticla lasa o banda alba
     dedesubt la cardurile cu text scurt. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.255'/%3E%3C/svg%3E"),
    linear-gradient(0deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .96)),
    var(--banda);
  border: 1px solid var(--culoare-bordura);
  border-radius: var(--raza);
  padding: 0;
  overflow: hidden;
  /* Umbra pe DOUA straturi -> cardul pare ridicat de pe fundal (senzatie 3D). Aceleasi valori ca la
     cardurile de ani din Registre (`.rr-ef-an-card`), ca pagina publica si aplicatia sa se poarte la
     fel. `--umbra-card` de dinainte era la 6% opacitate si aproape nu se vedea. */
  box-shadow: 0 4px 9px rgba(15, 23, 42, .18), 0 2px 4px rgba(15, 23, 42, .10);
}
/* Ridicarea la trecerea mouse-ului, tot ca in aplicatie: 2px in sus + umbra mai ampla.
   Chenarul ia culoarea BENZII CARDULUI, nu albastrul marcii - altfel pe cardul rosu al alertelor sau
   pe cel verde al registrelor ar fi aparut o dunga albastra strain de restul.
   ⚠️ `@media (hover: hover)`: pe atingere nu exista hover adevarat, iar `:hover` s-ar „lipi" dupa o
   apasare, lasand un card ridicat degeaba. */
@media (hover: hover) {
  .feature-card { transition: transform .15s, box-shadow .15s, border-color .15s; }
  .feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, .24), 0 4px 8px rgba(15, 23, 42, .12);
    border-color: var(--banda);
  }
  /* Mai putina mișcare: umbra si chenarul rămân, saltul nu */
  @media (prefers-reduced-motion: reduce) {
    .feature-card { transition: box-shadow .15s, border-color .15s; }
    .feature-card:hover { transform: none; }
  }
}
/* Titlul cardului poarta ACEEASI iconita ca modulul din bara de meniu a aplicatiei (3 Aug 2026):
   cine citeste pagina de prezentare recunoaste apoi rândul din meniu dupa acelasi desen.
   Iconitele sunt la 20px, cat inaltimea literelor titlului (1.2rem ≈ 19px), si iau culoarea
   benzii prin `currentColor` (= alb). ⚠️ Sunt copii ale celor din `app/index.html` - daca se
   schimba acolo, se schimba si aici (proba `public.js` le compara). */
.feature-card h3 {
  display: flex; align-items: center; gap: var(--spatiu-mic);
  margin: 0; padding: 14px var(--spatiu-mediu);
  background: var(--banda);
  color: var(--banda-text); font-size: 1.2rem;
}
.feature-card h3 > svg { flex: 0 0 auto; }   /* nu se turteste daca titlul e lung */
.feature-card p { padding: var(--spatiu-mediu); margin: 0; }

/* Corpul cardului sta intr-un container propriu, ca sa poata fi STRANS la derulare (prezentare.js).
   ⚠️ De ce container si nu direct `<p>`: la inaltime 0, padding-ul paragrafului ar fi ramas vizibil
   ca o dunga alba de 32px sub banda. Containerul n-are padding si taie tot, cu `overflow: hidden`.
   ⚠️ Starea implicita e DESCHIS. Strangerea o porneste JS-ul, punand `.are-derulare` pe grila; daca
   JS-ul nu ruleaza (blocat, eroare, browser vechi), cardurile arata intregi - nu se pierde nimic. */
/* STICLA MATA (6 Aug 2026). `backdrop-filter: blur()` NU se putea folosi: el estompeaza ce e IN
   SPATE, iar in spate e albul cardului pe un fundal de pagina aproape alb (#f8fafc) - estomparea
   albului da alb, deci efectul ar fi fost invizibil. Deci o IMITAM, din trei straturi:
     1. granulatie foarte fina (SVG cu `feTurbulence`, ~250 de octeti, inline - fara alt request);
     2. un val de alb la 93%, prin care se vede 7% din culoarea benzii;
     3. culoarea benzii dedesubt.
   ⚠️ Valul de alb e scris ca `linear-gradient` cu doua capete identice, NU cu `color-mix`: asa merge
   in orice browser cu variabile CSS, fara sa fie nevoie de rezerva. Rezultatul e identic.
   ⚠️ Muchia de lumina de sub banda e `inset box-shadow`, NU `border-top`: la `height: 0` (card strans
   de efectul de derulare) un chenar de 1px ar fi rămas vizibil ca o dunga alba, fiindca o cutie nu
   poate fi mai mica decat chenarul ei. Umbra interioara se taie odata cu inaltimea. */
/* ⚠️ Sticla sta pe CARD, nu pe corp - vezi fundalul din regula `.feature-card` de mai sus.
   De ce: cardurile dintr-un rand se intind la inaltimea celui mai inalt (grila), iar corpul se
   opreste la sfarsitul textului. Pusa pe corp, sticla lasa dedesubt o BANDA ALBA pe cardurile cu
   text mai scurt (s-a vazut la „Facturi", care sta in rand cu „Încasări & Plăți", cel mai lung).
   Pe card, tinta ajunge pana jos; banda colorata e opaca, deci acopera sticla in dreptul ei. */
.feature-card__corp {
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);   /* muchia de lumina de sub banda */
}
/* cat e efectul activ, inaltimea o scrie JS-ul pe element; aici doar pregatim terenul */
.features__grid.are-derulare .feature-card__corp { will-change: height; }

/* Cate o culoare pe card. Toate sunt tonuri „700" - aceeasi saturatie si aceeasi inchidere -, ca
   sa arate ca un set, nu ca un curcubeu; si toate dau peste 4,5:1 cu alb, deci titlul se citeste.
   ⚠️ Sunt alese sa fie RASFIRATE pe cercul culorilor: prima incercare avea verde-albastru la Firme
   si verde la Registre, la doar 50 de unitati RGB una de alta - s-ar fi confundat la privit. Proba
   `culori.js` masoara si contrastul, si distanta dintre fiecare doua culori.
   Clasele sunt numite dupa MODUL, nu dupa pozitie: `nth-child` s-ar strica la prima reordonare. */
.feature-card--firme      { --banda: #0369a1; }   /* albastru */
.feature-card--incasari   { --banda: #6d28d9; }   /* violet */
/* ⚠️ ATENTIE, aceste doua benzi NU trec pragul de contrast cu litera alba (proba `culori.js` o
   spune la fiecare rulare):
     #b3ca01 (verde-lamaie) -> alb doar 1,85:1; ar trebui coborat pana la #6c7a01 ca sa treaca, dar
             atunci nu mai seamana cu culoarea aleasa. Cu litera INCHISA da 7,94:1.
     #2e9d4a (verde)        -> alb 3,48:1; #27863f ar da 4,59:1, iar #257e3b 5,07:1.
   Se aștepta hotararea userului; pana atunci ramane cum a cerut el. */
.feature-card--facturi    { --banda: #b3ca01; }   /* verde-lamaie */
.feature-card--registre   { --banda: #2e9d4a; }   /* verde */
.feature-card--anaf       { --banda: #2c2c76; }   /* bleumarinul propriu al emblemei ANAF */
.feature-card--alerte     { --banda: #b91c1c; }   /* rosu - ca clopotelul si indicatoarele */
/* Text aliniat stanga-dreapta. Coloana e ingusta (min. 220px), iar romana are cuvinte lungi, asa ca
   alinierea singura ar lasa gauri intre cuvinte; `hyphens: auto` desparte in silabe si le inchide.
   Merge fiindca <html lang="ro"> e setat - fara el browserul n-ar sti dupa ce reguli sa desparta. */
.feature-card p {
  /* ⚠️ Scria `var(--culoare-text-primar)`, jeton care nu exista (5 Sep 2026). Aici NU s-a vazut nimic
     gresit: `color` se mosteneste, iar `body` da chiar `--culoare-text`, adica taman ce se dorea. Numele
     e indreptat ca sa RAMANA prins pe jeton — daca vreodata cardul capata o culoare a lui, textul din el
     n-are voie sa plece dupa ea. */
  margin: 0; color: var(--culoare-text);
  text-align: justify; hyphens: auto;
}

/* Despre */
.about { padding: 64px 0; }
.about__list {
  /* ⚠️ Latimea e data de RANDUL CEL MAI LUNG („Transparență totală…", ~87 de semne), care trebuie sa
     stea pe un singur rand. La 720px incapeau ~76 de semne si se rupea. 860px lasa ~794px pentru
     text, cu ceva loc de rezerva, si sta comod in containerul de 1080px.
     Pe ecrane inguste randurile se rup oricum - si asa TREBUIE, nu e o defectiune. */
  max-width: 700px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--spatiu-mediu);
}
/* ⚠️⚠️ ORDINEA CELOR ȘASE RÂNDURI NU E LA VOIA NIMĂNUI ⚠️⚠️
   Inițialele lor scriu, de sus în jos, cuvantul CONTID:
       Contabilitate simplă · Oricâte firme · Navigare intuitivă
       Transparență totală  · Informații în siguranță · De oriunde
   Daca se reordoneaza randurile sau se schimba primul cuvant al vreunuia, ACROSTIHUL SE STRICA -
   iar el e chiar motivul pentru care prima litera e scoasa in evidenta mai jos. Proba `public.js`
   verifica la fiecare rulare ca initialele mai scriu „ContID". */
.about__list > li {
  position: relative;   /* pentru butonul cu săgeata, așezat la dreapta */
  background: var(--culoare-suprafata);
  border: 1px solid var(--culoare-bordura);
  border-radius: var(--raza);
  padding: var(--spatiu-mediu) var(--spatiu-mare);
  /* dunga coloreaza marginea din stanga a fiecarui rand: cele sase se leaga intr-o COLOANA, iar
     ochiul citeste cuvantul de sus in jos, nu doar litera de litera */
  border-left: 3px solid var(--culoare-primara);
  padding-left: 46px;   /* aer intre dunga si litera mare, ca sa nu para lipite */
}
/* Prima litera a fiecarui rand, la 1,9× si in albastrul marcii. Se face din `::first-letter`, deci
   TEXTUL DIN HTML RAMANE NEATINS - nicio litera nu se desprinde din cuvant, iar cititoarele de ecran
   citesc frazele normal. (Pseudo-elementul trece prin `<strong>` si prinde tot litera corecta.) */
.about__list > li::first-letter {
  font-size: 1.9em;
  font-weight: 800;
  color: var(--culoare-primara);
}
/* ⚠️⚠️ DESPARTIREA „Cont" | „ID" - NU E O SCAPARE DE SPATIERE ⚠️⚠️
   „ContID" se desface in „Cont" + „ID", exact cum arata si logo-ul (Cont_ID.png). Randurile 1-4 dau
   C-O-N-T, randurile 5-6 dau I-D, iar lista trebuie sa se citeasca pe VERTICALA in aceleasi doua
   bucati ca numele produsului.
   ⚠️ Ce comunica gruparea nu e marimea golului, e RAPORTUL dintre cele doua spatii - exact ca intr-un
   text tiparit, unde spatiul dintre cuvinte e mult mai mare decat cel dintre litere. Prima incercare
   avea 16px intre randuri si 24px la despartitura (1,5×) si nu se citea. Acum: 10px intre randurile
   din acelasi grup si 40px intre grupuri, adica 4× - se vede din prima.
   ⚠️ `nth-child(5)` tine de POZITIE: daca lista se reordoneaza, golul ajunge in locul greșit. */
.about__list { gap: 10px; }                          /* „literele" dintr-un cuvant, strans */
.about__list > li:nth-child(5) { margin-top: 30px; }   /* 10 + 30 = 40px intre „Cont" si „ID" */
/* Randul se ridica la trecerea mouse-ului: aceeasi convenție ca la cardurile din aplicatie
   (`.rr-ef-an-card:hover` din Registre - 2px in sus + umbra pe doua straturi).
   ⚠️ `@media (hover: hover)`: pe ecrane cu atingere nu exista hover adevarat, iar `:hover` s-ar
   „lipi" dupa o apasare, lasand un rand ridicat degeaba. */
@media (hover: hover) {
  .about__list > li { transition: transform .15s, box-shadow .15s; }
  .about__list > li:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .12), 0 3px 6px rgba(15, 23, 42, .08);
  }
  /* Cine a cerut mai putina mișcare primeste doar umbra, fara ridicare - semnalul ramane, saltul nu */
  @media (prefers-reduced-motion: reduce) {
    .about__list > li { transition: box-shadow .15s; }
    .about__list > li:hover { transform: none; }
  }
}

/* --- Rândul care se deschide (8 Aug 2026) ---------------------------------------------
   Clic pe rand -> se desfasoara un text mai lung dedesubt. Butonul cu săgeata NU e scris in HTML:
   il pune `prezentare.js`, la fiecare rand care are un `.about__mai`. Asa un rand nou cere doar
   text in pagina, nicio linie de cod - si fara JS textul rămâne VIZIBIL, nu pierdut.

   ⚠️ Randul care se poate deschide are nevoie de loc la dreapta pentru săgeata, dar NUMAI el:
   celelalte cinci trebuie sa-si pastreze latimea de text neatinsa (randul cel mai lung din lista e
   calibrat sa stea pe o singura linie - vezi nota de la `.about__list`). */
.about__list > li:has(.about__mai) { padding-right: 52px; }
.about__mai-btn {
  position: absolute;
  /* pe prima linie a randului, nu pe mijlocul lui: randul deschis creste in jos, iar săgeata trebuie
     sa rămână langa textul de care ține */
  top: 14px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--culoare-bordura); border-radius: 50%;
  background: var(--culoare-suprafata);
  color: var(--culoare-primara);
  cursor: pointer;
  transition: background .15s, transform .2s;
}
.about__mai-btn:hover { background: var(--culoare-primara-stins); }
.about__mai-btn[aria-expanded="true"] { transform: rotate(180deg); }
/* Tot randul e apasabil, nu doar săgeata (asa a cerut userul); butonul rămâne pentru tastatura si
   pentru cititoarele de ecran, care au nevoie de `aria-expanded`. */
.about__list > li:has(.about__mai-btn) { cursor: pointer; }

.about__mai {
  margin-top: var(--spatiu-mediu);
  padding-top: var(--spatiu-mediu);
  border-top: 1px solid var(--culoare-bordura);
  cursor: auto;                      /* textul desfasurat se poate selecta, nu mai e „buton" */
}
.about__mai p { margin: 0 0 10px; color: var(--culoare-text-secundar); }
.about__mai p:last-child { margin-bottom: 0; }
/* Lista de dinăuntru: punctele („•") sunt ale browserului, nu caractere scrise in text - asa
   cititoarele de ecran anunta „lista cu 4 elemente", iar copierea textului nu ia bulinele cu ea.
   ⚠️ Regulile listei din AFARA au fost strânse la `.about__list > li` tocmai pentru lista asta:
   nescoped, fiecare punct ar fi primit cardul alb, dunga albastra si litera mare a acrostihului. */
.about__mai-lista {
  margin: 0 0 10px;
  padding-left: 22px;
  display: grid;
  gap: 6px;
  color: var(--culoare-text-secundar);
}
.about__mai-lista li { padding: 0; }
.about__mai-lista strong { color: var(--culoare-text); }
.about__mai-lista:last-child { margin-bottom: 0; }
/* ⚠️ ASIGURARE, nu nevoie de acum. Capcana care a prins de doua ori (`.image-container`, apoi
   `.lupa`): `hidden` din HTML se traduce in `display: none` din foaia BROWSERULUI, iar orice regula
   scrisa de noi o bate. Azi `.about__mai` NU declara `display`, deci `hidden` merge si fara rândul
   de mai jos - dar in ziua in care cineva ii pune `display: flex` sau `grid`, textul „strans" ar
   rămâne la vedere. Rândul costa nimic si taie problema din rădăcina.
   (Proba `lupa.js` verifica lucrul asta singura, pentru fiecare element ascuns din JS.) */
.about__mai[hidden] { display: none; }
/* prima litera a randului nu are voie sa se mute in textul desfasurat */
.about__mai::first-letter { font-size: inherit; font-weight: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .about__mai-btn { transition: background .15s; }
}

/* ===== Legatura titlu ↔ lista =========================================================
   Mouse-ul pe randul N din lista mareste litera N din „ContID" din titlu, si o lasa mare cat timp
   stai pe rand. Se face cu `:has()`, care ne lasa sa schimbam ceva in TITLU (element de DEASUPRA)
   dupa ce se petrece intr-un rand de mai jos - lucru imposibil in CSS pana la el, si care altfel ar
   fi cerut JavaScript. Ambele stau in `.about__inner`, de aceea el e ancora.
   ⚠️ Legatura e POZITIONALA: litera a 3-a ↔ randul al 3-lea. Un rand adaugat sau mutat strica
   potrivirea, iar nimic nu s-ar plange - de aceea proba `public.js` o verifica.
   Fara suport pentru `:has()` (browsere vechi) nu se intampla nimic: titlul rămâne normal. */
.acronim > span {
  display: inline-block;   /* ⚠️ obligatoriu: un element `inline` NU se poate scala */
  transform-origin: bottom center;   /* litera creste in sus, de pe linia de baza */
  transition: transform .2s cubic-bezier(.22, .7, .2, 1), color .2s;
}
/* Aer intre literele din „ContID". In `em`, ca sa creasca odata cu titlul, nu in px.
   ⚠️ `:not(:last-child)`: pe ultima litera spatiul ar fi ramas ATARNAT in dreapta, iar titlul -
   fiind centrat - s-ar fi deplasat cu atat spre stanga. Asa cuvantul sta exact in mijloc.
   Mai strans: .05em · acum: .08em · mai rarit: .12em */
.acronim > span:not(:last-child) { margin-right: .08em; }
@media (hover: hover) {
  .about__inner:has(.about__list > li:nth-child(1):hover) .acronim > span:nth-child(1),
  .about__inner:has(.about__list > li:nth-child(2):hover) .acronim > span:nth-child(2),
  .about__inner:has(.about__list > li:nth-child(3):hover) .acronim > span:nth-child(3),
  .about__inner:has(.about__list > li:nth-child(4):hover) .acronim > span:nth-child(4),
  .about__inner:has(.about__list > li:nth-child(5):hover) .acronim > span:nth-child(5),
  .about__inner:has(.about__list > li:nth-child(6):hover) .acronim > span:nth-child(6) {
    transform: scale(1.55);
    color: var(--culoare-primara);
  }
  /* Mai putina mișcare: litera nu mai creste, dar se coloreaza - legatura se vede, saltul nu */
  @media (prefers-reduced-motion: reduce) {
    .acronim > span { transition: color .2s; }
    .about__inner:has(.about__list > li:hover) .acronim > span { transform: none; }
  }
}

/* --- Subsol --- */
.site-footer {
  background: var(--culoare-suprafata);
  border-top: 1px solid var(--culoare-bordura);
  padding: var(--spatiu-mare) 0;
  margin-top: var(--spatiu-mare);
}
/* ✅ 27 Sep 2026 (Termeni și condiții, etapa 2): subsolul are DOUĂ rânduri, după modelele userului — legăturile
   legale despărțite de bare, apoi banda de sigle (NETOPIA + carduri, ANPC SAL). Îl pune serverul pe fiecare
   pagină publică (`server/core/subsol.js`), deci stilul stă aici, în foaia pe care o încarcă toate. */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--culoare-text-secundar);
  gap: var(--spatiu-mediu);
}
.site-footer__legaturi {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  row-gap: 6px; font-size: .9rem;
}
.site-footer__legaturi > * { padding: 0 12px; line-height: 1.3; }
/* Bara dintre legături, ca în model. ⚠️ Pe margine, nu ca text „|": un cititor de ecran n-o mai citește. */
.site-footer__legaturi > * + * { border-left: 1px solid var(--culoare-bordura); }
.site-footer__legaturi a { color: var(--culoare-text-secundar); }
.site-footer__legaturi a:hover { color: var(--culoare-text); }
.site-footer__sigle {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--spatiu-mic);
}
.site-footer__sigla { display: inline-flex; line-height: 0; }
.site-footer__sigla img { height: 50px; width: auto; display: block; }
/* ⚠️ Sigla NETOPIA e desenată pentru fond ALB (albastru + roșu/portocaliu), iar administratorul poate închide
   culorile vitrinei. Deci stă pe plăcuța ei albă — ca pictograma ANPC, care își are fondul alb în imagine.
   `#fff` e scris anume: e fondul pentru care e făcută sigla, nu o culoare a temei. Aceeași înălțime (50px)
   ca pictograma ANPC, ca banda să stea dreaptă. */
.site-footer__sigla--netopia {
  background: #fff; border: 1px solid #d9d9d9; border-radius: 8px; padding: 5px 10px;
}
.site-footer__sigla--netopia img { height: 38px; }

/* --- Pagina /termeni (27 Sep 2026) --- */
.termeni-pagina { padding: var(--spatiu-mare) 0; }
.termeni-pagina__inner { max-width: 880px; }
.termeni-pagina__titlu { margin: 0 0 6px; font-size: 2rem; }
.termeni-versiune { margin: 0 0 var(--spatiu-mediu); color: var(--culoare-text-secundar); font-size: .9rem; }
.termeni-gol { color: var(--culoare-text-secundar); font-style: italic; }
.termeni-cuprins {
  margin: 0 0 var(--spatiu-mare); padding: 12px 16px;
  border: 1px solid var(--culoare-bordura); border-radius: var(--raza); background: var(--culoare-suprafata);
}
.termeni-cuprins ul { margin: 0; padding: 0; list-style: none; columns: 2 18rem; column-gap: var(--spatiu-mare); }
.termeni-cuprins li { break-inside: avoid; padding: 3px 0; }
.termeni-document { line-height: 1.6; }
/* ⚠️⚠️ Antetul e LIPIT sus: fără margine, titlul secțiunii la care duce o legătură (`#confidentialitate`) ar
   ajunge sub el. Înălțimea antetului o MĂSOARĂ `pagini.js` (`--inaltime-antet`); cifra de după virgulă e doar
   plasa pentru clipa de dinaintea primei măsurători (regula casei 📏). */
.termeni-document .termeni-sectiune { scroll-margin-top: calc(var(--inaltime-antet, 64px) + 16px); }
.termeni-document .termeni-sectiune + .termeni-sectiune { margin-top: var(--spatiu-mare); }
.termeni-document h2 { margin: 0 0 8px; font-size: 1.3rem; color: var(--culoare-primara); }
.termeni-document h3 { margin: 14px 0 6px; font-size: 1.05rem; }
.termeni-document p { margin: 0 0 10px; }
.termeni-document ul { margin: 0 0 10px; padding-left: 22px; }

/* --- Meniul de sus: pagina de acum (29 Sep 2026) ---
   Meniul îl pune serverul (`server/core/meniu-public.js`), iar legătura paginii de acum poartă
   `aria-current="page"`. ⚠️ Însemnarea se leagă de ATRIBUT, nu de o clasă: același semn îl aude și
   cititorul de ecran. ⚠️ Stă și pe `:hover`: `.site-nav a:hover` are aceeași greutate și ar fi șters
   sublinierea chiar sub mouse. */
.site-nav a[aria-current="page"],
.site-nav a[aria-current="page"]:hover {
  color: var(--culoare-text); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
  text-decoration-color: var(--culoare-primara);
}

/* --- Pagina /preturi (29 Sep 2026) — plan: `_documente/Pagina-preturi.md` ---
   Prefixul `pr-` ține pagina departe de clasele celorlalte (`.container`, `.feature-card` sunt globale).
   ⚠️⚠️ Bucățile care atârnă de regulă (`data-pret-cand`) primesc `hidden` de la SERVER. Regula de jos e
   ANUME mai grea decât orice `display` de pe o singură clasă: un card cu `display: flex` ar fi bătut altfel
   `hidden` din foaia browserului (capcana `[hidden]` a vitrinei, pățită la carusel și la lupă). */
[data-pret-cand][hidden] { display: none; }
.pr-pagina { padding-bottom: var(--spatiu-mare); }
.pr-ascuns { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pr-intro { padding-top: 56px; text-align: center; }
.pr-intro h1 { font-size: 2.4rem; margin: 0; }
.pr-intro p { max-width: 640px; margin: 14px auto 0; font-size: 1.12rem; color: var(--culoare-text-secundar); }
.pr-eroare {
  margin-top: var(--spatiu-mare); text-align: center; font-weight: 600; color: var(--culoare-text-secundar);
}
.pr-sectiune-pachete { padding-top: 36px; }

/* Cele trei carduri. ⚠️ `auto-fit` cu lățime plafonată și `justify-content: center`: când un card lipsește
   (START fără probă, Multi-Firmă fără trepte), cele rămase stau la mijloc, nu lipite în stânga. Sub 860px
   se așază unul sub altul — între 860 și 844 ar fi ieșit două sus și unul singur jos. */
.pr-pachete {
  display: grid; gap: var(--spatiu-mediu); justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(260px, 336px));
}
@media (max-width: 860px) { .pr-pachete { grid-template-columns: minmax(0, 420px); } }
/* Același idiom ca cardurile modulelor de pe prezentare (`.feature-card`): banda colorată sus, „sticla mată"
   dedesubt, ridicarea la trecerea mouse-ului. Culorile benzilor sunt ale PACHETELOR, deci stau pe clasa lor. */
.pr-pachet {
  --banda: var(--culoare-primara);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--culoare-bordura); border-radius: var(--raza);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.255'/%3E%3C/svg%3E"),
    linear-gradient(0deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .96)),
    var(--banda);
  box-shadow: 0 4px 9px rgba(15, 23, 42, .18), 0 2px 4px rgba(15, 23, 42, .10);
}
/* ⚠️ Tonuri închise, ca litera albă de pe bandă să treacă de 4,5:1 (eticheta e literă MICĂ, nu titlu mare):
   verde 5,4:1 · albastru 5,9:1 · roșu 6,5:1. Albastrul și roșul sunt chiar ale cardurilor Firme și Alerte. */
.pr-pachet--start    { --banda: #1f7a3f; }
.pr-pachet--standard { --banda: #0369a1; }
.pr-pachet--multi    { --banda: #b91c1c; }
@media (hover: hover) {
  .pr-pachet { transition: transform .15s, box-shadow .15s, border-color .15s; }
  .pr-pachet:hover {
    transform: translateY(-2px); border-color: var(--banda);
    box-shadow: 0 12px 22px rgba(15, 23, 42, .24), 0 4px 8px rgba(15, 23, 42, .12);
  }
  @media (prefers-reduced-motion: reduce) {
    .pr-pachet { transition: box-shadow .15s, border-color .15s; }
    .pr-pachet:hover { transform: none; }
  }
}
.pr-pachet__eticheta {
  background: var(--banda); color: #fff; text-align: center; padding: 10px 12px;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pr-pachet__corp {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 22px 20px 20px; flex: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pr-pachet__titlu { margin: 0; font-size: 1.55rem; color: var(--culoare-titlu-card); }
/* Subtitlul și detaliile au înălțime minimă, ca prețul și butonul să stea pe aceeași linie în toate trei. */
.pr-pachet__sub { margin: 0; font-style: italic; color: var(--culoare-text-secundar); font-size: .95rem; min-height: 2.6em; }
.pr-pachet__pret { margin: 10px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pr-pachet__suma { font-size: 2.5rem; font-weight: 800; color: var(--culoare-text); font-variant-numeric: tabular-nums; }
.pr-pachet__unit { font-size: 1.05rem; font-weight: 600; color: var(--culoare-text-secundar); }
.pr-pachet__detalii {
  margin: 0; font-size: .88rem; color: var(--culoare-text-secundar); min-height: 3.2em;
  display: grid; gap: 2px; align-content: start;
}
.pr-pachet__detalii strong { color: var(--culoare-text); font-weight: 600; }
/* Butonul galben din modelul userului (hotărârea M2). ⚠️ Culorile sunt SCRISE, nu jetoane: galbenul e al
   butonului, nu al paletei — iar litera trebuie să rămână închisă pe el oricum ar alege administratorul
   culorile vitrinei (#1f2340 pe #ffc933 = 11,6:1). */
.pr-cta {
  margin-top: auto; width: 100%; display: block; padding: 12px 16px; border-radius: 8px;
  background: #ffc933; color: #1f2340; font-weight: 700; font-size: 1rem; text-align: center;
}
.pr-cta:hover { background: #f2b705; text-decoration: none; }
.pr-lamurire { text-align: center; margin: 22px auto 0; max-width: 640px; }

/* Banda de garanții */
.pr-garantii {
  list-style: none; padding: 0; margin: 36px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 900px) { .pr-garantii { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pr-garantii { grid-template-columns: minmax(0, 1fr); } }
/* ⚠️ `align-content: start`: cardurile de pe un rând se întind la înălțimea celui mai înalt, iar fără el
   grila dinăuntru împarte surplusul între rândurile ei — textul de sub un titlu scurt cobora cu un gol
   (văzut în captura din 29 Sep 2026, nu bănuit din cod). */
.pr-garantii li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; align-items: start; align-content: start;
  background: var(--culoare-suprafata); border: 1px solid var(--culoare-bordura); border-radius: var(--raza);
  padding: 14px;
}
.pr-garantii__ico {
  grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--culoare-primara-stins); color: var(--culoare-primara);
}
.pr-garantii strong { font-size: .95rem; }
.pr-garantii li > span:last-child { font-size: .85rem; color: var(--culoare-text-secundar); }

/* Secțiunile de dedesubt */
.pr-sectiune { padding-top: 64px; }
.pr-sectiune__titlu { text-align: center; font-size: 1.8rem; margin: 0; }
.pr-sectiune__intro { text-align: center; max-width: 660px; margin: 12px auto 0; color: var(--culoare-text-secundar); }
/* ⚠️ Antetul e lipit sus: o legătură la `#grila` ori la o întrebare ar fi lăsat titlul SUB el. Înălțimea e
   MĂSURATĂ de `pagini.js` (`--inaltime-antet`), nu scrisă de mână. */
#grila, .pr-faq__item { scroll-margin-top: calc(var(--inaltime-antet, 64px) + 16px); }

/* Ce primești */
.pr-include {
  list-style: none; padding: 0; margin: 28px auto 0; max-width: 960px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px;
}
@media (max-width: 860px) { .pr-include { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pr-include { grid-template-columns: minmax(0, 1fr); } }
.pr-include li {
  position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--culoare-bordura);
}
/* Bifa e desenată din CSS (două laturi ale unui chenar rotit), nu scrisă de 12 ori în HTML. */
.pr-include li::before {
  content: ""; position: absolute; left: 4px; top: 13px; width: 6px; height: 11px;
  border: solid #1f7a3f; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* Grila + calculatorul. ⚠️ `flex`, nu grilă: cât calculatorul e ascuns (fără JS), tabelul ia TOATĂ lățimea —
   într-o grilă cu coloană de 300px ar fi rămas înghesuit în ea. */
.pr-grila { margin-top: 28px; display: flex; gap: 20px; align-items: flex-start; }
@media (max-width: 880px) { .pr-grila { flex-direction: column; align-items: stretch; } }
.pr-calc {
  flex: 0 0 300px; display: grid; gap: 14px; padding: 18px;
  background: var(--culoare-suprafata); border: 1px solid var(--culoare-bordura); border-top: 4px solid #b91c1c;
  border-radius: var(--raza); box-shadow: 0 4px 9px rgba(15, 23, 42, .08);
}
@media (max-width: 880px) { .pr-calc { flex-basis: auto; } }
/* ⚠️ `hidden` bătut de `display: grid` — capcana `[hidden]` a vitrinei. Regula explicită e obligatorie. */
.pr-calc[hidden] { display: none; }
.pr-calc__titlu { margin: 0; font-size: 1.1rem; }
.pr-calc__pas { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
.pr-calc__pas button {
  height: 44px; border-radius: 8px; border: 1px solid var(--culoare-bordura); cursor: pointer;
  background: var(--culoare-primara-stins); color: var(--culoare-primara); display: grid; place-items: center;
}
.pr-calc__pas button:hover { background: var(--culoare-primara-stins-tare); }
.pr-calc__pas input {
  height: 44px; width: 100%; text-align: center; font: inherit; font-size: 1.3rem; font-weight: 700;
  color: var(--culoare-text); background: var(--culoare-suprafata);
  border: 1px solid var(--culoare-bordura); border-radius: 8px; font-variant-numeric: tabular-nums;
}
.pr-calc__rezultat { margin: 0; display: grid; gap: 12px; }
.pr-calc__rezultat div { display: grid; gap: 2px; }
.pr-calc__rezultat dt {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--culoare-text-secundar); font-weight: 600;
}
.pr-calc__rezultat dd { margin: 0; font-variant-numeric: tabular-nums; }
.pr-calc__mare { display: block; font-size: 1.9rem; font-weight: 800; }
.pr-calc__mediu { font-size: 1.2rem; font-weight: 700; }
.pr-calc__mic { display: block; font-size: .85rem; color: var(--culoare-text-secundar); }
.pr-calc__mic[hidden] { display: none; }
.pr-economie { color: var(--culoare-succes-tare); font-weight: 600; }
.pr-tabel {
  flex: 1 1 auto; min-width: 0; overflow-x: auto;
  border: 1px solid var(--culoare-bordura); border-radius: var(--raza); background: var(--culoare-suprafata);
}
.pr-tabel table { border-collapse: collapse; width: 100%; min-width: 560px; font-variant-numeric: tabular-nums; }
.pr-tabel th, .pr-tabel td { padding: 11px 14px; text-align: right; border-bottom: 1px solid var(--culoare-bordura); }
.pr-tabel th:first-child, .pr-tabel td:first-child { text-align: left; }
.pr-tabel thead th {
  background: var(--culoare-primara); color: var(--culoare-pe-plin);
  font-size: .82rem; font-weight: 600; vertical-align: bottom;
}
.pr-tabel tbody th { font-weight: 600; }
.pr-tabel tbody tr:last-child > * { border-bottom: 0; }
.pr-tabel tbody tr.is-ales > * { background: var(--culoare-primara-stins); }
.pr-tabel tbody tr.is-ales > :first-child { box-shadow: inset 4px 0 0 #b91c1c; font-weight: 700; }
.pr-tabel .pr-grila__plus td { text-align: left; color: var(--culoare-text-secundar); }

/* Întrebările frecvente */
.pr-faq { max-width: 820px; margin: 28px auto 0; display: grid; gap: 10px; }
.pr-faq__item { background: var(--culoare-suprafata); border: 1px solid var(--culoare-bordura); border-radius: var(--raza); }
.pr-faq__q { margin: 0; font-size: 1rem; }
/* Fără JavaScript titlul rămâne text, cu răspunsul la vedere; cu el, devine butonul de mai jos. */
.pr-faq__q > span { display: block; padding: 15px 18px 0; }
.pr-faq__q button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; background: none; border: 0; border-radius: var(--raza);
  font: inherit; font-weight: 600; color: var(--culoare-text); text-align: left; cursor: pointer;
}
.pr-faq__q button > span { padding: 0; }
.pr-faq__q button:hover { background: var(--culoare-primara-stins); }
.pr-faq__q button svg { flex: 0 0 auto; color: var(--culoare-primara); transition: transform .15s; }
.pr-faq__q button[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pr-faq__q button svg { transition: none; } }
.pr-faq__r { padding: 10px 18px 16px; color: var(--culoare-text-secundar); line-height: 1.5; }
.pr-faq__item:has(button) .pr-faq__r { padding-top: 0; }
/* ⚠️ Asigurare: azi `.pr-faq__r` nu declară `display`, deci `hidden` merge singur — dar în ziua în care
   cineva îi pune unul, răspunsul „strâns" ar rămâne la vedere. */
.pr-faq__r[hidden] { display: none; }
.pr-faq__r p { margin: 0; max-width: 68ch; }

/* --- Responsive --- */
@media (max-width: 640px) {
  .site-nav { display: none; }
  .site-header__inner { gap: var(--spatiu-mediu); }
  .site-header__actions { margin-left: auto; }
  .hero { padding: 48px 0 40px; }
  .hero__title { font-size: 2rem; }
}

/* ═══ BANDA DE MENTENANTA (4 Sep 2026) — vestea administratorului, sus de tot ═══
   Se deseneaza din JS (`pagini.js`), din ce a scris administratorul in Setari → Mentenanță.
   ⚠️ Sta INAINTEA antetului, pe toata latimea: asa se poarta o banda de mentenanta, si nu clinteste
   nimic din asezarea paginii. Fara ea in pagina, totul arata exact ca inainte. */
.banda-mentenanta {
  padding: 10px var(--spatiu-mediu);
  text-align: center;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  /* ⚠️ Textul vine de la om si poate fi lung: se rupe pe randuri, nu se revarsa peste pagina. */
  overflow-wrap: anywhere;
}
/* ⚠️ Cele TREI feluri, aceleasi cu lista din `core/pagini-publice.js` (`FELURI_BANDA`). Un fel nascocit
   n-ar prinde nicio regula de aici — de aceea serverul il cerne INAINTE sa ajunga in pagina. */
.banda-mentenanta--avertisment { background: #fef3c7; color: #92400e; }
.banda-mentenanta--informatie  { background: #dbeafe; color: #1e40af; }
.banda-mentenanta--eroare      { background: #fee2e2; color: #991b1b; }