/* Sistem vizual: clar, sobru, dens in date.
 *
 * Directia e de instrument de lucru pentru firme, nu de platforma de trading.
 * Fond deschis, contrast mare, linii de un pixel, fara umbre grele si fara
 * straluciri. Culoarea se foloseste ca informatie, nu ca decor.
 *
 * Un singur accent, albastru profund, pentru actiuni. Verde / chihlimbar / rosu
 * raman REZERVATE verdictelor: daca verdele apare si ca ornament, isi pierde
 * intelesul exact acolo unde omul are nevoie de el.
 *
 * Numele variabilelor sunt pastrate din varianta intunecata, pentru ca sabloanele
 * au peste 130 de stiluri inline care le folosesc. Se schimba doar valorile, deci
 * intreaga aplicatie isi schimba tema fara sa fie atinsa. */

:root {
  /* Nimic nu e alb pur. Alb #ffffff pe un fundal aproape alb da un ecran care
     "bate" - obositor la ore intregi de lucru si pe monitoare mari. Suprafetele
     coboara sub alb, iar fundalul coboara mai mult, ca sa se vada structura din
     diferenta de ton, nu din umbre. */
  --fundal:      #eceff4;
  --panou:       #fafbfd;
  --panou-2:     #f1f4f8;
  --linie:       #dfe4ec;
  --linie-tare:  #c9d1de;
  --text:        #101828;
  --text-2:      #475467;
  /* Culoarea asta tine cele peste 50 de note de subsol si toate antetele de tabel,
     adica tot textul marunt - inclusiv avertismentele de tipul "nu avem destule
     date". Pragul WCAG AA pentru text mic e 4,5:1 si trebuie atins pe FUNDAL, cel
     mai inchis dintre cele trei tonuri, nu doar pe suprafata.
     #8b95a5 dadea 3,03:1. #667085 trecea pe alb pur, dar dupa ce fundalul a coborat
     la #eceff4 a scazut la 4,32:1. #5d6879 tine pe toate trei: 5,45 / 5,11 / 4,90. */
  --text-3:      #5d6879;

  --accent:      #2e4be0;
  --accent-2:    #1e37b8;
  --accent-slab: #eef1fe;

  --ok:          #067a52;
  --ok-slab:     #e7f6f0;
  --atentie:     #a45b00;
  --atentie-slab:#fdf3e3;
  --nu:          #b42318;
  --nu-slab:     #fef0ef;

  --r:     12px;
  --r-mic: 8px;
  --umbra: 0 1px 2px rgba(16, 24, 40, .05);
  --umbra-ridicat: 0 4px 14px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundal);
  color: var(--text);
  font: 15px/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
}

/* Fara gradient alb in capul paginii: adauga exact stralucirea pe care o evitam.
   Structura se citeste din diferenta de ton intre fundal si suprafete. */

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.021em; color: var(--text); }
h1 { font-size: 27px; line-height: 1.25; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

.marca {
  font-size: 19px; font-weight: 750; letter-spacing: -.03em; color: var(--text);
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
}
.marca-text span { color: var(--accent); }
/* Semnul singur, fara nume, cand nu incape: pe telefon bara are deja sase intrari
   de meniu si numele scris ar impinge totul pe al doilea rand. */
@media (max-width: 560px) { .marca-text { display: none; } }

/* ------------------------------------------------------------ structura */

.bara {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 251, 253, .9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linie);
}
.bara-in {
  max-width: 1180px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 24px;
}
.meniu { display: flex; gap: 2px; margin-left: 12px; flex: 1; }
.meniu a {
  padding: 7px 12px; border-radius: var(--r-mic); color: var(--text-2);
  font-size: 14px; font-weight: 500; transition: background .12s, color .12s;
}
.meniu a:hover { color: var(--text); background: var(--panou-2); }
.meniu a.activ { color: var(--accent); background: var(--accent-slab); }

.cont { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.bulina {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-slab); color: var(--accent); font-weight: 650; font-size: 12px;
  border: 1px solid #dde3fd;
}

.pagina { max-width: 1180px; margin: 0 auto; padding: 34px 22px 80px; }
/* Coloana ingusta se CENTREAZA: fara margin auto, formularul statea lipit de
   stanga containerului de 1180px, cu un pustiu enorm in dreapta - pe monitor lat
   pagina parea stramb taiata. 640 in loc de 560: formularele cu selectorul de
   licitatie respirau greu la 560. */
.ingust  { max-width: 640px; margin-left: auto; margin-right: auto; }
.antet { margin-bottom: 26px; }
.antet p { color: var(--text-2); margin: 7px 0 0; }

/* ------------------------------------------------------------ carduri */

.card {
  background: var(--panou); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 22px 24px; box-shadow: var(--umbra);
}
.card + .card { margin-top: 16px; }
.card-antet {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.metrica {
  background: var(--panou); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 16px 18px; box-shadow: var(--umbra);
}
.metrica .k {
  color: var(--text-3); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px;
}
.metrica .v {
  font-size: 25px; font-weight: 700; margin-top: 6px; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.metrica .s { color: var(--text-3); font-size: 12px; margin-top: 4px; }

/* ------------------------------------------------------------ formulare */

label { display: block; font-size: 13px; font-weight: 600; margin: 18px 0 6px; }
label .op { font-weight: 400; color: var(--text-3); }

input, select, textarea {
  width: 100%; padding: 10px 13px; font-size: 15px; font-family: inherit;
  background: var(--panou); color: var(--text);
  border: 1px solid var(--linie-tare); border-radius: var(--r-mic);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-slab);
}
input::placeholder { color: var(--text-3); }
select { cursor: pointer; }
textarea { resize: vertical; min-height: 76px; }
input[type=checkbox] { accent-color: var(--accent); }

.rand { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .rand { grid-template-columns: 1fr; } }

.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; font-family: inherit;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: var(--r-mic); cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.buton:hover { background: var(--accent-2); border-color: var(--accent-2); }
.buton:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-slab); }
.buton.plin { width: 100%; margin-top: 24px; padding: 12px 18px; font-size: 15px; }
.buton.sec {
  background: var(--panou); color: var(--text); border-color: var(--linie-tare);
}
.buton.sec:hover { background: var(--panou-2); border-color: var(--text-3); }
.buton.mic { padding: 7px 13px; font-size: 13px; }

/* ------------------------------------------------------------ verdict */

.verdict { border-left: 3px solid var(--linie-tare); }
.verdict.GO          { border-left-color: var(--ok); }
.verdict.GOCUREZERVE,
.verdict.ATENTIE     { border-left-color: var(--atentie); }
.verdict.NUGO        { border-left-color: var(--nu); }

.pastila {
  display: inline-block; padding: 4px 11px; border-radius: 6px;
  font-size: 12px; font-weight: 650; letter-spacing: .2px;
  background: var(--panou-2); color: var(--text-2); border: 1px solid var(--linie);
}
.pastila.GO          { background: var(--ok-slab);      color: var(--ok);      border-color: #bfe5d6; }
.pastila.GOCUREZERVE,
.pastila.ATENTIE     { background: var(--atentie-slab); color: var(--atentie); border-color: #f3ddb4; }
.pastila.NUGO        { background: var(--nu-slab);      color: var(--nu);      border-color: #f5c7c3; }
.pastila.mica        { font-size: 11px; padding: 2px 8px; }

.avert {
  margin-top: 14px; padding: 12px 15px; border-radius: var(--r-mic);
  background: var(--atentie-slab); border: 1px solid #f3ddb4;
  font-size: 14px; color: #7a4400;
}
.avert.info {
  background: var(--accent-slab); border-color: #dde3fd; color: #22307a;
}

/* ------------------------------------------------------------ tabele */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--linie); }
th:first-child, td:first-child { text-align: left; }
th {
  color: var(--text-3); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
}
tbody tr:hover { background: var(--panou-2); }
tr.optim { background: var(--ok-slab); }
tr.optim td { font-weight: 650; }
td.num, .num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ diverse */

.sugestii {
  border: 1px solid var(--linie-tare); border-top: 0;
  border-radius: 0 0 var(--r-mic) var(--r-mic);
  background: var(--panou); max-height: 230px; overflow: auto; box-shadow: var(--umbra-ridicat);
}
.sugestii div {
  padding: 10px 13px; cursor: pointer; font-size: 14px;
  border-top: 1px solid var(--linie);
}
.sugestii div:hover { background: var(--accent-slab); }
.sugestii small { color: var(--text-3); }

/* Licitatia aleasa la evaluare. Sta ca un card in card, ca sa se vada dintr-o
   privire CE se calculeaza - inainte formularul era gol si autoritatea se scria
   de mana, deci nu stiai daca nimereste peste vreun rand din istoric. */
.aleasa {
  border: 1px solid var(--accent); border-left: 4px solid var(--accent);
  background: var(--accent-slab); border-radius: var(--r-mic);
  padding: 15px 17px; margin: 4px 0 22px;
}
.aleasa-cap { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.aleasa h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.35; }
.aleasa-cifre {
  display: flex; gap: 30px; flex-wrap: wrap; margin-top: 13px;
  padding-top: 12px; border-top: 1px solid var(--linie-tare);
}
.aleasa-cifre .k {
  display: block; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-3); margin-bottom: 2px;
}
.aleasa-cifre .v { font-size: 15px; font-weight: 650; color: var(--text); }

.actiuni-antet { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Pasul urmator de pe pagina de verdict: ce ai, si ce poti face mai departe. */
.pasi {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding: 15px 17px;
  background: var(--panou-2); border: 1px solid var(--linie);
  border-radius: var(--r-mic);
}
.pas { flex: 1 1 260px; min-width: 0; }
.pas-k { display: block; font-weight: 650; font-size: 14px; margin-bottom: 3px; }
.pas-v { display: block; font-size: 13.5px; color: var(--text-2); margin-bottom: 2px; }
.pas.gata .pas-k { color: var(--ok); }
.pas-actiuni { display: flex; gap: 9px; flex-wrap: wrap; }

.gol {
  text-align: center; padding: 54px 20px; color: var(--text-3);
  border: 1px dashed var(--linie-tare); border-radius: var(--r); background: var(--panou);
}
.gol h3 { color: var(--text-2); margin-bottom: 8px; }

.nota { font-size: 13px; color: var(--text-3); }
.nota strong { color: var(--text-2); }

/* Explicatia de sub un camp. Costul si marja sunt singurele doua cifre pe care
   le da omul si, tot ele, singurele pe care le intelege gresit - marja fiind
   procent din pretul ofertei, nu din cost. Doua randuri sub camp costa mult mai
   putin decat un verdict calculat pe cifra gresita, in care omul are incredere
   tocmai fiindca arata a rezultat. */
.ajutor {
  font-size: 12.5px; line-height: 1.55; color: var(--text-3);
  margin: 7px 0 0; padding-left: 11px; border-left: 2px solid var(--linie);
}
.ajutor strong { color: var(--text-2); }
.ajutor + label { display: block; margin-top: 18px; }

/* Pragul calculat din ce tocmai ai tastat. O formula scrisa in pagina se
   citeste si se uita; aceeasi formula pe cifrele tale, recalculata la fiecare
   tasta, se intelege din prima si nu mai are nevoie de explicatie. */
.prag {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-mic);
  background: var(--panou-2); border: 1px solid var(--linie);
  font-size: 13px; line-height: 1.65; color: var(--text-2);
}
.prag .cif { font-weight: 650; color: var(--text); }
.prag.rau { background: var(--nu-slab); border-color: #f5c7c3; color: #8a1c14; }
.prag.rau .cif { color: #8a1c14; }

.mesaj {
  padding: 12px 15px; border-radius: var(--r-mic); margin-bottom: 18px; font-size: 14px;
  background: var(--nu-slab); border: 1px solid #f5c7c3; color: #8a1c14;
}
.mesaj.bun {
  background: var(--ok-slab); border-color: #bfe5d6; color: #05583b;
}

.bara-progres { height: 6px; background: var(--panou-2); border-radius: 99px; overflow: hidden; }
.bara-progres i { display: block; height: 100%; background: var(--accent); }

.centru { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

/* ------------------------------------------------------ pagina publica

   Landingul are nevoie de contrast pe care restul aplicatiei nu-l cere: cine
   intra prima oara nu citeste, se uita. Un ecran intreg de carduri albe pe gri
   arata a raport intern, nu a produs - de aceea eroul e pe fundal inchis, cu
   marca pe el, iar sub el se vede un exemplu adevarat, nu o descriere. */

.erou {
  background: #101828; color: #f4f6fa; border-radius: 18px;
  padding: 46px 44px; margin-bottom: 22px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 42px; align-items: center;
}
.erou h1 {
  font-size: 40px; line-height: 1.12; letter-spacing: -.032em; margin: 0; color: #fff;
}
.erou p.sub { font-size: 17.5px; line-height: 1.62; color: #b6c0d0; margin: 16px 0 0; }
.erou .marunt { font-size: 12.5px; color: #8e9bb0; margin-top: 13px; }
.erou .buton.sec {
  background: transparent; color: #dfe5ef; border-color: #37425c;
}
.erou .buton.sec:hover { background: #1a2337; border-color: #4a5670; }
@media (max-width: 860px) {
  .erou { grid-template-columns: 1fr; padding: 34px 26px; gap: 30px; }
  .erou h1 { font-size: 31px; }
}

/* Exemplul din erou: seamana cu un rand real din lista, ca omul sa recunoasca
   produsul cand ajunge in el. */
.mostra {
  background: #f7f9fc; border-radius: 13px; padding: 17px 18px; color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.mostra .cap {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--text-3);
  text-transform: uppercase;
}
.mostra h3 { font-size: 15px; margin: 7px 0 3px; line-height: 1.35; }
.mostra .aut { font-size: 12.5px; color: var(--text-2); }
.mostra .randuri { margin-top: 14px; border-top: 1px solid var(--linie); }
.mostra .r {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 13px;
}
.mostra .r span:first-child { color: var(--text-2); }
.mostra .r b { font-variant-numeric: tabular-nums; }

/* Pasii de pe landing. Numele e `pas-mare` fiindca `.pas` era deja luat de
   casetele de pe pagina de verdict - si, adaugat mai jos in fisier, il calca. */
.pas-mare { position: relative; padding-left: 52px; }
.pas-mare .nr {
  position: absolute; left: 0; top: -6px;
  font-size: 34px; font-weight: 750; color: var(--linie-tare); letter-spacing: -.03em;
}
.pas-mare h3 { font-size: 15.5px; margin: 0 0 5px; }
.pas-mare p { font-size: 13.5px; color: var(--text-2); margin: 0; line-height: 1.6; }

.sectiune-titlu {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin: 44px 0 16px;
}

/* ============================================================ viata

   Sistemul de baza a fost construit sobru dinadins - un instrument de lucru, nu
   o platforma de trading. Dar sobru a alunecat in searbad: fundal plat, carduri
   care nu raspund la nimic, tabele care nu par apasabile, stari goale pustii.

   Ce urmeaza adauga adancime si reactie, FARA sa incalce regula de la care a
   pornit totul: culorile de verdict raman rezervate verdictelor, iar suprafetele
   nu capata straluciri care obosesc ochiul la ore intregi de lucru. */

/* Fundalul: doua pete foarte slabe, una albastruie sus-stanga si una neutra
   jos-dreapta. La 3-4% opacitate nu se vad ca gradient, dar ecranul inceteaza sa
   mai fie o coala moarta. `fixed` ca sa nu se miste la derulare. */
body {
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(46, 75, 224, .055), transparent 62%),
    radial-gradient(900px 520px at 92% 6%, rgba(6, 122, 82, .028), transparent 58%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Cardurile capata o muchie de lumina sus si o umbra ceva mai asezata. Diferenta
   e mica la un card singur, dar o pagina cu opt carduri se aseaza in straturi. */
.card, .metrica {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

/* Metricile: o dunga subtire de accent sus. Numarul devine ceva urmarit, nu doar
   scris. Verdele ramane doar acolo unde chiar e un verdict. */
.metrica {
  position: relative; overflow: hidden;
  transition: transform .13s ease, box-shadow .13s ease;
}
.metrica::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 78%);
  opacity: .5;
}
.metrica:hover {
  transform: translateY(-1px);
  box-shadow: var(--umbra-ridicat), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

/* Randurile apasabile din liste chiar arata apasabile. Pana acum aveau doar
   `cursor:pointer` pus inline in sablon, deci nimic nu se intampla la trecere. */
tbody tr[onclick] { cursor: pointer; transition: background .12s, box-shadow .12s; }
tbody tr[onclick]:hover {
  background: var(--accent-slab);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Starea goala: semnul marcii, sters, in loc de o caseta punctata si pustie. */
.gol {
  background:
    var(--panou) url("/static/logo.svg") no-repeat center 30px;
  background-size: 44px 44px;
  padding-top: 92px;
}
.gol h3 { margin-bottom: 6px; }

/* Butonul principal: apasarea se simte. Fara asta, la clic nu se schimba nimic
   pana se incarca pagina urmatoare, si omul apasa a doua oara. */
.buton { transition: background .12s, border-color .12s, box-shadow .12s, transform .08s; }
.buton:active { transform: translateY(1px); }

/* Bara de sus: o linie de accent, subtire, sub ea. Delimiteaza aplicatia de
   continut mai bine decat un gri de un pixel. */
.bara { border-bottom: 1px solid var(--linie); box-shadow: 0 1px 0 rgba(46, 75, 224, .07); }

/* Titlurile de sectiune capata o liniuta in fata, ca sa se citeasca drept
   sectiune, nu drept text mic ratacit. */
.sectiune-titlu { display: flex; align-items: center; gap: 10px; }
.sectiune-titlu::before {
  content: ""; width: 18px; height: 2px; background: var(--accent); border-radius: 1px;
}

/* Cardurile de verdict: pe langa muchia colorata din stanga, un fundal foarte slab
   in aceeasi familie. Verdictul se vede acum din coltul ochiului, nu doar citit. */
.card.verdict.GO   { background: linear-gradient(90deg, var(--ok-slab), var(--panou) 26%); }
.card.verdict.NUGO { background: linear-gradient(90deg, var(--nu-slab), var(--panou) 26%); }
.card.verdict.ATENTIE,
.card.verdict.GOCUREZERVE { background: linear-gradient(90deg, var(--atentie-slab), var(--panou) 26%); }

/* Cine prefera miscare putina o primeste: fara translatii, fara tranzitii. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .metrica:hover, .buton:active { transform: none; }
}

/* ------------------------------------------------------ textura de fond

   Petele radiale singure inca lasau fundalul sa para o coala goala. O grila fina
   de puncte da suprafata fara sa adauge zgomot: se citeste ca hartie milimetrica,
   ceea ce se potriveste cu un produs care masoara lucruri.

   Punctele sunt la ~5% opacitate si la 24px distanta. Peste asta incep sa se vada
   individual si obosesc; sub asta dispar si n-au rost. */
body {
  background-color: var(--fundal);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(16, 24, 40, .052) 1px, transparent 0),
    radial-gradient(1100px 620px at 12% -8%, rgba(46, 75, 224, .06), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(6, 122, 82, .03), transparent 58%);
  background-size: 24px 24px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
}

/* Aceeasi grila pe eroul inchis, in alb, plus o lumina difuza in coltul din
   dreapta-sus. Fara ele, dreptunghiul inchis arata ca o gaura in pagina. */
.erou {
  position: relative; overflow: hidden;
  background-color: #101828;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0),
    radial-gradient(620px 420px at 88% -12%, rgba(61, 92, 245, .28), transparent 64%);
  background-size: 22px 22px, auto;
  background-repeat: repeat, no-repeat;
}
/* Semnul marcii, urias si abia vizibil, taiat de marginea de jos-stanga. Da
   adancime fara sa concureze cu textul sau cu exemplul din dreapta. */
.erou::after {
  content: ""; position: absolute; left: -58px; bottom: -96px;
  width: 300px; height: 300px; pointer-events: none;
  background: url("/static/logo.svg") no-repeat center / contain;
  opacity: .05;
}
.erou > * { position: relative; z-index: 1; }

/* Grila nu razbate prin carduri: toate suprafetele au deja fundal opac propriu -
   `.aleasa` e albastruie, `.pasi` un ton mai jos, `.mostra` alba. O regula care
   le-ar uniformiza aici le-ar sterge tocmai diferentele care le disting. */

/* ============================================================ telefon

   Aplicatia a fost desenata pe ecran lat si mutata pe telefon fara sa fie
   verificata acolo. Doua lucruri o stricau:

     - bara de sus tine sase intrari de meniu SI blocul de cont pe un singur rand
       flex. La 390px de latime nu au cum sa incapa: se inghesuie unele in altele
       sau ies din ecran, iar pagina capata derulare pe orizontala.
     - tabelele au patru-cinci coloane si nu se pot micsora sub latimea textului,
       deci impingeau tot continutul in lateral.

   Nu se ascunde nimic prin `overflow: hidden` pe body - aia doar taie problema
   din vedere si o lasa acolo. Se rezolva fiecare cauza. */

@media (max-width: 780px) {
  .pagina { padding: 20px 14px 60px; }
  .card { padding: 16px 15px; }
  .metrica { padding: 14px 15px; }
  h1 { font-size: 23px; }

  /* Bara pe doua randuri: marca si contul sus, meniul dedesubt, derulabil cu
     degetul. Meniul isi pastreaza toate intrarile - ascunderea lor intr-un buton
     „hamburger" ar cere JavaScript si ar ingropa exact navigatia. */
  .bara-in {
    flex-wrap: wrap; gap: 10px; padding: 10px 14px;
  }
  .meniu {
    order: 3; width: 100%; margin-left: 0; flex: 0 0 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .meniu::-webkit-scrollbar { display: none; }
  .meniu a { white-space: nowrap; padding: 7px 10px; font-size: 13.5px; }
  .cont { margin-left: auto; gap: 8px; }
  /* Numele firmei ocupa jumatate din latime si nu ajuta la nimic pe telefon:
     omul stie in ce cont e. Raman bulina si iesirea. */
  .cont > span:not(.bulina) { display: none; }

  /* Tabelele capata derulare proprie, in loc sa impinga pagina. Marginea de sus
     ramane vizibila, deci se vede ca mai e continut in dreapta. */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  th, td { padding: 9px 10px; }
  /* Prima coloana e cea care conteaza - obiectul contractului, cerinta, denumirea -
     si are voie sa se rupa pe mai multe randuri. Restul sunt cifre scurte. */
  td:first-child, th:first-child { white-space: normal; min-width: 190px; }

  /* Subsolul: pe telefon, textul lung din dreapta ajungea lipit de legaturi. */
  footer { flex-direction: column; align-items: flex-start !important; gap: 8px; }
  footer > span:last-child {
    margin-left: 0 !important; text-align: left !important; max-width: none;
  }

  /* Randurile de butoane: pe latime mica, intinse pe tot randul si usor de atins. */
  .actiuni-antet .buton, .pasi .buton { flex: 1 1 100%; }
}

@media (max-width: 560px) {
  .erou { padding: 26px 18px; border-radius: 14px; }
  .erou h1 { font-size: 27px; }
  .erou p.sub { font-size: 16px; }
  .card { border-radius: 10px; }
  /* Butoanele mari de indemn: pe tot randul, ca degetul sa nu rateze. */
  .erou .buton, .gol .buton { flex: 1 1 100%; }
  .pas-mare { padding-left: 42px; }
  .pas-mare .nr { font-size: 28px; }
}

/* ------------------------------------------------------------ finisaje

   Trecerea de „frumusete": micro-detalii care se simt fara sa se observe.
   Regula de baza ramane neatinsa - culorile de verdict doar pentru verdicte. */

/* Continutul apare cu o respiratie scurta, in cascada. 5px si un sfert de
   secunda: sub pragul la care ar parea „efect", peste pragul la care e viu.
   prefers-reduced-motion il stinge - regula exista deja mai sus. */
.pagina > * { animation: aparitie .3s ease backwards; }
.pagina > *:nth-child(2) { animation-delay: .05s; }
.pagina > *:nth-child(3) { animation-delay: .1s; }
.pagina > *:nth-child(4) { animation-delay: .15s; }
.pagina > *:nth-child(n+5) { animation-delay: .18s; }
@keyframes aparitie { from { opacity: 0; transform: translateY(5px); } }

/* Liniuta de accent sta pe H1, nu pe containerul antetului. Pe antetele flex
   (Licitatii, cu butoanele in dreapta) un ::before de container devine element
   de flex si zboara detasat la marginea stanga - o liniuta plutind in gol, fara
   nicio legatura vizuala cu titlul. Pe h1 ramane lipita de titlu oriunde. */
.antet h1::before {
  content: ""; display: block; width: 26px; height: 3px;
  border-radius: 2px; background: var(--accent); margin-bottom: 10px;
}
/* Cand titlul poarta semnul marcii, liniuta ar fi zgomot dublu. */
.titlu-marca h1::before { display: none; }
.titlu-marca {
  display: flex; align-items: center; gap: 12px;
}
.titlu-marca img { border-radius: 8px; flex: none; }

/* Butonul principal capata umbra din propria culoare - sta „pe" pagina,
   nu „in" ea. La apasare umbra dispare, ca si cum chiar s-a apasat. */
.buton:not(.sec) { box-shadow: 0 1px 2.5px rgba(46, 75, 224, .35); }
.buton:not(.sec):active { box-shadow: none; }

/* Pastilele de verdict: un punct colorat inainte de text. Se citeste si
   periferic, si de cine nu distinge culorile. */
.pastila.GO::before, .pastila.NUGO::before, .pastila.ATENTIE::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-right: 6px; background: currentColor;
  vertical-align: 1px;
}

/* Legaturile din text: subliniere subtire care se ingroasa la trecere,
   in loc de simpla schimbare de culoare. */
.nota a, td a, p a[style*="accent"] {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  transition: text-decoration-color .12s;
}
.nota a:hover, td a:hover { text-decoration-color: currentColor; }

/* Casetele pretului de pe landing */
.pret-card {
  border-top: 3px solid var(--accent);
  display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center;
  text-align: left; padding: 30px 34px;
}
.pret-card .suma { font-size: 38px; font-weight: 750; letter-spacing: -.03em; }
.pret-card ul { margin: 0; padding: 0; list-style: none; }
.pret-card li {
  padding: 5px 0 5px 26px; position: relative; font-size: 14px; color: var(--text-2);
}
.pret-card li::before {
  content: "✓"; position: absolute; left: 0; top: 4px;
  color: var(--ok); font-weight: 700;
}
@media (max-width: 700px) {
  .pret-card { grid-template-columns: 1fr; gap: 20px; }
}

/* Palnia de pe panou: patru trepte, fiecare cu bara ei. Se citeste unde se pierde -
   daca „analizate" e 40 si „depuse" e 2, problema nu e rata de castig. */
.palnie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.palnie .treapta {
  background: var(--panou-2); border: 1px solid var(--linie);
  border-radius: var(--r-mic); padding: 13px 15px;
}
.palnie .k {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-3);
}
.palnie .v {
  font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.palnie .s { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
@media (max-width: 700px) { .palnie { grid-template-columns: repeat(2, 1fr); } }

/* Intrarile de meniu nu se frang niciodata pe doua randuri: o eticheta rupta la
   mijloc face toata bara sa arate stricata. Sub 1100px se strang paddingul si
   fontul, iar numele firmei dispare - initialele din bulina ajung. */
.meniu a { white-space: nowrap; }
@media (max-width: 1100px) {
  .meniu a { padding: 7px 9px; font-size: 13.5px; }
  .bara-in { gap: 14px; }
  .cont > span:not(.bulina) { display: none; }
}

/* ------------------------------------------------------------ cipuri de stare

   Starea zilei ca obiecte, nu ca propozitie: trei cipuri cu puncte colorate se
   citesc dintr-o privire si dau antetului ritm. Punctul verde e permis aici -
   „cu semnal bun" chiar E un verdict, nu un ornament. */
.cipuri { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 99px; font-size: 13px; font-weight: 500;
  background: var(--panou); border: 1px solid var(--linie); color: var(--text-2);
  box-shadow: var(--umbra);
}
.cip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.cip.ok::before   { background: var(--ok); }
.cip.mut::before  { background: var(--linie-tare); }

/* Treapta finala a palniei: castigul e singurul pas care chiar e un rezultat,
   deci singura bara care are voie sa fie verde. */
.palnie .treapta:last-child .bara-progres i { background: var(--ok); }

/* Selectia de text in culorile marcii - un detaliu pe care nimeni nu-l cere
   si toata lumea il simte. */
::selection { background: var(--accent); color: #fff; }

/* Subsolul poarta semnul marcii, mic si sters: pagina se termina cu o semnatura,
   nu cu o linie de text ratacita. */
footer .marca-subsol {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 650;
  color: var(--text-2);
}
footer .marca-subsol img { border-radius: 5px; opacity: .85; }

/* ------------------------------------------------------------ fundal plin

   Pe monitor lat continutul sta pe 1180px si raman margini mari, moarte - de
   acolo venea senzatia de gol. Trei straturi, toate sub continut:

   1. Grila de puncte mai vizibila si petele de culoare mai curajoase. La 5%
      punctele existau doar teoretic; la 8% se simt fara sa deranjeze textul.
   2. Doua linii verticale subtiri care marcheaza coloana de continut, ca pe o
      pagina de ziar: marginile devin intentie, nu spatiu ramas.
   3. Semnul marcii, urias si aproape invizibil, in coltul din dreapta-jos -
      acelasi truc ca pe eroul inchis, dar pe toata aplicatia. */
body {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(16, 24, 40, .08) 1px, transparent 0),
    radial-gradient(1100px 640px at 10% -6%, rgba(46, 75, 224, .085), transparent 62%),
    radial-gradient(900px 560px at 94% 2%, rgba(6, 122, 82, .05), transparent 58%),
    radial-gradient(1000px 700px at 50% 112%, rgba(46, 75, 224, .055), transparent 60%);
  background-size: 24px 24px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}

body::after {
  content: ""; position: fixed; right: -70px; bottom: -110px;
  width: 460px; height: 460px; z-index: -1; pointer-events: none;
  background: url("/static/logo.svg") no-repeat center / contain;
  opacity: .05;
}

@media (min-width: 1260px) {
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(var(--linie-tare), var(--linie-tare)) no-repeat
        calc(50% - 601px) 0 / 1px 100%,
      linear-gradient(var(--linie-tare), var(--linie-tare)) no-repeat
        calc(50% + 601px) 0 / 1px 100%;
    opacity: .55;
  }
}

/* Filigranul si liniile stau SUB tot: z-index negativ cere ca body sa nu-si faca
   propriul context de stivuire, deci nimic din ce e mai sus nu-l poate acoperi
   din greseala. Cardurile au fundal opac si il acopera oricum. */

/* ------------------------------------------------------------ traseul

   Munca reala nu e „intra la Evaluare", e un drum: gasesti licitatia, vezi cine
   castiga acolo, calculezi daca merita, incarci caietul, scoti DUAE, marchezi
   rezultatul. Pasii existau toti in produs, dar traiau pe pagini separate si omul
   trebuia sa stie singur care urmeaza. Traseul de mai jos face drumul vizibil, la
   fel pe toate paginile. */
.traseu {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  margin-top: 16px; padding: 4px 0;
}
.tr-pas {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; font-size: 13px; color: var(--text-3);
  position: relative;
}
/* Linia dintre pasi: sugereaza continuitatea. Se deseneaza intre elemente, nu
   pe ele, ca sa nu iasa o codita dupa ultimul pas. */
.tr-pas + .tr-pas::before {
  content: ""; position: absolute; left: -10px; width: 20px; height: 1px;
  background: var(--linie-tare);
}
.tr-semn {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--panou-2); color: var(--text-3);
  border: 1px solid var(--linie-tare);
}
.tr-pas.gata { color: var(--text-2); }
.tr-pas.gata .tr-semn {
  background: var(--ok-slab); color: var(--ok); border-color: #b9e3d2;
}
.tr-pas.acum { color: var(--accent); font-weight: 600; }
.tr-pas.acum .tr-semn {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-slab);
}

/* Un singur lucru de facut, nu o lista de optiuni: cand omul are de ales intre
   patru butoane egale, nu alege niciunul. */
.urmatorul {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin: 16px 0;
  background: var(--panou); border: 1px solid var(--linie);
  border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 18px 22px; box-shadow: var(--umbra);
}
.urmatorul.gata { border-left-color: var(--ok); }
.urmatorul .u-k {
  color: var(--text-3); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px;
}
.urmatorul strong { font-size: 16px; }
.urmatorul .buton { flex: none; }

/* Progresul din lista: o licitatie la care ai calculat deja pretul nu mai arata
   identic cu una pe care n-ai deschis-o niciodata. */
.pastila.progres {
  background: var(--accent-slab); color: var(--accent-2); border: 1px solid #dde3fd;
}

@media (max-width: 700px) {
  /* Pe telefon traseul devine o coloana: sase pasi pe orizontala ar da text de
     noua pixeli sau derulare laterala, si amandoua sunt mai rele decat inaltimea. */
  .traseu { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tr-pas { padding: 4px 0 4px 2px; }
  .tr-pas + .tr-pas::before {
    left: 12px; top: -3px; width: 1px; height: 8px;
  }
  .urmatorul { flex-direction: column; align-items: stretch; }
  .urmatorul .buton { width: 100%; }
}

/* Reluarea din panou: fiecare rand poarta traseul lui, deci are nevoie de aer
   intre randuri si de o linie care le desparte fara sa faca tabel. */
.reluare {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 15px 0;
}
.reluare + .reluare { border-top: 1px solid var(--linie); }
.reluare .traseu { margin-top: 9px; }
.reluare .tr-pas { padding: 4px 11px 4px 8px; font-size: 12px; }
.reluare .tr-semn { width: 18px; height: 18px; font-size: 10px; }
.reluare .buton { flex: none; }
@media (max-width: 700px) {
  .reluare .buton { width: 100%; }
}

/* Calendarul autoritatii: douasprezece coloane, lunile tari colorate. Un desen
   mic spune „aprilie si iunie" mai repede decat orice propozitie - dar propozitia
   ramane, pentru cine citeste cu cititorul de ecran. */
.calendar-luni {
  display: flex; align-items: flex-end; gap: 6px; margin-top: 16px;
  height: 72px;
}
.calendar-luni .luna {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%;
}
.calendar-luni .coloana {
  width: 100%; min-height: 3px; border-radius: 3px 3px 0 0;
  background: var(--linie-tare);
}
.calendar-luni .luna.varf .coloana { background: var(--accent); }
.calendar-luni .eticheta {
  font-size: 10px; color: var(--text-3); margin-top: 5px; font-weight: 600;
}
.calendar-luni .luna.varf .eticheta { color: var(--accent); }

/* ============================================================ finisaj 2

   A doua trecere de „mai frumos si mai clean", ceruta explicit. Nu se schimba
   sistemul - aceleasi culori, aceleasi reguli - se schimba proportiile si
   cateva detalii care faceau ansamblul sa para teapan:

     - colturile: 12px citea a formular de institutie; 14/10 aduna cardurile si
       butoanele in aceeasi familie cu eroul, care era deja mai moale
     - cifrele: mai mari cu 2px peste tot unde cifra E continutul
     - selecturile: sageata nativa de sistem arata diferit in fiecare browser;
       una desenata arata la fel peste tot */

:root { --r: 14px; --r-mic: 10px; }

/* Eroul respira: text mai mare, mai mult aer, lumina mai calda pe buton. */
.erou { border-radius: 22px; padding: 52px 48px; }
.erou h1 { font-size: 43px; }
.erou .buton:not(.sec) { box-shadow: 0 4px 18px rgba(61, 92, 245, .45); }
@media (max-width: 860px) { .erou h1 { font-size: 31px; } .erou { padding: 34px 26px; } }

/* Pastilele devin pastile de-adevaratelea. Dreptunghiul cu colturi de 6px era
   singura forma din interfata care nu se inrudea cu nimic. */
.pastila { border-radius: 999px; padding: 4px 12px; }
.pastila.mica { padding: 2px 10px; }

/* Cifrele care sunt continut, nu ornament. */
.metrica .v { font-size: 27px; }
.pret-card .suma { font-size: 42px; }

/* Tabelele: antet cu litere mai rare, randuri cu un pic mai mult aer. Densitatea
   ramane - e un instrument de lucru - dar nu se mai calca randurile. */
th { letter-spacing: .06em; }
th, td { padding: 11px 12px; }

/* Sageata selecturilor, desenata: aceeasi in Chrome, Firefox si Edge. */
select {
  appearance: none; -webkit-appearance: none;
  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.5 11 1.5' fill='none' stroke='%235d6879' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 36px;
}

/* Numerele pasilor de pe landing: din gri sters in albastru sters. Gri pe gri
   parea element dezactivat, nu numarul pasului. */
.pas-mare .nr { color: var(--accent); opacity: .28; }

/* Titlurile H2 ale cardurilor, o idee mai prezente. */
.card-antet h2, .card > h2 { font-size: 18.5px; letter-spacing: -.015em; }

/* Meniul: intrarea activa primeste si o greutate, nu doar culoare - la noua
   intrari, ochiul are nevoie de amandoua ca s-o gaseasca fara sa citeasca. */
.meniu a.activ { font-weight: 600; }

/* Focusul din tastatura se vede pe orice element interactiv, nu doar pe butoane. */
a:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}