/* Fraunces — gazduit la noi. Licenta SIL Open Font License 1.1.
   Nu atarnam de serverele Google: un site care se lauda cu independenta nu-si ia
   fontul de la altcineva. Variabil pe doua axe (opsz 9..144, wght 300..900). */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonturi/fraunces-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonturi/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonturi/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* MarketAIVerse — paleta finala, 12 sep 2026.
   Contrastele sunt calculate, nu alese din ochi. Vezi MEMORIE.md sectiunea 4b.
   REGULA: alama = valoare (bani, butoane). patina = dovada (REAL, verificat). Nu se amesteca. */

/* ⭐ Spunem browserului ca pagina e LUMINOASA, dinadins.
   Fara asta, pe un telefon cu tema intunecata el deseneaza in intuneric partile care nu-s ale
   noastre — lista deschisa a unui select, barele de derulare, campurile nestilate — si iese
   pestrit peste hartia noastra. Masurat: `color-scheme` era `normal`.
   ⛔ NU e o decizie de paleta: paleta ramane a lui Eddy. E doar o declaratie ca sa nu se bata
   desenul browserului cu al nostru. */
:root {
  color-scheme: light;
  --hartie:        #F1F3F0;
  --cerneala:      #10211D;
  --gri:           #5A6761;   /* 5,30:1 pe hartie */
  /* Era #9C5A0F. Masurat cu amestecarea transparentei facuta corect, cadea sub 4,5:1 pe
     cateva fundaluri. #925310 e aceeasi alama cu doua trepte mai inchisa: ochiul nu vede
     diferenta, pragul o vede. Pe alb 6,06:1, pe hartie 5,43:1. */
  --alama:         #925310;   /* 5,43:1 pe hartie, 6,06:1 pe alb */
  --patina:        #1F6B5B;   /* 5,68:1 pe hartie */
  --linie:         #D3D9D4;
  --hartie-umbra:  #E7EAE6;

  --inchis-fundal: #0C1513;
  --inchis-card:   #10211D;
  --inchis-text:   #E8EDE9;   /* 15,65:1 */
  --inchis-gri:    #96A5A0;   /*  7,23:1 */
  --inchis-alama:  #E0A03A;   /*  8,18:1 */
  --inchis-patina: #3E9B84;   /*  5,50:1 */
  --inchis-linie:  #2A3B36;

  --lat: 980px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hartie);
  color: var(--cerneala);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* dunga de sub antet — SINGURUL gradient din tot site-ul */
.dunga {
  height: 4px;
  background: linear-gradient(90deg, #10211D 0%, #1F6B5B 55%, #C8791E 100%);
}

header {
  border-bottom: 1px solid var(--linie);
  background: var(--hartie);
}
.antet {
  max-width: var(--lat);
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* MARCA
   Serifa, nu sans. Fiecare site de AI foloseste aceeasi sans geometrica; o serifa
   zice "document, arhiva, act" — exact ce vindem. Si de aia se tine minte.
   Umbra e apasare de tipar: o lumina sus, o umbra moale jos. Fara umbre aruncate. */
.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--cerneala);
}
.marca img { display: block; border-radius: 8px; }
.marca .wm {
  display: block;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.018em;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 2px 3px rgba(16,33,29,.16);
}
/* ⛔⛔ `z-index: 0` nu e de umplutura: el face din `b` un context de stivuire propriu.
   Fara el, `z-index:-1` de pe inel il trimite in spatele fundalului ANTETULUI (`header` are
   `background: var(--hartie)`), si inelul dispare complet.
   🔑🔑 Si iata cum m-am pacalit singur: ca sa-l verific, marisem `.marca` cu `transform: scale()`.
      Transformarea creeaza ea insasi un context de stivuire — deci inelul aparea, si am zis „e
      pus". Unealta cu care masuram schimba exact lucrul pe care il masuram.
      ⭐ Cand verifici ceva, nu modifica pagina ca sa vezi mai bine. Mareste FEREASTRA, nu
        elementul: prima nu schimba desenul, a doua il rescrie. */
.marca .wm b { font-weight: 900; color: var(--alama); position: relative; z-index: 0; }

/* ⭐ CERCUL. „Verse" devine literalmente o orbita in jurul lui „AI".
   ⛔ Il scosesem de peste tot, si nu era corect: Eddy imi ceruse sa-l scot DOAR de pe eticheta
      de patru litere. Un „nu" spus despre UN lucru nu e un „nu" despre toate lucrurile care
      semanau cu el — cand cineva respinge o bucata dintr-o propunere cu mai multe bucati,
      intreaba CARE bucata, nu sterge tot ce atinge cuvantul ala.
   `z-index: -1` il trimite in spatele literelor: orbita trece PE DUPA cuvant, nu peste el. */
.marca .wm b::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.75em;
  height: 1.62em;
  transform: translate(-50%, -50%) rotate(-20deg);
  border: 1.4px solid var(--alama);
  border-radius: 50%;
  opacity: .85;
  z-index: -1;
  pointer-events: none;
}
/* Punctul de pe orbita — planeta. La marimea din antet e cat un praf, si exact atat trebuie. */
.marca .wm b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.2px;
  height: 3.2px;
  border-radius: 50%;
  background: var(--alama);
  transform: translate(-50%, -50%) rotate(-20deg) translateX(1.375em);
  z-index: -1;
  pointer-events: none;
}
.marca small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gri);
  margin-top: 5px;
}
.antet nav { font-size: 13.5px; color: var(--gri); }

main { max-width: var(--lat); margin: 0 auto; padding: 34px 22px 70px; }

h1 {
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: -.025em;
  margin: 0 0 12px;
}
h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gri);
  margin: 34px 0 12px;
}
.intro { font-size: 17px; color: var(--gri); max-width: 62ch; margin: 0 0 8px; }
.intro strong { color: var(--cerneala); }

/* ---- formularul ---- */
.fisa {
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: #fff;
  padding: 20px;
}
.campuri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gri);
  margin-bottom: 5px;
}
/* ⛔ Aici scria `width: 100%` pe TOATE selecturile de pe site. Era scris pentru formularul
   sfatuitorului, unde asa trebuie — si a nimerit lista de asezare a pietei, care s-a intins
   pe toata latimea raftului si arata a camp uitat in pagina.
   🔑 A treia oara azi cand o regula scrisa pentru un loc anume prinde un component care doar
      trece prin ea (vezi si `ul.puncte span` si legaturile din proza). Tiparul e mereu acelasi:
      am stilat un ELEMENT acolo unde trebuia sa stilez un LOC.
   Cum se vede aerul: latimea sta la formular, unde e o decizie de asezare in pagina; infatisarea
   ramane comuna, fiindca aia chiar e a tuturor. */
.fisa select, .fisa input[type=number] { width: 100%; }
select, input[type=number] {
  padding: 9px 11px;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--cerneala);
  background: var(--hartie);
  border: 1px solid var(--linie);
  border-radius: 7px;
}
select:focus, input:focus { outline: 2px solid var(--patina); outline-offset: 1px; }

button.principal {
  margin-top: 16px;
  padding: 11px 20px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--hartie);
  background: var(--alama);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
button.principal:hover { background: #874E0C; }

/* ---- rezultate ---- */
.rand {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 2px;
  border-bottom: 1px solid var(--linie);
}
.rand:last-child { border-bottom: 0; }
.rand .nume { font-weight: 700; }
.rand .sub { font-size: 12.5px; color: var(--gri); font-weight: 400; }
.rand .viteza { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.rand.nu .nume, .rand.nu .viteza { color: var(--gri); }

/* ---- cele trei etichete. A treia nu are culoare. Asta e regula. ---- */
.et {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
}
.et-real    { background: var(--patina); color: var(--hartie); }
.et-modelat { background: transparent; color: var(--gri); box-shadow: inset 0 0 0 1px var(--gri); }
/* ⚠️ Era #8b948f = 2,80:1 pe hartie, la 10px gras. „Fara culoare" nu inseamna „fara contrast":
   ce deosebeste eticheta asta de MODELAT e CHENARUL palid, nu textul sters.
   #686F6B = 4,62:1 — tot cea mai stinsa dintre cele trei, dar acum se citeste. */
.et-nu      { background: transparent; color: #636A66; box-shadow: inset 0 0 0 1px var(--linie); }

/* ---- caseta de explicatii ---- */
.cum {
  margin-top: 10px;
  padding: 13px 15px;
  background: var(--hartie-umbra);
  border-left: 3px solid var(--patina);
  border-radius: 0 7px 7px 0;
  font-size: 13.5px;
  color: var(--gri);
}
.cum b { color: var(--cerneala); }
.cum code, code.linie {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--cerneala);
  color: var(--hartie);
  padding: 2px 6px;
  border-radius: 4px;
}
code.linie {
  display: block;
  padding: 11px 13px;
  margin: 9px 0 0;
  overflow-x: auto;
  line-height: 1.7;
}
.avert { color: var(--alama); font-weight: 600; }

footer {
  border-top: 1px solid var(--linie);
  margin-top: 50px;
  padding: 22px;
  font-size: 12.5px;
  color: var(--gri);
  text-align: center;
}

@media (max-width: 640px) {
  h1 { font-size: 26px; }
  .rand { grid-template-columns: 1fr auto; }
  .rand .et { grid-column: 2; }
}


/* ============================================================
   COMPONENTE COMUNE — adaugate pentru paginile de site
   ============================================================ */

/* ---- MENIUL ----
   ⛔ Prima varianta era gri (#5A6761) pe hartie, la 13,5px: 5,30:1 — trece pragul, dar arata
      sters. Un meniu nu trebuie doar sa fie citibil, trebuie sa se VADA de la prima privire.
      Acum e cerneala pe hartie: 14,9:1.
   ⭐ Linia de alama nu mai sta ascunsa transparenta sub fiecare legatura, ci CRESTE de la mijloc
      la trecerea cursorului. Miscarea e ce face un meniu sa para viu, nu culoarea in plus. */
.antet nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.antet nav a {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: var(--cerneala);
  text-decoration: none;
  padding: 7px 11px 8px;
  border-radius: 7px;
  transition: color .16s ease, background-color .16s ease;
}
.antet nav a::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--alama);
  transform: scaleX(0);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.antet nav a:hover { color: var(--alama); background: rgba(156, 90, 15, .07); }
.antet nav a:hover::after { transform: scaleX(1); }
.antet nav a.aici { color: var(--alama); }
.antet nav a.aici::after { transform: scaleX(1); }

/* Comutatorul de limba nu e o pagina, e un intrerupator — deci arata altfel.
   ⛔ Avea `style="opacity:.75"` scris in fiecare pagina, care il facea si mai sters decat era.
   Culoarea lui ramane neutra dinadins: alama inseamna „valoare", patina inseamna „dovada",
   iar o limba nu e niciuna dintre ele. */
.antet nav a.limba {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--gri);
  box-shadow: inset 0 0 0 1px var(--linie);
  margin-left: 9px;
  padding: 5px 9px 6px;
}
.antet nav a.limba:hover {
  color: var(--cerneala);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--gri);
}
.antet nav a.limba::after { display: none; }

/* ---- BUTONUL DE INTRARE ----
   13 sep. Eddy: „ai facut partea de account ca nu o vad?" — o facusem, dar n-o lega nimic din
   meniu. ⭐ O pagina la care nu duce niciun drum din locul unde se uita omul e o pagina care
   nu exista. Patru pagini scrise si publicate nu inseamna nimic daca intrarea lor e ascunsa
   in mijlocul altei pagini.
   Arata a buton fiindca e o ACTIUNE, nu inca un capitol de citit: chenar de cerneala, plin la
   trecere. Sta ultimul in rand, unde se uita lumea dupa intrare pe orice site. */
.antet nav a.cont {
  margin-left: 10px;
  padding: 7px 15px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--cerneala);
  color: var(--cerneala);
  font-weight: 600;
}
.antet nav a.cont:hover {
  background: var(--cerneala);
  color: var(--hartie);
  box-shadow: inset 0 0 0 1.5px var(--cerneala);
}
.antet nav a.cont::after { display: none; }
@media (max-width: 700px) { .antet nav a.cont { margin-left: 4px; } }

/* Pe telefon meniul trece pe randul lui, lipit de marginea din stanga, nu inghesuit langa marca. */
@media (max-width: 700px) {
  .antet { gap: 10px; }
  .antet nav { margin-left: -11px; }
  .antet nav a.limba { margin-left: 4px; }
}

/* ---- hero ---- */
.hero { padding: 12px 0 4px; }
.hero h1 { font-size: 42px; max-width: 17ch; }
.hero .sub { font-size: 18.5px; color: var(--gri); max-width: 60ch; margin: 0 0 22px; }
.hero .sub strong { color: var(--cerneala); }
@media (max-width: 640px) { .hero h1 { font-size: 30px; } }

.butoane { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 4px; }
a.buton, a.buton-gol {
  display: inline-block;
  padding: 11px 19px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 7px;
  text-decoration: none;
}
a.buton { background: var(--alama); color: var(--hartie); }
a.buton:hover { background: #874E0C; }
a.buton-gol { color: var(--cerneala); box-shadow: inset 0 0 0 1px var(--cerneala); }
a.buton-gol:hover { background: var(--hartie-umbra); }

/* ---- randul de adevaruri de sub hero. NU cifre inventate. ---- */
.adevaruri {
  display: grid;
  /* ⛔ Erau trei cartonase pe `auto-fit`. Pe telefon incapeau DOUA, deci al treilea ramanea
     singur si a patra celula se vedea goala si gri — fundalul grilei. Trei lucruri nu stau
     niciodata bine pe doua coloane. Ori toate trei, ori unul sub altul. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
  margin: 30px 0 6px;
}
.adevaruri div { background: var(--hartie); padding: 15px 17px; }
.adevaruri b { display: block; font-size: 21px; font-family: var(--mono); letter-spacing: -.02em; }
.adevaruri span { font-size: 12.5px; color: var(--gri); line-height: 1.5; display: block; margin-top: 3px; }
@media (max-width: 700px) { .adevaruri { grid-template-columns: 1fr; } }

/* ---- rafturi de produse ---- */
.raft { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.card {
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.card h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; }
.card .rol {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gri); margin-bottom: 9px;
}
.card p { margin: 0 0 13px; font-size: 14px; color: var(--gri); line-height: 1.6; flex: 1; }
.card .jos { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card .pret { font-family: var(--mono); font-weight: 700; font-size: 17px; color: var(--alama); }
.card .pret.necunoscut { color: var(--gri); font-size: 13.5px; font-weight: 400; font-family: var(--font); }
.card.viitor { background: var(--hartie); border-style: dashed; }
.card.viitor h3 { color: var(--gri); }

/* ============================================================
   VITRINA — placa de deasupra produsului si randul vanzatorului
   ⭐ 13 sep 2026. Eddy, uitandu-se la piata: „nu este asa frumos vizibila ca la OpenSea, nu vad
      ce vinde fiecare". Avea dreptate — era un perete de text. Un raft se rasfoieste cu ochiul.
   ⛔ Placile sunt desene, nu poze generate. O poza generata arata ca o poza generata, pe orice
      site de AI din lume, si poate pretinde ca e fotografia unui produs care inca nu exista.
      Un desen geometric nu poate minti. Se fac cu `_probe/fa_placi.py`.
   ============================================================ */

.card .placa {
  display: block;
  margin: -18px -18px 15px;
  border-bottom: 1px solid var(--linie);
  border-radius: 9px 9px 0 0;
  overflow: hidden;
  background: var(--hartie);
}
.card .placa img { display: block; width: 100%; height: auto; }

/* Cine vinde. Pe raftul nostru scrie tot timpul acelasi nume — si tocmai de aia trebuie sa scrie:
   in ziua in care apare al doilea vanzator, randul asta e deja acolo si nu se schimba nimic. */
.card .vanzator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
  font-size: 12.5px;
  color: var(--gri);
}
.card .vanzator img { width: 21px; height: 21px; border-radius: 5px; display: block; }
.card .vanzator b { font-weight: 600; color: var(--cerneala); }
.card .vanzator .et { margin-left: auto; }

.raft .card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.raft .card:has(.placa):hover {
  border-color: var(--gri);
  box-shadow: 0 7px 24px rgba(16, 33, 29, .10);
  transform: translateY(-2px);
}

/* ============================================================
   PIATA — schelet de magazin, nu de articol.
   13 sep 2026. Eddy, dupa ce reparasem cardurile: „dar toata structura de aranjament e nasoala".
   Avea dreptate si reparasem lucrul gresit. Cardurile erau simptomul; scheletul era boala.

   Ce era: o coloana de 980px, titlu, un paragraf de proza, un rand de jetoane, si noua carduri
   fiecare cu trei randuri de descriere. Adica **aranjamentul unui articol**, cu produse in loc
   de poze. De aia „pare o pagina dintr-un ziar" — chiar era.

   Ce e acum, si de ce fiecare bucata:
   · PAGINA E LATA. Restul site-ului e un document de 980px fiindca se citeste. Piata nu se
     citeste, se rasfoieste — si un raft ingust e un raft scurt.
   · FILTRELE STAU PE STANGA, intr-o coloana a lor, lipite la derulare. Pe un rand de jetoane
     incap cinci si pe urma se rup; intr-o coloana incap oricate, grupate pe intrebari („cat
     costa", „pentru cine e", „cine vinde"), si se vad TOATE deodata, cu numarul langa fiecare.
   · PLACILE N-AU PROZA. Poza, felul lucrului, numele, cine vinde, pretul. Atat.
     ⭐ Trei randuri de descriere pe fiecare placa inseamna 27 de randuri de citit ca sa te
       hotarasti. Explicatia are pagina ei; raftul are alta treaba.
   · O BARA DE UNELTE deasupra grilei: cate lucruri s-au gasit si dupa ce se aseaza.
   ============================================================ */

/* Numai piata iese din latimea de document a restului site-ului. */
/* ⛔⛔⛔ ASTA E MOTIVUL PENTRU CARE FILTRELE NU FACEAU NIMIC.
   Atributul `hidden` al browserului inseamna `display: none` — dar e o regula de foaie de stil
   IMPLICITA, cu specificitate zero. Orice `display` scris de noi o bate. Si noi scrisesem
   `.obiect { display: flex }`.
   Rezultat: JS marca sapte obiecte ca ascunse, sapte obiecte RAPORTAU `hidden === true`, si
   toate noua ramaneau pe ecran. Filtrele erau vii, numerele corecte, si nu se intampla nimic.

   🔑🔑 Si testul meu a trecut. Fiindca numarasem `o.hidden` — adica exact proprietatea pe care
      tocmai o setasem eu. **Am verificat ca mi-am scris propria comanda, nu ca ea a avut efect.**
      Un test care citeste inapoi ce ai scris tu nu e un test, e un ecou.
      Leacul, in cod si in cap: masoara ce vede OMUL — `offsetParent`, marime, pozitie. */
[hidden] { display: none !important; }

main.larg { max-width: 1320px; }

/* Eticheta pe care o aud cititoarele de ecran, dar n-o vede nimeni: langa lista de asezare
   scrie deja „Asezare" in select, deci pe ecran ar fi de doua ori. */
.ascuns-vizual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.piata-cap { margin-bottom: 20px; }
.piata-cap h1 { margin-bottom: 6px; }
.piata-cap .sub { font-size: 16px; color: var(--gri); max-width: 62ch; margin: 0; line-height: 1.6; }

/* ---- randul de cifre: ce e piata asta, in patru numere ----
   Se socotesc din marfa care chiar e in pagina. O cifra scrisa de mana aici ar imbatrani
   la primul produs adaugat, si ar imbatrani in liniste. */
.cifre-piata {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--linie);
  border-radius: 12px;
  overflow: hidden;
  margin: 18px 0 26px;
  background: var(--linie);
}
.cifre-piata div {
  flex: 1 1 130px;
  background: #fff;
  padding: 13px 17px;
  margin-right: 1px;
}
.cifre-piata div:last-child { margin-right: 0; }
.cifre-piata b {
  display: block;
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--cerneala);
  letter-spacing: -.02em;
}
.cifre-piata span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gri);
  margin-top: 3px;
}

/* ---- scheletul: raft de filtre + grila ---- */
.piata-cadru { display: grid; grid-template-columns: 208px 1fr; gap: 30px; align-items: start; }

.raft-filtre { position: sticky; top: 18px; }
.raft-filtre .grup { margin-bottom: 20px; }
.raft-filtre .grup > h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gri);
  margin: 0 0 8px;
}
.raft-filtre button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cerneala);
  background: transparent;
  border: 0;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
  transition: background-color .13s ease;
}
.raft-filtre button:hover { background: var(--hartie-umbra); }
.raft-filtre button[aria-pressed="true"] { background: var(--cerneala); color: var(--hartie); font-weight: 600; }
.raft-filtre button .cate { font-family: var(--mono); font-size: 11.5px; opacity: .65; }

/* ---- bara de unelte de deasupra grilei ---- */
.unelte-raft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 13px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--linie);
}
.unelte-raft .cauta {
  flex: 1 1 220px;
  max-width: 340px;
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--linie);
  border-radius: 9px;
  background: #fff;
  color: var(--cerneala);
  box-sizing: border-box;
}
.unelte-raft .cauta:focus { border-color: var(--gri); outline: 2px solid var(--patina); outline-offset: 1px; }
.unelte-raft .cauta::placeholder { color: var(--gri); }
.unelte-raft .cate-gasite { font-size: 13.5px; color: var(--gri); }
.unelte-raft .cate-gasite b { color: var(--cerneala); font-weight: 600; }
.unelte-raft select {
  font: inherit;
  font-size: 13.5px;
  color: var(--cerneala);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
}
.unelte-raft select:hover { border-color: var(--gri); }

/* ---- grila si placile ---- */
.vitrina { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 16px; }

.obiect {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.obiect:hover {
  border-color: var(--gri);
  box-shadow: 0 10px 28px rgba(16, 33, 29, .12);
  transform: translateY(-3px);
}
.obiect .poza { display: block; background: var(--hartie); border-bottom: 1px solid var(--linie); overflow: hidden; }
.obiect .poza img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.obiect:hover .poza img { transform: scale(1.04); }

.obiect .corp { padding: 11px 13px 0; flex: 1; }
.obiect .sus { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; min-height: 18px; }
.obiect .fel {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gri);
}

/* CE ESTE lucrul - cel mai vizibil text de pe card, dupa nume.
   Eddy, uitandu-se la un card de model video: "nici nu stiu exact ce face, zi ce face".
   Avea dreptate: locul asta il lua insigna "cules, nemasurat", adica scria mare ce NU e.
   Pe un raft, primul lucru care se citeste e CE E. Avertismentul sta langa pret, unde omul
   se uita oricum inainte sa apese - si acolo era deja scris. */
.obiect .ce-e {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--alama);
  background: rgba(156, 90, 15, .10);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.obiect .sus .et { margin-left: auto; }
.obiect h3 {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.32;
  letter-spacing: -.01em;
  /* Doua randuri fixe. Un nume lung nu are voie sa impinga pretul altei placi. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.64em;
}
/* ⛔ Stilul sta pe CLASA, nu pe locul unde s-a nascut clasa.
   Prima varianta era `.obiect h3 a.tit` — si a mers exact pana cand aceleasi nume de produse au
   aparut si pe canalul vanzatorului, in afara oricarui `.obiect`. Acolo `.tit` era scos din
   regula generala a legaturilor si n-avea alta, deci a iesit albastru subliniat, de la browser.
   🔑 A doua oara azi: **scoaterea dintr-o regula nu e acelasi lucru cu scrierea alteia.**
      Daca o clasa inseamna ceva („asta e numele unui lucru de vanzare"), scrie-i infatisarea
      o data, pe clasa, si va fi la fel oriunde o pui. */
a.tit { color: var(--cerneala); text-decoration: none; }
a.tit:hover { color: var(--alama); }
.obiect h3 a.tit::after { content: ""; position: absolute; inset: 0; }
.obiect:hover h3 a.tit { color: var(--alama); }

.obiect .talpa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 13px 11px;
  border-top: 1px solid var(--linie);
  min-height: 42px;
  box-sizing: content-box;
}
.obiect .talpa > * { line-height: 21px; }
.obiect .cine { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gri); }
/* ⚠️ Numele vanzatorului e o legatura ALTUNDEVA decat placa. Trebuie ridicat peste stratul
   invizibil care face tot dreptunghiul apasabil (`h3 a.tit::after { inset: 0 }`) — altfel
   legatura exista in cod, se subliniaza la trecere, si apasarea ajunge tot la produs.
   🔑 Doua legaturi suprapuse: cea de deasupra castiga, indiferent care e scrisa a doua. */
.obiect .cine a { position: relative; z-index: 1; color: var(--gri); text-decoration: none; }
.obiect .cine a:hover { color: var(--cerneala); text-decoration: underline; }
.obiect .cine img { width: 16px; height: 16px; border-radius: 4px; display: block; }
/* Bulina tine locul chipului la uneltele altora. ⛔ Nu punem logourile lor: sunt marcile lor,
   si un desen care imita marca altuia e si o problema de drept, si o lipsa de bun-simt. */
.obiect .cine .bulina {
  width: 16px; height: 16px; border-radius: 5px; display: block; flex: 0 0 16px;
  background: var(--hartie-umbra); box-shadow: inset 0 0 0 1px var(--linie);
}
.obiect .pret { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--alama); }
.obiect .pret.mic { font-size: 11.5px; font-weight: 400; font-family: var(--font); color: var(--gri); }
/* Trei stari de pret, trei forme diferite, ca sa se deosebeasca dintr-o privire si nu dintr-o
   citire: GRATIS e o pastila plina, pretul e alama ingrosata, iar „inca nu se stie" e text mic
   si sters. Pana acum „Free" si „€25" erau amandoua alama si semanau. */
.obiect .pret.gratis {
  background: var(--cerneala);
  color: var(--hartie);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.obiect.viitor { background: var(--hartie); }
.obiect.viitor h3 a.tit, .obiect.viitor h3 { color: var(--gri); }

.gol-vitrina {
  display: none;
  border: 1px dashed var(--linie);
  border-radius: 12px;
  padding: 34px 22px;
  text-align: center;
  color: var(--gri);
  font-size: 14px;
}
.gol-vitrina.vizibil { display: block; }

/* ---- harta, sub marfa, ca desen ---- */
.harta { margin: 42px 0 8px; }
.harta .grila {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: 12px;
  overflow: hidden;
}
.harta .col, .harta .colt, .harta .rand-et { background: var(--hartie); }
.harta .col, .harta .rand-et {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gri);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 12px;
  text-align: center;
}
.harta .rand-et { writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 11px; }
.harta .cadran { background: #fff; padding: 15px 17px 14px; }
.harta .cadran b { display: block; font-size: 15px; color: var(--cerneala); margin-bottom: 3px; }
.harta .cadran .stare { display: block; font-size: 12.5px; color: var(--gri); line-height: 1.5; margin-bottom: 9px; }
.harta .nota { font-size: 12.5px; color: var(--gri); margin: 11px 2px 0; line-height: 1.6; }

/* ---- pe ecran ingust raftul de filtre se culca peste grila ---- */
@media (max-width: 900px) {
  .piata-cadru { grid-template-columns: 1fr; gap: 18px; }
  .raft-filtre { position: static; }
  .raft-filtre .grup { margin-bottom: 12px; }
  .raft-filtre .grup > div { display: flex; flex-wrap: wrap; gap: 6px; }
  .raft-filtre button {
    width: auto;
    border: 1px solid var(--linie);
    border-radius: 999px;
    padding: 6px 13px;
  }
  /* ⛔ Pe telefon cele patru cifre se asezau una sub alta si mancau un ecran INTREG inainte
     sa se vada un singur produs. Un rand de cifre care intarzie marfa lucreaza impotriva
     paginii pe care o explica.
     (`flex-basis: 50%` n-a fost de ajuns: marginea de 1px dintre casute impingea a doua peste
     rand. La doua coloane cerute pe fata nu mai are ce sa se strecoare.) */
  .cifre-piata { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
  .cifre-piata div { margin: 0; padding: 10px 13px; }
  .cifre-piata b { font-size: 17px; }
  .cifre-piata span { font-size: 10px; letter-spacing: .06em; }
  .piata-cap .sub { font-size: 14px; line-height: 1.5; }
  /* ⚠️ Pe telefon fiecare rand de deasupra marfii costa. Masurat: cu nota lunga, primul produs
     incepea la 798px dintr-un ecran de 812 — adica sub pliu. Scurtata si stransa, ajunge la 640.
     ⭐ Nu am ascuns nimic: aceleasi cuvinte, doar mai mici si mai stranse. Ce se taie pe telefon
       se taie din AER, nu din adevar. */
  main.larg > .cum { font-size: 12.5px; padding: 11px 13px; margin-bottom: 12px; }
  .piata-cap { margin-bottom: 12px; }
  .cifre-piata { margin: 12px 0 14px; }
  .unelte-raft { padding-bottom: 10px; margin-bottom: 12px; }
}
@media (max-width: 640px) {
  /* ⛔ Masurat pe un ecran de 812px: primul produs incepea la 778px. Adica pe telefon derulai
     un ecran INTREG de titlu, cifre si filtre inainte sa vezi un singur lucru de vanzare.
     O piata in care marfa e sub pliu nu e o piata, e o brosura.
     Doua mutari, amandoua pe orizontala — singura directie care nu costa inaltime:
       · cifrele: patru casute intr-un rand, nu doua pe doua
       · filtrele: UN rand care se trage cu degetul. Titlurile de grup („Pret", „Pentru cine")
         dispar — pe telefon costa 3 randuri si nu spun nimic in plus: „Gratis" si „Pentru
         oameni" se explica singure. `display: contents` scoate cutiile grupurilor din calcul
         si lasa jetoanele copii directi ai randului. */
  .cifre-piata { grid-template-columns: repeat(4, 1fr); }
  .cifre-piata div { padding: 9px 7px; }
  .cifre-piata b { font-size: 16px; }
  .cifre-piata span { font-size: 8.5px; letter-spacing: .03em; line-height: 1.25; margin-top: 2px; }

  .raft-filtre {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 3px;
    margin-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .raft-filtre::-webkit-scrollbar { display: none; }
  .raft-filtre .grup, .raft-filtre .grup > div { display: contents; }
  .raft-filtre .grup > h3 { display: none; }
  .raft-filtre button { flex: 0 0 auto; white-space: nowrap; }

  .unelte-raft .cauta { flex: 1 1 100%; max-width: none; order: -1; }
  .vitrina { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .obiect .corp { padding: 10px 11px 0; }
  .obiect h3 { font-size: 13.5px; }
  /* ⛔ Pe o placa de 160px, talpa pe UN rand strangea pretul intr-o coloana de 60px si
     „priced by manual size" se rupea pe patru randuri, umfland placa. Pe telefon vanzatorul
     sta deasupra si pretul dedesubt: doua randuri scurte in loc de doua coloane inghesuite.
     ⭐ Regula pe care o invat a doua oara azi: nu latimea textului strica asezarea, ci decizia
       ca doua lucruri trebuie sa incapa unul langa altul cand nu mai e loc pentru asta. */
  .obiect .talpa {
    padding: 8px 11px 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 44px;
  }
  .obiect .talpa > * { line-height: 18px; }
  .obiect .pret { font-size: 14px; }
  .obiect .pret.mic { font-size: 11px; }
  .harta .grila { grid-template-columns: 1fr; }
  .harta .col, .harta .colt { display: none; }
  .harta .rand-et { writing-mode: horizontal-tb; transform: none; justify-content: flex-start; }
}


/* ============================================================
   CANALUL VANZATORULUI si drumul unui produs pe raft.
   13 sep 2026. Eddy: „trebuie sa facem partea cu user sa isi faca cont sa poata pune produse la
   vanzare, sa vedem la el pe canal ce are de vanzare, ca OpenSea".

   ⛔ Regula casei nu se schimba: nimic nu ajunge pe raft fara o proba rulata de NOI. Deci un
      produs pus de un vanzator nu sare direct pe raft — trece prin stari, si starile se vad.
      Asta e si raspunsul la intrebarea „cum poti lasa pe oricine sa listeze si sa mai si masori":
      listarea e libera, raftul nu.
   ============================================================ */

/* ---- capul de canal ---- */
.canal-cap { margin-bottom: 26px; }
.canal-banda {
  height: 128px;
  border-radius: 14px 14px 0 0;
  border: 1px solid var(--linie);
  border-bottom: 0;
  background:
    linear-gradient(120deg, rgba(156, 90, 15, .14), rgba(31, 107, 91, .16)),
    var(--hartie);
}
.canal-rand {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 20px 16px;
  border: 1px solid var(--linie);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #fff;
  flex-wrap: wrap;
}
.canal-rand .chip {
  width: 76px;
  height: 76px;
  border-radius: 16px;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(16, 33, 29, .12);
  margin-top: -34px;
  background: var(--cerneala);
  display: block;
}
.canal-rand .nume { flex: 1; min-width: 200px; padding-top: 12px; }
.canal-rand .nume h1 { font-size: 27px; margin: 0 0 3px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.canal-rand .nume .manerul {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gri);
}
.canal-rand .nume p { margin: 7px 0 0; font-size: 14px; color: var(--gri); max-width: 60ch; line-height: 1.6; }

/* Steguletul „noi l-am masurat" — patina, fiindca e dovada, nu valoare. */
.verificat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hartie);
  background: var(--patina);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ---- drumul unui produs: patru stari, la vedere ---- */
.drum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linie);
        border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; margin: 18px 0 8px; }
.drum .pas { background: #fff; padding: 14px 16px; }
.drum .pas .nr {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gri);
}
.drum .pas b { display: block; font-size: 14.5px; margin: 5px 0 4px; }
.drum .pas span { display: block; font-size: 12.5px; color: var(--gri); line-height: 1.55; }
.drum .pas.al-nostru { background: rgba(31, 107, 91, .06); box-shadow: inset 3px 0 0 var(--patina); }
/* Tenta de patina inchide fundalul cu un pas, si gri-ul cadea la 3,83:1. */
.drum .pas.al-nostru span, .drum .pas.al-nostru .nr { color: #45504A; }

/* ---- tabelul de produse al vanzatorului ---- */
.lista-produse { border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; background: #fff; }
.lista-produse .rand-p {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--linie);
}
.lista-produse .rand-p:last-child { border-bottom: 0; }
.lista-produse .rand-p img { width: 44px; height: 33px; border-radius: 5px; border: 1px solid var(--linie); display: block; }
.lista-produse .rand-p .ce b { display: block; font-size: 14.5px; }
.lista-produse .rand-p .ce span { display: block; font-size: 12px; color: var(--gri); margin-top: 2px; }
.lista-produse .rand-p .pret { font-family: var(--mono); font-weight: 700; font-size: 14.5px; color: var(--alama); white-space: nowrap; }
.lista-produse .rand-p .pret.mic { font-size: 11.5px; font-weight: 400; font-family: var(--font); color: var(--gri); }

/* ---- caseta „inca nu e deschis" ----
   ⛔ Nu e decor si nu e modestie. Paginile astea arata forma a ceva ce inca NU functioneaza, si
      un formular care arata a formular adevarat, dar nu duce nicaieri, e o minciuna desenata.
      De aia sta sus, in alama, si de aia nu exista NICIUN camp de parola nicaieri: nu cerem ce
      n-avem unde tine. */
.nu-e-deschis {
  border: 1px solid var(--alama);
  border-left-width: 4px;
  border-radius: 10px;
  background: rgba(156, 90, 15, .05);
  padding: 15px 18px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.65;
}
.nu-e-deschis b { color: var(--alama); }

/* ---- formularul de listare (aratat, nu functional) ---- */
.formular { border: 1px solid var(--linie); border-radius: 12px; background: #fff; padding: 20px 22px; }
.formular .camp { margin-bottom: 17px; }
.formular label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.formular .ajutor { display: block; font-size: 12.5px; color: var(--gri); margin-top: 5px; line-height: 1.55; }
.formular input[type=text], .formular textarea, .formular select {
  width: 100%;
  padding: 9px 11px;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--cerneala);
  background: var(--hartie);
  border: 1px solid var(--linie);
  border-radius: 7px;
  box-sizing: border-box;
}
.formular textarea { min-height: 88px; resize: vertical; line-height: 1.55; }

/* ⛔ Un camp oprit trebuie sa ARATE oprit. Butonul „Trimite spre masurare" era alama plina si
   apasabil la vedere, desi `disabled` — adica pagina spunea sus ca nu e deschisa si dedesubt
   te invita sa apesi. Scrisul care contrazice desenul pierde de fiecare data: omul crede
   desenul, apasa, si nu se intampla nimic.
   🔑 Daca ceva nu poate fi folosit, asta se spune in forma lui, nu doar intr-un paragraf. */
:disabled { cursor: not-allowed; }
.formular input:disabled, .formular textarea:disabled, .formular select:disabled {
  background: var(--hartie-umbra);
  color: var(--gri);
  border-style: dashed;
}
button.principal:disabled {
  background: var(--hartie-umbra);
  color: var(--gri);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.formular .doua { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* butoanele mici din panoul vanzatorului (trimite / adu inapoi in ciorna) */
.mic-buton {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cerneala);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.mic-buton:hover { border-color: var(--gri); background: var(--hartie); }
.mic-buton:disabled { opacity: .5; cursor: not-allowed; }
.lista-produse .rand-p { grid-template-columns: 44px 1fr auto auto auto; }

@media (max-width: 760px) {
  .drum { grid-template-columns: 1fr; }
  .canal-rand .chip { width: 64px; height: 64px; margin-top: -28px; }
  .canal-rand .nume h1 { font-size: 22px; }
  .lista-produse .rand-p { grid-template-columns: 40px 1fr; row-gap: 6px; }
  .lista-produse .rand-p .pret, .lista-produse .rand-p .et { grid-column: 2; justify-self: start; }
  .formular .doua { grid-template-columns: 1fr; }
}

footer .subsol {
  max-width: var(--lat); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; text-align: left;
}
footer a { color: var(--gri); text-decoration: none; }
footer a:hover { color: var(--cerneala); }

/* ---- LEGATURILE DIN TEXT ----
   ⛔ Nu existau deloc. Tot site-ul avea butoane frumoase, meniu, etichete — si fiecare legatura
      din proza era albastrul implicit al browserului, subliniat gros. Singura culoare de pe
      site care nu era a noastra, si tocmai pe cuvintele pe care vrem sa se apese.
   🔑 Am scris reguli pentru tot ce am ADAUGAT si niciuna pentru ce era deja acolo de la sine.
   Alama, fiindca o legatura e o actiune — si regula casei zice alama = valoare si actiune. */
main a:not(.buton):not(.buton-gol):not(.tit) {
  color: var(--alama);
  text-decoration: underline;
  text-decoration-color: rgba(156, 90, 15, .35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .14s ease, text-decoration-color .14s ease;
}
main a:not(.buton):not(.buton-gol):not(.tit):hover {
  color: #874E0C;
  text-decoration-color: currentColor;
}
/* In blocul inchis hartia e cerneala, deci alama trebuie sa fie cea deschisa. */
.inchis a:not(.buton):not(.buton-gol) { color: var(--inchis-alama); text-decoration-color: rgba(224, 160, 58, .4); }

/* ⛔⛔⛔ AICI AM SCRIS 12 REGULI CARE AU STRICAT 24 DE LOCURI BUNE, si le-am sters.
   Auditul meu de contrast a raportat 1,06:1 pe textele din `.inchis` si am tras concluzia ca
   blocul e intunecat si copiii lui mostenesc culori de zi. Am scris remapari de intuneric —
   si numarul de probleme a CRESCUT de la 23 la 47.

   Fiindca `.inchis` **n-are fundal intunecat deloc.** Se cheama asa din alt motiv; intunecate
   sunt doar cardurile dinauntru, prin `style=` scris in pagina. Deci „reparatia" mea punea text
   deschis pe fundal deschis.

   🔑🔑 A doua oara azi cand instrumentul de masura m-a mintit, si a doua oara cand semnul a fost
      acelasi: **un rezultat care se inrautateste dupa o reparatie nu e o reparatie incompleta,
      e o reparatie gresita.** Prima data a fost `transform: scale()` care schimba stivuirea pe
      care o masuram; acum, un nume de clasa din care am dedus o infatisare in loc s-o citesc.
   ⭐ Regula: inainte sa repari ce zice un instrument, verifica INSTRUMENTUL pe un caz al carui
      raspuns il stii. O singura intrebare — „chiar are `.inchis` fundal inchis?" — ar fi taiat
      tot drumul asta.
   (Numele insela: `.inchis` = „inchis" ca in „inchis la culoare"? Nu. Am presupus din nume.) */
.inchis a:not(.buton):not(.buton-gol):hover { color: #F0BC63; }

/* ---- imagini ---- */
figure.poza { margin: 0 0 6px; }
figure.poza img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; border: 1px solid var(--linie);
}
figure.poza figcaption {
  font-size: 12px; color: var(--gri); margin-top: 8px; line-height: 1.55;
}
.inchis figure.poza img { border-color: var(--inchis-linie); }
.inchis figure.poza figcaption { color: var(--inchis-gri); }
.hero-poza { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: center; }
@media (max-width: 760px) { .hero-poza { grid-template-columns: 1fr; } }

/* ---- filtre pe raft. Tot in browser: serverul genereaza manuale si n-are voie sa munceasca. ---- */
.filtre { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.filtre button {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: 99px; cursor: pointer;
  color: var(--gri); background: transparent;
  border: 1px solid var(--linie);
}
.filtre button:hover { color: var(--cerneala); border-color: var(--gri); }
.filtre button[aria-pressed="true"] {
  color: var(--hartie); background: var(--cerneala); border-color: var(--cerneala);
}
.gol { display: none; padding: 26px 2px; color: var(--gri); font-size: 15px; }
.gol.vizibil { display: block; }

/* ⛔⛔⛔ REGULILE ASTEA LE-AM STERS EU, DIN GRESEALA, SI N-AM OBSERVAT ORE INTREGI.
   Cand am refacut piata, am inlocuit un BLOC INTREG de CSS delimitat de doua repere
   („de la harta pana la subsol") — si intre ele statea si definitia blocului inchis.
   Rezultat: `.inchis` a ramas fara fundal, deci un panou care trebuia sa fie negru a devenit
   alb, iar butonul dinauntru — scris cu litera deschisa, ca pentru negru — a ajuns
   ALB PE ALB. O casuta goala pe pagina de produs, chiar langa pret.
   🔑 A taia dupa doua repere e o unealta ascutita: nu vezi ce era la mijloc. Cand inlocuiesti
      un interval, numara ce intra in el INAINTE, si numara ce a ramas DUPA.
   ⭐ Si inca ceva: paguba n-a iesit la iveala uitandu-ma la pagina pe care o schimbam (piata),
      ci masurand contrastul pe TOATE paginile. Stricaciunile nu apar unde lucrezi. */
.inchis {
  background: var(--inchis-fundal);
  color: var(--inchis-text);
  border-radius: 12px;
  padding: 26px;
  margin: 12px 0;
}
.inchis h2 { color: var(--inchis-gri); margin-top: 0; }
.inchis h3 { margin: 0 0 8px; font-size: 20px; }
.inchis h1 { margin: 0 0 8px; letter-spacing: -.02em; }
.inchis p { color: var(--inchis-gri); max-width: 66ch; }
.inchis strong { color: var(--inchis-text); }
.inchis .et-real { background: var(--inchis-patina); color: var(--inchis-fundal); }
.inchis .et-modelat { color: var(--inchis-gri); box-shadow: inset 0 0 0 1px var(--inchis-gri); }
.inchis code.linie { background: #08100E; color: var(--inchis-text); }
.inchis .pret { color: var(--inchis-alama); }

/* Exemple de curl pe mai multe randuri (pagina forumului, partea pentru boti).
   Reia stilul lui `code.linie`, dar pastreaza randurile — o comanda rupta pe mai multe
   randuri nu se poate lipi daca browserul i le aduna la loc intr-unul singur. */
pre.cod {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--cerneala);
  color: var(--hartie);
  padding: 11px 13px;
  margin: 9px 0 0;
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.7;
  white-space: pre;
}
.inchis pre.cod { background: #08100E; color: var(--inchis-text); }

/* Tabelele pentru masini de pe `what-can-i-run.html`. Sunt scrise in HTML simplu ca sa le poata
   citi orice program fara sa ruleze JavaScript — dar asta nu e un motiv sa arate ca un tabel de
   Word. Stilul nu atinge nicio litera din continut. */
#tabel-static { margin-top: 26px; }
#tabel-static .cap-masina {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 30px 0 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cerneala);
  font-size: 17px;
  letter-spacing: -.01em;
}
#tabel-static .cap-masina span {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--gri);
  letter-spacing: 0;
}
table.tabel-masini {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.tabel-masini th {
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gri);
  padding: 10px 12px 8px 0;
}
table.tabel-masini td {
  padding: 9px 12px 9px 0;
  border-top: 1px solid var(--linie);
  vertical-align: middle;
}
table.tabel-masini tbody tr:hover { background: var(--hartie-umbra); }
table.tabel-masini td:first-child, table.tabel-masini th:first-child { padding-left: 12px; }
table.tabel-masini td:first-child { font-weight: 600; }
/* ⭐ Cifra sta in monospatiu si aliniata la dreapta: asa se citeste o coloana de viteze dintr-o
   privire, fiindca virgulele ajung una sub alta. Intr-un font obisnuit nu ajung. */
table.tabel-masini .nr {
  font-family: var(--mono);
  text-align: right;
  white-space: nowrap;
  padding-right: 18px;
}
table.tabel-masini td:last-child { text-align: right; padding-right: 12px; }
/* Randul pentru un model care nu incape: stins, nu rosu. Nu e o eroare, e un raspuns. */
table.tabel-masini tr.rece td { color: var(--gri); }
table.tabel-masini tr.rece td:first-child { font-weight: 500; }
@media (max-width: 620px) {
  table.tabel-masini { font-size: 13px; }
  table.tabel-masini td, table.tabel-masini th { padding-right: 6px; }
  table.tabel-masini .nr { padding-right: 8px; }
}

/* ⭐ Eticheta dintr-un tabel nu e aceeasi cu eticheta de pe un card. Pe card e una singura si
   trebuie vazuta; aici vine de 84 de ori, si un chenar repetat de 84 de ori nu mai atrage
   atentia — face zgomot. Deci ramane culoare doar unde spune ceva pe care ochiul trebuie sa-l
   prinda: „masurat" (rar si important) si „nu incape". „Estimat" e cazul obisnuit, deci sta
   linistit. Textul e acelasi pentru cine citeste pagina cu un program. */
table.tabel-masini .et {
  font-family: var(--mono);
  font-size: 9.5px;
  padding: 0;
  background: none;
  box-shadow: none;
  letter-spacing: .09em;
}
table.tabel-masini .et-modelat { color: var(--gri); }
table.tabel-masini .et-nu      { color: var(--alama); font-weight: 800; }
table.tabel-masini .et-real {
  color: var(--hartie);
  background: var(--patina);
  padding: 3px 7px;
  border-radius: 3px;
}