/*! bgn-33 v2.5.0 · sursă: bgn3375/bgn-33-ds · modificat: 2026-10-27 */
/* ============================================================
bgn-33 — design system-ul proiectelor BGN (non-Bono)
Din ce e făcut (decizia lui Bogdan, 15 oct 2026):
• structura și mecanica componentelor — din Edge-33 (Bono), copiate
la cerere, fără să urmărim automat actualizările lui;
• culorile, colțurile, spațierile și fonturile — din rovanta.ro;
• ierarhia textului — din Notion: puține mărimi, diferența o fac
grosimea și cele trei nuanțe de text (ink / fog / mist);
• tema de noapte — păstrată din bgn-33 v0.3, redesenată pe paleta nouă.
v1.2 (decizia lui Bogdan, 23 oct 2026, după studiul de direcții și de suprafețe):
• neutrele devin neutre (fără nuanță de albastru): gri-0 #F5F5F3, gri-1 #EBEBE7,
text #121417; albastrul principal devine #2743D9;
• suprafețele în aplicație („varianta 5"): pagina gri-0, cardurile și câmpurile
albe cu linie de 1px, gri-1 doar pentru meniul lateral, capul de tabel și
cardul tonal; cardul închis ca accent;
• cuvântul evidențiat e Newsreader italic; etichetele mici sunt JetBrains Mono.
v1.3 (aceeași seară, pe studiul Dublin v5): accentul devine fucsia #B924CB, apoi (v1.3.1)
ciclam #C5507F, o singură culoare pe alb și pe negru, apoi (v1.3.2, „e cam ternă”) fucsia vie
#C92ED4, tot o singură culoare; butonul principal primește gradient fucsia → violet
(singurul gradient din sistem), cuvântul evidențiat trece pe Newsreader drept, la grosimea
titlului; colțurile mai blânde (v1.2.1).
v2.1 (Bogdan, 24 oct 2026, pe studiul ds.bgn.ro/accent, după ecranele CCF): butonul principal pornește
din fucsia adâncă #AE26B8 (alb pe ea 5,57:1, „rămânem cu adânca”); cuvântul evidențiat și linkurile, ziua,
tot pe fucsia adâncă, noaptea pe fucsia vie; cuvântul evidențiat trece pe Fraunces drept, rotunjime 50,
literele „WONK” pornite, grosimea 600 în titluri, cu 2px mai mare decât titlul („adăugăm și noi 2px fix”).
v2.4 (Bogdan, 26 oct 2026, pe studiul /griuri): griurile primesc o umbră din fucsia, la 75% din cea propusă
(„umbra de culoare mi se pare un pic prea spre mov”), pe fundaluri și pe text, cu aceeași luminozitate ca în v2.3;
noaptea cardurile urcă două trepte peste pagină („contrastul la carduri e ok la două trepte”), iar textul în
culoarea principală trece pe #DA70E2, ca să rămână lizibil pe cardul mai deschis (Bogdan: „pune #DA70E2”).
Reguli:
• În proiect: doar var(--*) și clasele de aici. Niciodată hex de mână.
• Un proiect își poate schimba DOAR culoarea principală (--c-accent,
-deep, -tint, -ultra, -text, -on-dark, în ambele teme) și logo-ul.
Restul e comun. Vezi cheatsheet.md → „Culoarea proiectului".
• Fonturile se încarcă din HTML, înaintea acestui fișier:
• Orice schimbare: versiune nouă în antet + rând în changelog
(cheatsheet.md) + system.html, în același commit.
============================================================ */
/* ---------- 1. TOKENURI · ZI (implicit) ---------- */
:root{
color-scheme: light;
/* culoarea principală — singurul strat pe care un proiect îl schimbă */
/* v1.3.1 (Bogdan, 23 oct 2026, noaptea): „una, cât mai caldă, calmă, mată și vizibilă” — O SINGURĂ culoare,
aceeași ca fill, ca text pe alb și ca text pe negru, zi și noapte. Luminozitatea e la mijloc între alb și negru,
deci contrastul e ~4,3:1 în ambele direcții: puțin sub pragul de 4,5 al textului mic, acceptat de Bogdan
(ca la Bono, unde rozul e același peste tot). Perechile sunt listate ca excepții în verifica-contrast.py.
v1.3.2 (Bogdan, aceeași noapte): ciclamul „e cam ternă; între fucsia și orhidee” → fucsia vie, aceeași
luminozitate de echilibru, nuanța între fucsia #C026D3 și orhidee #A21CAF, saturată. */
/* v2.1 (Bogdan, 24 oct 2026): butonul principal și textul în culoarea principală, ziua, trec pe fucsia adâncă;
fucsia vie rămâne pe suprafețele mici (progres, switch, bifă, punct) și ca text noaptea. */
--c-accent: #C92ED4; /* fucsia vie: selecții, progres, switch, puncte */
--c-accent-deep: #AE26B8; /* fucsia adâncă: începutul gradientului de pe butonul principal, hover pe fill */
--c-accent-btn: #C123CF; /* butonul principal, plin: alb pe el 4,75:1 (v2.5.0, Bogdan) */
--c-accent-press: #9A1FA6; /* butonul principal apăsat */
--c-accent-2: #7123AB; /* violetul (până în v2.4 capătul gradientului de pe butonul principal) */
--c-accent-2-deep:#611E93; /* același, la hover */
--c-accent-tint: #FAEAFB; /* fundal pentru chip, element activ din meniu */
--c-accent-ultra: rgba(201,46,212,.06); /* fundal abia vizibil: hover, inel de focus */
--c-accent-text: #AE26B8; /* ca TEXT (link, ): fucsia adâncă, 5,57:1 pe alb (v2.1) */
--c-on-accent: #FFFFFF; /* text pe butonul principal: 5,57:1 pe fucsia adâncă */
--c-accent-on-dark: #C92ED4; /* ca text pe .sec-dark și pe cardul închis: aceeași culoare (4,2:1, acceptat) */
/* suprafețe */
--c-page: #FFFFFF; /* fundalul unui site (landing, articol) */
--c-app: #F6F4F6; /* gri-0: fundalul unei aplicații (în spatele cardurilor) */
--c-surface: #FFFFFF; /* carduri, câmpuri, corpul tabelului, modale — mereu cu linie de 1px */
--c-inset: #F6F4F6; /* gri-0 într-un card: bandă scufundată, callout, zonă de încărcare */
--c-track: #EDEAEC; /* gri-1, treapta tonală (ca bej-1 în Edge): meniul lateral, capul de
tabel, cardul tonal, șina unui progres, switch oprit, schelet */
--c-hover: rgba(22,18,23,.04); /* hover pe element de meniu, pe buton fantomă */
--c-row-hover: #F6F4F6; /* hover pe rândul unui tabel: gri-0, o treaptă sub alb, două sub
capul de tabel, ca rândul să nu se confunde cu el */
--c-dark: #161217; /* secțiune închisă (blade): subsol, bandă de încredere */
--c-dark-card: #302C33; /* card gri-închis pe secțiunea închisă, ca la bono.ro */
/* text — trei nuanțe, ca la Notion; negru neutru, nu bleumarin */
--c-ink: #161217; /* text principal */
--c-fog: #69636C; /* text secundar: subtitluri, etichete, meta */
--c-mist: #A19BA4; /* terțiar: placeholder, separatori „·" — NU pentru text de citit */
/* borduri — linia de 1px e norma: pe carduri, câmpuri, cardul tonal */
--c-rule: rgba(22,18,23,.10); /* carduri, inputuri */
--c-rule-soft: rgba(22,18,23,.05); /* separatoare între rânduri */
--c-rule-strong: rgba(22,18,23,.48); /* contur de control mic: checkbox, radio (3:1) */
/* stări — fill (punct, contur, iconiță) + text (lizibil pe alb și pe -bg) + fundal */
--c-success: #16A34A; --c-success-text: #15803D; --c-success-bg: #DCFCE7;
--c-warn: #D97706; --c-warn-text: #B45309; --c-warn-bg: #FEF3C7;
--c-error: #DC2626; --c-error-text: #B91C1C; --c-error-bg: #FEF2F2;
/* etichete de categorie (paleta Notion, 9) — text / fundal */
--tag-gray:#6B6A66; --tag-gray-bg:#F1F1EF;
--tag-brown:#86604C; --tag-brown-bg:#F3EEEE;
--tag-orange:#B23C0A; --tag-orange-bg:#F8ECDF;
--tag-yellow:#94580A; --tag-yellow-bg:#FAF3DD;
--tag-green:#3F7151; --tag-green-bg:#EEF3ED;
--tag-blue:#3B6E96; --tag-blue-bg:#E9F3F7;
--tag-purple:#7A579C; --tag-purple-bg:#F6F3F8;
--tag-pink:#A2477A; --tag-pink-bg:#F9F2F5;
--tag-red:#B9433B; --tag-red-bg:#FAECEC;
/* stratul de sub modal / foaia de jos */
--c-scrim: rgba(18,20,23,.45);
/* formă */
--r-xs: 4px; /* checkbox, etichete de categorie */
--r-sm: 6px; /* containere de iconiță, schelet */
--r-md: 12px; /* câmpuri, rânduri, zone scufundate, alerte (v1.2.1: mai blând) */
--r-btn: var(--r-pill); /* butoane: pilulă (v2.5.0, Bogdan, 27 oct 2026); înainte 14px */
--r-lg: 16px; /* carduri */
--r-xl: 20px; /* carduri mari (formulare, hero), modale */
--r-pill: 999px; /* badge-uri, chip-uri, filtre, taburi segmentate */
/* umbre — sistemul e PLAT pe pagină; umbra există doar pe ce PLUTEȘTE peste pagină */
--sh-card: 0 12px 36px rgba(18,20,23,.10), 0 2px 8px rgba(18,20,23,.04); /* doar .card.lifted */
--sh-pop: 0 8px 24px -4px rgba(18,20,23,.16), 0 0 0 1px rgba(18,20,23,.06); /* meniu, popover, toast */
--sh-modal:0 32px 80px -16px rgba(18,20,23,.32), 0 8px 24px -8px rgba(18,20,23,.12), 0 0 0 1px rgba(18,20,23,.05); /* modal, sertar */
--blur-scrim: 6px; /* stratul de sub modal estompează pagina (v2.0, modalul „cool”) */
--ease-out: cubic-bezier(.2,.8,.2,1); /* intrările: rapid la început, se așază moale */
--dur-1: .14s; --dur-2: .2s; --dur-3: .28s;
/* spațiere: 4 · 8 · 12 · 16 · 24 · 32 · 40 · 64 · 96 */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
--sp-8:32px; --sp-10:40px; --sp-16:64px; --sp-24:96px;
/* fonturi */
--ff-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--ff-em: 'Fraunces', Georgia, serif; /* DOAR prin / .em, drept (v2.1) */
--ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* cifre, sume, ID-uri, etichete mici */
/* ── nume vechi (v0.3) — DEPRECATE, dispar în v2.0 ──
Există ca proiectele pe v0.3 (Robin, mini-me) să treacă pe v1.0 fără să-și
rescrie CSS-ul propriu. Cod nou: doar numele --c-*. */
--bg: var(--c-page); --sidebar: var(--c-surface); --surface: var(--c-surface);
--surface-2: var(--c-track); --hover: var(--c-hover); --active: var(--c-accent-ultra);
--text: var(--c-ink); --muted: var(--c-fog); --faint: var(--c-mist);
--border: var(--c-rule); --border-strong: var(--c-rule-strong);
--accent: var(--c-accent); --accent-hover: var(--c-accent-deep);
--accent-soft: var(--c-accent-tint); --accent-text: var(--c-accent-text);
--danger: var(--c-error-text); --danger-soft: var(--c-error-bg);
--ok: var(--c-success-text); --ok-soft: var(--c-success-bg);
--warn: var(--c-warn-text); --warn-soft: var(--c-warn-bg);
--scrim: var(--c-scrim); --r-full: var(--r-pill);
--font-ui: var(--ff-ui); --font-mono: var(--ff-mono);
}
/* ---------- 1b. TOKENURI · NOAPTE ----------
Trei stări: sistem (fără atribut) / zi / noapte, prin data-theme pe .
Cele două blocuri de mai jos sunt IDENTICE — scripts/verifica-contrast.py
pică dacă diferă. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
color-scheme: dark;
--c-accent:#C92ED4; --c-accent-deep:#AE26B8; --c-accent-btn:#C123CF; --c-accent-press:#9A1FA6; --c-accent-2:#7123AB; --c-accent-2-deep:#611E93; --c-accent-tint:rgba(201,46,212,.10);
--c-accent-ultra:rgba(201,46,212,.08); --c-accent-text:#DA70E2; --c-on-accent:#FFFFFF; --c-accent-on-dark:#C92ED4;
--c-page:#100F11; --c-app:#100F11; --c-surface:#242124; --c-inset:#151416;
--c-track:#2D2B2F; --c-hover:rgba(255,255,255,.05); --c-row-hover:#282629; --c-dark:#0A090B; --c-dark-card:#242124;
--c-ink:#EEEBEE; --c-fog:#A5A0A7; --c-mist:#69636B;
--c-rule:rgba(255,255,255,.10); --c-rule-soft:rgba(255,255,255,.06); --c-rule-strong:rgba(255,255,255,.40);
--c-success:#22C55E; --c-success-text:#4ADE80; --c-success-bg:rgba(34,197,94,.14);
--c-warn:#F59E0B; --c-warn-text:#FBBF24; --c-warn-bg:rgba(245,158,11,.14);
--c-error:#DC2626; --c-error-text:#F87171; --c-error-bg:rgba(239,68,68,.14);
--tag-gray:#9B9B9B; --tag-gray-bg:#252A35;
--tag-brown:#BA8E79; --tag-brown-bg:#2E2724;
--tag-orange:#E08A45; --tag-orange-bg:#36291F;
--tag-yellow:#D8A748; --tag-yellow-bg:#372E20;
--tag-green:#5FAE7C; --tag-green-bg:#1F2B24;
--tag-blue:#5C9BD6; --tag-blue-bg:#1B2633;
--tag-purple:#A585CF; --tag-purple-bg:#2A2433;
--tag-pink:#D873A4; --tag-pink-bg:#30222A;
--tag-red:#E0716A; --tag-red-bg:#33221F;
--c-scrim:rgba(0,0,0,.6);
--sh-card:0 12px 36px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
--sh-pop:0 8px 24px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
--sh-modal:0 32px 80px -16px rgba(0,0,0,.7), 0 8px 24px -8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
}
}
:root[data-theme="dark"]{
color-scheme: dark;
--c-accent:#C92ED4; --c-accent-deep:#AE26B8; --c-accent-btn:#C123CF; --c-accent-press:#9A1FA6; --c-accent-2:#7123AB; --c-accent-2-deep:#611E93; --c-accent-tint:rgba(201,46,212,.10);
--c-accent-ultra:rgba(201,46,212,.08); --c-accent-text:#DA70E2; --c-on-accent:#FFFFFF; --c-accent-on-dark:#C92ED4;
--c-page:#100F11; --c-app:#100F11; --c-surface:#242124; --c-inset:#151416;
--c-track:#2D2B2F; --c-hover:rgba(255,255,255,.05); --c-row-hover:#282629; --c-dark:#0A090B; --c-dark-card:#242124;
--c-ink:#EEEBEE; --c-fog:#A5A0A7; --c-mist:#69636B;
--c-rule:rgba(255,255,255,.10); --c-rule-soft:rgba(255,255,255,.06); --c-rule-strong:rgba(255,255,255,.40);
--c-success:#22C55E; --c-success-text:#4ADE80; --c-success-bg:rgba(34,197,94,.14);
--c-warn:#F59E0B; --c-warn-text:#FBBF24; --c-warn-bg:rgba(245,158,11,.14);
--c-error:#DC2626; --c-error-text:#F87171; --c-error-bg:rgba(239,68,68,.14);
--tag-gray:#9B9B9B; --tag-gray-bg:#252A35;
--tag-brown:#BA8E79; --tag-brown-bg:#2E2724;
--tag-orange:#E08A45; --tag-orange-bg:#36291F;
--tag-yellow:#D8A748; --tag-yellow-bg:#372E20;
--tag-green:#5FAE7C; --tag-green-bg:#1F2B24;
--tag-blue:#5C9BD6; --tag-blue-bg:#1B2633;
--tag-purple:#A585CF; --tag-purple-bg:#2A2433;
--tag-pink:#D873A4; --tag-pink-bg:#30222A;
--tag-red:#E0716A; --tag-red-bg:#33221F;
--c-scrim:rgba(0,0,0,.6);
--sh-card:0 12px 36px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
--sh-pop:0 8px 24px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
--sh-modal:0 32px 80px -16px rgba(0,0,0,.7), 0 8px 24px -8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
}
/* ---------- 2. BAZĂ ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
margin:0;background:var(--c-page);color:var(--c-ink);
font:400 15px/1.5 var(--ff-ui);letter-spacing:-.01em;
}
body.app{background:var(--c-app)}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
a{color:var(--c-accent-text);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
strong,b{font-weight:600}
::selection{background:var(--c-accent-tint)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ---------- 3. TIPOGRAFIE ----------
O singură scară, numele = mărimea în px (ca la Edge: .t60 … .t11); rolurile sunt aliasuri
în aceeași regulă, nu o a doua scară. Site-urile folosesc treptele mari (60–36), aplicațiile
se opresc la 28. Ierarhia, ca la Notion și Linear (v2.0, 24 oct 2026): 700 doar de la 28px
în sus, titlurile de secțiune 600, etichete și butoane 500, textul 400; în text, accentul e
(600). Tracking-ul crește negativ cu mărimea, continuu: 0 sub 13px, −.01em la text,
−.01 − .0012×(px−16) de la 18px, plafonat la −.04em. Sub 18px rândurile sunt în px, ca la
Notion și Geist; de la 18px în sus, relative. */
.t60{font-size:60px;font-weight:700;line-height:1;letter-spacing:-.04em}
.t48{font-size:48px;font-weight:700;line-height:1.08;letter-spacing:-.035em}
.t36{font-size:36px;font-weight:700;line-height:1.15;letter-spacing:-.03em}
.t28,.page-title{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.025em} /* titlul unei pagini de aplicație */
.t24{font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-.02em} /* h2 (era 700) */
.t20,.sec-title{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.015em} /* secțiune în aplicație, titlu de modal */
.t18,.lead{font-size:18px;font-weight:400;line-height:1.55;letter-spacing:-.01em;color:var(--c-fog)} /* paragraf de deschidere */
.t16{font-size:16px;font-weight:600;line-height:24px;letter-spacing:-.01em} /* titlu de card */
.t15{font-size:15px;line-height:22px;letter-spacing:-.01em} /* text de bază */
.t14{font-size:14px;line-height:20px;letter-spacing:-.005em} /* text mic, etichete de UI */
.t13{font-size:13px;line-height:18px;letter-spacing:0}
.t12{font-size:12px;line-height:16px;letter-spacing:0;color:var(--c-fog)} /* meta */
.t11{font-size:11px;line-height:16px;letter-spacing:0;color:var(--c-fog)}
@media (max-width:640px){
.t60{font-size:40px} .t48{font-size:36px} .t36{font-size:30px}
.t28,.page-title{font-size:26px} .t24{font-size:22px}
}
/* nuanțele de text (Notion) */
.t-ink{color:var(--c-ink)} .t-fog{color:var(--c-fog)} .t-mist{color:var(--c-mist)}
.t-strong{font-weight:600;color:var(--c-ink)}
.t-medium{font-weight:500}
/* Fraunces drept (v2.1, Bogdan, 24 oct 2026: „Fraunces, 50 rotunjime, wonk on și w600”; înainte, din v1.2,
Newsreader, pe care l-a găsit „colțuros”). Drept, nu înclinat (v1.2.2: „nu vreau italic la accent”).
Rotunjimea (SOFT) 50 și literele „WONK” pornite (n, m, h cu începutul înclinat). Mărimea optică e automată.
Cu 2px mai mare decât textul din jur, la orice mărime, ca la Bono („adăugăm și noi 2px fix”): Fraunces
iese mai mic decât Inter la aceeași mărime. Pe 1–4 cuvinte dintr-un titlu; în text curgător: . */
em,.em{
font-family:var(--ff-em);font-style:normal;font-weight:500;
font-size:calc(1em + 2px);color:var(--c-accent-text);
font-variation-settings:'SOFT' 50,'WONK' 1;
}
/* v1.2.2 (Bogdan, 23 oct 2026, noaptea): drept, nu înclinat; „Eduard e prea gros” → în titluri aceeași grosime ca titlul
(600 lângă 600, 700 în titlurile de 700); o treaptă în plus doar în textul de 400 și în etichetele mici */
.eyebrow em,.marker em,.meta em,.t-strong em{font-weight:600}
.t20 em,.t16 em,.card-title em,.title em,strong em,b em,.m-title em{font-weight:600}
/* v2.1: în titluri, 600 la orice mărime (Bogdan, 24 oct 2026), și lângă Inter 700 */
.t60 em,.t48 em,.t36 em,.t28 em,.t24 em,h1 em,h2 em,.modal-title em,.doc h1 em,.doc h2 em,.doc h3 em{font-weight:600}
/* cifre: sume, ore, ID-uri, coduri — mono, cifre de lățime egală */
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.01em}
.num.lg{font-size:28px;letter-spacing:-.02em}
.num .unit{font-family:var(--ff-ui);font-weight:500;font-size:.6em;color:var(--c-fog);margin-left:.25em}
/* eticheta mică (eyebrow): mono, MAJUSCULE, fog — deasupra unui titlu, pe un card de
cifre, pe capul de tabel. .marker adaugă punctul în culoarea principală. */
.eyebrow,.marker{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-fog);
}
.marker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c-accent)}
/* ---------- 4. ICONIȚE ----------
Lucide, SVG inline, contur, currentColor. Mărimea o dă clasa, nu atributele SVG. */
.ic{--ic-w:16;width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{--ic-w:14;width:14px;height:14px;stroke-width:1.75}
.ic.lg{--ic-w:20;width:20px;height:20px;stroke-width:1.75}
.ic.xl{--ic-w:24;width:24px;height:24px;stroke-width:2}
/* bifa-1/2/3 (Bogdan, 25.10.2026, pe Donna: „bifele verzi din tabel sunt prea subțiri”): linia de 1, 2 sau 3px pe ecran,
la orice mărime de iconiță. stroke-width e în unitățile grilei de 24, deci se împarte la mărimea în pixeli (--ic-w,
pusă de fiecare regulă care schimbă mărimea). svg în selector, ca să bată grosimile puse de componente (badge, pași). */
svg.ic.bifa-1{stroke-width:calc(24 / var(--ic-w,16))}
svg.ic.bifa-2{stroke-width:calc(48 / var(--ic-w,16))}
svg.ic.bifa-3{stroke-width:calc(72 / var(--ic-w,16))}
.ic-box{
width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;
background:var(--c-accent-tint);color:var(--c-accent-text);
}
/* ---------- 5. BUTOANE ----------
Mecanica din Edge: .btn + o variantă + (opțional) o mărime.
Un singur .btn.primary pe ecran. Fără umbre, fără ridicare. Din v2.5.0 butonul principal e plin,
fucsia #C123CF, și toate butoanele sunt pilulă (Bogdan, 27 oct 2026: „plin, 4,75, pilula”);
până în v2.4 avea gradient fucsia → violet. */
.btn{
height:40px;padding:0 20px;border-radius:var(--r-btn);
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--ff-ui);font-size:14px;font-weight:500;letter-spacing:-.005em;
border:none;background:transparent;color:var(--c-ink);
text-decoration:none;white-space:nowrap;cursor:pointer;
transition:background-color .14s,color .14s,box-shadow .14s;
}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn:focus-visible{border-radius:var(--r-btn);outline-offset:3px}
.btn.primary{background:var(--c-accent-btn);color:var(--c-on-accent)}
.btn.primary:hover:where(:not(:disabled)){background:var(--c-accent-deep)}
.btn.primary:active:where(:not(:disabled)){background:var(--c-accent-press)}
.btn.secondary{background:var(--c-accent-tint);color:var(--c-accent-text)}
.btn.secondary:hover:where(:not(:disabled)){background:var(--c-accent-ultra);box-shadow:inset 0 0 0 1px var(--c-accent)}
.btn.outline{background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-rule)}
.btn.outline:hover:where(:not(:disabled)){background:var(--c-inset);box-shadow:inset 0 0 0 1px var(--c-rule-strong)}
/* pe fundal închis (.sec-dark, .card.dark) butonul cu contur e alb, translucid */
.sec-dark .btn.outline,.card.dark .btn.outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.sec-dark .btn.outline:hover:where(:not(:disabled)),.card.dark .btn.outline:hover:where(:not(:disabled)){background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.btn.ghost{color:var(--c-fog)}
.btn.ghost:hover:where(:not(:disabled)){color:var(--c-ink);background:var(--c-hover)}
.btn.danger{background:var(--c-error);color:#fff}
.btn.danger:hover:where(:not(:disabled)){filter:brightness(.9)}
.btn.danger.outline{background:var(--c-surface);color:var(--c-error-text);box-shadow:inset 0 0 0 1px var(--c-rule)}
.btn.danger.outline:hover:where(:not(:disabled)){background:var(--c-error-bg);box-shadow:inset 0 0 0 1px var(--c-error)}
.btn.link{height:auto;padding:0;border-radius:0;color:var(--c-accent-text)}
.btn.link:hover:where(:not(:disabled)){text-decoration:underline}
.btn.lg{height:48px;padding:0 26px;font-size:16px}
.btn.sm{height:32px;padding:0 14px;font-size:13px}
.btn.xs{height:26px;padding:0 11px;font-size:12px}
.btn.full{width:100%}
.btn.icon-only{padding:0;aspect-ratio:1}
.btn > .ic{--ic-w:16;width:16px;height:16px}
.btn.lg > .ic{--ic-w:18;width:18px;height:18px}
.btn.sm > .ic,.btn.xs > .ic{--ic-w:14;width:14px;height:14px}
.btn.icon-only > .ic{--ic-w:18;width:18px;height:18px}
.btn.sm.icon-only > .ic{--ic-w:16;width:16px;height:16px}
/* acțiune pe un rând de listă (descarcă, trimite): pătrat rotunjit, contur fin */
.icon-btn{
width:34px;height:34px;border-radius:var(--r-md);flex-shrink:0;
display:grid;place-items:center;
border:1px solid var(--c-rule);background:var(--c-surface);color:var(--c-fog);
transition:all .14s;
}
.icon-btn:hover{border-color:var(--c-accent);color:var(--c-accent-text);background:var(--c-accent-ultra)}
.icon-btn.danger:hover{border-color:var(--c-error);color:var(--c-error-text);background:var(--c-error-bg)}
.icon-btn > .ic{--ic-w:16;width:16px;height:16px}
.icon-btn.sm{width:28px;height:28px;border-radius:var(--r-sm)} .icon-btn.sm > .ic{--ic-w:14;width:14px;height:14px}
.icon-btn.ghost{border-color:transparent;background:transparent}
/* v2.0: se încarcă — spinner-ul ia locul iconiței, textul rămâne, butonul nu mai primește click */
.btn.loading{pointer-events:none;opacity:.8}
/* v2.0: alb plin, pentru fundalul închis (hero pe .sec-dark): singurul loc unde butonul principal nu e colorat */
.btn.white{background:#fff;color:var(--c-dark)}
.btn.white:hover:where(:not(:disabled)){background:rgba(255,255,255,.9)}
/* v2.0: grup de butoane lipite (vederi, perioade) — alternativa la .tabs când sunt acțiuni, nu vederi */
.btn-group{display:inline-flex;isolation:isolate}
.btn-group > .btn{border-radius:0;margin-left:-1px}
.btn-group > .btn:first-child{border-radius:var(--r-btn) 0 0 var(--r-btn);margin-left:0}
.btn-group > .btn:last-child{border-radius:0 var(--r-btn) var(--r-btn) 0}
.btn-group > .btn.outline.active,.btn-group > .btn.outline[aria-pressed="true"]{background:var(--c-track);color:var(--c-ink);z-index:1}
/* ---------- 6. FORMULARE ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field.inline{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;column-gap:12px}
.field.inline > .hint,.field.inline > .error-msg{grid-column:2}
.label{font-size:13px;font-weight:500;color:var(--c-fog)}
.label .opt{font-weight:400;color:var(--c-mist)}
.hint{font-size:12px;color:var(--c-fog)}
.error-msg{font-size:12px;color:var(--c-error-text);display:flex;gap:6px;align-items:center}
.input,.select,textarea.input{
width:100%;height:42px;padding:0 14px;
background:var(--c-surface);color:var(--c-ink);
border:1px solid var(--c-rule);border-radius:var(--r-md);
font-size:14px;line-height:20px;
transition:border-color .14s,box-shadow .14s,background-color .14s;
}
.input::placeholder,textarea.input::placeholder{color:var(--c-mist)}
.input:hover:where(:not(:disabled):not(:focus)),.select:hover:where(:not(:disabled):not(:focus)){border-color:var(--c-rule-strong)}
.input:focus,.select:focus,textarea.input:focus{
outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-ultra);
}
.input.lg{height:48px;font-size:16px}
.input.error,.select.error{border-color:var(--c-error);background:var(--c-error-bg)}
.input.error:focus{background:var(--c-surface)}
.input:disabled,.select:disabled{background:var(--c-inset);color:var(--c-mist);cursor:not-allowed}
textarea.input{height:auto;min-height:96px;padding:10px 14px;resize:vertical;line-height:1.5}
.select{
appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;
}
/* cod de verificare: căsuțe mono */
.otp{display:flex;gap:8px;justify-content:center}
.otp input{
flex:0 1 46px;min-width:0;width:46px;height:54px;text-align:center;
font-family:var(--ff-mono);font-size:20px;font-weight:600;
border:1px solid var(--c-rule);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);
}
.otp input:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-ultra)}
/* checkbox și radio — mecanica Edge: */
.check-group,.radio-group{display:flex;flex-direction:column;gap:10px}
.check-item,.radio-item{
display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none;
font-size:14px;line-height:22px;color:var(--c-ink);
}
.check-item input,.radio-item input{
appearance:none;-webkit-appearance:none;flex-shrink:0;margin:2px 0 0;
width:18px;height:18px;position:relative;cursor:pointer;
background:var(--c-surface);border:1.5px solid var(--c-rule-strong);
transition:border-color .14s,background-color .14s;
}
.check-item input{border-radius:var(--r-xs)}
.radio-item input{border-radius:50%}
.check-item input:hover,.radio-item input:hover{border-color:var(--c-accent)}
.check-item input:checked,.radio-item input:checked{background:var(--c-accent);border-color:var(--c-accent)}
.check-item input:checked::after{
content:'';position:absolute;inset:0;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 9L7.5 12L13.5 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}
.radio-item input:checked::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#fff}
.check-item input:disabled,.radio-item input:disabled{opacity:.45;cursor:not-allowed}
.check-item .sub,.radio-item .sub{display:block;font-size:13px;line-height:18px;color:var(--c-fog)}
/* varianta card: opțiunea e o cutie întreagă pe care dai click */
.check-item.card,.radio-item.card{
display:flex;padding:14px 16px;border:1px solid var(--c-rule);border-radius:var(--r-md);background:var(--c-surface);
}
.check-item.card:has(input:checked),.radio-item.card:has(input:checked){border-color:var(--c-accent);background:var(--c-accent-ultra)}
/* switch: pornit / oprit, efect imediat */
.switch{
width:36px;height:20px;border-radius:var(--r-pill);border:none;padding:0;flex-shrink:0;
background:var(--c-track);position:relative;cursor:pointer;transition:background-color .14s;
box-shadow:inset 0 0 0 1px var(--c-rule);
}
.switch::after{
content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
background:#fff;box-shadow:0 1px 2px rgba(8,20,46,.2);transition:transform .16s;
}
.switch[aria-checked="true"],.switch.on{background:var(--c-accent);box-shadow:none}
.switch[aria-checked="true"]::after,.switch.on::after{transform:translateX(16px)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.switch.sm{width:30px;height:18px} .switch.sm::after{width:14px;height:14px} .switch.sm[aria-checked="true"]::after,.switch.sm.on::after{transform:translateX(12px)}
/* v2.0: mărimi, stări și compoziții de câmp */
.input.sm,.select.sm{height:36px;font-size:13px;padding:0 12px;border-radius:calc(var(--r-md) - 2px)}
/* v2.1.1: lista mică își păstrează locul săgeții (padding-ul de mai sus îl ștergea, iar textul intra sub ea) */
.select.sm{padding-right:34px;background-position:right 10px center}
.input.success{border-color:var(--c-success)}
.input[readonly]:not(:disabled){background:var(--c-inset);border-color:transparent}
.ok-msg{font-size:12px;color:var(--c-success-text);display:flex;gap:6px;align-items:center}
.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.label-row .counter,.label-row a{font-family:var(--ff-mono);font-size:11px;color:var(--c-mist);font-weight:400}
.label-row a{font-family:var(--ff-ui);font-size:12px;color:var(--c-accent-text);text-decoration:none;font-weight:500}
.field.required .label::after{content:' *';color:var(--c-error-text)}
/* prefix / sufix lipit de câmp: „lei”, „@”, „https://”, iconiță */
.input-group{display:flex;align-items:stretch;background:var(--c-surface);border:1px solid var(--c-rule);border-radius:var(--r-md);transition:border-color .14s,box-shadow .14s;overflow:hidden}
.input-group:hover:where(:not(:focus-within)){border-color:var(--c-rule-strong)}
.input-group:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-ultra)}
.input-group > .input,.input-group > .select{border:none;border-radius:0;box-shadow:none;flex:1;min-width:0}
.input-group > .input:focus,.input-group > .select:focus{box-shadow:none}
.input-group > .addon{display:flex;align-items:center;gap:6px;padding:0 12px;font-size:14px;color:var(--c-fog);background:var(--c-inset);white-space:nowrap;flex-shrink:0}
.input-group > .addon:first-child{border-right:1px solid var(--c-rule-soft)}
.input-group > .addon:last-child{border-left:1px solid var(--c-rule-soft)}
.input-group > .addon.plain{background:transparent;padding-right:0;border:none}
.input-group > .addon .ic{color:var(--c-mist)}
.input-group > .btn{border-radius:0;height:auto;align-self:stretch}
.input-group.error{border-color:var(--c-error);background:var(--c-error-bg)}
/* câmp de căutare: lupa în stânga, tasta în dreapta */
.search{position:relative;display:flex;align-items:center}
.search > .ic{position:absolute;left:13px;color:var(--c-mist);pointer-events:none}
.search > .input{padding-left:38px}
.search > .kbd{position:absolute;right:10px}
/* mai multe câmpuri pe un rând */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field-row.cols-3{grid-template-columns:1fr 1fr 1fr}
.field-row.cols-auto{grid-template-columns:minmax(0,1fr) max-content}
/* secțiune de formular: titlu și explicație la stânga, câmpurile la dreapta (setări, profil) */
.form-sec{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:16px 48px;padding:28px 0;border-bottom:1px solid var(--c-rule-soft)}
.form-sec:last-child{border-bottom:none}
.form-sec .fs-title{font-size:15px;font-weight:600;letter-spacing:-.01em}
.form-sec .fs-text{font-size:13px;color:var(--c-fog);margin-top:4px;line-height:1.5}
.form-sec .field:last-child{margin-bottom:0}
.form-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:20px;border-top:1px solid var(--c-rule-soft);margin-top:8px}
@media (max-width:640px){ .input,.select,textarea.input{font-size:16px} .field-row,.field-row.cols-3,.form-sec{grid-template-columns:1fr} .form-sec{gap:12px;padding:20px 0} }
/* grup de opțiuni în linie (perioadă, tip): radio care arată ca niște butoane */
.seg{display:inline-flex;border:1px solid var(--c-rule);border-radius:var(--r-md);overflow:hidden;background:var(--c-surface)}
.seg label{display:inline-flex;align-items:center;padding:0 14px;height:38px;font-size:14px;font-weight:500;color:var(--c-fog);cursor:pointer;border-left:1px solid var(--c-rule-soft)}
.seg label:first-child{border-left:none}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label:has(input:checked){background:var(--c-accent-tint);color:var(--c-accent-text)}
.seg label:has(input:focus-visible){outline:2px solid var(--c-accent);outline-offset:-2px}
/* ---------- 7. ETICHETE: badge, stare, categorie, chip ---------- */
/* badge: stare scurtă, pe fundal propriu */
.badge{
display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
padding:3px 10px;border-radius:var(--r-pill);
font-size:11px;font-weight:600;line-height:16px;
}
.badge.neutral{background:var(--c-track);color:var(--c-fog)}
.badge.accent{background:var(--c-accent-tint);color:var(--c-accent-text)}
.badge.success{background:var(--c-success-bg);color:var(--c-success-text)}
.badge.warn{background:var(--c-warn-bg);color:var(--c-warn-text)}
.badge.error{background:var(--c-error-bg);color:var(--c-error-text)}
.badge.sm{padding:1px 8px;font-size:11px}
.badge > .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
/* stare fără fundal — într-un rând de listă sau de tabel (fără cutii în cutii) */
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--c-fog);white-space:nowrap}
.status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c-mist)}
.status.accent{color:var(--c-accent-text)} .status.accent::before{background:var(--c-accent)}
.status.success{color:var(--c-success-text)} .status.success::before{background:var(--c-success)}
.status.warn{color:var(--c-warn-text)} .status.warn::before{background:var(--c-warn)}
.status.error{color:var(--c-error-text)} .status.error::before{background:var(--c-error)}
/* etichetă de categorie (Notion) — pentru proiecte, tipuri; nu pentru stări */
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-xs);font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}
.tag.gray{color:var(--tag-gray);background:var(--tag-gray-bg)}
.tag.brown{color:var(--tag-brown);background:var(--tag-brown-bg)}
.tag.orange{color:var(--tag-orange);background:var(--tag-orange-bg)}
.tag.yellow{color:var(--tag-yellow);background:var(--tag-yellow-bg)}
.tag.green{color:var(--tag-green);background:var(--tag-green-bg)}
.tag.blue{color:var(--tag-blue);background:var(--tag-blue-bg)}
.tag.purple{color:var(--tag-purple);background:var(--tag-purple-bg)}
.tag.pink{color:var(--tag-pink);background:var(--tag-pink-bg)}
.tag.red{color:var(--tag-red);background:var(--tag-red-bg)}
/* chip: context scurt („1 document · 5 lei"), sau filtru pe care îl apeși */
.chip{
display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
padding:6px 14px;border-radius:var(--r-pill);
font-size:13px;font-weight:500;background:var(--c-accent-tint);color:var(--c-accent-text);
}
.chip.neutral{background:var(--c-track);color:var(--c-ink)}
button.chip{border:none;cursor:pointer}
/* filtru: ca un chip, dar cu stare pornit / oprit */
.pill{
display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--r-pill);
border:1px solid var(--c-rule);background:var(--c-surface);color:var(--c-fog);
font-size:13px;font-weight:500;cursor:pointer;transition:all .14s;
}
.pill:hover{color:var(--c-ink);border-color:var(--c-rule-strong)}
.pill.on,.pill[aria-pressed="true"]{background:var(--c-accent-tint);border-color:transparent;color:var(--c-accent-text);font-weight:600}
.pill .count{font-family:var(--ff-mono);font-size:11px;color:inherit;opacity:.8}
.pill .ic{--ic-w:14;width:14px;height:14px}
.pill .x{margin:0 -6px 0 2px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;opacity:.7}
.pill .x:hover{background:var(--c-hover);opacity:1}
/* v2.0: badge cu contur (pe fundal colorat sau în card închis), badge cu iconiță, număr pe iconiță */
.badge.outline{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent)}
.badge > .ic{--ic-w:12;width:12px;height:12px;stroke-width:2.25}
.badge.lg{padding:5px 12px;font-size:12px;line-height:18px}
.card.dark .badge.neutral,.sec-dark .badge.neutral{background:rgba(255,255,255,.1);color:#fff}
.tag > .dot{width:7px;height:7px;border-radius:2px;background:currentColor;margin-right:6px;opacity:.8}
.tag.outline{background:transparent;box-shadow:inset 0 0 0 1px var(--c-rule);color:var(--c-fog)}
.count-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:var(--c-accent);color:var(--c-on-accent);font-family:var(--ff-mono);font-size:10px;font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 2px var(--c-surface)}
.has-badge{position:relative}
.kbd{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-xs);font-family:var(--ff-mono);font-size:11px;font-weight:500;color:var(--c-fog);background:var(--c-surface);border:1px solid var(--c-rule);border-bottom-width:2px}
/* ---------- 8. SUPRAFEȚE ---------- */
.card{background:var(--c-surface);border:1px solid var(--c-rule);border-radius:var(--r-lg);padding:24px}
.card.flush{padding:0;overflow:hidden}
.card.xl{border-radius:var(--r-xl);padding:36px}
.card.lifted{box-shadow:var(--sh-card);border-color:transparent}
.card.tonal{background:var(--c-track)} /* gri-1, cu aceeași linie: singur nu se desparte de gri-0 */
/* card închis: accentul dintr-un rând de cifre, sau cardurile de pe o secțiune închisă (.sec-dark) */
.card.dark,.sec-dark .card{background:var(--c-dark-card);border-color:transparent;color:rgba(255,255,255,.66)}
.card.dark .card-title,.card.dark .t-ink,.card.dark .num,.card.dark strong,.card.dark .kpi-val,
.sec-dark .card .card-title,.sec-dark .card .t-ink,.sec-dark .card .num,.sec-dark .card strong{color:#fff}
.card.dark .card-sub,.card.dark .t-fog,.card.dark .eyebrow,.card.dark .marker,
.sec-dark .card .card-sub,.sec-dark .card .t-fog,.sec-dark .card .eyebrow,.sec-dark .card .marker{color:rgba(255,255,255,.66)}
.card.dark .ic-box,.sec-dark .card .ic-box{background:rgba(255,255,255,.08);color:#fff}
.card.dark{background:var(--c-dark)}
.sec-dark .card{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* cifră (KPI): etichetă mono, valoare mono mare, context dedesubt */
.kpi{display:flex;flex-direction:column;gap:8px;padding:16px 18px}
.kpi .eyebrow,.kpi .marker{display:flex;justify-content:space-between}
.kpi-val{font-family:var(--ff-mono);font-weight:600;font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--c-ink)}
.kpi-val .unit{font-family:var(--ff-ui);font-weight:500;font-size:12px;color:var(--c-fog);margin-left:5px;letter-spacing:0}
.kpi-ctx{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--c-fog)}
.kpi-ctx b{font-family:var(--ff-mono);font-size:12px;font-weight:500;color:var(--c-ink)}
.card.dark .kpi-ctx b{color:#fff} .card.dark .kpi-val .unit,.card.dark .kpi-ctx{color:rgba(255,255,255,.66)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.card-title{font-size:16px;font-weight:600;letter-spacing:-.01em}
.card-sub{font-size:13px;color:var(--c-fog);margin-top:2px}
.inset{background:var(--c-inset);border-radius:var(--r-md);padding:16px}
.divider{height:1px;background:var(--c-rule-soft);border:none;margin:16px 0}
.divider.text{display:flex;align-items:center;gap:12px;height:auto;background:none;font-size:12px;color:var(--c-fog)}
.divider.text::before,.divider.text::after{content:'';flex:1;height:1px;background:var(--c-rule-soft)}
/* rând de sumă: etichetă la stânga, cifră la dreapta */
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 0;font-size:14px;color:var(--c-fog)}
.sum-row .num{color:var(--c-ink);font-weight:500}
.sum-row.total{border-top:1px solid var(--c-rule);margin-top:6px;padding-top:12px;color:var(--c-ink);font-weight:600}
.sum-row.total .num{font-weight:700;font-size:16px}
/* v2.0: variantele cardului — una singură după rol, nu după gust */
.card.sm{padding:16px;border-radius:var(--r-md)}
.card.accent{background:var(--c-accent-ultra);border-color:var(--c-accent-tint)} /* un singur mesaj cald: ofertă, pasul următor */
.card.accent .ic-box{background:var(--c-accent);color:var(--c-on-accent)}
a.card,button.card,.card.interactive{cursor:pointer;color:inherit;text-decoration:none;text-align:left;font:inherit;transition:border-color .14s,background-color .14s,transform .14s}
a.card:hover,button.card:hover,.card.interactive:hover{border-color:var(--c-rule-strong);background:var(--c-surface)}
.card.interactive:active,a.card:active,button.card:active{transform:translateY(1px)}
.card.selected,.card.interactive[aria-pressed="true"]{border-color:var(--c-accent);box-shadow:inset 0 0 0 1px var(--c-accent);background:var(--c-accent-ultra)}
.card.add{border-style:dashed;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--c-fog);text-align:center;min-height:120px}
.card.add:hover{border-color:var(--c-accent);color:var(--c-accent-text);background:var(--c-accent-ultra)}
.card.add .ic{--ic-w:20;width:20px;height:20px}
/* card cu imagine sus, corp, subsol: conținut (articol, produs) */
.card-media{margin:-24px -24px 20px;aspect-ratio:16/9;background:var(--c-track);border-bottom:1px solid var(--c-rule-soft);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;display:grid;place-items:center;color:var(--c-mist)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card.sm .card-media{margin:-16px -16px 14px;border-radius:var(--r-md) var(--r-md) 0 0}
.card-foot{margin:20px -24px -24px;padding:14px 24px;background:var(--c-inset);border-top:1px solid var(--c-rule-soft);border-radius:0 0 var(--r-lg) var(--r-lg);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--c-fog)}
.card.sm .card-foot{margin:14px -16px -16px;padding:10px 16px}
.card-head .actions{display:flex;gap:6px;flex-shrink:0}
/* tendință lângă o cifră: + și − în culoarea stării */
.trend{display:inline-flex;align-items:center;gap:3px;font-family:var(--ff-mono);font-size:12px;font-weight:600;letter-spacing:0}
.trend .ic{--ic-w:12;width:12px;height:12px;stroke-width:2.5}
.trend.up{color:var(--c-success-text)} .trend.down{color:var(--c-error-text)} .trend.flat{color:var(--c-fog)}
.card.dark .trend.up{color:var(--c-success);filter:brightness(1.35)} .card.dark .trend.down{color:var(--c-error);filter:brightness(1.25)}
/* cheie · valoare (detaliile unui dosar, ale unei firme) */
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 24px;font-size:14px;margin:0}
.kv dt{color:var(--c-fog)} .kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.kv.lines dt,.kv.lines dd{padding:10px 0;border-bottom:1px solid var(--c-rule-soft)}
.kv.lines dt:nth-last-of-type(1),.kv.lines dd:last-child{border-bottom:none}
.kv.stack{grid-template-columns:1fr;gap:2px 0} .kv.stack dd{margin-bottom:12px}
/* ---------- 9. LISTE ȘI TABELE ---------- */
/* listă: rânduri într-un card, separate de linii fine (ritmul Notion) */
.list{display:flex;flex-direction:column}
.list-row{
display:flex;align-items:center;gap:12px;padding:12px 20px;min-height:56px;
border-bottom:1px solid var(--c-rule-soft);color:inherit;text-decoration:none;
}
.list-row:last-child{border-bottom:none}
a.list-row:hover,button.list-row:hover,.list-row.clickable:hover{background:var(--c-hover)}
button.list-row{width:100%;border-left:none;border-right:none;border-top:none;background:none;text-align:left}
.list-row .main{flex:1;min-width:0}
.list-row .title{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row .actions{display:flex;gap:6px;flex-shrink:0}
/* rândul de meta de sub un titlu: text simplu, nu bule */
.meta-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;font-size:12px;color:var(--c-fog)}
.meta-line .sep{color:var(--c-mist)}
.meta-line .mdot{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.meta-line .mono{font-size:12px}
.meta-line .m-danger{color:var(--c-error-text)}
.meta-line .m-ok{color:var(--c-success-text)}
/* tabel */
.table-wrap{overflow-x:auto;position:relative}
.tbl{width:100%;border-collapse:collapse} .tbl.wide{min-width:640px} /* v2.0: tabel lat, derulează în .table-wrap pe telefon */
.tbl th{
text-align:left;padding:10px 20px;background:var(--c-track);border-bottom:1px solid var(--c-rule-soft);
font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--c-fog);white-space:nowrap;
}
.tbl td{padding:14px 20px;font-size:14px;border-bottom:1px solid var(--c-rule-soft);font-variant-numeric:tabular-nums;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--c-row-hover)}
.tbl .right{text-align:right}
.tbl .name{font-weight:500}
.tbl .date{color:var(--c-fog);font-size:13px}
.tbl .num{font-weight:500}
/* v2.0: densitate, cap lipicios, selecție, sortare, acțiuni pe rând, subsol, celulă pe două rânduri */
.tbl.dense th{padding:8px 16px} .tbl.dense td{padding:9px 16px;font-size:13px}
.tbl.comfy td{padding:18px 20px}
.tbl.lines td{border-bottom-color:var(--c-rule)}
.tbl.zebra tbody tr:nth-child(even) td{background:var(--c-inset)}
.tbl.zebra tbody tr:hover td{background:var(--c-row-hover)}
.table-wrap.tall{max-height:400px;overflow:auto}
.tbl.sticky th{position:sticky;top:0;z-index:1}
.tbl .sel{width:44px;padding-right:0}
.tbl .sel .check-item{display:flex} .tbl .sel .check-item input{margin:0}
.tbl tr.selected td{background:var(--c-accent-ultra)}
.tbl th.sort{cursor:pointer;user-select:none}
.tbl th.sort > span{display:inline-flex;align-items:center;gap:4px}
.tbl th.sort .ic{--ic-w:12;width:12px;height:12px;opacity:.35}
.tbl th.sort:hover{color:var(--c-ink)}
.tbl th.sort.asc,.tbl th.sort.desc{color:var(--c-ink)} .tbl th.sort.asc .ic,.tbl th.sort.desc .ic{opacity:1}
.tbl th.sort.desc .ic{transform:rotate(180deg)}
.tbl .actions{text-align:right;white-space:nowrap;width:1%}
.tbl .actions .icon-btn,.tbl .actions .btn{vertical-align:middle}
.tbl tfoot td{font-weight:600;background:var(--c-inset);border-top:1px solid var(--c-rule);border-bottom:none}
.tbl .cell-main{font-weight:500;display:block} .tbl .cell-sub{display:block;font-size:12px;color:var(--c-fog);margin-top:1px}
.tbl .cell-ic{display:flex;align-items:center;gap:10px}
.tbl td.empty-cell{padding:0} .tbl td.empty-cell .empty{padding:40px 24px}
.tbl .skel{height:12px;margin:3px 0}
/* bara de deasupra tabelului: căutare, filtre, număr, acțiuni */
.tbl-toolbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--c-rule-soft);flex-wrap:wrap}
/* v2.2: căutarea stă în dreapta barei, după filtre (Bogdan, 25.10.2026); după ea vin doar butoanele care creează sau exportă */
.tbl-toolbar .search{flex:1;min-width:200px;max-width:320px;margin-left:auto}
.tbl-toolbar .count{font-family:var(--ff-mono);font-size:12px;color:var(--c-fog)}
.tbl-toolbar .right{margin-left:auto;display:flex;gap:8px}
.tbl-toolbar .search ~ .right{margin-left:0}
/* selecție activă: bara se schimbă în acțiuni pe cele N rânduri */
.tbl-toolbar.selection{background:var(--c-accent-ultra);border-bottom-color:var(--c-accent-tint)}
.tbl-toolbar.selection .count{color:var(--c-accent-text);font-weight:600;margin-left:0}
/* paginare: sub tabel, în același card */
.pager{display:flex;align-items:center;gap:4px;padding:10px 16px;border-top:1px solid var(--c-rule-soft);font-size:13px;color:var(--c-fog)}
.pager .info{margin-right:auto;font-family:var(--ff-mono);font-size:12px}
.pager button{height:30px;min-width:30px;padding:0 8px;border-radius:var(--r-sm);border:none;background:transparent;color:var(--c-fog);font-family:var(--ff-mono);font-size:12px;font-weight:500;display:inline-flex;align-items:center;justify-content:center}
.pager button:hover:not(:disabled){background:var(--c-hover);color:var(--c-ink)}
.pager button.active,.pager button[aria-current="page"]{background:var(--c-track);color:var(--c-ink)}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager .ic{--ic-w:14;width:14px;height:14px}
/* listă cu rând pe două niveluri și acțiuni care apar la hover (desktop) */
.list-row .sub{font-size:12px;color:var(--c-fog)}
.list-row .lead-ic{flex-shrink:0;width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--c-inset);color:var(--c-fog)}
.list-row .right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}
.list.dense .list-row{min-height:44px;padding:8px 16px}
.list.cards{gap:8px} .list.cards .list-row{border:1px solid var(--c-rule);border-radius:var(--r-md);background:var(--c-surface)}
.list-row.selected{background:var(--c-accent-ultra)}
.list-row .drag{color:var(--c-mist);cursor:grab}
/* ---------- 10. NAVIGARE ---------- */
/* taburi segmentate (Edge): comută între vederi ale aceluiași conținut */
.tabs{display:inline-flex;padding:3px;gap:2px;background:var(--c-track);border-radius:var(--r-pill)}
.tabs button{
height:34px;padding:0 16px;border-radius:var(--r-pill);border:none;background:transparent;
font-size:14px;font-weight:500;color:var(--c-fog);display:inline-flex;align-items:center;gap:6px;transition:all .14s;
}
.tabs button:hover{color:var(--c-ink)}
.tabs button.active,.tabs button[aria-selected="true"]{background:var(--c-surface);color:var(--c-ink);box-shadow:0 0 0 1px var(--c-rule)}
/* taburi subliniate (rovanta): secțiuni ale unei pagini */
.tabs.line{display:flex;padding:0;gap:4px;background:none;border-radius:0;border-bottom:1px solid var(--c-rule);overflow-x:auto;scrollbar-width:none}
.tabs.line button{height:auto;padding:8px 14px 10px;border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs.line button.active,.tabs.line button[aria-selected="true"]{background:none;box-shadow:none;color:var(--c-accent-text);border-bottom-color:var(--c-accent);font-weight:600}
.tabs .count{font-family:var(--ff-mono);font-size:11px;color:var(--c-mist)}
/* pași (stepper): unde ești într-un flux */
.steps{display:flex;flex-direction:column;gap:12px;list-style:none;padding:0}
.steps.row{flex-direction:row;align-items:center;gap:8px}
.step{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--c-fog)}
.step-ico{
width:22px;height:22px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
font-family:var(--ff-mono);font-size:11px;font-weight:600;background:var(--c-track);color:var(--c-fog);
}
.step-ico .ic{--ic-w:13;width:13px;height:13px;stroke-width:2.5}
.step.done .step-ico{background:var(--c-success);color:#fff}
.step.active{color:var(--c-ink);font-weight:500}
.step.active .step-ico{background:var(--c-accent);color:var(--c-on-accent)}
.steps.row .step-line{flex:1;min-width:16px;height:1px;background:var(--c-rule)}
/* fir de navigare (breadcrumb) */
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-fog);flex-wrap:wrap}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--c-ink)}
.crumbs .sep{color:var(--c-mist)}
.crumbs .current{color:var(--c-ink);font-weight:500}
/* v2.0: pași cu explicație (vertical) și pas în eroare */
.step .step-txt{display:flex;flex-direction:column} .step .sub{font-size:12px;color:var(--c-fog);font-weight:400}
.step.error .step-ico{background:var(--c-error);color:#fff} .step.error{color:var(--c-error-text)}
.steps:not(.row) .step{align-items:flex-start} .steps:not(.row) .step-ico{margin-top:1px}
.steps.row .step-line.done{background:var(--c-success)}
/* v2.0: meniu derulant (acțiuni pe un rând, contul din colț) — plutește, deci are umbră */
.menu{min-width:200px;background:var(--c-surface);border:1px solid var(--c-rule);border-radius:var(--r-md);padding:6px;box-shadow:var(--sh-pop);animation:bgn-pop var(--dur-2) var(--ease-out)}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:var(--r-sm);border:none;background:none;text-align:left;font:inherit;font-size:14px;color:var(--c-ink);text-decoration:none;cursor:pointer}
.menu-item > .ic{color:var(--c-fog)} .menu-item:hover{background:var(--c-hover)}
.menu-item.danger{color:var(--c-error-text)} .menu-item.danger > .ic{color:inherit}
.menu-item .kbd,.menu-item .hint{margin-left:auto}
.menu-item .hint{font-size:12px;color:var(--c-mist)}
.menu-item.active{background:var(--c-accent-ultra);color:var(--c-accent-text)}
.menu-item:disabled,.menu-item[aria-disabled="true"]{opacity:.45;cursor:not-allowed;background:none}
.menu-sep{height:1px;background:var(--c-rule-soft);margin:6px -6px}
.menu-label{font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-fog);padding:8px 10px 4px}
.menu-head{padding:8px 10px 10px;border-bottom:1px solid var(--c-rule-soft);margin:-6px -6px 6px;display:flex;gap:10px;align-items:center}
/* poziționare: wrapper relativ + meniul absolut; deschis cu .open pe wrapper sau cu [hidden] pe meniu */
.dropdown{position:relative;display:inline-block}
.dropdown > .menu{position:absolute;top:calc(100% + 6px);left:0;z-index:35;display:none}
.dropdown.right > .menu{left:auto;right:0}
.dropdown.up > .menu{top:auto;bottom:calc(100% + 6px)}
.dropdown.open > .btn,.dropdown > [aria-expanded="true"]{background:var(--c-hover)}
.dropdown.open > .menu,.dropdown:focus-within > .menu:not([hidden]){display:block}
/* v2.0: sfat scurt la hover / focus, doar CSS: */
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);background:var(--c-ink);color:var(--c-page);font-size:12px;font-weight:500;line-height:1.35;padding:6px 10px;border-radius:var(--r-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-1),transform var(--dur-1);z-index:50}
.tip:hover::after,.tip:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.tip.below::after{bottom:auto;top:calc(100% + 8px);transform:translate(-50%,-4px)} .tip.below:hover::after{transform:translate(-50%,0)}
/* v2.0: bara de sus a aplicației — pentru aplicații mici, fără meniu lateral (Donna, CCF) */
.app-top{position:sticky;top:0;z-index:30;background:color-mix(in srgb, var(--c-surface) 92%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--c-rule-soft)}
.app-top .inner{max-width:1280px;margin:0 auto;height:56px;padding:0 24px;display:flex;align-items:center;gap:24px}
.app-top .brand{font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--c-ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.app-top .links{display:flex;gap:4px}
.app-top .links a,.app-top .links button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-md);font-size:14px;font-weight:500;color:var(--c-fog);text-decoration:none;border:none;background:none}
.app-top .links a:hover,.app-top .links button:hover{color:var(--c-ink);background:var(--c-hover)}
.app-top .links a.active,.app-top .links a[aria-current="page"]{color:var(--c-ink);background:var(--c-track)}
.app-top .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.app-top ~ .app-main,.app-top + main{max-width:1280px;margin:0 auto;padding:32px 24px 64px}
@media (max-width:640px){ .app-top .inner{padding:0 16px;height:52px;gap:12px} .app-top .links{display:none} .app-top + main{padding:20px 16px 88px} }
/* ---------- 11. FEEDBACK ----------
Două componente, ca la Edge: .alert rămâne până se rezolvă cauza;
.toast dispare singur — doar pentru lucruri la care „nu fac nimic" e corect. */
.alert,.toast{
display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r-md);
font-size:14px;line-height:1.5;border:1px solid transparent;
}
.alert > .ic,.toast > .ic{margin-top:2px}
.alert .a-title,.toast .a-title{font-weight:600}
.alert .a-body,.toast .a-body{flex:1;min-width:0}
.alert.neutral{background:var(--c-inset);border-color:var(--c-rule)}
.alert.accent{background:var(--c-accent-ultra);border-color:var(--c-accent-tint)} .alert.accent > .ic{color:var(--c-accent-text)}
.alert.success{background:var(--c-success-bg);color:var(--c-success-text)}
.alert.warn{background:var(--c-warn-bg);color:var(--c-warn-text)}
.alert.error{background:var(--c-error-bg);color:var(--c-error-text)}
.alert-dismiss{margin-left:auto;background:none;border:none;padding:2px;color:inherit;opacity:.6;cursor:pointer}
.alert-dismiss:hover{opacity:1}
.toast-stack{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(400px,calc(100vw - 32px))}
.toast{background:var(--c-surface);border-color:var(--c-rule);color:var(--c-ink);min-width:280px}
.toast.success > .ic{color:var(--c-success)} .toast.error > .ic{color:var(--c-error)}
.toast.warn > .ic{color:var(--c-warn)} .toast.accent > .ic{color:var(--c-accent-text)}
.toast .a-body .t12{margin-top:1px}
/* callout: notă în text (Notion), fără ton de stare */
.callout{display:flex;gap:10px;align-items:flex-start;background:var(--c-inset);border-radius:var(--r-md);padding:14px 16px;font-size:14px;line-height:1.55}
.callout > .ic{margin-top:2px;color:var(--c-fog)}
/* progres */
.progress{height:4px;border-radius:var(--r-pill);background:var(--c-track);overflow:hidden}
.progress > i{display:block;height:100%;background:var(--c-accent);border-radius:inherit;transition:width .2s}
.progress.success > i{background:var(--c-success)}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--c-fog);margin-bottom:6px}
.progress-label .mono{font-size:12px}
/* încărcare */
.spinner{
width:20px;height:20px;border-radius:50%;flex-shrink:0;
border:2.5px solid var(--c-accent-tint);border-top-color:var(--c-accent);
animation:bgn-spin .9s linear infinite;
}
.spinner.lg{width:44px;height:44px;border-width:3px}
.btn .spinner{width:16px;height:16px;border-width:2px;border-color:color-mix(in srgb, currentColor 35%, transparent);border-top-color:currentColor}
@keyframes bgn-spin{to{transform:rotate(360deg)}}
.skel{background:var(--c-track);border-radius:var(--r-sm);animation:bgn-pulse 1.4s ease-in-out infinite}
@keyframes bgn-pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* gol: îndemn, nu constatare („Nimic aici. Adaugă primul document.") */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px;color:var(--c-fog)}
.empty .ic-box{width:48px;height:48px;border-radius:var(--r-md);margin-bottom:4px}
.empty .ic-box .ic{--ic-w:22;width:22px;height:22px}
.empty .e-title{font-size:16px;font-weight:600;color:var(--c-ink)}
.empty .e-text{font-size:14px;max-width:360px}
.empty .btn{margin-top:8px}
.empty.compact{padding:24px 16px;gap:6px} .empty.compact .ic-box{width:36px;height:36px;margin:0} .empty.compact .e-title{font-size:14px}
.empty.row{flex-direction:row;text-align:left;align-items:center;padding:16px 20px;gap:14px} .empty.row .ic-box{margin:0} .empty.row .btn{margin:0 0 0 auto}
/* v2.0: alerta cu acțiuni, bandă pe toată lățimea, toast cu acțiune */
.alert .a-actions,.toast .a-actions{display:flex;gap:8px;margin-top:10px}
.alert.success .a-title,.alert.warn .a-title,.alert.error .a-title{color:inherit}
.alert .btn.sm.outline{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent)}
.alert.inline{padding:0;border:none;background:none;align-items:center;gap:8px;font-size:13px}
.alert.inline > .ic{margin:0}
.banner{display:flex;align-items:center;gap:12px;padding:10px 24px;font-size:14px;line-height:1.4;background:var(--c-accent-tint);color:var(--c-accent-text)}
.banner > .ic{flex-shrink:0} .banner .b-body{flex:1;min-width:0} .banner .b-body b{font-weight:600}
.banner .btn{flex-shrink:0} .banner .alert-dismiss{margin-left:0}
@media (max-width:640px){ .banner{flex-wrap:wrap;padding:10px 16px} .banner .b-body{flex-basis:100%} .banner .btn{margin-left:auto} }
.banner.warn{background:var(--c-warn-bg);color:var(--c-warn-text)} .banner.error{background:var(--c-error-bg);color:var(--c-error-text)}
.banner.success{background:var(--c-success-bg);color:var(--c-success-text)}
.banner.dark{background:var(--c-dark);color:#fff} .banner.dark .btn.outline{color:#fff;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.banner.neutral{background:var(--c-track);color:var(--c-ink)}
.toast{box-shadow:var(--sh-pop);animation:bgn-rise-sm var(--dur-3) var(--ease-out)}
.toast .a-actions{margin-top:8px}
.toast.dark{background:var(--c-ink);color:var(--c-page);border-color:transparent} .toast.dark .t12{color:inherit;opacity:.7}
/* progres: mai gros, cu pași, inel */
.progress.lg{height:8px} .progress.xs{height:2px}
.progress.steps{display:flex;gap:4px;background:none;overflow:visible} .progress.steps > i{flex:1;background:var(--c-track);border-radius:var(--r-pill)} .progress.steps > i.done{background:var(--c-accent)}
.ring{--v:0;position:relative;width:56px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--c-accent) calc(var(--v) * 1%),var(--c-track) 0);display:grid;place-items:center;flex-shrink:0}
.ring::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--c-surface)}
.ring > span{position:relative;font-family:var(--ff-mono);font-size:12px;font-weight:600}
.ring.lg{width:88px} .ring.lg::before{inset:9px} .ring.lg > span{font-size:17px}
.ring.success{background:conic-gradient(var(--c-success) calc(var(--v) * 1%),var(--c-track) 0)}
/* schelete de încărcare: text, titlu, cerc, bloc */
.skel.text{height:12px;border-radius:4px;width:100%} .skel.text.w60{width:60%} .skel.text.w40{width:40%} .skel.text.w25{width:25%}
.skel.title{height:18px;border-radius:5px;width:45%} .skel.circle{border-radius:50%;width:32px;height:32px} .skel.block{height:120px;border-radius:var(--r-md)}
.skel.btn{height:40px;width:120px;border-radius:var(--r-btn)}
.skel-stack{display:flex;flex-direction:column;gap:10px}
/* ---------- 12. STRATURI: modal, sertar, foaie de jos ----------
v2.0 (Bogdan, 24 oct 2026: „un modal cool, ca în Edge-33, nu doar un card alb”): stratul de sub modal
estompează pagina (blur), modalul plutește cu umbră adâncă și intră cu o mică mărire (0,96 → 1) în 200 ms,
iar pe telefon devine foaie de jos. Mecanica: .scrim › .modal[role=dialog] › (.modal-head) .modal-title
.modal-text · (.modal-body) · .modal-actions; .modal-close în colț. Escape și click pe scrim închid. */
@keyframes bgn-fade{from{opacity:0}to{opacity:1}}
@keyframes bgn-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bgn-rise{from{transform:translateY(100%)}to{transform:none}}
@keyframes bgn-rise-sm{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bgn-slide-in{from{transform:translateX(100%)}to{transform:none}}
.scrim{
position:fixed;inset:0;z-index:40;background:var(--c-scrim);
backdrop-filter:blur(var(--blur-scrim));-webkit-backdrop-filter:blur(var(--blur-scrim));
display:flex;align-items:center;justify-content:center;padding:20px;
animation:bgn-fade var(--dur-2) ease-out;
}
.modal{
background:var(--c-surface);border-radius:var(--r-xl);padding:28px;width:100%;max-width:480px;
border:1px solid var(--c-rule);box-shadow:var(--sh-modal);position:relative;
max-height:calc(100dvh - 40px);display:flex;flex-direction:column;
animation:bgn-pop var(--dur-2) var(--ease-out);
}
.modal.sm{max-width:400px} .modal.lg{max-width:720px} .modal.xl{max-width:960px}
.modal-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:4px;padding-right:36px}
.modal-head .ic-box{width:44px;height:44px;border-radius:var(--r-md);margin-top:-2px}
.modal-head .ic-box .ic{--ic-w:20;width:20px;height:20px}
.modal.danger .modal-head .ic-box{background:var(--c-error-bg);color:var(--c-error-text)}
.modal.success .modal-head .ic-box{background:var(--c-success-bg);color:var(--c-success-text)}
.modal.warn .modal-head .ic-box{background:var(--c-warn-bg);color:var(--c-warn-text)}
.modal-title{font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin-bottom:6px;padding-right:32px}
.modal-head .modal-title{padding-right:0;margin-bottom:2px}
.modal-text{font-size:14px;color:var(--c-fog);line-height:20px;letter-spacing:-.005em;margin-bottom:20px}
.modal-head .modal-text{margin-bottom:0}
.modal-body{flex:1;min-height:0;overflow:auto;margin:16px -28px 0;padding:4px 28px}
.modal-body .field:last-child{margin-bottom:0}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px;flex-shrink:0}
.modal-actions.split{justify-content:space-between}
.modal-actions .left{margin-right:auto}
.modal-body + .modal-actions{border-top:1px solid var(--c-rule-soft);margin:0 -28px -28px;padding:16px 28px 20px;background:var(--c-surface);border-radius:0 0 var(--r-xl) var(--r-xl)}
.modal > .modal-close,.modal-head ~ .modal-close{position:absolute;top:16px;right:16px}
.modal.center{text-align:center} .modal.center .modal-head{flex-direction:column;align-items:center;padding-right:0}
.modal.center .modal-actions{justify-content:center} .modal.center .modal-actions .btn{min-width:120px}
.modal.center .modal-head .ic-box{width:52px;height:52px;border-radius:50%;margin:4px 0 6px}
/* modal cu imagine / ilustrație sus */
.modal-media{margin:-28px -28px 20px;aspect-ratio:2/1;background:var(--c-accent-tint);border-radius:var(--r-xl) var(--r-xl) 0 0;display:grid;place-items:center;color:var(--c-accent-text);overflow:hidden}
.modal-media img{width:100%;height:100%;object-fit:cover}
/* sertar: panou din dreapta, pentru detalii sau un formular mai lung, fără să pierzi lista din spate */
.scrim.side{justify-content:flex-end;padding:0}
.drawer{
width:min(480px,100%);height:100dvh;background:var(--c-surface);border-left:1px solid var(--c-rule);
box-shadow:var(--sh-modal);display:flex;flex-direction:column;animation:bgn-slide-in var(--dur-3) var(--ease-out);
}
.drawer.lg{width:min(640px,100%)}
.drawer-head{display:flex;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--c-rule-soft);flex-shrink:0}
.drawer-head .modal-title{margin:0;padding:0;flex:1;font-size:17px}
.drawer-body{flex:1;overflow:auto;padding:24px}
.drawer-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 24px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--c-rule-soft);flex-shrink:0;background:var(--c-surface)}
/* foaia de jos (telefon) */
.sheet{
position:fixed;left:0;right:0;bottom:0;z-index:41;
background:var(--c-surface);border:1px solid var(--c-rule);border-bottom:none;
border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-modal);
padding:10px 16px calc(16px + env(safe-area-inset-bottom));
display:flex;flex-direction:column;gap:12px;max-height:85dvh;overflow:auto;
animation:bgn-rise var(--dur-3) var(--ease-out);
}
.sheet-grip{width:36px;height:4px;border-radius:var(--r-pill);background:var(--c-rule-strong);margin:0 auto 4px}
.sheet-title{font-size:17px;font-weight:600;letter-spacing:-.01em}
/* pe telefon modalul devine foaie de jos, sertarul ocupă tot ecranul */
@media (max-width:640px){
.scrim{align-items:flex-end;padding:0}
.modal,.modal.sm,.modal.lg,.modal.xl{max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:none;max-height:92dvh;padding:24px 20px calc(20px + env(safe-area-inset-bottom));animation:bgn-rise var(--dur-3) var(--ease-out)}
.modal-body{margin:12px -20px 0;padding:4px 20px}
.modal-body + .modal-actions{margin:0 -20px calc(-20px - env(safe-area-inset-bottom));padding:14px 20px calc(16px + env(safe-area-inset-bottom))}
.modal-media{margin:-24px -20px 16px}
.modal-actions{flex-direction:column-reverse} .modal-actions .btn{width:100%}
.modal-actions.split{flex-direction:column-reverse} .modal-actions .left{margin:0}
.scrim.side .drawer{width:100%;border-left:none}
.modal > .modal-close,.modal-head ~ .modal-close{width:44px;height:44px;top:8px;right:8px}
}
/* ---------- 13. ÎNCĂRCARE DE FIȘIERE ---------- */
.upload-zone{
display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
padding:40px 24px;border-radius:var(--r-lg);cursor:pointer;
border:2px dashed color-mix(in srgb, var(--c-accent) 30%, transparent);
background:var(--c-inset);transition:all .2s;
}
.upload-zone:hover,.upload-zone.drag,.upload-zone:focus-within{border-color:var(--c-accent);background:var(--c-accent-ultra)}
.upload-zone .ic-box{width:48px;height:48px;border-radius:var(--r-md)}
.upload-zone .ic-box .ic{--ic-w:22;width:22px;height:22px}
.upload-zone .u-title{font-size:15px;font-weight:600}
.upload-zone .u-meta{font-size:12px;color:var(--c-fog)}
.file-row{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border:1px solid var(--c-rule);border-radius:var(--r-md);background:var(--c-surface)}
.file-row .main{flex:1;min-width:0}
.file-row .f-name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row .f-meta{font-size:12px;color:var(--c-fog)}
/* ---------- 14. AVATAR ---------- */
.avatar{
width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
background:var(--c-accent-tint);color:var(--c-accent-text);font-size:12px;font-weight:600;
}
.avatar.sm{width:24px;height:24px;font-size:11px}
.avatar.lg{width:44px;height:44px;font-size:15px}
.avatar.xl{width:64px;height:64px;font-size:22px}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avatar.square{border-radius:var(--r-sm)}
.avatar.dark{background:var(--c-ink);color:var(--c-page)}
.avatar.neutral{background:var(--c-track);color:var(--c-fog)}
/* v2.0: grup suprapus („și încă 3”) */
.avatar-group{display:inline-flex;align-items:center}
.avatar-group .avatar{box-shadow:0 0 0 2px var(--c-surface);margin-left:-8px}
.avatar-group .avatar:first-child{margin-left:0}
.avatar-group .more{margin-left:8px;font-size:12px;color:var(--c-fog)}
/* persoană: avatar + nume + rol/email */
.person{display:flex;align-items:center;gap:10px;min-width:0}
.person .p-name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person .p-sub{font-size:12px;color:var(--c-fog);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- 15. CARCASA APLICAȚIEI (desktop) ----------
Meniu lateral de 240px pe gri-1 (--c-track, ca bej-1 în Edge) + conținut pe --c-app. Sub 1024px meniul dispare,
iar navigarea trece în .tabbar (mobil). */
.app-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100dvh;background:var(--c-app)}
.sidebar{
background:var(--c-track);border-right:1px solid var(--c-rule-soft);
padding:20px 14px;display:flex;flex-direction:column;gap:2px;
position:sticky;top:0;height:100dvh;overflow-y:auto;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:2px 8px 0;margin-bottom:24px;font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--c-ink);text-decoration:none}
.nav-label{font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-fog);padding:16px 10px 6px}
.nav-item{
display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:var(--r-md);
font-size:14px;font-weight:500;color:var(--c-ink);text-decoration:none;border:none;background:none;text-align:left;
}
.nav-item > .ic{color:var(--c-fog)}
.nav-item:hover{background:var(--c-hover)}
.nav-item.active,.nav-item[aria-current="page"]{background:var(--c-surface);color:var(--c-ink);font-weight:600;box-shadow:0 0 0 1px var(--c-rule)}
.nav-item.active > .ic,.nav-item[aria-current="page"] > .ic{color:var(--c-accent-text)}
.nav-item .count{margin-left:auto;font-family:var(--ff-mono);font-size:11px;color:var(--c-fog);font-weight:500}
.side-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-md);background:var(--c-surface)}
.side-user .u-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .u-mail{font-size:11px;color:var(--c-fog);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-main{padding:36px 44px 64px;min-width:0}
.app-main.narrow{max-width:880px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.page-head .p-sub{font-size:14px;color:var(--c-fog);margin-top:4px}
.page-head .p-actions{display:flex;gap:8px}
@media (max-width:1023.98px){
.app-shell{grid-template-columns:minmax(0,1fr)}
.app-shell > .sidebar{display:none}
.app-main{padding:20px 16px calc(88px + env(safe-area-inset-bottom))}
}
/* ---------- 16. MOBIL ----------
Sub 640px: text de bază 16px (iOS nu mai face zoom pe inputuri), ținte de
atins de cel puțin 44px, nimic sub notch sau sub bara de jos. */
@media (max-width:640px){
body{font-size:16px}
.input,.select,.otp input{font-size:16px}
.btn{min-height:44px}
.btn.sm,.btn.xs{min-height:0}
.list-row{padding:12px 16px}
.card{padding:20px}
.card.xl{padding:24px}
.modal{padding:24px}
}
.m-shell{min-height:100dvh;display:flex;flex-direction:column;background:var(--c-page)}
.m-top{
position:sticky;top:0;z-index:10;background:var(--c-page);
padding:calc(env(safe-area-inset-top) + 10px) 16px 8px;
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.m-title{font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:6px 0 2px}
.m-sub{font-size:14px;color:var(--c-fog)}
.m-body{flex:1;padding:8px 16px calc(88px + env(safe-area-inset-bottom))}
.tabbar{
position:fixed;left:0;right:0;bottom:0;z-index:20;
display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
background:var(--c-surface);border-top:1px solid var(--c-rule);
padding:6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tab-item{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;
border:none;background:none;border-radius:var(--r-md);color:var(--c-fog);font-size:11px;font-weight:500;text-decoration:none;
}
.tab-item > .ic{--ic-w:22;width:22px;height:22px;stroke-width:1.75}
.tab-item.active,.tab-item[aria-current="page"]{color:var(--c-accent-text);font-weight:600}
@media (min-width:1024px){ .app-shell ~ .tabbar,.app-shell .tabbar{display:none} }
/* ---------- 17. SITE (landing, prezentare) ---------- */
.site-nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb, var(--c-page) 92%, transparent);border-bottom:1px solid var(--c-rule-soft)}
.site-nav .inner{max-width:1160px;margin:0 auto;height:68px;padding:0 24px;display:flex;align-items:center;gap:32px}
.site-nav .brand{font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--c-ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.site-nav .links{display:flex;gap:28px;font-size:14px;font-weight:500}
.site-nav .links a{color:var(--c-fog);text-decoration:none;white-space:nowrap}
.site-nav .links a:hover{color:var(--c-ink)}
.site-nav .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.sec{padding:96px 0}
.sec.tonal{background:var(--c-app)}
.sec-head{max-width:680px;margin-bottom:48px}
.sec-head .marker{margin-bottom:16px}
.sec-head .t18{margin-top:16px}
.sec-dark{background:var(--c-dark);color:rgba(255,255,255,.66)}
.sec-dark .t60,.sec-dark .t48,.sec-dark .t36,.sec-dark .t28,.sec-dark .t24,.sec-dark .t20,.sec-dark .t16,.sec-dark strong{color:#fff}
.sec-dark .marker,.sec-dark .eyebrow{color:rgba(255,255,255,.66)}
.sec-dark em{color:var(--c-accent-on-dark)}
.sec-dark a{color:#fff}
@media (max-width:640px){
.sec{padding:64px 0}
.site-nav .links{display:none}
.container,.site-nav .inner{padding:0 16px}
}
/* ---------- 18. DOCUMENT (pagină de citit, ritmul Notion) ---------- */
.doc{max-width:680px;margin:0 auto}
.doc h1{font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:8px 0 8px}
.doc h2{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:36px 0 8px}
.doc h3{font-size:17px;font-weight:600;line-height:1.4;margin:24px 0 4px}
.doc p,.doc li{font-size:16px;line-height:1.65}
.doc p{margin:8px 0}
.doc ul,.doc ol{padding-left:22px;margin:8px 0}
.doc .lead{font-size:18px;color:var(--c-fog)}
.doc .callout{margin:16px 0}
.doc blockquote{margin:16px 0;padding:2px 0 2px 16px;border-left:3px solid var(--c-ink);font-size:16px}
.diff-ins{background:var(--c-success-bg);border-radius:var(--r-xs);padding:0 2px;text-decoration:none}
.diff-del{background:var(--c-error-bg);color:var(--c-fog);border-radius:var(--r-xs);padding:0 2px;text-decoration:line-through}
.doc code,code.inline{font-family:var(--ff-mono);font-size:.88em;background:var(--c-track);padding:1px 6px;border-radius:var(--r-xs)}
.doc pre{font-family:var(--ff-mono);font-size:13px;line-height:1.6;background:var(--c-inset);border:1px solid var(--c-rule-soft);border-radius:var(--r-md);padding:14px 16px;overflow-x:auto;margin:12px 0}
.doc table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0}
.doc th{text-align:left;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--c-rule)}
.doc td{padding:8px 10px;border-bottom:1px solid var(--c-rule-soft);vertical-align:top}
.doc img{border-radius:var(--r-md);margin:12px 0}
.doc hr{border:none;height:1px;background:var(--c-rule-soft);margin:32px 0}
/* cuprins lipicios, lângă un document lung */
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px;align-items:start}
.doc-toc{position:sticky;top:24px;font-size:13px;display:flex;flex-direction:column;gap:2px}
.doc-toc .lb{font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-fog);margin-bottom:6px}
.doc-toc a{color:var(--c-fog);text-decoration:none;padding:5px 10px;border-left:1px solid var(--c-rule-soft);line-height:1.4}
.doc-toc a:hover{color:var(--c-ink)} .doc-toc a.active{color:var(--c-ink);border-left-color:var(--c-ink);font-weight:500}
@media (max-width:1023.98px){ .doc-layout{grid-template-columns:1fr} .doc-toc{display:none} }
/* ---------- 18b. CONȚINUT STRUCTURAT (v2.0) ----------
Blocuri care apăreau în fiecare pagină de referință și se reinventau: întrebări și răspunsuri,
lista cu bife, cronologia, cardul de preț, pașii numerotați. */
/* întrebări și răspunsuri (FAQ) și orice secțiune pliabilă: …
…