/* ═══════════════════════════════════════════════════════════════════════════════
   FOAIA APLICATIEI — limbajul panou, dinauntru.

   Pana pe 30-Aug-2026 aici traia alt limbaj: `--accent:#0B63F6`, Inter de sistem,
   alb pe alb. `design/aplicatie.html` il numea pe nume si scria „se retrage" —
   documentul asta e retragerea. Nu e o schimbare de paleta: e aceeasi regula ca pe
   vitrina, citita dinauntru — CE E CORP E CREM, CE AFISEAZA INFORMATIE E NEGRU.
   Pe vitrina asta da o masa neagra cu o placa crem pusa deasupra. Aici nu mai exista
   masa: crema e podeaua, iar displayurile negre sunt datele.

   ORDINEA DE PRECEDENTA, cand ceva se contrazice:
     1. site/assets/panou.css — foaia vie a vitrinei, in productie din 25-Aug. Ea are
        dreptate intotdeauna: stilul e cel care ruleaza, documentul poate ramane in urma.
     2. design/brandbook.html — sursa unica pentru marca, culoare, tipografie, pictograme.
     3. design/aplicatie.html — ce e specific interiorului: densitate, comenzi, stari.
     4. foaia asta.
   Tokenii de mai jos sunt COPIATI din (3), nu rescrisi din memorie. Cifra de contrast
   sta langa fiecare culoare derivata, fiindca acolo au fost masurate, nu deduse.

   TREI CAPCANE care au costat deja, si care raman valabile in limbajul nou:
   · Pe crem, PORTOCALIUL DA 2,87:1. Nu e niciodata cerneala si nu e niciodata muchie
     de comanda. E fundal de placuta (cu cerneala --gr peste el) sau linie de accent.
     Ca cerneala pe crem se foloseste --orc (#922F15, ~6,3:1). Pe negru portocaliul da
     5,39:1 si redevine cerneala, ca pe vitrina.
   · `[hidden]` e batut de orice `display:` din foaia autorului. De SAPTE ori pana acum
     (.galerie-poza, .comanda-rand, .pentru-cine, .panou-actiuni, .prop-cap, si — chiar
     la rescrierea asta — #wrap-login si .ecran). Fiecare regula care da `display` unui
     element pe care app.js il ascunde are perechea ei `[hidden] { display: none }`
     scrisa imediat sub ea. Capcana s-a repetat inclusiv in foaia care o documenteaza:
     nota nu ajunge, perechea se scrie in aceeasi apasare de taste ca `display`-ul.
   · `.fila` inseamna AICI o sectiune de continut (<section class="fila">), NU butonul
     de fila din design/aplicatie.html. Componenta aia n-a fost copiata; daca vreodata
     se copiaza, se redenumeste, altfel butonul primeste stilul sectiunii.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── corpul negru (displayuri, raft, War Room) ─────────────────────────────── */
  --gr:#0C0D0F; --gr2:#141619; --gr3:#1C1F23;
  --ink:#EDEEEA; --ink2:#9AA0A2; --ink3:#888F92;
  --rule:#23262A; --rule2:#191C1F;

  /* ── crema (podeaua aplicatiei) ────────────────────────────────────────────── */
  --ch:#E7E5E0; --ch2:#CFCDC6; --ch3:#D9D7D1;
  --chink:#17181A; --chink2:#43474A; --chink3:#4E5255;
  --chrule:#B4B2AB; --chrule2:#C6C4BD;

  /* ── displayul: neschimbat fata de vitrina. Aici stau CIFRELE. ─────────────── */
  --disp:#0C0D0F; --disp2:#16181B;
  --dispink:#EDEEEA; --dispink2:#9AA0A2; --disprule:#25282C;

  --or:#F04E23;
  --cy:#25BFC9; --bl:#3A72E8; --ye:#F3B01B; --gn:#3FA463; --mg:#C74BA0; --rd:#DC3B22;

  /* fisa: singura suprafata mai deschisa decat corpul. --chink pe ea: 15,72:1 */
  --ch0:#F2F1ED;
  /* muchia unei comenzi. SC 1.4.11 cere 3:1, iar --chrule da 1,69:1 pe crem.
     Asta da 3,93:1 pe crem, 3,43:1 pe randul alternat, 4,37:1 pe fisa. */
  --muchie:#71706F;
  /* lampa: portocaliul se LUMINEAZA la atingere, nu se stinge. Cerneala ramane --gr:
     5,39 stins / 5,82 aprins / 6,15 apasat. Intunecarea, reflexul de web, ar fi coborat
     cerneala la 4,38:1 — sub prag exact in starea in care omul se uita la buton. */
  --or2:#EF5D36; --or3:#EF6641;
  /* cerneala stinsa. SUB PRAG, declarat: 2,79:1 pe crem — o comanda dezactivata nu e
     text de citit, e o comanda care nu e acolo. */
  --stins:#888989;

  /* cerneala de familie pe CORP. Derivate la 5,0:1 pe --ch2, cel mai inchis crem din
     familie, ca sa nu depinda de ce suprafata crem le sta sub. Pe corp dau ~6,3:1. */
  --cyc:#115A5E; --blc:#274D9D; --yec:#694C0C; --gnc:#235C37;
  --mgc:#84326A; --rdc:#972917; --orc:#922F15;
  /* fundal de pastila: OPAC, nu spalare translucida — o spalare peste doua suprafete
     crem diferite (corp si fisa) da alt raport pe fiecare. 20% familie in crem. */
  --cyf:#C0DDDB; --blf:#C4CEE2; --yef:#E9DAB9; --gnf:#C5D8C7;
  --mgf:#E1C6D3; --rdf:#E5C3BA; --orf:#E9C7BA;
  /* cerneala de familie pe DISPLAY. Patru raman familia; trei cadeau sub 4,5:1 pe
     --disp2 (bl 4,03 · mg 4,19 · rd 3,97) si sunt luminate la 5,0:1. */
  --cyd:var(--cy); --yed:var(--ye); --gnd:var(--gn); --ord:var(--or);
  --bld:#5284EE; --mgd:#D35CAD; --rdd:#E85842;

  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* Scara de pas. Vitrina are 8px; aplicatia coboara la 4px si urca in trepte fixe.
     Nimic intre. Daca un spatiu nu e in lista, e gresit, nu „aproape". */
  --p1:4px; --p2:8px; --p3:12px; --p4:16px; --p6:24px; --p8:32px; --p12:48px;
  --h:34px; --hs:26px;              /* inaltimi de comanda; 44px la `pointer:coarse` */
  --r0:8px; --r:12px; --r2:16px;

  /* ── PUNTEA CATRE NUMELE VECHI ───────────────────────────────────────────────
     Foaia veche numea cinci lucruri: --bg, --panel, --line, --text, --muted, plus
     --accent/--ok/--err. Numele raman, fiindca sunt citite din ~180 de locuri si din
     doua pagini care nu sunt aplicatia (war.html, hunter.html) — dar de aici in jos
     ele NU mai sunt culori, ci ROLURI legate de tokenii de sus. Un rand nou nu are
     voie sa scrie o culoare literala: daca lipseste un rol, se adauga aici.

     --accent e singurul care nu se leaga de --or: ca fundal de buton portocaliul e
     corect (cerneala --gr peste el), dar ca CERNEALA pe crem da 2,87:1. Rolul
     „cerneala de accent" primeste --orc; portocaliul plin se cere pe nume, acolo unde
     chiar e placuta (vezi `button.primar`). */
  --bg: var(--ch0);          /* suprafata unei fise — mai deschisa decat podeaua */
  --panel: var(--ch0);
  --line: var(--chrule2);
  --sel: var(--ch3);
  --text: var(--chink);
  --muted: var(--chink3);
  --accent: var(--orc);      /* cerneala de accent, 6,3:1 pe crem */
  --ok: var(--gnc);
  --err: var(--rdc);
  --font: var(--sans);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--chink);
  /* Podeaua e --ch, nu --bg: fisele sunt mai deschise decat ea, si daca podeaua ar fi
     tot --ch0 n-ar mai avea de ce sa se distinga o fisa. */
  background: var(--ch);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Inelul de focus e NEGRU pe corp, nu portocaliu: portocaliul da 2,87:1 pe crem, sub
   pragul de 3:1 pentru elemente negrafice. Pe display ramane portocaliu (5,39:1),
   acolo unde a fost dintotdeauna. */
:focus-visible { outline: 2px solid var(--chink); outline-offset: 2px; }
.raft :focus-visible, .bara-sus :focus-visible, .disp :focus-visible,
body.war :focus-visible { outline-color: var(--or); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.wrap { max-width: 760px; margin: 0 auto; padding: var(--p12) var(--p6) 96px; }

h1 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.06;
     margin: 0 0 var(--p8); }
/* Pana pe 31-Aug-2026 antetul mai tinea si selectorul de limba si „Ieși" (`.antet-dreapta`,
   in dreapta, `justify-content: space-between`) — de-acolo veneau `flex-wrap`-ul si masura
   de 286px din comentariul vechi. Amandoua au urcat in `.bara-sus`; antetul a ramas cu un
   singur copil, titlul. */
.antet { margin: 0 0 var(--p6); padding-bottom: var(--p3);
         border-bottom: 1px solid var(--chrule2); }
.antet h1 { margin: 0; }
/* Eticheta mono: acelasi rol peste tot (capete de bloc, de coloana, de grup). Nu e
   titlu — e placuta gravata de deasupra unui grup de controale. */
h2, .kanban-cap, .raft-grup, .copy-eticheta, .rez-cand, .camp-eticheta {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--chink3);
}
h2 { margin: var(--p8) 0 var(--p3); }
h3 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0; }

/* Padding mare + marginile negative care il anuleaza: pe telefon zona apasabila ajunge
   la ~45px, cat cere degetul, dar butonul ramane lipit de coltul de sus-dreapta ca si
   cum n-ar avea padding deloc. Masurat pe harness la 375px: era 39x29. */
button.discret { background: none; border: none; color: var(--chink3); font-size: 13px;
                 font-weight: 600; font-family: var(--sans);
                 padding: 12px; margin: -12px -12px -12px 0; cursor: pointer;
                 border-radius: var(--r0); }
button.discret:hover { color: var(--chink); background: var(--ch3); }

/* ── CIFRA DE PE ACASA ────────────────────────────────────────────────────────
   Cifra sta pe DISPLAY, nu pe crem. E chiar teza limbajului: ce afiseaza informatie
   e negru. Pe foaia veche statea pe alb, in aer, si arata ca un titlu mare. */
.cifra-cutie {
  display: inline-flex; flex-direction: column; gap: var(--p1);
  min-width: 220px; padding: var(--p4) var(--p6);
  background: var(--disp); border: 1px solid var(--disprule); border-radius: var(--r);
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.55) inset;
}
.cifra { font-family: var(--mono); font-size: 52px; font-weight: 600;
         letter-spacing: -.03em; line-height: 1; color: var(--dispink);
         font-variant-numeric: tabular-nums; }
.cifra-eticheta { font-family: var(--mono); font-size: 10.5px; font-weight: 500;
                  letter-spacing: .16em; text-transform: uppercase;
                  color: var(--dispink2); }

/* ── GRILA DE METRICI DE PE ACASA ────────────────────────────────────────────
   "din toate zonele de unde putem avea metrics" (Ali, 31-Aug-2026). Fiecare cutie e un
   display negru mic, ca `.cifra-cutie` desfacuta in bucati — nu o suprafata noua, si nu
   crem: cifrele afiseaza informatie, deci raman pe negru, la fel ca tabloul contoarelor
   (`.cont-cel`, mai jos in foaie).

   Latimea, ca la `.acasa-lista`: legata de display, nu de ecran — pe monitor lat patru
   coloane intinse pe 1400px n-ar mai citi ca un tablou.

   `<button>`, deci acelasi razboi cu regula de scara ca la `.fapt` mai sus:
   `justify-content: center`, `height: var(--h)` (44px la pointer:coarse) si
   `white-space: nowrap` din foaia de comenzi ar fi facut din fiecare cutie o pastila
   centrata pe un rand. Toate trei se rescriu aici, explicit. */
/* `.ecran-metrici`: numele era `.acasa-metrici` pana pe 31-Aug, cand gramada de placi
   negre a inceput sa se puna si pe alte file (Comenzi, Rezultate, Calendar, Abonament),
   nu doar pe Acasa — s-a redenumit ca sa nu ramana un nume de fila pe o clasa folosita in
   sase file. Regulile de mai jos (latime, scara, `<button>`) raman neschimbate. */
.ecran-metrici {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--p2);
  max-width: 720px; margin-top: var(--p4);
}
.ecran-metrici[hidden] { display: none; }

/* Varianta cu putine placi (2-4), pe file care nu au 13 cifre ca Acasa: `auto-fit` intinde
   celulele cate sunt, in loc sa lase goale coloanele ramase din grila fixa de 4. */
.ecran-metrici--compacta { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Placile astea nu duc nicaieri (sunt pe fila pe care oricum stai, nu un link spre alta) —
   deci sunt `<div>`, nu `<button>`, si nu iau starea de hover/apasare mostenita din `.em-cel`. */
.ecran-metrici--compacta .em-cel:hover,
.ecran-metrici--compacta .em-cel:active {
  background: var(--disp); box-shadow: 0 2px 8px -4px rgba(0,0,0,.5) inset;
}

.em-cel {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 3px;
  width: 100%; height: auto; min-height: 64px; padding: var(--p3);
  background: var(--disp); border: 1px solid var(--disprule); border-radius: var(--r0);
  white-space: normal; text-align: left;
  box-shadow: 0 2px 8px -4px rgba(0,0,0,.5) inset;
}
.em-cel:hover { background: var(--disp2); }
.em-cel:active { background: var(--disp2); box-shadow: 0 1px 4px rgba(0,0,0,.4) inset; }
.em-n { font-family: var(--mono); font-size: 20px; font-weight: 600;
        letter-spacing: -.02em; line-height: 1.15; color: var(--dispink);
        font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Sufixul („/ 20", „nelimitat"): tot --dispink2, deci aceeasi masuratoare de 7,34:1 de mai
   jos. 12px si greutate normala, ca sa se citeasca drept context al cifrei, nu ca parte din
   ea. `margin-left` in px, nu var(--p1): e o distanta tipografica intre doua cuvinte, nu un
   pas din grila de spatiere. */
.em-s { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--dispink2);
        margin-left: 5px; }
/* --dispink2 pe --disp: 7,34:1 — masurat mai jos in foaie ("Cernelurile de pe display"),
   aceeasi pereche ca `.cifra-eticheta` si `.cont-e`. */
.em-e { font-family: var(--mono); font-size: 9.5px; font-weight: 500;
        letter-spacing: .1em; text-transform: uppercase; color: var(--dispink2); }

@media (max-width: 700px) {
  .ecran-metrici { grid-template-columns: repeat(2, 1fr); }
}

/* Randurile de „ce te asteapta", sub display. Sunt CORP, nu display: cifra de deasupra e o
   masuratoare, astea sunt comenzi pe care le apesi — deci crem, dupa regula din
   design/aplicatie.html. Un al doilea dreptunghi negru sub primul ar fi spus ca si ele sunt
   ceva de citit.

   Latimea e legata de a displayului, nu de a ecranului: pe un monitor lat, patru randuri
   intinse pe 1400px nu se mai citesc ca o lista, iar coloana din stanga a textului ar fugi
   de sub cifra. */
.acasa-lista { display: flex; flex-direction: column; gap: var(--p2);
               max-width: 520px; margin-top: var(--p4); }

/* `<button>`, deci se lupta cu regula de scara de mai jos: `justify-content: center`,
   `height: var(--h)` si `white-space: nowrap` de acolo ar fi facut din randul asta o pastila
   de 44px cu textul centrat. Toate trei se rescriu aici, explicit — vezi si nota de la
   `.raft-r`, unde exact `justify-content` uitat a tinut pictogramele stramb saptamani.
   `min-height` peste `--h`: cu `height: auto`, tinta degetului nu mai vine de la token
   (`:root { --h: 44px }` sub `pointer: coarse`), deci se scrie aici. */
.fapt {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 3px;
  width: 100%; height: auto; min-height: 56px; padding: var(--p3) var(--p4);
  border-radius: var(--r); white-space: normal; text-align: left;
}
.fapt-titlu { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
/* Mono, ca `.rand-sub`: subtitlul e o explicatie de aparat, nu o a doua propozitie de
   acelasi rang. --chink3 pe --ch0 da 6,98:1, deci ramane cerneala, nu decor.
   (Scria 8,1:1 pana pe 30-Aug-2026. Masurat, nu dedus, ca toate celelalte cifre din foaia
   asta — celelalte au iesit exacte la a doua masurare, asta nu. Decizia nu se schimba,
   6,98 e tot mult peste 4,5; cifra da, fiindca o foaie care isi cere cifrele masurate nu
   are voie sa poarte una scrisa din ochi.) */
.fapt-sub { font-family: var(--mono); font-size: 12px; font-weight: 400;
            color: var(--chink3); }

.rand {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--p4); padding: var(--p3) 0; border-bottom: 1px solid var(--chrule2);
}
.rand:last-child { border-bottom: 0; }
/* Pachetul saptamanal e singurul rand cu DOUA actiuni („Vezi fisierele" + „Descarca tot
   (.zip)"), amandoua `.buton-link`, deci amandoua `white-space: nowrap`. Pe 390px al doilea
   iesea 58px in afara ecranului (harnasul il raporta la 448px). Randul se infasoara si
   butoanele coboara sub titlu; nu se scurteaza textul, fiindca „Descarca tot" fara „(.zip)"
   nu mai spune CE se descarca, si nu se micsoreaza butonul, fiindca inaltimea lui e
   suprafata de atins pe telefon. */
.rand-pachet { flex-wrap: wrap; }
.rand-pachet > div:first-child { flex: 1 1 200px; min-width: 0; }
.rand-titlu { font-weight: 600; }
.rand-sub { color: var(--chink3); font-size: 12px; font-family: var(--mono); }

/* ── COMENZI ──────────────────────────────────────────────────────────────────
   Regula de miscare, peste tot: se schimba LUMINA (fundal, cerneala, muchie, umbra).
   Sasiul nu se misca — niciun `transform`, nicio deplasare, nici la apasare. */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--p2);
  height: var(--h); padding: 0 14px; border-radius: var(--r0);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  line-height: 1; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--muchie); background: var(--ch0); color: var(--chink);
  transition: background-color .12s linear, border-color .12s linear, color .12s linear,
              box-shadow .12s linear;
}
/* A OPTA oara aceeasi capcana, si prima data prinsa la clasa intreaga, nu la o instanta:
   `display: inline-flex` de mai sus e in foaia autorului si bate `[hidden] { display: none }`
   din foaia browserului, deci pana pe 30-Aug-2026 NICIUN buton din aplicatie nu se ascundea
   cu `.hidden = true`. Trei locuri traiau cu asta, doua dintre ele de saptamani:
   `editeaza.hidden` (copy-ul unei piese) lasa butonul „Editează" langa editorul pe care
   tocmai l-a deschis, `buton.hidden` din `stergeLead` lasa „Șterge" langa propria lui
   confirmare, iar „Adaugă pilon" ar fi ramas pe ecran si dupa al patrulea pilon — adica un
   buton care nu mai face nimic, fiindca plafonul e al serverului.
   Randul asta e perechea ceruta de regula din capul foii, scrisa o data pentru toti. */
button[hidden] { display: none; }
button:hover { background: var(--ch); }
button:active { background: var(--ch3); box-shadow: 0 1px 3px rgba(0,0,0,.14) inset; }
/* Butonul principal e o LAMPA: se aprinde la atingere. Cerneala e --gr la toate trei
   starile, si de-aia portocaliul are voie sa fie aici — e placuta, nu cerneala. */
button.primar { background: var(--or); border-color: var(--or); color: var(--gr); }
button.primar:hover { background: var(--or2); border-color: var(--or2); }
button.primar:active { background: var(--or3); border-color: var(--or3); box-shadow: none; }
button:disabled, button[aria-disabled="true"] {
  cursor: not-allowed; background: var(--ch3); border-color: var(--chrule);
  color: var(--stins); box-shadow: none;
}
button:disabled:hover { background: var(--ch3); }
button.primar:disabled { background: var(--ch3); border-color: var(--chrule); }
/* Butonul distructiv: nu e rosu plin. Rosu plin, intr-o lista de randuri cu cate un
   buton de stergere, transforma ecranul intr-o alarma permanenta. E cerneala rosie pe
   muchie rosie; se umple abia la apasare — din design/aplicatie.html, `.cmd--ds`. */
button.distructiv { color: var(--rdc); border-color: var(--rdc); background: var(--ch0); }
button.distructiv:hover { background: var(--rdf); }
button.distructiv:active { background: var(--rdf); box-shadow: 0 1px 3px rgba(0,0,0,.14) inset; }
button.distructiv:disabled { color: var(--stins); border-color: var(--chrule); background: var(--ch3); }
/* Comanda mica: actiuni repetate dintr-un rand de lista. `--hs` urca deja la 44px la
   `pointer:coarse` (vezi randul de mai jos), deci nu se rescrie inaltimea aici — din
   design/aplicatie.html, `.cmd--mic`. */
button.mic { height: var(--hs); padding: 0 10px; font-size: 12.5px; }
/* .discret singur are padding 12px + margine -12px pe trei laturi (hack de colt, vezi nota
   de mai sus la button.discret) — pastrata cu .mic (padding 0/10px), marginea ar ramane
   -12px si ar suprapune randul de deasupra si de dedesubt cu 12px. Combinatia "discret mic"
   e chiar forma ceruta pentru actiunile repetate dintr-un rand de lista, deci se anuleaza
   aici hack-ul de colt, nu clasele de baza. */
button.discret.mic { padding: 0 10px; margin: 0; }

input, select, textarea {
  font-family: var(--sans); font-size: 14px; width: 100%;
  height: var(--h); padding: 0 11px; line-height: 1;
  border: 1px solid var(--muchie); border-radius: var(--r0);
  background: var(--ch0); color: var(--chink);
  transition: border-color .12s linear, box-shadow .12s linear, background-color .12s linear;
}
/* textarea nu mosteneste inaltimea fixa: e o caseta care creste. `display: block`
   fiindca fara el ramane inline si lasa un spatiu sub caseta. */
textarea {
  height: auto; display: block; padding: 9px 11px; line-height: 1.45; resize: vertical;
}
input::placeholder, textarea::placeholder { color: var(--stins); }
input:hover, select:hover, textarea:hover { border-color: var(--chink2); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--chink); box-shadow: 0 0 0 3px rgba(23,24,26,.14);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--ch3); border-color: var(--chrule); color: var(--stins); cursor: not-allowed;
}
/* Sageata selectorului, desenata din doua degradeuri: `appearance:none` sterge si
   sageata sistemului, iar un selector fara semn ca se deschide arata ca un camp mort. */
select {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--chink2) 50%),
                    linear-gradient(135deg, var(--chink2) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
input[type="checkbox"] {
  appearance: none; width: 17px; height: 17px; padding: 0; flex: none;
  border: 1px solid var(--muchie); border-radius: 4px; background: var(--ch0);
  display: inline-grid; place-items: center; cursor: pointer;
}
input[type="checkbox"]::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px; opacity: 0;
  border-left: 2px solid var(--gr); border-bottom: 2px solid var(--gr);
  transform: rotate(-45deg); transition: opacity .12s linear;
}
input[type="checkbox"]:checked { background: var(--or); border-color: var(--or); }
input[type="checkbox"]:checked::after { opacity: 1; }
/* Primul radio din aplicatie (felul campaniei). Fara randurile astea mostenea scara de
   camp de mai sus — `width: 100%`, `height: var(--h)`, chenar si padding — si Chrome
   deseneaza atunci bulina in MIJLOCUL casetei intinse: butonul ajungea la o jumatate de
   rand distanta de propozitia lui, iar niciun contrast si nicio masuratoare nu se plangea.
   Gasit din captura, nu din harnas. Forma e a bifei de mai sus, doar rotunda: aceeasi
   materie, alta intrebare (una singura din mai multe, nu da/nu). */
input[type="radio"] {
  appearance: none; width: 17px; height: 17px; padding: 0; flex: none;
  border: 1px solid var(--muchie); border-radius: 50%; background: var(--ch0);
  display: inline-grid; place-items: center; cursor: pointer;
}
input[type="radio"]::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; opacity: 0;
  background: var(--gr); transition: opacity .12s linear;
}
input[type="radio"]:checked { background: var(--or); border-color: var(--or); }
input[type="radio"]:checked::after { opacity: 1; }
input[type="file"] { height: auto; padding: 8px 11px; line-height: 1.4; }
input[type="color"] { padding: 2px; cursor: pointer; }

/* Degetul nu are 34px. La atingere tot ce se apasa urca la 44px — pragul de la care o
   comanda nu se mai rateaza. Scara de text NU se schimba. */
@media (pointer: coarse) {
  /* Ridicat pe TOKEN, nu doar pe element: `button { height: 44px }` de mai jos e un
     selector de element si pierde in fata oricarei reguli de clasa care scrie
     `height: var(--h)` sau `var(--hs)` — .buton-link, .oferta-sterge, .discret-select,
     sagetile calendarului, .rez-link. Masurat la 390px cu emulare de telefon: fara
     randul asta ramaneau la 26px, sub pragul degetului, chiar daca nota de la scara
     promitea deja 44px. Scara de text NU se schimba. */
  :root { --h: 44px; --hs: 44px; }
  button, input, select { height: 44px; }
  textarea, input[type="file"], input[type="checkbox"], input[type="radio"] { height: auto; }
  /* Bifa si bulina raman de 17px si la deget: tinta de 44px o da eticheta care le
     inconjoara (`<label>` peste tot in aplicatie), nu patratul desenat. Umflate la 44px
     ar fi doua pete cat un buton langa un rand de text. */
  input[type="checkbox"], input[type="radio"] { height: 17px; }
}

/* Cutia de simboluri a paginii (spritul de pictograme) exista ca sa fie referita cu `<use>`,
   nu ca sa fie vazuta. Ascunsa la fel ca pe vitrina (`.sr` din site/assets/panou.css), NU cu
   `display: none`: un SVG scos din flux cu `display: none` nu mai randeaza nimic pentru
   `<use>` in unele motoare, si atunci raftul ramane fara pictograme fara nicio eroare. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Comanda: un singur rand — subiect + buton. Selectorul de client sta deasupra si apare
   doar pentru admin, deci nu ocupa loc in interfata clientului. */
/* `flex-wrap` nu e cosmetica: pe telefon coloana de continut are ~282px, iar doua
   selectoare cu `min-width: 150px` plus spatiul dintre ele cer 310px. Fara wrap, al
   doilea selector iesea din ecran si pagina capata bara de derulare pe orizontala —
   vazut la 390px cu emulare reala, nu dedus. `min-width: 0` pe campuri fiindca un
   `input` cu `flex: 1` are latime minima intrinseca si nu se lasa stramtat sub ea. */
.comanda-rand { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
/* Aceeasi capcana ca la .galerie-poza: `display: flex` de mai sus e in foaia autorului
   si bate `[hidden] { display: none }` din foaia browserului. Fara randul asta,
   `#rand-link` (linkul materialului filmat, doar pentru explainer) ar fi ramas vizibil
   si la Postare, si la Carusel — dovedit in browser, nu dedus: prima verificare a
   formularului l-a aratat acolo, cu motorul pe "Postare". */
.comanda-rand[hidden] { display: none; }
.comanda-rand input, .comanda-rand textarea { flex: 1; min-width: 0; }
.comanda-rand select { flex: 0 1 auto; width: auto; min-width: 150px; max-width: 100%; }
/* Randul de subiect, de cand caseta lui e `textarea` care creste (1-Sep-2026). Doua
   ajustari, ambele din acelasi motiv — o caseta cu inaltime proprie nu se mai poarta ca un
   camp de input intr-un rand de flex:
   - `flex-basis: 100%` pe caseta insasi (nu pe rand) o obliga sa ocupe tot randul, iar
     `.comanda-rand`-ul e deja `flex-wrap`, deci butonul „Comandă" cade singur pe randul
     urmator, sub ea, nu langa primul rand de text (3-Sep-2026, Ali: „e si butonul pe
     acelasi rand si nu e bine" — cu 3 randuri de caseta, butonul stant sus arata desprins
     de text).
   - `resize: none` fiindca inaltimea o pune JS-ul (creste() din app.js); un maner de tras
     in colt ar fi luptat cu el la fiecare tasta.
   Randul insusi ramane `align-items: flex-start` (mostenit din `.comanda-rand`... de fapt
   nu: `.comanda-rand` n-are `align-items` propriu, deci implicitul `stretch` s-ar aplica —
   dar cu butonul pe randul lui, sub caseta, nu mai conteaza inaltimea relativa a celor
   doua, asa ca regula veche de `align-items: flex-start` nu mai are treaba aici. */
#subiect { padding: 9px 11px; min-height: calc(var(--h) * 3); resize: none; flex-basis: 100%; }
#rand-subiect #trimite { align-self: flex-end; }
/* Banda „PENTRU [client] [brand]", sub antet si deasupra filelor. Nu e un rand de formular:
   e contextul in care se citeste tot ce urmeaza, deci sta lipit sub antet (`margin-top`
   negativ cat jumatate din spatiul pe care antetul il lasa sub el) si nu are chenar propriu
   — chenarul antetului ii tine deja loc de linie. Se ascunde cand n-are ce tine. */
.cine { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p2);
  margin: calc(-1 * var(--p3)) 0 var(--p6); }
.cine[hidden] { display: none; }   /* aceeasi capcana ca la .comanda-rand[hidden] */
/* Placuta gravata de deasupra unui grup de controale, ca peste tot in aparat. A inlocuit
   `.pentru-cine-eticheta`, scoasa odata cu eticheta pe care o desena app.js: acum cuvantul
   „Pentru" e scris in HTML, fiindca tine si de client, nu doar de brand. */
.cine-eticheta { font-family: var(--mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--chink3); }
#client { width: auto; min-width: 180px; max-width: 100%; margin-bottom: 0; }
/* „Pentru: Boosted Mode · @boostedmode". Eticheta si numele stau pe acelasi rand cu
   selectorul, ca sa se citeasca dintr-o bucata; `align-items: baseline` fiindca altfel
   textul si cutia selectorului se aliniaza pe centru si eticheta pare cazuta. */
.pentru-cine { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p2); }
.pentru-cine[hidden] { display: none; }   /* aceeasi capcana ca la .comanda-rand[hidden] */
.pentru-cine-nume { font-weight: 700; }
.pentru-cine select { width: auto; min-width: 180px; max-width: 100%; margin-bottom: 0; }
.stare-comanda { color: var(--chink3); font-size: 13px; margin-top: 10px; }

.gol { color: var(--chink3); padding: var(--p8) 0; }
.expira { color: var(--chink3); }
.eroare { color: var(--rdc); font-size: 13px; min-height: 20px; }

/* Zidul de 402 se citeste ca o USA, nu ca o eroare — de aceea nu atinge deloc --err.
   Rosul spune „ai gresit ceva", iar aici omul n-a gresit nimic: si-a terminat proba.
   Linia portocalie e accent grafic, nu cerneala: 3px de --or langa un text care isi are
   propriul contrast, exact ca `.cite` din design/aplicatie.html.
   Bara vine din `inset`, nu din `border-left`, ca peste tot in foaia asta: un border mai
   gros pe o singura latura muta continutul cu 2px fata de fratii lui si rupe muchia de
   1px a sasiului exact in coltul de sus-stanga. */
/* Acelasi sasiu ca zidul, alta clasa — si asta nu e cosmetica. `stergeZidul()` din app.js
   matura toate `.zid`-urile din gazda inaintea fiecarei comenzi noi, fiindca un refuz de
   402 n-are voie sa ramana pe ecran dupa ce clientul a trecut pe o treapta platita. Nota de
   profil neterminat n-are legatura cu incercarea de comanda si trebuie sa supravietuiasca
   apasarii — daca ar fi purtat clasa `.zid`, ar fi disparut la prima apasare pe Comandă si
   nimeni n-ar fi stiut de ce. Arata la fel dinadins: pentru om e acelasi lucru, o placuta
   cu muchie portocalie care spune ca mai e ceva de facut. */
.zid, .nota {
  max-width: 520px; margin-top: var(--p3); padding: var(--p4);
  border: 1px solid var(--chrule2);
  border-radius: var(--r); background: var(--ch0);
  box-shadow: inset 3px 0 0 var(--or),
              0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06);
}
.nota { margin-bottom: var(--p3); }
.zid .zid-titlu, .nota .zid-titlu { display: block; margin-bottom: 6px; font-weight: 700; }
.zid .zid-text, .nota .zid-text { margin: 0 0 var(--p3); color: var(--chink3); font-size: 13px; }

.buton-link {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--h); padding: 0 14px; border-radius: var(--r0);
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--or); background: var(--or); color: var(--gr);
  transition: background-color .12s linear, border-color .12s linear;
}
.buton-link:hover { background: var(--or2); border-color: var(--or2); }
button.buton-link:disabled { background: var(--ch3); border-color: var(--chrule);
                             color: var(--stins); cursor: default; }
.imagine-link { align-self: flex-start; color: var(--orc); font-weight: 600; }

/* Lista de fisiere a unui pachet, sub randul lui. Indentata, ca sa se vada ca apartine
   randului de deasupra si nu e o a doua lista de pachete. */
.pachet-fisiere { padding: var(--p1) 0 var(--p3) var(--p4);
                  border-left: 2px solid var(--chrule2); margin-left: var(--p1); }
.pachet-fisier {
  display: flex; align-items: center; justify-content: space-between; gap: var(--p3);
  padding: var(--p2) 0; font-size: 13px;
}
/* Numele fisierului taie, marimea nu: pe telefon, un nume lung ar impinge linkul de
   descarcare in afara ecranului, adica exact lucrul pentru care a venit clientul aici. */
.pachet-fisier span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pachet-descarca {
  color: var(--orc); font-weight: 600; text-decoration: none; white-space: nowrap;
  font-family: var(--mono); font-size: 12px;
  /* Aceeasi capcana ca la butonul de iesire: 12px de text nu fac o zona apasabila cu
     degetul. Padding mare plus margini negative — ~40px de atins, pozitie neschimbata. */
  padding: 10px; margin: -10px;
}
.pachet-descarca:hover { text-decoration: underline; }

/* ── TABLOUL DE COMENZI ───────────────────────────────────────────────────────
   Coloane pe orizontala pe desktop, una sub alta pe telefon: Ali se uita pe telefon la
   fel de des ca pe laptop, iar cinci coloane inghesuite pe 390px nu se citesc.
   auto-fit, nu repeat(4, 1fr): sunt cinci coloane posibile (a cincea, „Esuat", apare
   doar cand exista un esec) — un numar fix ar strica latimea cand a cincea apare. */
.kanban { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 780px) {
  .kanban { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
/* Pe ecran larg tabloul iese din coloana de text a paginii (808px): in latimea aia incap
   doar trei coloane, iar restul cad pe al doilea rand — adica exact ce nu e un kanban. */
@media (min-width: 1240px) {
  .kanban { width: 1000px; margin-left: -96px; }
}
.kanban-cap { margin-bottom: var(--p2); display: flex; align-items: center; gap: 7px; }
/* Culoarea de stare. Cerneala de familie (--*c), nu culoarea plina: titlurile sunt la
   13px, majuscule si rarite, iar --ye plin da 1,9:1 pe crem — s-ar citi ca o pata, nu ca
   un cuvant. Cerneala trece de 4,5:1 la toate cele cinci. */
.kanban-cap--ye  { color: var(--yec); }
.kanban-cap--bl  { color: var(--blc); }
/* Nu --orc pentru "De aprobat": #922F15 si rosul lui "Esuat" #972917 difera cu 5 in
   R si 2 in G — pe ecran sunt aceeasi culoare, adica exact opusul motivului pentru
   care au fost colorate coloanele. --mgc e singura cerneala accesibila din paleta
   care nu se confunda nici cu rosul, nici cu galbenul lui "In asteptare". */
.kanban-cap--mg  { color: var(--mgc); }
.kanban-cap--gn  { color: var(--gnc); }
.kanban-cap--rd  { color: var(--rdc); }
.kanban-cap--gri { color: var(--chink3); }
/* Bulina ia culoarea titlului prin currentColor: o singura declaratie de culoare per
   coloana, deci nu se pot desincroniza. Ea e suprafata care se vede de departe; textul
   ramane pentru cine nu citeste culori deloc. */
.kanban-bulina { width: 9px; height: 9px; border-radius: 50%; background: currentColor;
                 flex: none; display: block; }

/* Butoanele de fel (Toate / Carusele / Video / Postări). Pastile, nu tab-uri: tab-urile
   sunt deja limbajul raftului de sus, iar doua randuri de tab-uri pe acelasi ecran ar
   pune intrebarea "care dintre ele ma muta de pe pagina?". */
/* `margin-top`: `.ecran-metrici` de deasupra n-are `margin-bottom`, deci fara asta cele
   doua randuri se ating (Ali, 1-Sep, 07:22 — "sunt aproape lipite"). */
.fel-bara { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--p4); margin-bottom: 12px; }
.fel-buton { background: var(--ch0); border: 1px solid var(--chrule2); color: var(--chink2);
             border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600;
             cursor: pointer; width: auto;
             /* inline-flex + gap: pictograma sta pe linia de baza a cuvantului fara
                `vertical-align`, care ar fi cerut o cifra potrivita din ochi per marime. */
             display: inline-flex; align-items: center; gap: 6px; }
.fel-buton:hover { border-color: var(--muchie); }
/* Cel ales e plin, nu doar ingrosat: intre patru pastile aproape identice, greutatea
   fontului nu e un semnal destul de tare ca sa raspunda la "care e activ acum". */
.fel-buton.e-ales { background: var(--chink); border-color: var(--chink); color: var(--ch0); }

/* ── pictograma felului de piesa (buton de filtru + titlu de card) ──────────────────
   Cheia de culoare e a vitrinei, nu una noua: site/index.html, sectiunea „05 — Volumul",
   deseneaza video cu galben, caruselul cu magenta si staticul cu albastru. Aceleasi trei
   forme (`p-video`, `p-carusel`, `p-static`) si aceeasi impartire aici, ca sa insemne
   acelasi lucru in amandoua locurile.

   Ce NU se copiaza de pe vitrina e valoarea culorii. Acolo pictogramele stau pe negru si
   familia bruta e citibila. Aici stau pe fisa crem (--ch0), unde masurat da: --mg 3,76:1,
   --bl 3,91:1, --ye 1,68:1. Galbenul singur cade sub pragul de 3:1 pentru elemente
   negrafice (SC 1.4.11) — si nu se rezolva facand exceptie doar pentru el, fiindca atunci
   doua din trei pictograme ar fi de o intensitate si a treia de alta. Se ia deci cerneala
   de familie pentru toate trei, aceeasi care coloreaza deja capetele de coloana din Kanban:
   --mgc 7,02:1 · --yec 7,04:1 · --blc 7,05:1 pe --ch0. Pe pastila aleasa, care e cerneala
   inchisa (--chink), familia inchisa s-ar pierde in fundal, deci acolo se trece pe varianta
   de display: --mgd 4,99:1 · --bld 4,99:1 · --yed 9,34:1 pe --chink.

   CIOCNIRE CUNOSCUTA, lasata dinadins: bara din muchia stanga a cardului foloseste aceleasi
   trei culori pentru COLOANA (asteptare=--yec, lucru=--blc, aprobare=--mgc). Pe acelasi
   card, culoarea spune deci si stare (pe muchie), si fel (in titlu). Sunt registre diferite
   — o bara pe margine si un desen in text — dar e o suprapunere reala, si daca vreodata se
   simte ca minte, felul e cel care are dreptul la culoare (o are si pe vitrina, publicata),
   iar coloanele sunt cele care si-o imprumuta. */
.fel-ico { flex: 0 0 15px; width: 15px; height: 15px; color: var(--fam-crem); }
.fel-buton.e-ales .fel-ico { color: var(--fam-disp); }
.card-ico { flex: 0 0 15px; width: 15px; height: 15px; color: var(--fam-crem);
            /* 2px de coborare: pictograma e pe o grila de 12x12 cu marginea plina, deci
               centrul ei optic sta mai sus decat al majusculelor de langa. */
            position: relative; top: 2px; }
.fam-mg { --fam-crem: var(--mgc); --fam-disp: var(--mgd); }
.fam-ye { --fam-crem: var(--yec); --fam-disp: var(--yed); }
.fam-bl { --fam-crem: var(--blc); --fam-disp: var(--bld); }
/* A patra familie, doar pentru reclama (§3, buton de motor) — restul paletei (mg/ye/bl) e
   deja luata de carusel/video/postare. --gnc e din acelasi nivel ("cerneala", vezi randul
   --cyc/--blc/--yec/--gnc/--mgc/--rdc/--orc de la inceputul fisierului), deci contrastul pe
   --ch0 e deja acoperit de aceeasi grija ca la mg/ye/bl. */
.fam-gn { --fam-crem: var(--gnc); --fam-disp: var(--gnd); }

/* Butoanele de motor (§3, 3-Sep-2026) — inlocuiesc `<select id="motor">`, ramas `hidden` ca
   sursa de adevar. Carduri, nu pastile ca `.fel-buton`: fiecare are iconita + eticheta +
   o explicatie, prea mult continut pentru o pastila de filtru. */
.motor-butoane { display: flex; flex-wrap: wrap; gap: var(--p2); margin-bottom: 10px; }
/* `height: auto` si `white-space: normal` sunt obligatorii: fara ele, `button { height:
   var(--h); white-space: nowrap; }` de mai sus in fisier castiga (element vs. clasa nu
   conteaza per-proprietate — regula generica e singura care scrie `height`/`white-space`,
   deci ramane a ei) si cardul se turteste la inaltimea unui buton obisnuit, cu textul tăiat
   pe un rand. Descoperit la verificarea vizuala din 3-Sep-2026: icoana avea 20x0px. */
.motor-buton { display: flex; flex-direction: column; align-items: flex-start;
               justify-content: flex-start; gap: 4px; height: auto; white-space: normal;
               width: 168px; padding: var(--p3); text-align: left;
               background: var(--ch0); border: 1px solid var(--chrule2); border-radius: 10px;
               cursor: pointer; }
.motor-buton:hover { border-color: var(--muchie); }
/* Ales = plin, aceeasi regula ca `.fel-buton.e-ales`: intre cinci carduri aproape identice,
   o bordura mai groasa nu se vede destul de repede. */
.motor-buton.activ { background: var(--chink); border-color: var(--chink); }
.motor-buton-ico { width: 20px; height: 20px; color: var(--fam-crem); }
.motor-buton.activ .motor-buton-ico { color: var(--fam-disp); }
.motor-buton-eticheta { font-size: 13px; font-weight: 600; color: var(--chink); }
.motor-buton.activ .motor-buton-eticheta { color: var(--ch0); }
.motor-buton-explicatie { font-size: 11px; font-weight: 400; line-height: 1.35;
                           color: var(--chink2); }
.motor-buton.activ .motor-buton-explicatie { color: var(--chrule2); }
/* Filtrul de deasupra tabloului: un simplu checkbox + eticheta, nu un buton nou — nu
   introduce o a doua limba vizuala langa restul ecranului. */
.kanban-filtru { display: flex; align-items: center; gap: var(--p2); font-size: 13px;
                 color: var(--chink3); margin-bottom: 14px; cursor: pointer; }
.kanban-filtru input { width: auto; }

/* Cardul intreg e zona de click: cursor + stare de focus vizibila la tastatura, ca sa se
   poata deschide panoul si fara mouse. Fisa plata, nu in degrade — intr-o coloana de 20
   de carduri, 20 de degradeuri sunt zgomot. */
.card { border: 1px solid var(--chrule2); border-radius: var(--r0);
        padding: 10px var(--p3); margin-bottom: var(--p2); background: var(--ch0);
        cursor: pointer;
        box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06);
        transition: background-color .12s linear, border-color .12s linear; }
.card:hover { border-color: var(--muchie); }
/* flex, ca sa nu curga textul sub pictograma la randul al doilea: titlul unui card se
   rupe des pe doua randuri, si un `float`/`inline` ar fi bagat al doilea rand sub desen. */
.card-titlu { font-weight: 700; display: flex; align-items: flex-start; gap: 7px; }
.card-titlu-t { min-width: 0; }
.card-sub { font-size: 12px; color: var(--chink3); margin-top: 2px; font-family: var(--mono); }
.card-pozitie { font-size: 12px; color: var(--chink3); margin-top: 6px; }
/* Starea nu se spune prin muchie portocalie (2,87:1 pe crem, sub pragul de 3:1 pentru
   elemente negrafice), ci printr-o bara de cerneala de familie pe muchia din stanga. */
/* Toate cele sase, nu doar doua: cand doar `lucru` si `esuat` aveau bara, o coloana
   fara bara insemna sau "e bine" sau "n-am scris regula pentru ea" — nu se putea sti
   care. Culorile sunt aceleasi cu ale titlului de coloana, deci cardul mutat isi
   schimba bara odata cu coloana. */
.card-asteptare { box-shadow: inset 3px 0 0 var(--yec), 0 1px 2px rgba(0,0,0,.06); }
.card-lucru { box-shadow: inset 3px 0 0 var(--blc), 0 1px 2px rgba(0,0,0,.06); }
.card-aprobare { box-shadow: inset 3px 0 0 var(--mgc), 0 1px 2px rgba(0,0,0,.06); }
.card-gata { box-shadow: inset 3px 0 0 var(--gnc), 0 1px 2px rgba(0,0,0,.06); }
.card-esuat { box-shadow: inset 3px 0 0 var(--rdc), 0 1px 2px rgba(0,0,0,.06); }
/* Arhivatul e singurul stins dinadins: e acolo ca sa poata fi gasit, nu ca sa fie citit
   in acelasi rand cu lucrul viu. */
.card-arhivat { box-shadow: inset 3px 0 0 var(--chrule), 0 1px 2px rgba(0,0,0,.06);
                opacity: .72; }

/* Randul de jos al panoului (arhivarea). Linie deasupra ca sa se vada ca e alt fel de
   raspuns decat Aproba/Respinge, si aliniat la stanga, nu la dreapta unde stau deciziile. */
.panou-actiuni--jos { border-top: 1px solid var(--chrule2); margin-top: var(--p3);
                      padding-top: var(--p2); justify-content: flex-start; }

/* ── PANOUL DE DETALII ────────────────────────────────────────────────────────
   Fundal fix peste tot ecranul, panoul in mijloc. Scrimul e --gr transparent, nu negru
   pur: sub el sta crema, iar un negru pur peste crem da o umbra rece. */
.panou-fundal {
  position: fixed; inset: 0; background: rgba(12, 13, 15, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--p12) var(--p4); overflow-y: auto; z-index: 20;
}
/* A treia oara aceeasi capcana (vezi `.galerie-poza[hidden]` si `.comanda-rand[hidden]`):
   `display: flex` de mai sus bate `[hidden] { display: none }` din foaia browserului. Fara
   randul asta, fundalul negru transparent al panoului sta permanent peste tot ecranul, cu
   z-index mare — aplicatia arata intunecata si NU se mai poate apasa nimic, fiindca
   fundalul inghite fiecare click. A trait asa in productie de la F5.6 pana pe 16-Aug-2026;
   a iesit la iveala abia cand am apasat butonul „Comandă" in browser si nu s-a intamplat
   nimic (elementFromPoint pe buton intorcea `panou-fundal`). */
.panou-fundal[hidden] { display: none; }
.panou {
  position: relative; background: var(--ch0); border: 1px solid var(--chrule2);
  border-radius: var(--r2); padding: var(--p6); max-width: 560px; width: 100%;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}
.panou-titlu { font-size: 18px; font-weight: 800; letter-spacing: -.02em;
               margin: 0 0 6px; padding-right: var(--p8); }
.panou-inchide {
  position: absolute; top: var(--p3); right: var(--p3);
  width: var(--hs); height: var(--hs); padding: 0;
  border: 0; background: none; font-size: 20px; color: var(--chink3);
}
.panou-inchide:hover { color: var(--chink); background: var(--ch3); }
.panou-actiuni { margin-top: var(--p4); display: flex; justify-content: flex-end; gap: var(--p2); }
/* `display: flex` de mai sus e in foaia autorului si bate `[hidden] { display: none }` din
   foaia browserului — aceeasi capcana ca la .comanda-rand. Fara randul asta, randul de
   butoane ar ramane vizibil sub formularul de revizie, care tocmai l-a inlocuit. */
.panou-actiuni[hidden] { display: none; }
.panou-continut > .copy { margin-top: var(--p3); }

/* Copy-ul e TEXT DE CITIT, nu o cifra: ramane pe crem, intr-o fisa mai deschisa decat
   podeaua. Un display negru aici ar fi facut din fiecare postare un terminal. */
.copy {
  white-space: pre-wrap;      /* copy-ul are randuri goale intre paragrafe; ele conteaza */
  overflow-wrap: anywhere;    /* un link lung nu are voie sa largeasca pagina */
  background: var(--ch); border: 1px solid var(--chrule2);
  border-radius: var(--r0); padding: var(--p3) var(--p4); font-size: 14px; line-height: 1.55;
}
/* Aprobarea cu continut se desfasoara pe verticala: cap (gate + butoane), apoi copy-ul,
   apoi imaginea. `.rand` singur e un rand orizontal — bun pentru pachete, prea ingust
   pentru un text de postare. */
.rand-aprobare { flex-direction: column; align-items: stretch; gap: var(--p3); }
.rand-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--p4); }
.copy-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--p3); margin-top: 14px; margin-bottom: 6px;
}
.copy-cap button { height: var(--hs); padding: 0 10px; font-size: 12.5px; }
.copy-cap + .copy, .panou-continut > .copy-editor > textarea { margin-top: 0; }
.revizie { margin-top: var(--p4); }
.revizie .copy-eticheta { display: block; margin-bottom: var(--p2); }

/* Galeria de slide-uri: sageti + indicator „N / M", imaginea servita de
   /api/media/<id>/imagine (proxy catre Drive, vezi galerie() in app.js). Linkul catre
   Drive ramane sub imagine, ca actiune secundara. */
.galerie { margin-top: 14px; }
.galerie-cap { display: flex; align-items: center; gap: var(--p3); margin-bottom: 10px; }
.galerie-sageata { width: 32px; height: 32px; padding: 0; border-radius: 999px;
                   font-size: 15px; }
.galerie-sageata:disabled { color: var(--stins); }
.galerie-indicator { font-family: var(--mono); font-size: 12px; color: var(--chink3);
                     font-variant-numeric: tabular-nums; }
.galerie-poza {
  display: block; width: 100%; max-height: 420px; object-fit: contain;
  background: var(--disp2); border: 1px solid var(--chrule2); border-radius: var(--r0);
  margin-bottom: 10px;
}
/* Chenar explicit la eroare de incarcare (Drive jos, token expirat etc.) — nu o iconita
   rupta. Linkul din interior duce direct la fisierul original din Drive. */
.galerie-eroare {
  display: flex; flex-direction: column; align-items: center; gap: var(--p2);
  padding: var(--p6) var(--p3); margin-bottom: 10px; text-align: center;
  border: 1px dashed var(--chrule); border-radius: var(--r0);
  color: var(--chink3); font-size: 13px;
}
/* Fara randurile astea, `el.hidden = true` din app.js n-ar ascunde nimic: regulile de
   `display` de mai sus sunt in foaia autorului si bat `[hidden] { display: none }` din
   foaia browserului, indiferent de specificitate. Rezultatul ar fi fost si imaginea, si
   chenarul de eroare, vizibile in acelasi timp, mereu. */
.galerie-poza[hidden], .galerie-eroare[hidden] { display: none; }

/* ── CALENDARUL DE PUBLICARE ──────────────────────────────────────────────────
   Doua saptamani deodata: o luna intreaga pe telefon ar face casutele nefolosibile, iar
   o saptamana nu arata destul ca sa poti rearanja. */
.calendar-cap { display: flex; align-items: center; gap: var(--p3); margin: var(--p2) 0 var(--p3);
                font-family: var(--mono); font-size: 12px; color: var(--chink3);
                letter-spacing: .04em; }
.calendar-cap button { height: var(--hs); padding: 0 10px; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
@media (max-width: 700px) { .calendar { grid-template-columns: repeat(2, 1fr); } }
.cal-zi {
  min-height: 92px; border: 1px solid var(--chrule2); border-radius: var(--r0);
  padding: 6px; display: flex; flex-direction: column; gap: var(--p1);
  background: var(--ch0);
}
/* Ziua de azi nu se marcheaza cu muchie portocalie (2,87:1): se marcheaza cu suprafata.
   E singura casuta mai inchisa din grila, si numarul ei e cerneala de accent. */
.cal-zi.azi { background: var(--ch3); border-color: var(--muchie); }
.cal-zi.azi .cal-zi-numar { color: var(--orc); font-weight: 700; }
/* Feedback in timpul tragerii: fara el, nu se vede unde va cadea cardul. */
.cal-zi.tinta { background: var(--orf); border-color: var(--orc); }
.cal-zi-numar { font-family: var(--mono); font-size: 10.5px; color: var(--chink3);
                text-transform: uppercase; letter-spacing: .1em; }
/* Marginea din stanga e mai lata decat celelalte fiindca acolo cade bara de stare a
   variantelor de mai jos. E pusa pe TOATE cardurile, nu doar pe cele cu bara: altfel
   textul unei postari publicate ar sta cu 3px mai la dreapta decat al uneia programate,
   in aceeasi coloana, si coloana s-ar citi stramba. */
.cal-card {
  font-size: 12px; line-height: 1.35; padding: var(--p1) 6px var(--p1) 9px;
  border-radius: 6px;
  background: var(--ch); border: 1px solid var(--chrule2); cursor: grab;
}
/* `pointer`, nu `default`: cardul care nu se poate MUTA se poate totusi APASA, si atunci
   spune de ce nu se mai poate umbla la el. Un cursor de sageata pe ceva care raspunde la
   clic il face sa para mort inainte sa fie incercat. */
.cal-card[draggable="false"] { cursor: pointer; }
.cal-card.publicat { box-shadow: inset 3px 0 0 var(--gnc); }
.cal-card.esuat { box-shadow: inset 3px 0 0 var(--rdc); }
.cal-card-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                 overflow: hidden; overflow-wrap: anywhere; }
/* Fara `anywhere` aici, dinadins: taiat in mijloc, „@boostedmode" devine „@boostedm/ode",
   iar un handle rupt nu mai spune pe ce cont pleaca postarea. */
/* Randul de conturi. Era un sir de text („@handle · reel"); de pe 2-Sep-2026 e o linie de
   jetoane, fiindca aceeasi piesa pe doua conturi e acum UN card cu doua jetoane, nu doua
   carduri. `flex-wrap`: pe o casuta de zi ingusta, al treilea cont trece pe randul doi in
   loc sa impinga cardul in afara. */
.cal-card-cont { color: var(--chink3); font-size: 11px; margin-top: 2px;
                 font-family: var(--mono);
                 display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; }
.cal-cont { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
/* 11px, cat inaltimea randului de text de langa ea: glifa e la nivelul cuvantului, nu un
   desen asezat langa el. `flex: none` ca sa nu se turteasca cand handle-ul e lung. */
.cal-cont-i { width: 11px; height: 11px; flex: none; display: block; color: var(--chink3); }
.cal-cont-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Platforma fara glifa isi scrie numele — mai bine un cuvant decat un desen gresit. */
.cal-cont-p { text-transform: uppercase; letter-spacing: .04em; }
.cal-cont-plus { color: var(--chink3); }
/* „reel" si „eșuat" nu sunt conturi: aceeasi linie, dar despartite de ele printr-un punct,
   ca sa nu se citeasca drept al treilea cont. */
.cal-eticheta::before { content: "·"; margin-right: 5px; color: var(--chrule2); }
/* Reel-ul se cerea deosebit de „eșuat" — pana acum ambele foloseau exact acelasi text
   gri, si singura diferenta era cuvantul insusi. Magenta (--mgc), nu rosu: rosul ramane
   al esecului. */
.cal-eticheta-reel { color: var(--mgc); font-weight: 600; }
/* Cate conturi au fost masurate, cand nu toate: mai mic si mai stins decat cifra, fiindca
   e o precizare despre ea, nu inca o cifra. */
.cal-cifra-partial { font-weight: 500; color: var(--chink3); }
/* Un rand pe cont, in cutia cu motivul esecului unui card grupat. */
.cal-info-cont { margin-top: 3px; }
/* Ora, cu cifre tabulare: intr-o coloana de carduri, „09:00" si „11:15" trebuie sa aiba
   aceeasi latime, altfel ochiul citeste o coloana stramba. */
.cal-card-ora {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 11px; color: var(--orc); letter-spacing: .02em;
}
/* Ora in cerneala de accent inseamna „mai poti umbla la ea". Regula se leaga de
   `draggable`, nu de status: o postare de azi de la 07:00 e tot `scheduled`, dar ora ei a
   trecut — si daca ar ramane accentuata ar arata identic cu una de la 20:00, care chiar se
   mai poate muta. Acelasi atribut decide si cursorul, doua randuri mai sus. */
.cal-card[draggable="false"] .cal-card-ora { color: var(--chink3); }
/* Explicatia de pe un card blocat. Nu e o eroare si nu e un avertisment — e raspunsul la
   „de ce nu pot da clic aici" — deci gri, nu rosu. Textul se vede intreg, fara taiere la
   doua randuri ca la caption: un motiv pe jumatate nu e un motiv. */
.cal-info {
  margin-top: 5px; padding-top: var(--p1); border-top: 1px solid var(--chrule2);
  font-size: 11px; line-height: 1.3; color: var(--chink3); overflow-wrap: anywhere;
}
.cal-card.esuat .cal-info { color: var(--rdc); }
/* Butonul de reluare, in cutia cu motivul esecului. Un buton de marimea celor din pagina
   ar fi cel mai apasat lucru de pe ecran — desi e o iesire de avarie, nu drumul obisnuit. */
button.cal-reia { height: auto; margin-top: 5px; width: 100%; padding: var(--p1) 6px;
                  font-size: 11px; }
/* Adresa live a unei postari publicate, in aceeasi cutie cu „Publicată deja". Un link,
   nu un buton: nu schimba nimic in aplicatie, doar deschide alta pagina. */
.cal-info-link { display: block; margin-top: 5px; color: var(--accent); font-weight: 600;
                  text-decoration: none; }
.cal-info-link:hover { text-decoration: underline; }
.cal-eroare { margin-top: var(--p1); font-size: 11px; line-height: 1.3; color: var(--rdc);
              overflow-wrap: anywhere; }
/* Editorul de zi + ora, deschis prin clic pe card. Sta INAUNTRUL cardului, nu intr-o
   fereastra peste calendar: asa vezi in continuare zilele din jur cat alegi. */
.cal-editor { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.cal-editor input { height: auto; font-size: 11px; padding: 2px 4px; width: auto;
                    flex: 1 1 auto; min-width: 0; }
.cal-editor button { height: auto; font-size: 11px; padding: 2px 6px; }
.cal-editor button.primar { flex: 1 1 auto; }
/* Cifra de pe cardul din calendar. Aceeasi cerneala verde ca chenarul din stanga al
   cardului publicat: acelasi lucru spus de doua ori, ca sa se citeasca dintr-o privire
   „asta a plecat deja si stim ce a facut". Cifre tabulare, ca ora de deasupra. */
.cal-cifra {
  margin-top: 3px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--gnc); font-variant-numeric: tabular-nums;
}

/* ── REZULTATE DUPA PUBLICARE ─────────────────────────────────────────────── */
.rez-rand { padding: var(--p3) 0; border-bottom: 1px solid var(--chrule2); }
.rez-rand:last-child { border-bottom: 0; }
/* Titlul se taie la un rand: un rezultat se citeste pe cifre, nu pe copy. Copy-ul intreg
   e la un clic distanta, in panoul comenzii. */
.rez-titlu { font-weight: 700; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.rez-meta { color: var(--chink3); font-size: 12px; font-family: var(--mono); margin-top: 2px; }
/* `wrap`, nu scroll orizontal: pe telefon cele patru-cinci cifre trec pe randul urmator in
   loc sa dispara dincolo de marginea ecranului. */
.rez-cifre { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--p2); }
.rez-cifra { display: flex; align-items: baseline; gap: 5px; }
.rez-nr { font-family: var(--mono); font-size: 19px; font-weight: 600;
          font-variant-numeric: tabular-nums; }
.rez-et { color: var(--chink3); font-size: 12px; }
/* Lead-urile stau in acelasi rand cu vizualizarile, dar sunt de alt fel: sunt oameni, nu
   afisari. Linia verticala din stanga le separa fara sa le mute in alt bloc.
   ALBASTRU, nu portocaliu: comentariul din app.js scrie de la inceput „albastrul e pentru
   postarile care chiar au adus pe cineva", iar in foaia veche `--accent` chiar era albastru.
   La rescriere `--accent` a devenit portocaliu, si cifra ar fi mostenit tacut culoarea
   comenzilor. Pe crem portocaliul are un singur rol — „apasa-ma" — iar o cifra nu se apasa. */
.rez-leaduri { padding-left: 14px; border-left: 2px solid var(--blc); }
.rez-leaduri .rez-nr { color: var(--blc); }
.rez-leaduri.rez-zero { border-left-color: var(--chrule2); }
.rez-leaduri.rez-zero .rez-nr { color: var(--chink3); }
.canale { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  margin: -4px 0 14px; font-size: 13px; color: var(--chink3); }
.canal b { font-family: var(--mono); font-size: 15px; color: var(--chink); margin-right: 2px; }
.canal-nota { margin-left: auto; font-size: 12px; }
.rez-subsol { display: flex; align-items: center; gap: var(--p3); margin-top: 6px; }
.rez-link { height: var(--hs); padding: 0 10px; font-size: 11px; font-family: var(--mono);
  background: transparent; color: var(--chink3); border: 1px solid var(--chrule2); }
.rez-link:hover { color: var(--chink); border-color: var(--muchie); background: var(--ch3); }
.rez-link-brut { font-family: var(--mono); font-size: 11px; padding: 0 8px; width: 280px;
  max-width: 100%; }
.rez-permalink { font-size: 11px; color: var(--accent); font-weight: 600; }
.rez-permalink:hover { text-decoration: underline; }
/* Momentul masuratorii, discret: conteaza doar cand compari doua randuri intre ele. */
.rez-cand { font-size: 10px; }

/* ── PROFILUL BRANDULUI ────────────────────────────────────────────────────── */
/* Fara flex-wrap: cu el, textul de doua randuri (starea „invechit", cea mai lunga)
   trecea in intregime sub bulina, si bulina ramanea singura pe un rand. Bulina sta fixa,
   textul curge langa ea. */
.profil-stare { display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.45; color: var(--chink3); margin-bottom: var(--p3); }
.profil-text { flex: 1; min-width: 0; }
/* Patrat cu colt de 1px, nu cerc: e acelasi semn ca punctul din fata regulilor si ca
   punctul din pastila de stare — familia are o singura forma mica. */
.profil-bulina { width: 8px; height: 8px; border-radius: 1px; flex: none; margin-top: 6px; }
.profil-bulina-gata { background: var(--gnc); }
.profil-bulina-lipsa { background: var(--rdc); }
.profil-bulina-invechit { background: var(--yec); }
.profil-rezumat { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--chrule2); border-radius: var(--r); padding: 14px var(--p4);
  background: var(--ch0);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06); }
.profil-nume { font-weight: 700; }
.profil-mostre { display: flex; gap: 6px; }
/* Contur, nu doar pata de culoare: un brand cu alb sau cu negru pur ar disparea in fundal
   pe una dintre suprafete, iar mostra ar arata ca o lipsa, nu ca o alegere. */
.profil-mostra { width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--muchie); flex: none; }
/* Sectiunile formularului. Linia de sus separa fara sa adauge o caseta in caseta — patru
   chenare imbricate ar face pagina sa para un formular de banca. Prima sectiune n-are
   linie: acolo separa de nimic. */
.profil-grup { padding-top: var(--p6); margin-top: var(--p6); border-top: 1px solid var(--chrule2); }
.profil-grup:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.profil-grup h3 { margin: 0; }
.profil-grup-intro { color: var(--chink3); font-size: 13px; margin: var(--p1) 0 var(--p4);
                     max-width: 62ch; }
.profil-camp { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--p4); }
.profil-camp label { font-weight: 600; font-size: 13.5px; }
.profil-ajutor { color: var(--chink3); font-size: 12.5px; }
.profil-camp textarea { min-height: 80px; }
/* Miniatura fisierului de identitate. Placa e fundalul pe care ajunge sigla in piesa, nu o
   alegere de gust: varianta deschisa pe crema ar fi invizibila si ar citi „n-a mers
   incarcarea". `object-fit: contain` fiindca o sigla se vede intreaga sau deloc — o
   decupare la 96px ar arata trei litere din cinci. */
.profil-miniatura { display: block; max-width: 220px; max-height: 96px; object-fit: contain;
  margin-top: var(--p1); padding: 10px; border: 1px solid var(--chrule); border-radius: 6px;
  box-sizing: content-box; }
.profil-miniatura--deschis { background: var(--ch); }
.profil-miniatura--inchis { background: var(--gr); border-color: var(--rule); }
.profil-culoare { display: flex; gap: 10px; align-items: center; }
.profil-culoare input[type="color"] { width: 44px; height: var(--h); flex: none; }
.profil-culoare input[type="text"] { font-family: var(--mono); }
.profil-actiuni { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: var(--p1); }
.profil-obligatoriu { color: var(--rdc); }

/* Biblioteca de B-roll. Lista creste (0051 n-are index unic pe rol), deci randurile sunt
   randuri de registru, nu casute: nume + durata sus, campul de descriere dedesubt. Fara
   `list-style` — bulinele ar citi „lista de bifat", cand de fapt fiecare rand e un fisier
   pe care omul il poate corecta. */
.broll-lista { list-style: none; margin: var(--p1) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--p3); }
.broll-clip { display: flex; flex-direction: column; gap: 4px;
  padding: var(--p2) 0; border-top: 1px solid var(--chrule2); }
.broll-clip:first-child { border-top: 0; padding-top: 0; }
.broll-antet { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
.broll-nume { font-weight: 600; overflow-wrap: anywhere; }
/* Cifrele se citesc una sub alta cand sunt mai multe clipuri, deci tabular-nums. */
.broll-durata { color: var(--chink3); font-variant-numeric: tabular-nums; flex: none; }
/* Cu `.broll-clip` in fata, nu singur: `.profil-camp textarea` (0,1,1) bate `.broll-
   descriere` (0,1,0) si i-ar impune cele 80px ale casetelor de profil — aici sunt zeci de
   randuri, nu un camp. Doua randuri, si creste doar daca omul trage de el. */
.broll-clip .broll-descriere { flex: 1 1 240px; min-width: 0; min-height: 0;
  resize: vertical; }

/* Segmentele cu clip ale unei reclame livrate, in panoul comenzii (2-Sep-2026). Reiau
   randurile bibliotecii din Profil — se corecteaza aceleasi descrieri, cu aceeasi functie —
   si adauga selectorul de inlocuire. `min-height` scos de pe `.eroare`: aici e cate una pe
   segment, si cele 20px goale ale fiecareia ar aduna, la sase clipuri, un ecran de aer intre
   randuri. Acelasi motiv pentru `:empty` pe randul de confirmare: exista de la desenare, dar
   nu scrie nimic pana nu se salveaza o descriere. */
.segmente-broll { margin-top: var(--p4); }
.segmente-broll .copy-eticheta { display: block; margin-bottom: var(--p2); }
.segmente-broll .eroare { min-height: 0; }
.segmente-broll .profil-ajutor:empty { display: none; }

/* Formularul de reclama, in fila Comanda. Blocul tine trei intrebari care nu incap pe un
   singur rand de flex, deci e o coloana, nu un `.comanda-rand`. */
.comanda-reclama { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
/* A patra oara aceeasi capcana (vezi `.comanda-rand[hidden]` si `.galerie-poza[hidden]`):
   `display:flex` de deasupra bate `[hidden]` din foaia browserului, si blocul ar ramane pe
   ecran la orice motor. */
.comanda-reclama[hidden] { display: none; }

/* Randul vocii pentru explainer (Item 2, 03-Sep-2026): inregistrare/incarcare, in paralel
   cu linkul de deasupra. Aceeasi forma ca `.comanda-reclama` (coloana, nu `.comanda-rand`),
   clasa ei proprie fiindca numele "reclama" ar fi inselator pe un bloc care n-are treaba cu
   reclama. */
.comanda-audio { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
/* Aceeasi capcana ca la `.comanda-reclama[hidden]` (vezi nota de acolo). */
.comanda-audio[hidden] { display: none; }
.comanda-audio audio { max-width: 100%; }

/* Bifele de B-roll. Alta forma decat `.broll-lista` din Profil, desi arata aceleasi fisiere:
   acolo fiecare rand e un registru cu un camp de corectat, aici e o alegere — deci bulina,
   numele pe acelasi rand cu durata, si descrierea dedesubt cu litera mica. Inaltimea e
   plafonata: o biblioteca de treizeci de clipuri ar impinge butonul de trimitere sub ecran,
   iar formularul are inca doua randuri sub lista. */
.broll-bife { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--p2);
  max-height: 260px; overflow-y: auto; }
.broll-bifa label { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
/* Bulina nu se intinde in flex si nu se strange cand numele fisierului e lung. */
.broll-bifa input { flex: none; }
.broll-bifa .broll-nume { overflow-wrap: anywhere; }

/* Socoteala vie de sub bife. Clasa proprie, nu `.profil-ajutor` plus `.eroare`: cele doua au
   aceeasi specificitate (0,1,0), iar `.profil-ajutor` e scrisa mai jos in foaie, deci ar fi
   castigat culoarea — randul ar fi ramas gri exact cand trebuia sa fie rosu. */
.reclama-socoteala { color: var(--chink3); font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
.reclama-socoteala.nu-incap { color: var(--rdc); }

/* Lista de oferte. Fiecare rand e o oferta; pe telefon campurile trec una sub alta, ca
   patru controale pe 390px nu se completeaza cu degetul. */
.oferte { display: flex; flex-direction: column; gap: var(--p3); align-items: flex-start; }
.oferte-randuri { display: flex; flex-direction: column; gap: var(--p3); width: 100%; }
/* Coloanele campurilor vin din lista, prin `--oferta-coloane` (app.js le calculeaza din
   `campuri`); coloana butonului de sters se adauga aici, ca e a ecranului, nu a datelor.
   Implicitul e forma ofertei, ca lucrurile sa cada rezonabil daca proprietatea lipseste. */
.oferta-rand { display: grid; gap: var(--p2); width: 100%;
  grid-template-columns: var(--oferta-coloane, 1.2fr 1fr 1fr 1.6fr) auto; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--chrule2); }
.oferta-rand:first-child { border-top: 0; padding-top: 0; }
.oferta-camp { display: flex; flex-direction: column; gap: var(--p1); min-width: 0; }
.oferta-camp input, .oferta-camp textarea { width: 100%; }
/* Lista e un tabel: capul de coloana se scrie o singura data, pe primul rand. Etichetele
   raman in DOM pentru cititoarele de ecran, doar ca nu se mai vad. */
.oferta-camp > .profil-ajutor { line-height: 20px; }
.oferta-rand:not(:first-child) .oferta-camp > .profil-ajutor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.oferta-sterge-cutie { align-items: flex-start; }
/* Nu `button.discret`: padding-ul lui de 12px cu margini negative e croit pentru coltul
   unui card, nu pentru o coloana care trebuie sa cada pe linia campurilor. */
.oferta-sterge { background: none; border: none; color: var(--chink3); font-size: 14px;
                 height: var(--h); padding: 0 10px; margin: 0 -10px 0 0; cursor: pointer; }
.oferta-sterge:hover { color: var(--chink); background: var(--ch3); }
button.oferta-adauga { margin-left: -12px; }
/* Ia locul butonului la plafon, deci se aliniaza cu textul randurilor, nu cu marginea
   negativa a butonului. Fara `[hidden] { display: none }` de mana: ramane bloc, deci
   regula browserului tine. */
.oferta-plafon { margin: 0; }
@media (max-width: 760px) {
  .oferta-rand { grid-template-columns: 1fr; align-items: stretch; }
  .oferta-rand:not(:first-child) .oferta-camp > .profil-ajutor {
    position: static; width: auto; height: auto; clip-path: none; }
  .oferta-sterge-cutie > .profil-ajutor { display: none; }
  .oferta-sterge { margin-left: -10px; }
}

/* ── MATERIA PRIMA (brain_intrari) ────────────────────────────────────────────
   Caseta e deliberat mica: e un flux de propozitii, nu un formular — un camp inalt cere
   un eseu, si atunci nu se mai scrie nimic. */
.brain-caseta { display: flex; flex-direction: column; gap: var(--p2); }
.brain-caseta textarea { min-height: 64px; }
.brain-actiuni { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Dictarea. Punctul rosu e singurul semn ca microfonul chiar asculta — textul din buton
   („Oprește") spune ce se intampla la apasare, nu ce se intampla acum. */
.brain-dictare-activa { color: var(--chink); }
.brain-dictare-activa::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 1px;
  background: var(--rdc); margin-right: 7px; vertical-align: 1px;
  animation: brain-puls 1.4s ease-in-out infinite; }
@keyframes brain-puls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  /* nu se OPRESTE — ascultarea e o stare, iar o stare care nu se mai vede e o regresie.
     Se domoleste: acelasi punct, aprins slab, fara puls. */
  .brain-dictare-activa::before { animation: none; opacity: .6; }
}
/* Ce se aude acum, inainte sa fie sigur. Sta pe un rand care se poate goli oricand, deci
   nu are voie sa mute butoanele de langa el cand apare si dispare. */
.brain-ecou:empty { display: none; }
.brain-ecou { max-width: 100%; min-width: 0; font-style: italic; color: var(--chink3);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain-lista { list-style: none; padding: 0; margin: var(--p4) 0 0; display: flex;
  flex-direction: column; gap: 2px; }
.brain-lista li { display: flex; gap: 10px; align-items: baseline;
  padding: var(--p2) 0; border-top: 1px solid var(--chrule2); }
.brain-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Folosita = a mancat-o o piesa. Stinsa, nu ascunsa: ascunsa, omul ar rescrie aceeasi
   poveste crezand ca s-a pierdut. */
.brain-folosita .brain-text { color: var(--chink3); }
/* Insemnarile scoase din postarea altcuiva. Semnul e dublu — o dunga pe rand SI cuvintele
   „din research" — fiindca o dunga singura ar fi trebuit invatata, iar ce se invata se si
   uita: cine deschide fila peste o luna trebuie sa citeasca de unde vine randul, nu sa-si
   aminteasca ce inseamna o linie. Nu e o culoare de familie (cyan/albastru/galben/verde):
   alea numesc felul piesei, si imprumutata aici ar fi spus ceva ce nu e adevarat.
   Contrast MASURAT: chink3 pe crema filei = 6,27:1.

   Selectorul e `.brain-lista li.brain-research`, si nu doar `.brain-research`: randurile
   listei isi iau `padding: var(--p2) 0` dintr-o regula cu specificitate 0,1,1, iar o
   clasa singura (0,1,0) pierde in fata ei. Prima varianta chiar asa a fost scrisa, si
   masurarea a intors `padding-left: 0px` — dunga desenata, textul lipit de ea. */
.brain-lista li.brain-research {
  flex-wrap: wrap; border-left: 3px solid var(--chrule); padding-left: var(--p2);
}
/* Un rand intreg pentru eticheta, nu o pastila langa text. Pastila a fost prima varianta
   si masurarea a aratat de ce nu merge: pe 375px lua 90px din rand, iar textul — singurul
   lucru pentru care randul exista — ramanea cu 180px. Aici nu e nici fundal: dunga din
   stanga spune deja „randul asta e altfel", iar o a doua suprafata colorata langa ea ar fi
   spus acelasi lucru de doua ori. */
/* ── Jurnalul saptamanal, sub insemnari ────────────────────────────────────────────────
   Un registru, nu un raport: randurile refolosesc `.rand` / `.rand-titlu` / `.rand-sub`,
   aceleasi cu ale raportului lunar, ca sa se citeasca identic. Ce se adauga aici e doar
   despartirea de lista de insemnari de deasupra si randul de restanta. */
.jurnal-cap {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--chink3);
  margin-top: var(--p8); margin-bottom: var(--p2);
}
/* Nu o culoare de alarma: piesele facute si nepublicate nu sunt o defectiune, sunt o
   restanta pe care omul o poate inchide singur. Culoarea de accent ar cere o reparatie
   in sistem; forma asta cere doar un click. */
.jurnal-restanta { font-size: 12px; color: var(--chink2); margin-top: 2px; }

.brain-sursa {
  flex: 0 0 100%; font-family: var(--mono); font-size: 11px; color: var(--chink3);
}

/* ── LEAD-URILE DE PE SITE (admin) ────────────────────────────────────────────
   Un rand = un eveniment, nu o persoana: acelasi om care scrie de doua ori are doua
   randuri, si de-aia confirmarea de stergere spune „si tot ce a trimis" — pleaca amandoua. */
.lead { border: 1px solid var(--chrule2); border-radius: var(--r0); padding: 10px var(--p3);
        margin-bottom: var(--p2); background: var(--ch0);
        box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06); }
.lead-sus { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p2); }
.lead-sus b { overflow-wrap: anywhere; }
.lead-nume { color: var(--chink3); }
/* Ora se lipeste la dreapta pe ecran lat si trece pe randul urmator pe telefon, unde
   adresa singura mananca deja toata latimea. */
.lead-cand { margin-left: auto; color: var(--chink3); font-size: 11px; white-space: nowrap;
             font-family: var(--mono); }
.lead-sub { margin-top: 3px; color: var(--chink3); font-size: 12px; overflow-wrap: anywhere; }
.lead-mesaj { margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lead-nelivrat { margin-top: 6px; color: var(--rdc); font-size: 12px; }
.lead-avertisment { border: 1px solid var(--rdc); border-radius: var(--r0);
                    padding: 10px var(--p3); margin-bottom: 10px; color: var(--rdc);
                    background: var(--rdf); }
.lead-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
                font-size: 13px; }
/* Cerneala rosie a lui "Da, sterge" vine acum din button.distructiv (clasa de familie),
   nu dintr-o regula ad-hoc — .lead-da a ramas fara scop propriu dupa trecerea la familia
   de comenzi (31-Aug-2026). */
.lead button.discret, .lead button.distructiv { margin-top: 6px; }

/* ── „CE E DE CREAT" (coada de propuneri) ─────────────────────────────────────
   Un rand nu e un card de kanban: nu se apasa ca sa se deschida nimic. Se citeste, i se
   muta starea si, daca se poate scrie acum, se comanda. De-aia nu are `cursor: pointer`
   si nici hover pe toata suprafata — n-ar duce nicaieri.

   Randul blocat NU e gri si nu e stins. Cerneala de eroare pe marginea din stanga si
   blocajul scris intreg sunt tot rostul ecranului: un rand care nu se poate face trebuie
   sa se vada ca cere ceva de la om, nu sa dispara in fundal. */
.prop { border: 1px solid var(--chrule2); border-radius: var(--r0); padding: var(--p3) 14px;
        margin-bottom: 10px; background: var(--ch0);
        box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06); }
.prop-blocat { box-shadow: inset 3px 0 0 var(--rdc), 0 1px 2px rgba(0,0,0,.06); }
.prop-titlu { font-weight: 700; }
.prop-de-ce { color: var(--chink3); font-size: 13px; margin-top: 3px; }
.prop-etichete { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--p2); }
/* Pastila: fundal OPAC, nu spalare translucida — o spalare peste doua suprafete crem
   diferite da alt raport pe fiecare. Si niciodata doar culoare: fiecare pastila poarta
   cuvantul. Culoarea grabeste citirea; cuvantul o face posibila. */
/* `inline-block`, nu `inline-flex`, si asta e singurul motiv: pastila „Serie · <titlul
   episodului urmator>" poarta un text de lungime necunoscuta, iar `text-overflow` nu se
   aplica elementului anonim in care un flex-container isi impacheteaza textul. Cu
   `nowrap` si fara plafon de latime, pastila aia impingea documentul la 453px pe un ecran
   de 390px — telefonul micsora toata pagina ca sa o incapa, exact „da zoom out putin"-ul
   raportat pe fila „Ce e de creat". `line-height` tine centrarea pe verticala pe care o
   facea `align-items`: 20px inaltime minus muchia de 1px sus si jos. */
.prop-eticheta, .prop-stare {
  display: inline-block; height: 20px; line-height: 18px; padding: 0 var(--p2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  border-radius: 5px; border: 1px solid transparent;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em;
  white-space: nowrap; background: var(--ch3); color: var(--chink2);
}
.prop-stare { font-weight: 600; background: var(--ch3); color: var(--chink); }
.prop-stare-de_scris { background: var(--blf); color: var(--blc); }
.prop-stare-script_gata { background: var(--gnf); color: var(--gnc); }
.prop-stare-blocat { background: var(--rdf); color: var(--rdc); }
.prop-stare-publicat, .prop-stare-arhivat { background: var(--ch3); color: var(--chink3); }
.prop-blocaj { margin-top: var(--p2); color: var(--rdc); font-size: 13px;
               overflow-wrap: anywhere; }
.prop-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p2);
                margin-top: 10px; }
/* Selectorul si casuta de motiv nu se intind cat randul: pe latimea intreaga ar arata ca
   un formular, iar randul e in primul rand ceva de citit. */
.prop-sel { width: auto; }
.prop-motiv { width: auto; flex: 1 1 220px; }
.prop-comandata { font-size: 12px; color: var(--chink3); margin-left: auto;
                  font-family: var(--mono); }
.prop-eroare { flex-basis: 100%; min-height: 0; }
/* Iesirile din coada stau langa „Comandă", dar nu se cer la fel de tare: sunt raspunsuri
   la o propunere, nu urmatorul pas. */
.prop-iesire { margin-left: 6px; }
.prop-arhivate { margin-top: var(--p3); }
.prop-arhivate:empty { display: none; }
/* Bara adminului de deasupra cozii. `prop-sync` spune si cate randuri nu mai sunt propuse
   de vault — alea raman in coada, deci trebuie sa fie scrise undeva. */
.prop-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
            margin-bottom: 14px; }
/* A cincea oara aceeasi capcana (vezi `.galerie-poza[hidden]`, `.comanda-rand[hidden]`,
   `.pentru-cine[hidden]`, `.panou-actiuni[hidden]`): `display: flex` de mai sus e in foaia
   autorului si bate `[hidden] { display: none }` din foaia browserului. Fara randul asta,
   `$("prop-cap").hidden = !esteAdmin` din app.js nu ascunde nimic, si clientul ramane cu
   doua butoane carora rutele lor ii raspund 403. Gasita pe 29-Aug-2026 cu harnasul: pe
   ecran nu se vedea, fiindca adminul le vede oricum. */
.prop-cap[hidden] { display: none; }
.prop-sync { font-size: 12px; color: var(--chink3); overflow-wrap: anywhere; }
/* Socoteala unei generari. Nu incape pe un rand langa buton, ca la sincronizare, fiindca
   ce s-a ARUNCAT sunt propozitii intregi — si tocmai alea trebuie citite: o rulare care
   naste zero randuri fiindca brandul n-are ce spune saptamana asta arata identic, in
   cifre, cu una care naste zero fiindca motorul a scris cinci motive generice. Diferenta e
   in text, deci textul are nevoie de loc. */
.prop-raport { margin: 0 0 14px; font-size: 13px; }
.prop-raport-cifre { font-weight: 700; }
.prop-raport-motiv { color: var(--chink3); margin-top: var(--p1); }
.prop-aruncate { margin: 6px 0 0; padding-left: 18px; color: var(--chink3); }
.prop-aruncate li { margin-top: 3px; }
.prop-aruncat-titlu { color: var(--chink); }
/* Semnul randului nascut de sistem: aceeasi pastila ca restul etichetelor, doar cu
   conturul intrerupt. Discret dinadins — un rand propus de sistem se citeste altfel decat
   unul scris de om, dar butoanele lui fac exact acelasi lucru, si un semn tipator ar
   sugera altceva. */
.prop-sistem { border-style: dashed; border-color: var(--muchie); }

/* ── STRATEGIA ────────────────────────────────────────────────────────────────
   Ecranul asta e singurul din aplicatie unde omul DECIDE in loc sa aprobe bucata cu
   bucata, si limbajul o spune fara sa scrie nicaieri „important":

   · strategia APROBATA e DISPLAY NEGRU. E singurul lucru din ecran care nu se apasa: nu
     e o comanda, e ce conduce motoarele acum. Exact regula din design/aplicatie.html —
     ce afiseaza informatie e negru — aplicata la un document, nu la o cifra. Ca sa se
     vada de la doi metri care e documentul in vigoare si care e o propunere.
   · ciorna si formularul sunt CORP CREM. Sunt lucruri de decis si de scris, deci podea.
   · istoricul e crem stins: raspunde la „de ce am schimbat directia", nu se lucreaza in el.

   Trei suprafete, deci `.fapt-sub` (mono, --chink3) isi schimba cerneala inauntrul
   displayului: --chink3 pe negru ar da 2,46:1, adica faptul din care s-a nascut pilonul —
   singurul lucru contestabil de pe ecran — ar deveni cel mai greu de citit. */
.strat { border-radius: var(--r); padding: var(--p4) var(--p6); margin-bottom: var(--p4); }
.strat-cap { font-family: var(--mono); font-size: 10.5px; font-weight: 500;
             letter-spacing: .16em; text-transform: uppercase; color: var(--chink3);
             margin-bottom: var(--p3); }
.strat-obiectiv { font-size: 19px; font-weight: 700; letter-spacing: -.02em;
                  line-height: 1.35; overflow-wrap: anywhere; }
.strat-rand { margin-top: var(--p2); font-size: 13px; overflow-wrap: anywhere; }
.strat-et { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
            color: var(--chink3); }
.strat-gol { color: var(--chink3); margin: 0; }

/* Documentul in vigoare. --dispink pe --disp: 16,68:1. */
.strat-aprobata {
  background: var(--disp); border: 1px solid var(--disprule); color: var(--dispink);
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.55) inset;
}
/* Cernelurile de pe display, masurate pe --disp: --dispink2 da 7,34:1, portocaliul 5,39:1
   (pe negru redevine cerneala — pe crem ar fi fost 2,87:1 si n-ar fi avut voie). */
.strat-aprobata .strat-cap,
.strat-aprobata .strat-et,
.strat-aprobata .strat-gol,
.strat-aprobata .fapt-sub,
.strat-aprobata .strat-pilon-de-ce { color: var(--dispink2); }
.strat-aprobata .strat-pilon { border-color: var(--disprule); }
.strat-aprobata .strat-semn { background: var(--disp2); color: var(--or); }

/* „De reinnoit" e SEMN, nu avertisment: strategia expirata conduce mai departe (vezi nota
   din app.js). De-aia pastila, nu chenar rosu — o directie veche e mai buna decat niciuna,
   iar un semn tipator ar cere o actiune pe care ecranul n-o are. Pe crem: --orc pe --orf,
   5,05:1, dupa regula pastilelor de la `.prop-eticheta` — fundal opac, si cuvantul scris. */
.strat-semn {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--p2);
  border-radius: 5px; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .06em; white-space: nowrap; text-transform: none;
  background: var(--orf); color: var(--orc);
}

/* Fiecare pilon isi poarta faptul. Coloana, nu rand: `de_ce` si `fapt` sunt propozitii. */
.strat-piloni { margin-top: var(--p4); display: flex; flex-direction: column; gap: 10px; }
.strat-pilon { border-left: 2px solid var(--chrule); padding-left: var(--p3); }
.strat-pilon-nume { font-weight: 700; }
.strat-pilon-de-ce { color: var(--chink3); font-size: 13px; margin-top: 2px; }

/* Ciorna: fisa crem cu muchia de accent, ca `.prop-blocat` — ceva de pe ecran asteapta o
   apasare de la om. Aici e singura din aplicatie care schimba directia brandului. */
.strat-ciorna, .strat-scrie, .strat-istoric {
  border: 1px solid var(--chrule2); background: var(--ch0);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06);
}
.strat-ciorna { box-shadow: inset 3px 0 0 var(--orc), 0 1px 2px rgba(0,0,0,.06); }
.strat-actiuni { display: flex; flex-wrap: wrap; gap: var(--p2); margin-top: var(--p4); }

/* Casuta de respingere. Motivul intra in promptul propunerii urmatoare, deci se scrie in
   ea la fel de lat ca un camp de formular, nu intr-o fanta de langa buton. */
.strat-respinge { margin-top: var(--p3); border-top: 1px solid var(--chrule2);
                  padding-top: var(--p3); }
.strat-respinge textarea { width: 100%; }
.strat-respinge button { margin-top: var(--p2); }

/* Nimic de aprobat: cutia in care se SCRIE. Conturul intrerupt spune ca inca nu e nimic
   aici — acelasi semn ca la `.prop-sistem`, alt inteles fiindca alta e cutia. */
.strat-scrie { border-style: dashed; }
.strat-form { margin-top: var(--p4); border-top: 1px solid var(--chrule2);
              padding-top: var(--p4); }
.strat-form textarea, .strat-form input[type="text"], .strat-form input[type="date"] {
  width: 100%;
}
.strat-form-piloni { display: flex; flex-direction: column; gap: var(--p2);
                     margin-bottom: var(--p2); }
/* Doua campuri si un buton pe un rand pe ecran lat; pe telefon `flex-wrap` le pune in
   coloana, si atunci „Sterge" cade sub campul lui, nu langa alt pilon. */
.strat-form-pilon { display: flex; flex-wrap: wrap; gap: var(--p2); align-items: center; }
.strat-form-pilon input { flex: 1 1 160px; width: auto; }

/* Raportul unei propuneri care n-a trecut poarta, si randul galben de plafon. Amandoua se
   pun cu `prepend` deasupra ecranului, deci nu au voie sa arate ca inca o cutie de citit
   la rand — sunt raspunsul la apasarea de acum doua secunde. */
.strat-nota { margin: 0 0 var(--p4); font-size: 13px; color: var(--chink3); }
.strat-nota button { margin-left: 6px; }
.strat-avertisment { border: 1px solid var(--yec); border-radius: var(--r0);
                     background: var(--yef); color: var(--yec);
                     padding: 10px var(--p3); margin-bottom: var(--p4); font-size: 13px; }
.strat-avertisment div + div { margin-top: var(--p1); }
.strat-eroare { margin-bottom: var(--p3); }

/* Ce a fost inainte. Nu e jurnal — sunt cel mult trei, si numai inlocuite sau respinse. */
.strat-istoric { color: var(--chink3); }
.strat-vechi { margin-top: var(--p2); font-size: 13px; overflow-wrap: anywhere; }
.strat-istoric .strat-semn { background: var(--ch3); color: var(--chink2); }

/* ── CONTOARELE DE PLAFON (nota D §2) ─────────────────────────────────────────
   Display negru, nu fisa crem, si asta nu e o preferinta: regula casei e „ce e corp e
   crem, ce afiseaza informatie e negru", iar aici nu e nimic ALTCEVA decat cifre. Un
   tablou de numere pe crem ar fi date scrise pe carcasa aparatului.

   Nu inventeaza o a doua cutie neagra: e chiar `.cifra-cutie` de pe Acasă, desfacuta in
   celule — aceeasi umbra intoarsa, aceeasi cerneala, aceeasi familie de eticheta
   (--mono la 10.5px, .16em), fiindca e acelasi obiect: un display cu cifre pe el.
   Cifrele sunt masurate de harness (`cont-harnas.mjs`), nu scrise dupa ureche. */
.cont {
  background: var(--disp); border: 1px solid var(--disprule); border-radius: var(--r);
  padding: var(--p4) var(--p6); margin-bottom: var(--p4); color: var(--dispink);
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.55) inset;
}
.cont-cap {
  font-family: var(--mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dispink2);
  margin-bottom: var(--p3);
}
.cont-treapta { color: var(--ord); }

/* `auto-fit` cu un minim, nu un numar de coloane: familiile sunt trei in fila Comandă si
   patru in Abonament (acolo intra si `branduri`), iar o grila scrisa pe trei ar fi rupt
   tabloul plin fara sa se vada in cel scurt. */
.cont-tablou {
  display: grid; gap: var(--p3) 0;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}
.cont-cel {
  padding: 0 var(--p4); border-left: 1px solid var(--disprule);
}
.cont-cel:first-child { border-left: 0; padding-left: 0; }
.cont-n {
  display: block; font-family: var(--mono); font-weight: 600; font-size: 30px;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
/* „nelimitat" scris cu litere sta in acelasi loc ca o cifra de 30px, dar la 30px cuvantul
   iese din celula. Coboara la 17px si primeste `line-height` cat sa ocupe aceeasi
   inaltime — altfel eticheta de sub el ar urca si randul de celule s-ar desface. */
.cont-n-cuvant { font-size: 17px; font-weight: 500; line-height: 30px; letter-spacing: 0; }
.cont-e {
  display: block; margin-top: var(--p2); font-family: var(--mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dispink2);
}
.cont-din {
  display: block; margin-top: var(--p1); font-family: var(--mono); font-size: 11.5px;
  color: var(--dispink2); font-variant-numeric: tabular-nums;
}
/* Familia terminata. Se coloreaza CIFRA, nu se pune un fundal rosu peste celula: zero
   piese ramase pe o treapta care blocheaza nu e o defectiune, e sfarsitul lunii — iar
   nota de dedesubt spune deja ce urmeaza. */
.cont-zid .cont-n, .cont-zid .cont-e { color: var(--ord); }
.cont-nota {
  margin: var(--p3) 0 0; padding-top: var(--p3); border-top: 1px solid var(--disprule);
  font-size: 13px; color: var(--dispink2);
}

/* Sub 560px, doua coloane si fara liniile dintre celule: la doua coloane linia dintre
   frati cade decalat, deci prima celula din randul doi ar primi o linie unde nu trebuie.
   Aceeasi capcana, acelasi raspuns ca in displayul de pe INDEX. */
@media (max-width: 560px) {
  .cont-tablou { grid-template-columns: repeat(2, 1fr); gap: var(--p4); }
  .cont-cel, .cont-cel:first-child { border-left: 0; padding: 0; }
}

/* ── TREPTELE (fila Abonament) ────────────────────────────────────────────────
   Cate o fisa crem per treapta, fiecare cu displayul ei negru de cifre — aceeasi taietura ca
   la campanii: hartia e ce se apasa, displayul e ce se citeste. Celulele din display sunt
   `.cont-tablou` / `.cont-cel` / `.cont-n` / `.cont-e` ale contoarelor, cu media query-ul lor
   de 560px cu tot. Ce lipseste dinadins fata de contoare e randul „x din y": aici nu s-a
   consumat nimic, sunt plafoanele treptei — adica exact ce se cumpara.

   232px ca minim de coloana, nu 3 coloane fixe: la 3 fixe, pe telefon cardurile ar fi ajuns
   la ~100px si numele „Aplicația Pro" s-ar fi rupt in trei randuri peste un display de patru
   celule de latimea unui deget. */
.trp {
  display: grid; gap: var(--p4); margin: var(--p4) 0;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.trp-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--chrule2); border-radius: var(--r); background: var(--ch0);
  padding: var(--p4) var(--p6);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06);
}
/* Treapta in vigoare primeste contur mai apasat si pastila din cap, nu fundal colorat: un
   card colorat integral se citeste ca oferta recomandata, adica exact pe dos — e ce ai deja. */
.trp-card-curenta { border-color: var(--chink3); }
.trp-cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p2); }
.trp-nume { font-size: 17px; font-weight: 700; letter-spacing: -.01em;
            overflow-wrap: anywhere; }
/* Aceeasi forma ca `.cpn-stare`: fundal opac, si niciodata doar culoare — pastila isi poarta
   cuvantul. Culoarea grabeste citirea; cuvantul o face posibila. */
.trp-acum {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--p2);
  border-radius: 5px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; white-space: nowrap; background: var(--gnf); color: var(--gnc);
}
.trp-pret {
  margin-top: 6px; font-family: var(--mono); font-size: 20px; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* Pretul necitit din Stripe se scrie cu litere, la corp de propozitie, nu cu o cifra de
   rezerva la 20px: o cifra inventata aici ar arata exact ca un pret adevarat. */
.trp-pret-lipsa { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--chink3); }
.trp-palnie { margin-top: var(--p3); }
/* `margin-top: auto` impinge butonul la baza cardului: cardurile au inaltimi diferite (nume
   mai lung, pret lipsa, nota in loc de buton), iar butoane desincronizate pe verticala se
   citesc ca trei lucruri diferite, nu ca aceeasi alegere de trei ori. */
.trp-jos { margin-top: auto; padding-top: var(--p4); }
.trp-jos button { width: 100%; }
.trp-nota { margin: 0; font-size: 13px; color: var(--chink3); }
.trp-om { margin: var(--p4) 0 0; }
.trp-termen {
  margin: var(--p3) 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--chink2);
}

/* ── CAMPANIILE (nota D §3) ───────────────────────────────────────────────────
   Cardul e FISA CREM, palnia din el e DISPLAY NEGRU, si impartirea nu e decorativa: o
   campanie se scrie, se schimba si se sterge — deci e podea; cele patru cifre din ea nu se
   apasa — deci sunt date. Aceeasi taietura ca la strategie, unde documentul in vigoare e
   negru si ciorna in care se scrie e crem.

   Palnia NU-si aduce celule noi: sunt `.cont-tablou` / `.cont-cel` / `.cont-n` / `.cont-e`
   ale contoarelor, definite mai sus, cu media query-ul lor de 560px cu tot. Cutia de aici da
   doar suprafata neagra si spatiul, fiindca fata de contoare ii lipsesc marginile unui bloc
   de sine statator. Cifrele de contrast sunt masurate de `camp-harnas.mjs`, nu deduse. */
.cpn {
  border: 1px solid var(--chrule2); border-radius: var(--r); background: var(--ch0);
  padding: var(--p4) var(--p6); margin-bottom: var(--p4);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06);
}
.cpn-antet { display: flex; flex-wrap: wrap; gap: var(--p2); align-items: center;
             margin-bottom: var(--p4); }
.cpn-cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p2); }
.cpn-nume { font-size: 17px; font-weight: 700; letter-spacing: -.01em;
            overflow-wrap: anywhere; }

/* Pastilele au forma lui `.prop-eticheta`: fundal OPAC (nu spalare translucida) si
   niciodata doar culoare — fiecare isi poarta cuvantul. Culoarea grabeste citirea; cuvantul
   o face posibila. */
.cpn-stare, .cpn-fel {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--p2);
  border-radius: 5px; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .06em; white-space: nowrap;
  background: var(--ch3); color: var(--chink2);
}
.cpn-stare { font-weight: 600; }
/* Patru stari, patru familii, alese dupa ce spune fiecare: „în desfășurare" e ce se intampla
   acum (verde), „fără termen" e ce merge mereu (cyan), „începe mai târziu" e ce inca n-a
   inceput (albastru), „încheiată" ramane crem stins — nu mai cere nimic de la nimeni. */
.cpn-stare-activa { background: var(--gnf); color: var(--gnc); }
.cpn-stare-continua { background: var(--cyf); color: var(--cyc); }
.cpn-stare-viitoare { background: var(--blf); color: var(--blc); }
.cpn-stare-incheiata { background: var(--ch3); color: var(--chink3); }
/* Campania incheiata nu se stinge toata: cifrele ei sunt chiar dovada pentru „la ce a
   folosit". Se retrage doar hartia de sub ea — ramane conturul — ca sa nu concureze cu ce e
   in desfasurare. */
.cpn-incheiata { background: transparent; box-shadow: none; }

.cpn-perioada { margin-top: 6px; font-family: var(--mono); font-size: 12px;
                color: var(--chink3); }
.cpn-obiectiv { margin: var(--p3) 0 0; overflow-wrap: anywhere; }
.cpn-palnie, .trp-palnie {
  margin-top: var(--p4); background: var(--disp); border: 1px solid var(--disprule);
  border-radius: var(--r0); padding: var(--p4) var(--p4) var(--p3); color: var(--dispink);
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.55) inset;
}
.cpn-actiuni { display: flex; flex-wrap: wrap; gap: var(--p2); margin-top: var(--p4); }
/* Contur intrerupt, ca `.strat-scrie`: inca nu e nimic aici, si nu e o defectiune. */
.cpn-gol { border-style: dashed; }
.cpn-gol-text { margin: 0; color: var(--chink3); }
.cpn-eroare { margin-bottom: var(--p3); }

/* Formularul se deschide SUB cardul lui, nu intr-un panou peste ecran: o campanie se
   schimba uitandu-te la cifrele ei, nu dupa ce le-ai acoperit. */
/* `margin-bottom` pentru formularul de campanie noua, care nu sta in nicio fisa: fara el
   se lipea de primul card si cele doua se citeau ca un singur bloc. Sub o fisa nu strica —
   acolo formularul e oricum ultimul lucru din cutie. */
.cpn-form { margin-top: var(--p4); border-top: 1px solid var(--chrule2);
            padding-top: var(--p4); margin-bottom: var(--p4); }
.cpn-form input[type="text"], .cpn-form textarea { width: 100%; }
.cpn-feluri { display: flex; flex-direction: column; gap: var(--p2);
              margin-bottom: var(--p4); }
/* Butoane radio cu propozitia langa ele, nu un `select`: explicatia felului e chiar lucrul
   care face alegerea, si intr-un `select` n-ar fi incaput niciuna. */
/* `min-height` fiindca tinta de deget e randul intreg, nu bulina de 17px — iar randul, cu
   titlu si propozitie, masura 43px: un pixel sub prag. Masurat, nu presupus. */
.cpn-op { display: flex; align-items: flex-start; gap: var(--p2); min-height: 44px; }
.cpn-op input { margin-top: 3px; }
.cpn-op-text { display: flex; flex-direction: column; gap: 2px; }
.cpn-op-de-ce { color: var(--chink3); font-size: 13px; }
/* Doua date pe un rand pe ecran lat, in coloana pe telefon — unde doua campuri de data unul
   langa altul ajung amandoua nefolosibil de inguste. */
.cpn-form-perioada { display: flex; flex-wrap: wrap; gap: var(--p2); }
.cpn-form-perioada input { flex: 1 1 150px; }
.cpn-form-actiuni { margin-top: var(--p4); }

/* Alegerea pieselor. Aceeasi linie de sus ca la formular: e a doua zona care se deschide pe
   card, si fara ea cele doua liste s-ar citi ca o continuare a obiectivului. */
.cpn-piese { margin-top: var(--p4); border-top: 1px solid var(--chrule2);
             padding-top: var(--p4); }
.cpn-lista + .cpn-lista { margin-top: var(--p6); }
.cpn-lista h3 { margin: 0 0 var(--p2); font-family: var(--mono); font-size: 12px;
                font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
                color: var(--chink3); }
/* Randul ramane crem, nu display negru: are un buton in el, deci e podea, nu tablou de
   cifre. Linia dintre randuri, nu chenar in jurul fiecaruia — sunt o lista, nu carduri. */
.cpn-rand { display: flex; align-items: center; justify-content: space-between;
            gap: var(--p3); min-height: 44px; padding: var(--p2) 0;
            border-bottom: 1px solid var(--chrule2); }
.cpn-rand:last-child { border-bottom: 0; }
.cpn-rand-titlu { overflow-wrap: anywhere; }
.cpn-rand-sub { margin-top: 2px; font-size: 13px; color: var(--chink3); }
/* Butonul nu se stramteaza sub textul lui cand titlul piesei e lung. */
.cpn-rand button { flex: 0 0 auto; }

/* ── CONSILIUL (nota D §4) ────────────────────────────────────────────────────
   Trei suprafete, aceeasi regula ca la strategie:

   · verdictul saptamanii e DISPLAY NEGRU. Nimic din el nu se apasa — nu e o comanda, e ce
     spune sistemul acum, si se vede de la doi metri care e documentul in vigoare.
   · raportul rularii e crem stins: raspunsul la apasarea de acum doua secunde, nu ceva de
     citit a doua zi.
   · istoricul e crem stins: raspunde la „mi-a mai zis asta", nu se lucreaza in el.

   Nu inventeaza cutii noi. Displayul e chiar corpul lui `.strat-aprobata` (aceeasi umbra
   intoarsa, acelasi chenar), antetul e `.cont-cap` de pe orice display, iar faptul de sub
   recomandare e `.fapt-sub` de peste tot — cu singura corectie care conteaza: pe negru,
   --chink3 ar da 2,46:1, adica dovada recomandarii ar deveni cel mai greu lucru de citit
   de pe ecran. Cifrele sunt masurate de `cons-harnas.mjs`, nu scrise dupa ureche. */
.cons { border-radius: var(--r); padding: var(--p4) var(--p6); margin-bottom: var(--p4); }
.cons-antet { margin-bottom: var(--p4); }
.cons-nota { margin: var(--p2) 0 0; font-size: 13px; color: var(--chink3); }
.cons-antet + .cons-raport, .cons-nota + .cons-raport { margin-top: var(--p4); }

.cons-verdict {
  background: var(--disp); border: 1px solid var(--disprule); color: var(--dispink);
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.55) inset;
}
.cons-verdict .fapt-sub { color: var(--dispink2); }

/* Fiecare recomandare isi poarta faptul. Muchia din stanga o leaga de al ei — trei
   recomandari una sub alta, fiecare cu doua propozitii, s-ar citi altfel ca un paragraf. */
.cons-rec { border-left: 2px solid var(--disprule); padding-left: var(--p3);
            margin-top: var(--p4); }
.cons-rec-ce { font-weight: 700; overflow-wrap: anywhere; }
.cons-rec-de-ce { margin-top: 2px; font-size: 13px; overflow-wrap: anywhere; }
.cons-verdict .cons-rec-de-ce { color: var(--dispink2); }
.cons-rec .fapt-sub { margin-top: var(--p2); overflow-wrap: anywhere; }

.cons-gol, .cons-istoric {
  border: 1px solid var(--chrule2); background: var(--ch0);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06);
}
.cons-gol { border-style: dashed; box-shadow: none; }
.cons-gol-text { margin: 0; color: var(--chink3); }

.cons-istoric { color: var(--chink3); }
/* Pe crem, muchia si cerneala coboara: istoricul se citeste, nu se lucreaza in el. */
.cons-istoric .cons-rec { border-left-color: var(--chrule); }
.cons-istoric .cons-rec-ce { font-weight: 600; }
.cons-vechi-cap { margin-top: var(--p4); font-family: var(--mono); font-size: 11.5px;
                  letter-spacing: .04em; color: var(--chink3); }

/* Raportul rularii: ce n-a intrat in verdict, si de ce. Chenar intrerupt, ca `.strat-scrie`
   — nu e o cutie de pastrat, e explicatia unei apasari. */
.cons-raport { border: 1px dashed var(--chrule); border-radius: var(--r0);
               padding: var(--p3) var(--p4); margin-bottom: var(--p4); font-size: 13px; }
.cons-raport-cap { font-weight: 700; }
.cons-raport-motiv { margin-top: var(--p1); color: var(--chink3); }
/* Ce s-a aruncat, si motivul in aceeasi propozitie vizuala: doua coloane s-ar rupe pe
   telefon si ar lasa motivul orfan sub actiunea de dinaintea lui. */
.cons-aruncat { margin-top: var(--p2); overflow-wrap: anywhere; }
.cons-aruncat-ce::after { content: " — "; }
.cons-aruncat-motiv { color: var(--chink3); }
.cons-eroare { margin-bottom: var(--p3); }

/* Singurul lucru apasabil de pe display. `primar mic`, nu o clasa noua: portocaliul plin
   cu cerneala --gr e corect si pe negru (vezi nota de la --accent din capul foii), iar
   `mic` il tine la inaltimea unei actiuni de rand, nu a unei comenzi de ecran. */
.cons-rec-act { margin-top: var(--p3); }
/* Celalalt capat al aceleiasi stari: recomandarea e deja in coada. Text, nu buton stins —
   un buton dezactivat invita la apasare si apoi refuza, iar aici nu s-a stricat nimic. */
.cons-fa-gata { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
                color: var(--dispink2); }

/* „Nu acum" — celalalt raspuns. NU e `primar`: doua butoane portocalii unul langa altul ar
   spune ca sunt doua actiuni la fel de dorite, cand una duce recomandarea in coada si
   cealalta o inchide. Fantoma pe display (fara fundal, muchie de --disprule, cerneala
   --dispink2 = 7,34:1, masurata mai sus la „Cernelurile de pe display") o lasa apasabila
   fara s-o puna in competitie cu „Fă asta". La hover urca la --dispink (16,68:1). */
.cons-rec-act { display: flex; flex-wrap: wrap; gap: var(--p2); align-items: center; }
/* Muchia NU e --disprule (#25282C): pe --disp da 1,50:1, adica butonul ar fi ramas doar
   text, fara chenar vizibil — iar un buton fara margine langa unul portocaliu plin nu se
   citeste ca al doilea raspuns, ci ca o eticheta. Cerneala albului la 40% peste --disp da
   #666667 = 3,43:1, masurat in pagina pe 2-Sep-2026 — pragul de 3:1 pentru conturul unui
   element de interfata, si nici un gram peste, ca sa nu concureze cu „Fă asta". */
.cons-ghost { background: none; border-color: rgba(237,238,234,.40); color: var(--dispink2); }
.cons-ghost:hover { background: var(--disp2); border-color: var(--dispink2);
                    color: var(--dispink); }

/* Refuzul deja dat, cu motivul lui. Motivul e text de om, deci se rupe oriunde: fara
   `anywhere`, un rand scris fara spatii ar impinge displayul in afara ecranului pe telefon
   — capcana pe care harnasul a prins-o deja de trei ori la campurile scrise de om. */
.cons-nu-gata { display: flex; flex-direction: column; gap: 2px; }
.cons-nu-cap { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
               color: var(--dispink2); }
.cons-nu-motiv { font-size: 13px; color: var(--dispink); overflow-wrap: anywhere; }

/* Formularul de refuz. Campul ramane crem pe display (e o suprafata de scris, nu una de
   citit) — aceeasi conventie ca orice `textarea` din aplicatie, deci nu-si ia stiluri noi
   in afara de latime. */
.cons-nu-form { width: 100%; }
.cons-nu-eticheta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
                    color: var(--dispink2); margin-bottom: var(--p2); }
.cons-nu-camp { max-width: 100%; }
.cons-nu-bara { display: flex; flex-wrap: wrap; gap: var(--p2); margin-top: var(--p2); }

/* Cele doua sageti de vanatoare, sub actiunile de continut. Sunt DESPARTITE de ele printr-o
   muchie, nu doar prin spatiu: „Fă asta" duce recomandarea in coada de piese, iar astea
   doua ating lista de oameni. Amestecate pe acelasi rand, patru butoane la fel de mari ar
   fi spus ca sunt patru variante ale aceleiasi intrebari.

   Amandoua sunt `.cons-ghost`, niciuna `primar`: portocaliul de pe display e deja luat de
   „Fă asta", si e luat pe bună dreptate — el e raspunsul asteptat al saptamanii. */
.cons-rec-vanat { margin-top: var(--p3); padding-top: var(--p3);
                  border-top: 1px solid var(--disprule);
                  display: flex; flex-direction: column; gap: var(--p2);
                  align-items: flex-start; }
.cons-vanat-cap { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
                  color: var(--dispink2); }
.cons-vanat-butoane { display: flex; flex-wrap: wrap; gap: var(--p2); align-items: center;
                      max-width: 100%; }
/* Selectorul apare doar cu doua tinte sau mai multe, si e singurul camp de formular din
   toata aplicatia asezat pe display (negru). De-aia are trei corecturi peste baza crem:

   1. `background-color`, NU `background`. Scurtatura ar fi sters `background-image` — adica
      exact cele doua degradeuri care DESENEAZA sageata selectorului (regula `select` din
      capul foii). Un selector fara sageata arata ca un camp mort, si asa a si aratat la
      prima captura din harnas, pe 2-Sep-2026.
   2. Sageata se redeseneaza cu --dispink2, nu --chink2: cerneala de crem pe negru da 1,4:1,
      adica invizibila.
   3. `width: auto`, fiindca baza (`input, select, textarea`) da `width: 100%` tuturor
      campurilor — pe un rand de butoane, asta l-ar fi intins pe toata latimea cardului. */
.cons-vanat-tinta { width: auto; flex: 0 1 auto; min-width: 180px; max-width: 100%;
                    height: var(--hs); font-size: 12.5px; padding: 0 28px 0 10px;
                    background-color: var(--disp2);
                    background-image: linear-gradient(45deg, transparent 50%, var(--dispink2) 50%),
                                      linear-gradient(135deg, var(--dispink2) 50%, transparent 50%);
                    border-color: rgba(237,238,234,.40); color: var(--dispink); }
.cons-vanat-tinta:hover { border-color: var(--dispink2); }
/* Raspunsul sta pe rand propriu, sub butoane, nu langa ele: e o propozitie intreaga cu
   cifre, iar pe telefon langa butoane ar fi iesit o coloana de doua-trei cuvinte. Gol, nu
   ocupa nimic — de-aia `:empty` il scoate din flux cu totul. */
.cons-vanat-nota { margin: 0; font-size: 13px; color: var(--dispink);
                   overflow-wrap: anywhere; max-width: 100%; }
.cons-vanat-nota:empty { display: none; }
/* „Renunță" poarta chiar `.cons-ghost` — nu o a doua regula care spune acelasi lucru.
   Doua definitii ale aceleiasi fantome s-ar fi despartit la prima masuratoare refacuta. */

/* ── PLANUL LUNII ─────────────────────────────────────────────────────────────
   Crem, nu display: verdictul de deasupra e ce spune sistemul ACUM (si e singurul document
   in vigoare de pe ecran), planul e socoteala din care se verifica verdictul. Doua displayuri
   negre unul sub altul ar face din al doilea o a doua voce cu aceeasi autoritate — exact ce
   antetul lui `runner/plan_lunar.py` spune ca planul NU e.

   Cifra mare e `lipsa`. `--mono` la 22px, ca la `.intel-sursa-cifra`: se citesc ca o coloana
   de la stanga, si asta e chiar gestul cerut („mai apuc?"). */
.plan-lunar { border: 1px solid var(--chrule2); background: var(--ch0);
              box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06); }
.plan-zile { margin: var(--p2) 0 0; font-size: 13px; color: var(--chink3); }
.plan-motiv { margin: var(--p2) 0 0; font-size: 13px; color: var(--chink2);
              overflow-wrap: anywhere; }
.plan-tabel { margin-top: var(--p4); }
.plan-col { font-family: var(--mono); font-size: 10.5px; font-weight: 500;
            letter-spacing: .1em; text-transform: uppercase; color: var(--chink3);
            margin-bottom: var(--p2); }
.plan-rand { border-left: 2px solid var(--chrule); padding-left: var(--p3);
             margin-top: var(--p3); }
.plan-cap { display: flex; align-items: baseline; gap: var(--p2); flex-wrap: wrap; }
.plan-nr { font-family: var(--mono); font-size: 22px; letter-spacing: -.02em;
           color: var(--chink); }
.plan-fam { font-weight: 600; }
/* Socoteala de sub cifra: --chink3 (#4E5255) pe --ch0 (#F2F1ED) = 6,98:1, masurat in pagina
   pe 2-Sep-2026, nu dedus din alta pereche. E text mic, deci nu coboara mai jos de atat. */
.plan-soc { margin-top: 2px; font-size: 12.5px; color: var(--chink3);
            overflow-wrap: anywhere; }
/* Avertismentul e o propozitie intreaga, nu un semn: „mai lipsesc 4 explainere si luna are
   3 zile" se citeste o data si se intelege. Muchie portocalie pe stanga, fara fundal —
   un fundal colorat ar face-o sa arate ca o eroare a aplicatiei, cand e o stare a lunii. */
.plan-avert { margin: var(--p3) 0 0; padding-left: var(--p3); font-size: 13px;
              border-left: 2px solid var(--or); color: var(--chink); }
.plan-camp { display: flex; flex-wrap: wrap; gap: var(--p2); align-items: baseline;
             margin-top: var(--p3); font-size: 13px; }
.plan-camp-nume { font-weight: 600; overflow-wrap: anywhere; }
.plan-camp-cif { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
                 color: var(--chink3); }

/* ── INTEL: ce supravegheaza sistemul ─────────────────────────────────────────
   Doua displayuri (ce se invata, ce se masoara) cu o lista crem intre ele. Cifrele sunt
   masurate, deci stau pe negru; inventarul de conturi se rasfoieste, deci sta pe crem. */
.intel-sursa { border-left: 2px solid var(--disprule); padding-left: var(--p3);
               margin-top: var(--p4); }
.intel-sursa-nume { font-weight: 700; }
.intel-sursa-cifra { font-family: var(--mono); font-size: 20px; letter-spacing: -.02em;
                     margin-top: 2px; }
.intel-sursa-desc { margin-top: 2px; font-size: 13px; color: var(--dispink2);
                    overflow-wrap: anywhere; }

.intel-conturi { border: 1px solid var(--chrule2); background: var(--ch0);
                 box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06); }
.intel-grup-cap { margin-top: var(--p4); font-family: var(--mono); font-size: 11.5px;
                  letter-spacing: .04em; color: var(--chink3); }
/* Un cont = un rand care se poate infasura. `flex-wrap`, nu coloane: pe 390px handle-ul si
   semnul rolului nu incap alaturi, iar doua coloane fixe ar taia exact handle-ul. */
.intel-cont { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p2);
              margin-top: var(--p2); overflow-wrap: anywhere; }
.intel-handle { font-weight: 600; }
.intel-platforma, .intel-cifre { font-size: 12.5px; color: var(--chink3); }
.intel-gol { margin-top: var(--p2); font-size: 13px; color: var(--chink3); }
/* Semnul „rol nedistins" e o eticheta ca oricare alta, dinadins: nu e o problema de
   rezolvat, e o proprietate a datelor. Un chenar de avertizare ar cere o reparatie care
   n-are ce sa repare. */
.intel-nedistins { color: var(--chink3); }
/* Nota omului de langa contul declarat. Italic, nu alta culoare: e vocea LUI in mijlocul
   unui rand scris de sistem, iar italicul spune asta fara sa mai ceara o culoare in plus. */
.intel-nota { font-size: 12.5px; color: var(--chink2); font-style: italic; }
/* Randul unui cont declarat are un buton la capat, deci are nevoie de spatiu impins la
   dreapta — dar numai cand randul CHIAR incape pe o linie. `margin-left: auto` pe buton face
   exact asta si nu strica nimic dupa infasurare, cand butonul cade pe linia lui. */
.intel-cont-declarat > button { margin-left: auto; }

/* Formularul de declarare a unui cont. Ramane pe crem (se apasa, nu se citeste) si se
   infasoara la fel ca randurile de deasupra lui: pe 390px, cele doua `select`-uri si cele
   doua casete nu incap pe un rand, iar o grila fixa ar taia tocmai caseta handle-ului. */
.intel-cont-nou { display: flex; flex-wrap: wrap; gap: var(--p2);
                  margin-top: var(--p3); margin-bottom: var(--p3); }
.intel-cont-nou input { flex: 1 1 12rem; min-width: 0; }
.intel-cont-nou select { flex: 0 1 auto; }

.intel-metrica { border-left: 2px solid var(--disprule); padding-left: var(--p3);
                 margin-top: var(--p4); }
.intel-metrica-nume { font-size: 13px; color: var(--dispink2); }
.intel-metrica-cifra { font-family: var(--mono); font-size: 24px; letter-spacing: -.02em;
                       margin-top: 2px; }
/* „nu se măsoară" nu se scrie cu cifra de deasupra: e o propozitie, nu o valoare. Mai mic
   si stins, ca sa nu semene cu un numar mare de zero. */
.intel-nemasurat { font-family: var(--sans); font-size: 14px; color: var(--dispink2); }

/* ── USA (/inscriere) ─────────────────────────────────────────────────────────
   Ecranul e pe limbajul APLICATIEI, nu pe cel al vitrinei: dupa ce apesi butonul,
   urmatorul lucru pe care-l vezi e aplicatia, si e acelasi lucru. */
.inscriere { max-width: 460px; }
.inscriere-intro { color: var(--chink3); margin: -20px 0 var(--p8); }
.camp { display: block; margin-bottom: var(--p6); }
.camp-eticheta { display: block; margin-bottom: 6px; }
/* A SAPTEA oara aceeasi capcana (vezi `.comanda-rand[hidden]` si insiruirea de mai sus):
   `display: block` de aici bate `[hidden] { display: none }` din foaia browserului.
   Fara randul asta, `#stil-eticheta`/`#stil-video-eticheta` (03-Sep-2026) ar fi ramas
   vizibile chiar cand JS le pune `hidden` — dovedit in browser: eticheta caruselului
   aparea langa cea a explainerului cand motorul era pe Explainer. */
.camp-eticheta[hidden] { display: none; }
.camp-ajutor { display: block; color: var(--chink3); font-size: 12.5px; margin-top: 6px; }
.inscriere button.primar { width: 100%; height: 44px; }
.inscriere .eroare { min-height: 0; margin: var(--p3) 0 0; }
.inscriere-jos { color: var(--chink3); font-size: 12.5px; margin-top: var(--p8);
                 border-top: 1px solid var(--chrule2); padding-top: var(--p4); }
.inscriere-jos a { color: var(--orc); }

/* ── ECRANUL DE INTRARE ───────────────────────────────────────────────────────
   O singura fisa pe podeaua crem, cu marca deasupra. Formularul de login era pana acum
   trei campuri in aer pe o pagina alba — adica prima pagina din produs nu spunea al cui e. */
#wrap-login { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; padding: var(--p6); max-width: none; }
/* A SASEA oara aceeasi capcana (vezi `.galerie-poza[hidden]`, `.comanda-rand[hidden]`,
   `.pentru-cine[hidden]`, `.panou-actiuni[hidden]`, `.prop-cap[hidden]`): `display: flex`
   de deasupra e in foaia autorului si bate `[hidden] { display: none }` din foaia
   browserului. De data asta a fost prinsa in harnas, la prima captura: fara randul de
   mai jos, `arataAcasa()` nu ascunde nimic si formularul de intrare ramane deasupra
   aplicatiei, dupa ce omul a intrat. Regula: orice `display:` scris aici pe un element
   pe care app.js il stinge cu `.hidden` isi aduce singur randul asta. */
#wrap-login[hidden] { display: none; }
/* Acelasi motiv: `#acasa` porneste `hidden` in HTML, iar `.ecran` de mai jos ii da
   `display: flex`. Fara randul asta ecranul de lucru s-ar vedea o clipa sub formularul
   de intrare, la fiecare incarcare, inainte ca `incarca()` sa apuce sa raspunda. */
.ecran[hidden] { display: none; }
#login { width: 100%; max-width: 380px; padding: var(--p8) var(--p6);
         background: var(--ch0); border: 1px solid var(--chrule2); border-radius: var(--r2);
         box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 30px -18px rgba(0,0,0,.45); }
.login-marca { display: flex; align-items: center; gap: var(--p3); color: var(--chink);
               line-height: 1; margin-bottom: var(--p6); }
.login-glifa { height: 30px; width: calc(30px * 194 / 147); flex: none; display: block; }
.login-fir { display: block; width: 1px; align-self: stretch; margin: 2px 0;
             background: currentColor; opacity: .22; flex: none; }
.login-wm { display: flex; flex-direction: column; gap: 3px; }
.login-wm b { font-weight: 800; font-size: 19px; letter-spacing: -.035em; line-height: .9; }
.login-wm span { font-family: var(--mono); font-weight: 500; font-size: 8px;
                 letter-spacing: .34em; margin-right: -.34em; color: var(--chink3); }
#login h1 { font-size: 20px; margin: 0 0 var(--p4); }
#login button.primar { width: 100%; height: 44px; }

/* ══ RAFTUL DE FILE ═══════════════════════════════════════════════════════════
   Ecranul de lucru are unsprezece sectiuni. Pana pe 27-Aug-2026 erau o singura pagina de
   derulat; acum sunt file, iar raftul e navigatia. Lista lor se tine in app.js (`FILE`),
   nu aici — aici e doar cum arata.

   RAFTUL E UN DISPLAY, deci e negru. Nu e o alegere de gust si nu e o exceptie de la
   „crema umple ecranul": e chiar teza limbajului. Cuprinsul din brandbook si cel din
   design/aplicatie.html sunt amandoua negre, pe fundaluri opuse, cu acelasi argument —
   ce afiseaza informatie e negru, si regula nu se schimba cand suprafata din jur se
   rastoarna. Un cuprins care spune unde esti si unde poti merge afiseaza informatie.

   TREI REGULI, toate din motive, nu din gust:
   1. DESCHIS IMPLICIT. Cuprinsul de pe site se deschide la hover fiindca sare in aceeasi
      pagina; aici fiecare rand SCHIMBA ecranul, deci trebuie citit fara sa-l atingi.
      Strans doar daca omul il strange (`.ecran-strans`, tinut minte in localStorage).
   2. FARA ANIMATIE DE SASIU. Nici intrare, nici latime animata. E suprafata cea mai vazuta
      din produs: o tranzitie de 200ms aici se plateste de zeci de ori pe zi. Se schimba
      lumina randului curent, nimic altceva nu se misca.
   3. NU DISPARE PE TELEFON. Sub 900px ramane lateral, doar ingust (76px), cu randuri de
      48px — peste cei 44px ceruti de deget. Un cuprins poate lipsi de pe telefon;
      navigatia nu.
   4. DERULAREA DIN RAFT NU IESE DIN RAFT (`overscroll-behavior: contain`, 2-Sep-2026).
      Cererea lui Ali: „cand dau scroll, as vrea ca sidebar sa nu se mai miste deloc,
      decat daca dau scrol in ea sa vad alte tabs." Panoul chiar nu se misca — e sticky,
      masurat la 1440x780: `top` ramane 52 si la scroll de 900px. Ce se misca e altceva.
      La 780px inaltime, cele 14 file plus cele 5 antete fac 772px intr-o cutie de 728px:
      raftul depaseste cu 44px, iar ultimul rand (War Room) cade sub marginea de jos. Cine
      da rotita peste raft ca sa ajunga la el il deruleaza acei 44px, dupa care derularea
      se scurge in pagina si continutul o ia din loc sub el — o singura miscare a degetului
      face doua lucruri diferite. `contain` opreste scurgerea: gestul inceput in raft se
      termina in raft. Perechea lui e `scrollbar-color`, mai jos — pe o suprafata neagra,
      bara implicita nu se vede, si atunci cele 44px ascunse n-au niciun semn ca exista. */

/* `.ecran` a fost, pana pe 31-Aug-2026, un singur flex randul-raft-si-continut. De cand
   are `.bara-sus` deasupra, a devenit coloana — bara intai, restul dedesubt — iar randul
   vechi s-a mutat neschimbat in `.ecran-corp`, imediat mai jos. */
.ecran { display: flex; flex-direction: column; min-height: 100vh; }
.ecran-corp { display: flex; align-items: flex-start; flex: 1 1 auto; min-height: 0; }

.raft {
  position: sticky; top: 52px; z-index: 10;
  flex: 0 0 236px; width: 236px; height: calc(100vh - 52px); overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--dispink2) transparent;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px var(--p3) var(--p6);
  background: var(--disp); border-right: 1px solid var(--disprule);
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.55) inset;
}
.ecran-strans .raft { flex-basis: 60px; width: 60px; padding: 14px 10px var(--p6); }

.continut { flex: 1 1 auto; min-width: 0; max-width: 808px; margin: 0 auto;
            padding: var(--p12) var(--p6) 96px; }

.raft-comuta {
  align-self: flex-end; height: var(--hs); width: var(--hs); padding: 0;
  border: 0; background: none; color: var(--dispink2);
  font-size: 15px; line-height: 1; margin-bottom: 6px;
}
.raft-comuta:hover { color: var(--dispink); background: rgba(255,255,255,.05); }
.ecran-strans .raft-comuta { align-self: center; }

.raft-grup { font-family: var(--mono); font-size: 9.5px; font-weight: 500;
             letter-spacing: .19em; text-transform: uppercase; color: var(--dispink2);
             padding: 14px 10px 6px; }
/* Aici a stat pana pe 30-Aug-2026 un `.raft-grup:nth-of-type(1) { padding-top: 2px }`, si
   perechea lui pentru raftul strans, care scoteau spatiul si linia de deasupra primului
   antet — pe atunci antetul ERA primul lucru din raft si n-avea de ce sa se desparta de
   nimic. De cand Acasa sta singura deasupra grupurilor, primul antet are un rand peste el
   si are nevoie de aceeasi despartire ca toate celelalte. Regulile n-au fost corectate, au
   fost sterse: cazul special nu mai exista. */
/* Strans, eticheta grupului n-are unde incapea — dar granita dintre grupuri e informatie,
   nu decor, deci ramane ca linie. */
.ecran-strans .raft-grup { font-size: 0; padding: 0; margin: var(--p2) var(--p1) 6px;
                           border-top: 1px solid var(--disprule); }

/* `justify-content: flex-start` NU e de prisos. Randurile de fila sunt `<button>`, iar
   `button { justify-content: center }` de la scara ramanea in picioare fiindca regula asta
   scria `display: flex` fara sa spuna si unde se aseaza continutul. Rezultatul: pictogramele
   stateau intr-o coloana zimtata (masurat: 83, 63, 48, 75, 75px) — fiecare rand centrat dupa
   lungimea etichetei lui. Randul War Room, singurul `<a>`, era singurul aliniat la stanga,
   si arata ca o greseala tocmai fiindca era corect. Cu pictogramele vechi, linii subtiri de
   18px, nu se vedea; cu pixeli plini de 22px sare in ochi. */
.raft-r {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; min-height: 36px; height: auto; padding: var(--p2) 10px;
  border: 0; border-radius: 6px; background: none;
  font-family: var(--sans); font-size: 13px; font-weight: 500; text-align: left;
  letter-spacing: 0; white-space: normal;
  color: var(--dispink2); text-decoration: none; cursor: pointer;
  transition: color .12s linear, background-color .12s linear;
}
.raft-r:hover { color: var(--dispink); background: rgba(255,255,255,.05); }
/* Randul curent e o LAMPA APRINSA, nu o placa mutata: se aprinde cerneala si se aprinde
   bara din stanga. Pe negru portocaliul da 5,39:1 si redevine cerneala, ca pe vitrina. */
.raft-r-activ, .raft-r-activ:hover {
  color: var(--or); font-weight: 600; background: rgba(240,78,35,.10);
  box-shadow: inset 2px 0 0 var(--or);
}
/* 22px, nu 18: pictogramele sunt pixel pe o grila de 12, iar intre patrate e un spatiu de
   0,3 unitati din 24 — grila LCD. La 18px spatiul ala ajunge la 0,225px logici si se pierde
   in antialiasing: formele se lipesc si se citesc ca niste pete. La 22px trece de 0,27px,
   adica peste jumatate de pixel de dispozitiv pe ecran retina, si grila se vede iar.
   Verificat in browser, la scara 1x si 2x, nu socotit pe hartie. */
.raft-i { flex: 0 0 22px; width: 22px; height: 22px; color: var(--ink3); }
.raft-r:hover .raft-i { color: var(--dispink2); }
.raft-r-activ .raft-i { color: var(--or); }
/* War Room (/war.html) e alta pagina, nu o fila: sageata o spune inainte de apasare. */
.raft-r-extern .raft-t::after { content: " ↗"; color: var(--ink3); }
.raft-s { display: none; }
.ecran-strans .raft-t { display: none; }
.ecran-strans .raft-r { justify-content: center; padding: var(--p2); }

/* Sub 900px raftul nu coboara — ramane lateral, doar ingust. Prima forma a fost o banda
   jos cu derulare orizontala: pe un telefon de 390px incapeau sase file din unsprezece, iar
   restul existau doar daca trageai cu degetul, fara niciun semn ca s-ar putea trage.
   Navigatie ascunsa nu e navigatie. Pe verticala incap toate intr-un ecran de telefon, si
   daca vreodata n-ar incapea, derularea verticala e cea pe care degetul o incearca oricum.

   Regulile de mai sus care poarta `.ecran-strans` au specificitate 0-2-0, deci trebuie
   anulate cu acelasi selector — un `.raft { width: auto }` simplu ar fi pierdut in fata lor
   si raftul ar fi ramas de 60px cand omul il lasase strans pe desktop. */
@media (max-width: 899px) {
  .raft, .ecran-strans .raft {
    flex: 0 0 76px; width: 76px; padding: var(--p2) var(--p1) 20px; gap: 1px;
  }
  .raft-comuta { display: none; }
  .raft-grup, .ecran-strans .raft-grup {
    font-size: 0; padding: 0; margin: 7px 6px 6px; border-top: 1px solid var(--disprule);
  }
  .raft-r, .ecran-strans .raft-r {
    flex-direction: column; justify-content: center; gap: 3px;
    min-height: 48px; padding: 7px 3px; border-radius: 6px;
    font-size: 10px; font-weight: 500; text-align: center;
  }
  .raft-t, .ecran-strans .raft-t { display: none; }
  /* Fara `text-wrap: balance`: pe un rand de 61px, singura eticheta care se rupe e
     „Ce s-a întâmplat", iar balance o taia dupa cratima — „Ce s-" / „a întâmplat".
     Ruperea normala o taie la spatiu, unde o citeste omul. */
  .raft-s { display: block; line-height: 1.15; }
  /* Sageata de „alta pagina" statea pe eticheta lunga, care aici e ascunsa. */
  .raft-r-extern .raft-s::after { content: " ↗"; color: var(--ink3); }
  .continut { max-width: none; margin: 0; padding: var(--p6) var(--p4) 64px; }
  .wrap { padding: var(--p8) 18px 72px; }
}

/* Acelasi ton ca `button.discret` — o setare, nu o actiune. Fara padding negativ:
   selectul nu e lipit de colt, butonul de langa el e. */
.discret-select { width: auto; height: var(--hs); background: none; border: none;
                  color: var(--chink3); font-size: 13px; padding: 0 22px 0 var(--p1);
                  background-position: calc(100% - 9px) calc(50% + 1px),
                                       calc(100% - 4px) calc(50% + 1px);
                  cursor: pointer; }
.discret-select:hover { color: var(--chink); background-color: var(--ch3); }

/* ══ BARA NEAGRA DE SUS ═══════════════════════════════════════════════════════
   Pana pe 31-Aug-2026 marca nu se vedea nicaieri in ecranul de lucru — traia doar pe
   cardul de login (mai sus, `.login-marca`), pe care omul il vede o singura data. Cererea
   lui Ali: „un fel de black top bar unde sa avem logo ul... comutatorul de limba si
   butonul de iesi nu e bine unde e acum, poate tot asa pe bara asta".

   Aceeasi suprafata ca raftul (`--disp`), ca sa citeasca drept o singura piesa in „L", si
   STICKY DEASUPRA lui — raftul a trecut de la `top: 0` la `top: 52px` (vezi mai sus), ca
   sa nu se ascunda sub bara la scroll. Glifa e copiata EXACT din `.login-glifa`, doar
   coborata la ~22px — nu se deseneaza alt logo. z-index 15: peste raft (10), sub
   `.panou-fundal` (20), care are oricum voie sa acopere totul cand e deschis un panou. */
.bara-sus {
  position: sticky; top: 0; z-index: 15; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--p4); padding: 0 var(--p4);
  background: var(--disp); border-bottom: 1px solid var(--disprule);
}
.bara-marca { display: flex; align-items: center; gap: var(--p2); color: var(--dispink);
              line-height: 1; min-width: 0; }
.bara-glifa { height: 22px; width: calc(22px * 194 / 147); flex: none; display: block; }
.bara-wm { display: flex; flex-direction: column; gap: 2px; }
.bara-wm b { font-weight: 800; font-size: 14px; letter-spacing: -.03em; line-height: .9; }
.bara-wm span { font-family: var(--mono); font-weight: 500; font-size: 8px;
                letter-spacing: .34em; margin-right: -.34em; color: var(--dispink2); }
/* `#limba` si `#iesi`, urcate din `.antet`: aceleasi clase (`.discret-select`, `button.
   discret`) ca oriunde altundeva, dar pe negru — varianta „goala", cu acelasi tipar ca
   `.raft-r:hover`/`.raft-comuta:hover` de mai sus: fara fundal, cerneala --dispink2
   (7,34:1 pe --disp, masurat la linia 958), aprinsa la --dispink cand omul se uita la ea. */
.bara-dreapta { display: flex; align-items: center; gap: var(--p2); flex: none; }
.bara-sus .discret-select,
.bara-sus button.discret { color: var(--dispink2); }
.bara-sus .discret-select:hover,
.bara-sus button.discret:hover { color: var(--dispink); background: rgba(255,255,255,.05); }

@media (max-width: 899px) {
  /* Raftul se ingusteaza la 76px (vezi @media de mai sus), dar bara ramane cat ecranul —
     wordmark-ul n-are unde incapea langa comenzile din dreapta, deci ramane doar glifa. */
  .bara-wm { display: none; }
}
@media (max-width: 700px) {
  .bara-sus { padding: 0 var(--p3); gap: var(--p3); }
}

/* ══ SUPRAFATA NEAGRA (War Room, Hunter) ══════════════════════════════════════
   Aceleasi componente, alt corp. Nu e „tema intunecata": e cealalta jumatate a aceleiasi
   reguli — o pagina care nu e decat cifre si tabele afiseaza informatie de la un cap la
   altul, deci e display de la un cap la altul. Rolurile din PUNTE se redefinesc o data,
   iar tot ce e scris mai sus le urmeaza fara o a doua regula. */
body.war {
  --bg: var(--gr2); --panel: var(--gr2); --line: var(--rule); --sel: var(--gr3);
  --text: var(--ink); --muted: var(--ink3);
  --accent: var(--or);        /* pe negru portocaliul da 5,39:1 — redevine cerneala */
  --ok: var(--gn); --err: var(--rdd);
  background: var(--gr); color: var(--ink);
}
body.war h1, body.war h3 { color: var(--ink); }
body.war h2, body.war .kanban-cap, body.war .copy-eticheta { color: var(--ink3); }
body.war .gol, body.war .expira { color: var(--ink3); }
body.war .eroare { color: var(--rdd); }
body.war button {
  background: var(--gr2); border-color: var(--rule); color: var(--ink);
}
body.war button:hover { background: var(--gr3); border-color: var(--ink3); }
body.war button:active { background: var(--gr3); }
/* Butonul principal ramane lampa, cu aceeasi cerneala --gr peste portocaliu. */
body.war button.primar { background: var(--or); border-color: var(--or); color: var(--gr); }
body.war button.primar:hover { background: var(--or2); border-color: var(--or2); }
body.war button:disabled { background: var(--gr2); border-color: var(--rule);
                           color: var(--ink3); opacity: .65; }
/* `background-color`, NU scurtatura `background`: scurtatura reseteaza si `background-size`
   si `background-position` la valorile initiale, iar sageata selectorului (desenata sus din
   doua degradeuri de 5px) ramanea la `auto` peste tot campul — pe war.html selectoarele
   aratau ca niste cutii gri cu un triunghi negru cat toata caseta. Vazut in browser. */
body.war input, body.war select, body.war textarea {
  background-color: var(--gr); border-color: var(--rule); color: var(--ink);
}
body.war input:hover, body.war select:hover, body.war textarea:hover { border-color: var(--ink3); }
body.war input:focus, body.war select:focus, body.war textarea:focus {
  border-color: var(--ink2); box-shadow: 0 0 0 3px rgba(237,238,234,.10);
}
body.war select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%),
                    linear-gradient(135deg, var(--ink2) 50%, transparent 50%);
}
body.war input::placeholder, body.war textarea::placeholder { color: var(--ink3); }
body.war .grila { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--p3); }
/* Cutia de cifre e un display pe un corp deja negru: se distinge prin muchie si prin
   umbra interioara, exact ca pe crem. */
body.war .cutie {
  background: var(--disp); border: 1px solid var(--disprule);
  border-radius: var(--r); padding: var(--p4);
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.55) inset;
}
body.war .cutie .val { font-family: var(--mono); font-size: 28px; font-weight: 600;
                       font-variant-numeric: tabular-nums; color: var(--dispink); }
body.war .cutie .et { font-family: var(--mono); color: var(--dispink2); font-size: 10px;
                      text-transform: uppercase; letter-spacing: .16em; margin-top: var(--p1); }
body.war .val.rau { color: var(--rdd); }
body.war .val.bun { color: var(--gnd); }
body.war table { width: 100%; border-collapse: collapse; font-family: var(--mono);
                 font-size: 12.5px; }
body.war td { padding: 7px 0; border-bottom: 1px solid var(--rule); color: var(--ink2); }
body.war td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
body.war .punte-form { display: flex; gap: var(--p2); flex-wrap: wrap; align-items: center;
  margin-bottom: 10px; }
/* Campurile din punte stau pe un rand: regula generala `input { width: 100% }` le-ar pune
   pe cate o linie fiecare, si formularul ar ocupa jumatate de ecran degeaba.
   `:not([type=checkbox])` nu e prudenta, e reparatie: selectorul asta are specificitate
   mai mare decat `input[type=checkbox] { width: 17px }` de la scara, deci `width: auto`
   ii lua patratului dimensiunea si ramanea latimea implicita de camp — in war.html
   bifa „cont principal" se randa ca o cutie goala cat un input. Vazuta in browser. */
body.war .punte-form input:not([type="checkbox"]),
body.war .punte-form select { width: auto; flex: 1 1 150px; }
/* `body.war td` are padding 0 pe orizontala. La `#ultimele` (patru coloane, ultimele doua
   aliniate la dreapta) nu se vedea; la sase coloane, textul se lipeste — „#41watch". Deci
   spatiul se pune aici, si ANTETUL primeste acelasi padding ca celula, altfel capetele de
   coloana ies decalate fata de ce e sub ele. */
body.war table.punte-lista th { text-align: left; color: var(--ink3);
  font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: var(--p1) var(--p3) var(--p1) 0; }
body.war table.punte-lista td { padding-right: var(--p3); vertical-align: top;
  white-space: nowrap; }
/* Doar tinta si eroarea au voie sa se rupa: un URL lung altfel latește tabelul peste
   ecran. Restul coloanelor raman pe un rand — „#41" taiat in „#4 / 1" e mai rau decat un
   tabel lat. */
body.war table.punte-lista td.lat { white-space: normal; overflow-wrap: anywhere; }
body.war .punte-nota { color: var(--ink3); font-size: 12px; margin: 6px 0 10px; }
/* Tabelul puntii are sase coloane care nu se rup. Pe telefon iesea cu 140px peste ecran, si
   scrolla lateral toata pagina — inclusiv cifrele, care incap perfect. Scrollul ramane, dar
   inchis in tabel. */
body.war .lat-scroll { overflow-x: auto; }
/* Campul de zile e ingust dinadins: incap patru cifre, adica pana la ~27 de ani de termen.
   Lat cat restul coloanelor, ar arata ca locul unde se scrie ceva lung. */
body.war .trepte-zile { width: 88px; }
body.war .trepte-termen { color: var(--ink3); }
/* Conturile de publicare. Nota de sub titlu isi schimba rolul: de obicei spune ce s-a
   intamplat, dar cand Meta refuza e singurul loc unde se vede motivul — si atunci trebuie
   sa arate a problema, nu a subsol. */
body.war .punte-nota.rau { color: var(--rdd); }
body.war .canale-bif { color: var(--ink3); font-size: 12px; display: flex;
  align-items: center; gap: 6px; }
/* Doar marginea, nu si latimea: `width` ramane cea de la scara (17px). Vezi nota de la
   `.punte-form input` — aceeasi capcana, acelasi patrat umflat. */
body.war .canale-bif input { margin: 0; flex: none; }
/* Butoanele stau in celula, cate doua-trei pe rand — deci mici, si fara marginea de sus
   care le-ar impinge sub textul vecin. */
body.war table.canale-lista button { margin: 0 6px 4px 0; height: var(--hs);
  padding: 0 9px; font-size: 12px; }
/* Regula generala din punte (`flex: 1 1 150px`) intinde selectorul pe tot randul cand e
   singur langa doua controale mici. Aici clientul e o alegere scurta, nu un camp de text. */
body.war .canale-form select { flex: 0 1 240px; }
/* Comutatorul puntii. Sta lipit sub titlu, inaintea formularului, pentru ca raspunde la
   intrebarea pusa prima: „merge acum?". Butonul e primar doar cand porneste — o actiune
   care opreste ceva nu se imbraca in culoarea care cheama clicul. */
body.war .comutator {
  display: flex; gap: var(--p4); align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: var(--gr2); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 14px var(--p4); margin: 6px 0 var(--p3);
}
body.war .com-stare { font-weight: 700; font-size: 15px; }
body.war .com-stare.bun { color: var(--gnd); }
body.war .com-stare.rau { color: var(--rdd); }
body.war .com-nota { color: var(--ink3); font-size: 12px; margin-top: 3px; }
body.war .comutator button { flex: 0 0 auto; }
body.war .panou { background: var(--gr2); border-color: var(--rule); color: var(--ink); }
body.war .panou-inchide { color: var(--ink3); }
body.war .panou-inchide:hover { color: var(--ink); background: var(--gr3); }
body.war .copy { background: var(--gr); border-color: var(--rule); color: var(--ink); }

@media (max-width: 700px) {
  body.war .grila { grid-template-columns: repeat(2, 1fr); }
}

/* HUNTER. Pagina imprumuta corpul negru al War Room-ului prin `class="war hunter"`, deci
   aici sta doar ce e nou: casetele de mesaje din panou. Panoul insusi (`.panou-fundal`,
   `.panou`) vine din ecranul de aprobare al clientului si se poarta la fel. */
body.hunter .mesaj {
  border: 1px solid var(--rule); border-radius: var(--r0);
  padding: var(--p3); margin-bottom: var(--p3); background: var(--gr2);
}
/* Un mesaj de outreach se citeste ca text, nu ca cod. */
body.hunter .mesaj textarea {
  font-family: var(--sans); font-size: 13.5px; margin-top: 6px;
  background: var(--gr); color: var(--ink); border: 1px solid var(--rule);
}
/* Un mesaj deja trimis se citeste, nu se editeaza — dar trebuie sa ramana LIZIBIL.
   Implicitul browserului pentru `disabled` il duce spre gri pe gri. */
body.hunter .mesaj textarea:disabled { color: var(--ink3); opacity: 1; }
body.hunter .panou { background: var(--gr2); }

/* ── RAPORTUL LUNAR ───────────────────────────────────────────────────────────
   Trei displayuri negre sus, restul pe crem. Aceeasi regula ca la cifra de pe Acasa:
   ce afiseaza informatie e negru, ce se apasa e crem. Selectorul de luna e o comanda,
   deci ramane crem — nu se pune pe display doar fiindca sta langa cifre.

   `flex-wrap` nu e cosmetic: `.cifra-cutie` are `min-width: 220px`, deci trei bucati pe
   un rand cer 700px cu tot cu spatii. Fara wrap, pe telefon al treilea display ar iesi
   din ecran, si nu s-ar vedea ca lipseste — s-ar vedea doar ca raportul are doua cifre. */
.raport-cap { margin-bottom: var(--p4); }
.raport-cifre { display: flex; flex-wrap: wrap; gap: var(--p3); margin-bottom: var(--p6); }
.raport-cifre .cifra-cutie { flex: 1 1 220px; }
/* Cifra de pe Acasa e singura pe ecran si isi permite 52px. Aici sunt trei una langa alta,
   iar la 52px randul se rupe pe orice laptop inainte sa fie nevoie. */
.raport-cifre .cifra { font-size: 38px; }
.raport-sectiune { margin-bottom: var(--p6); }
.raport-sectiune h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--chink3);
  margin-bottom: var(--p2);
}

/* ── POSTĂRILE ALTORA (research, admin) ───────────────────────────────────────────────
   Un card crem per colectare. Inauntru, doua straturi si nu unul:

     cifrele  — cine a postat si cat a strans. S-au MASURAT pe contul altuia, deci stau pe
                display negru, exact ca faptul de la consiliu.
     raspunsul — ce a iesit din desfacere. E scris de un motor, nu masurat, deci ramane pe
                crem, cu aceleasi clase `prop-raport-*` ca la propuneri si la consiliu.

   Cardul e o coloana flex cu `align-items: flex-start`, si asta rezolva doua lucruri
   deodata. Banda neagra isi ia latimea din continut, nu pe toata: la sase colectari una
   sub alta, sase dreptunghiuri negre cat fila ar fi facut ecranul o coloana de displayuri
   cu text agatat langa ele. Si butonul ajunge pe randul lui: `inline-block` singur il lasa
   pe ACELASI rand cu banda, fiindca un buton e inline — asa a si aratat prima varianta pe
   1280px, cu „Desfă" agatat in dreapta displayului. Pe 375px se vedea corect, fiindca nu
   incapea altfel; defectul exista doar la latime mare.

   Contraste MASURATE — pe suprafata REALA de sub fiecare, nu pe ch0 peste tot: cardul
   desfacut sta pe `--ch`, care e mai inchis decat `--ch0`, deci textul de pe el are alte
   cifre. Prima varianta a comentariului scria 15,72 si 6,98 pentru amandoua, si masurarea
   le-a dat pe cele de mai jos:
     colectare-cifre      dispink pe disp   16,68:1
     colectare-insemnare  chink   pe ch     14,11:1
     prop-raport-motiv    chink3  pe ch      6,27:1  (in cardul desfacut)
     prop-raport-motiv    chink3  pe ch0     6,98:1  (in cardul fara text) */
.colectare {
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--chrule2); border-radius: var(--r0);
  padding: var(--p4); margin-bottom: var(--p3); background: var(--ch0);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(0,0,0,.06);
}
/* Aceeasi banda de display si la sesiunea vorbita. Nu e o copie a regulii, e acelasi
   lucru: cifre MASURATE, pe negru. Doua reguli identice s-ar fi despartit la prima
   ajustare a uneia, si atunci doua ecrane ar fi aratat acelasi aparat cu doua fete. */
.colectare-cifre,
.vorbit-cifre {
  display: inline-block; max-width: 100%;
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  color: var(--dispink); background: var(--disp);
  border: 1px solid var(--disprule); border-radius: var(--r0);
  padding: var(--p2) var(--p3); margin-bottom: var(--p3);
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.55) inset;
  font-variant-numeric: tabular-nums;
}
/* Butonul si raspunsul lui stau pe randuri diferite, nu unul langa altul: raspunsul poate
   fi o insemnare de trei randuri, iar pe telefon ar fi impins butonul in afara cardului. */
.colectare-raspuns { align-self: stretch; margin-top: var(--p2); font-size: 13px; }
.colectare-raspuns:empty { margin-top: 0; }
/* Desfacuta = s-a apasat si a raspuns. Ramane pe ecran pana la urmatoarea deschidere a
   filei, stinsa, ca sa se vada ca de ea s-a ocupat cineva fara ca randul sa dispara sub
   degetul care tocmai l-a apasat. */
.colectare-facuta { background: var(--ch); }
.colectare-scris { display: flex; flex-direction: column; align-items: flex-start;
                   gap: var(--p2); }
.colectare-insemnare { color: var(--chink); overflow-wrap: anywhere; }

/* ── SESIUNEA VORBITĂ ────────────────────────────────────────────────────────────────
   Panoul stă între caseta de scris o însemnare și lista de însemnări, și e a doua cale de
   intrare în aceeași materie primă — de aceea nu are chenar de card: un chenar l-ar fi
   făcut să pară alt ecran, când e chiar aceeași filă. Îl desparte de caseta de deasupra o
   singură linie, exact atât cât să nu se citească drept continuarea ei.
   Contraste MĂSURATE, pe suprafața reală de sub fiecare (fila e crem `--ch`):
     vorbit-cifre    dispink pe disp   16,68:1
     vorbit-lista    chink   pe ch     14,11:1
     vorbit-motiv    chink3  pe ch      6,27:1 */
.vorbit {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--p2);
  border-top: 1px solid var(--chrule2); margin-top: var(--p6); padding-top: var(--p6);
}
/* Caseta și lista se întind cât panoul; butonul, nu. `align-items: flex-start` pe panou le
   strânge pe toate la conținut — o casetă lată de trei cuvinte ar fi fost absurdă. */
.vorbit h3 { margin: 0; }
.vorbit textarea { align-self: stretch; min-height: 120px; }
.vorbit .brain-actiuni,
.vorbit .eroare,
.vorbit-raport { align-self: stretch; }
.vorbit-raport:empty { display: none; }
/* `min-height: 20px` din regula generală ține un rând liber sub formulare, ca ecranul să
   nu sară când apare eroarea. Aici n-are ce ține: sub el stă raportul, care oricum apare
   și dispare cu sute de pixeli, iar rândul rezervat împingea banda de cifre cu 20px mai
   jos degeaba — măsurat, golul de la buton la cifre era 48px în loc de 20px. Aceeași
   scutire ca la `.inscriere .eroare`. */
.vorbit .eroare { min-height: 0; }
.vorbit .eroare:empty { display: none; }
.vorbit-iesire { display: flex; flex-direction: column; align-items: flex-start;
                 gap: var(--p2); margin-top: var(--p3); }
/* Însemnările ieșite: o listă simplă, fără marcatori — fiecare rând e o propoziție
   întreagă, iar bulinele ar fi făcut din ele o enumerare de cuvinte. */
.vorbit-lista { list-style: none; margin: 0; padding: 0; align-self: stretch;
                display: flex; flex-direction: column; gap: var(--p2); }
.vorbit-lista li { color: var(--chink); overflow-wrap: anywhere; }
/* Ce a picat. Dunga din stânga e același semn ca la research și înseamnă același lucru —
   „rândul ăsta e de alt fel" — dar aici motivul stă DEASUPRA textului, nu lângă el: motivul
   e informația (de ce lipsește), iar textul aruncat e doar dovada. */
.vorbit-aruncate li {
  display: flex; flex-direction: column; gap: var(--p1);
  border-left: 3px solid var(--chrule); padding-left: var(--p2);
  color: var(--chink3);
}
.vorbit-motiv { font-family: var(--mono); font-size: 11px; color: var(--chink3); }