/*! bgn-33 v1.0.0 · sursă: bgn3375/bgn-33-ds · modificat: 2026-10-15 */
/* ============================================================
   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ă.

   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:
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400..700&family=JetBrains+Mono:wght@400;500;600&display=swap">
   • 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ă */
  --c-accent:       #1340FF;   /* fill: butonul principal, selecții, progres */
  --c-accent-deep:  #4A26F4;   /* hover / apăsat pe fill */
  --c-accent-tint:  #EEF4FF;   /* fundal pentru chip, element activ din meniu */
  --c-accent-ultra: rgba(19,64,255,.05); /* fundal abia vizibil: hover, inel de focus */
  --c-accent-text:  #1340FF;   /* culoarea principală ca TEXT (link, <em>) */
  --c-on-accent:    #FFFFFF;   /* text pe fill-ul principal */
  --c-accent-on-dark: #8DA4FF; /* culoarea principală ca text pe .sec-dark (Fraunces, link) */

  /* suprafețe */
  --c-page:    #FFFFFF;        /* fundalul unui site (landing, articol) */
  --c-app:     #F8FAFC;        /* fundalul unei aplicații (în spatele cardurilor) */
  --c-surface: #FFFFFF;        /* carduri, inputuri, meniul lateral, modale */
  --c-inset:   #F8FAFC;        /* zonă scufundată într-un card, antet de tabel */
  --c-track:   #F1F5F9;        /* șina unui progres, switch oprit, schelet */
  --c-hover:   rgba(15,23,42,.04); /* hover pe rând, pe element de meniu */
  --c-dark:    #08142E;        /* secțiune închisă: subsol, bandă de încredere */

  /* text — trei nuanțe, ca la Notion */
  --c-ink:  #08142E;           /* text principal */
  --c-fog:  #5E6E85;           /* text secundar: subtitluri, etichete, meta */
  --c-mist: #94A3B8;           /* terțiar: placeholder, separatori „·" — NU pentru text de citit */

  /* borduri */
  --c-rule:        rgba(15,23,42,.10); /* carduri, inputuri */
  --c-rule-soft:   rgba(15,23,42,.05); /* separatoare între rânduri */
  --c-rule-strong: rgba(15,23,42,.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(8,20,46,.45);

  /* formă */
  --r-xs:   4px;    /* checkbox, etichete de categorie */
  --r-sm:   6px;    /* containere de iconiță, schelet */
  --r-md:   10px;   /* inputuri, rânduri, zone scufundate, alerte */
  --r-lg:   16px;   /* carduri */
  --r-xl:   24px;   /* carduri mari (formulare, hero), modale */
  --r-pill: 999px;  /* butoane, badge-uri, chip-uri, taburi */

  /* umbre — sistemul e PLAT; există una singură */
  --sh-card: 0 12px 36px rgba(8,20,46,.10), 0 2px 8px rgba(8,20,46,.04); /* doar .card.lifted */

  /* 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> / .em */
  --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* cifre, sume, ID-uri */

  /* ── 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 <html>.
   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:#355CFF; --c-accent-deep:#2B4FF5; --c-accent-tint:rgba(79,112,255,.18);
    --c-accent-ultra:rgba(79,112,255,.08); --c-accent-text:#8DA4FF; --c-on-accent:#FFFFFF; --c-accent-on-dark:#8DA4FF;
    --c-page:#0B1120; --c-app:#0B1120; --c-surface:#131A2B; --c-inset:#0F1626;
    --c-track:#1E2740; --c-hover:rgba(255,255,255,.05); --c-dark:#060A14;
    --c-ink:#E6EAF2; --c-fog:#9AA6BC; --c-mist:#64718A;
    --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);
  }
}
:root[data-theme="dark"]{
    color-scheme: dark;
    --c-accent:#355CFF; --c-accent-deep:#2B4FF5; --c-accent-tint:rgba(79,112,255,.18);
    --c-accent-ultra:rgba(79,112,255,.08); --c-accent-text:#8DA4FF; --c-on-accent:#FFFFFF; --c-accent-on-dark:#8DA4FF;
    --c-page:#0B1120; --c-app:#0B1120; --c-surface:#131A2B; --c-inset:#0F1626;
    --c-track:#1E2740; --c-hover:rgba(255,255,255,.05); --c-dark:#060A14;
    --c-ink:#E6EAF2; --c-fog:#9AA6BC; --c-mist:#64718A;
    --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);
}

/* ---------- 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.55 var(--ff-ui);
}
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).
   Site-urile folosesc treptele mari (60–36), aplicațiile se opresc la 28.
   Ierarhia, ca la Notion: titlurile mari 700, titlurile de secțiune 600,
   etichete și butoane 500, textul 400; în text, accentul e <strong> (600). */
.t60{font-size:60px;font-weight:700;line-height:1.05;letter-spacing:-.035em}
.t48{font-size:48px;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.t36{font-size:36px;font-weight:700;line-height:1.15;letter-spacing:-.025em}
.t28{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.02em}   /* titlul unei pagini de aplicație */
.t24{font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.t20{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.01em}   /* secțiune în aplicație */
.t18{font-size:18px;font-weight:400;line-height:1.6;color:var(--c-fog)}      /* paragraf de deschidere (lead) */
.t16{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.01em}   /* titlu de card */
.t15{font-size:15px;line-height:1.55}                                       /* text de bază */
.t14{font-size:14px;line-height:1.5}
.t13{font-size:13px;line-height:1.5}
.t12{font-size:12.5px;line-height:1.45;color:var(--c-fog)}                   /* meta */
.t11{font-size:11.5px;line-height:1.4;color:var(--c-fog)}
@media (max-width:640px){
  .t60{font-size:40px} .t48{font-size:34px} .t36{font-size:28px} .t28{font-size:26px}
}
/* 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 — regula calificata, exact așa: DREPT (niciodată italic), grosimea
   textului din jur, +2px, culoarea principală. Pe 1–4 cuvinte dintr-un titlu.
   Pentru accent în text curgător se folosește <strong>, nu <em>. */
em,.em{
  font-family:var(--ff-em);font-style:normal;font-weight:inherit;
  font-size:calc(1em + 2px);color:var(--c-accent-text);
  font-variation-settings:'opsz' 72;
}

/* 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 de deasupra unui titlu (eyebrow): MAJUSCULE, cu punct în culoarea principală */
.marker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:.1em;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. Plat: fără umbre, fără ridicare. */
.btn{
  height:40px;padding:0 20px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-ui);font-size:14.5px;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-pill);outline-offset:3px}
.btn.primary{background:var(--c-accent);color:var(--c-on-accent)}
.btn.primary:hover:where(:not(:disabled)){background:var(--c-accent-deep)}
.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)}
.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 28px;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{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}

/* ---------- 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:12.5px;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:14.5px;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: <label class="check-item"><input type="checkbox"><span>…</span></label> */
.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:14.5px;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}

/* ---------- 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:11.5px;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:12.5px;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:11.5px;color:inherit;opacity:.8}

/* ---------- 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);border-color:transparent}
.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:13.5px;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}

/* ---------- 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:14.5px;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:12.5px;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}
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  text-align:left;padding:10px 20px;background:var(--c-inset);border-bottom:1px solid var(--c-rule);
  font-size:11.5px;font-weight:600;letter-spacing:.06em;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-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}

/* ---------- 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)}
.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:11.5px;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)}

/* ---------- 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:12.5px;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}

/* ---------- 12. STRATURI: modal, foaie de jos ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:var(--c-scrim);display:flex;align-items:center;justify-content:center;padding:20px}
.modal{
  background:var(--c-surface);border-radius:var(--r-xl);padding:28px;width:100%;max-width:440px;
  border:1px solid var(--c-rule);position:relative;max-height:calc(100dvh - 40px);overflow:auto;
}
.modal-title{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;padding-right:32px}
.modal-text{font-size:14px;color:var(--c-fog);margin-bottom:20px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
.modal > .modal-close{position:absolute;top:16px;right:16px}
.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;
  padding:10px 16px calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;max-height:85dvh;overflow:auto;
}
.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:700}

/* ---------- 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{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:12.5px;color:var(--c-fog)}
.file-row{display:flex;align-items:center;gap:12px;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:10.5px}
.avatar.lg{width:44px;height:44px;font-size:15px}

/* ---------- 15. CARCASA APLICAȚIEI (desktop) ----------
   Meniu lateral alb de 240px + 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-surface);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-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-mist);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-accent-tint);color:var(--c-accent-text);font-weight:600}
.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:11.5px;color:var(--c-mist);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-inset)}
.side-user .u-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .u-mail{font-size:11.5px;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:14.5px;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:14.5px;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,.62)}
.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{color:rgba(255,255,255,.62)}
.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}

/* ---------- 19. MODELE DIN PROIECTE ----------
   Componente născute într-un proiect, păstrate ca să nu se reinventeze.
   Robin: .task-card · mini-me: .vcard, .pitem, .netstat */
.task-card{
  display:block;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--c-rule);border-radius:var(--r-md);background:var(--c-surface);padding:10px 12px;
}
.task-card:hover{border-color:var(--c-rule-strong);background:var(--c-hover)}
.task-card .tc-top{display:flex;align-items:flex-start;gap:9px}
.task-card .tc-title{flex:1;font-weight:500;font-size:14px;line-height:1.35}
.task-card .meta-line{padding-left:27px}
.vcard{border:1px solid var(--c-rule);border-radius:var(--r-lg);background:var(--c-surface);padding:20px;display:flex;flex-direction:column;gap:12px}
.vc-meta{font-size:12.5px;color:var(--c-fog);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vc-q{font-size:15px;font-weight:600;line-height:1.4}
.vc-ctx{font-size:14px;color:var(--c-fog);line-height:1.5}
.vc-claim{font-size:17px;font-weight:500;line-height:1.45;border-left:2px solid var(--c-accent);padding:2px 0 2px 12px}
.vc-quote{font-size:13.5px;color:var(--c-fog);line-height:1.5}
.vc-actions{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;margin-top:4px}
.pitem{padding:12px 0;border-bottom:1px solid var(--c-rule-soft)}
.pitem:last-child{border-bottom:none}
.pitem .p-text{font-size:15px;line-height:1.5}
.netstat{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--c-fog)}
.netstat i{width:7px;height:7px;border-radius:50%;background:var(--c-success)}
.netstat.offline i{background:var(--c-warn)}

/* ---------- 20. UTILITARE (doar spațiere și aliniere) ---------- */
.row{display:flex;align-items:center;gap:var(--sp-3)}
.row.wrap{flex-wrap:wrap}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.stack.lg{gap:var(--sp-6)}
.grow{flex:1;min-width:0}