/*! COPIE ÎNGHEȚATĂ bgn-33 — nu edita aici; modificările se fac în bgn3375/bgn-33-ds
copiat: 2026-10-25T12:26Z
sursă: bgn3375/bgn-33-ds · v2.2.0 · 2026-10-25 (commit 659be91) */
/*! bgn-33 v2.2.0 · sursă: bgn3375/bgn-33-ds · modificat: 2026-10-25 */
/* ============================================================
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 calificata.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”).
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-press: #9A1FA6; /* butonul principal la hover / apăsat */
--c-accent-2: #7123AB; /* capătul violet al 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: #F5F5F3; /* 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: #F5F5F3; /* gri-0 într-un card: bandă scufundată, callout, zonă de încărcare */
--c-track: #EBEBE7; /* 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(20,20,24,.04); /* hover pe element de meniu, pe buton fantomă */
--c-row-hover: #F5F5F3; /* 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: #121417; /* secțiune închisă (blade): subsol, bandă de încredere */
--c-dark-card: #1E2126; /* card gri-închis pe secțiunea închisă, ca la bono.ro */
/* text — trei nuanțe, ca la Notion; negru neutru, nu bleumarin */
--c-ink: #121417; /* text principal */
--c-fog: #62666D; /* text secundar: subtitluri, etichete, meta */
--c-mist: #9A9EA5; /* terțiar: placeholder, separatori „·" — NU pentru text de citit */
/* borduri — linia de 1px e norma: pe carduri, câmpuri, cardul tonal */
--c-rule: rgba(20,20,24,.10); /* carduri, inputuri */
--c-rule-soft: rgba(20,20,24,.05); /* separatoare între rânduri */
--c-rule-strong: rgba(20,20,24,.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: 14px; /* butoane (v1.2.1: mai blând, Bogdan; nu pilulă) */
--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-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:#C92ED4; --c-on-accent:#FFFFFF; --c-accent-on-dark:#C92ED4;
--c-page:#0F0F11; --c-app:#0F0F11; --c-surface:#18181B; --c-inset:#141416;
--c-track:#232327; --c-hover:rgba(255,255,255,.05); --c-row-hover:#1D1D21; --c-dark:#09090B; --c-dark-card:#18181B;
--c-ink:#ECECEE; --c-fog:#A1A1A8; --c-mist:#65656C;
--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-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:#C92ED4; --c-on-accent:#FFFFFF; --c-accent-on-dark:#C92ED4;
--c-page:#0F0F11; --c-app:#0F0F11; --c-surface:#18181B; --c-inset:#141416;
--c-track:#232327; --c-hover:rgba(255,255,255,.05); --c-row-hover:#1D1D21; --c-dark:#09090B; --c-dark-card:#18181B;
--c-ink:#ECECEE; --c-fog:#A1A1A8; --c-mist:#65656C;
--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{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:14px;height:14px;stroke-width:1.75}
.ic.lg{width:20px;height:20px;stroke-width:1.75}
.ic.xl{width:24px;height:24px;stroke-width:2}
.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; singurul gradient din sistem e pe el
(fucsia → violet, Bogdan, 23 oct 2026: „îmi place gradient și în butoane”). */
.btn{
height:40px;padding:0 18px;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:linear-gradient(135deg,var(--c-accent-deep) 0%,var(--c-accent-2) 100%);color:var(--c-on-accent)}
.btn.primary:hover:where(:not(:disabled)){background:linear-gradient(135deg,var(--c-accent-press) 0%,var(--c-accent-2-deep) 100%)}
.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 24px;font-size:16px}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:calc(var(--r-btn) - 2px)}
.btn.xs{height:26px;padding:0 10px;font-size:12px;border-radius:calc(var(--r-btn) - 3px)}
.btn.full{width:100%}
.btn.icon-only{padding:0;aspect-ratio:1}
.btn > .ic{width:16px;height:16px}
.btn.lg > .ic{width:18px;height:18px}
.btn.sm > .ic,.btn.xs > .ic{width:14px;height:14px}
.btn.icon-only > .ic{width:18px;height:18px}
.btn.sm.icon-only > .ic{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{width:16px;height:16px}
.icon-btn.sm{width:28px;height:28px;border-radius:var(--r-sm)} .icon-btn.sm > .ic{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{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{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{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{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{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{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 (calificata): 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{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{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{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{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{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ă: …
…