/* =========================================================================
   Pulse Analytics — design system (lime / lemon / banana, clean)
   Fonts: Bricolage Grotesque (titluri) + Hanken Grotesk (text)
   Gradientele se folosesc cu măsură: logo, metrica-erou, grafice, accente.
   ========================================================================= */
:root {
  color-scheme: dark;   /* widgeturile native (date picker, scrollbar) urmează tema — light o comută în blocul [data-theme] */
  --bg:        #050506;
  --bg-2:      #0a0b0c;
  --glass:     rgba(255,255,255,.045);
  --glass-2:   rgba(255,255,255,.07);
  --stroke:    rgba(255,255,255,.09);
  --stroke-2:  rgba(255,255,255,.17);
  --text:      #eef1e6;
  --muted:     #9b9e8d;
  /* ridicat din #686b5b (3.73:1 pe --bg, sub AA) pe 2026-09-01 — același gri-oliv,
     doar mai luminos: 4.88 pe --bg, 4.72 pe --bg-2, 4.66 pe card (surface peste bg).
     (2026-09-27, audit C0925) Calculul de mai sus uita --surface-grad (alb .05→.018 peste card),
     glass-ul și gradientul subsolului: fundalurile REALE sunt #101113–#1c1d1f, unde #7a7e6c
     dădea 4.04–4.52 (sub AA pe subsol, indicii, axe, .rel-lo). Ridicat din nou, tot gri-oliv:
     #8a8e7b = 6.05 pe --bg, 5.22 pe vârful cardului (#18191b), 5.29 pe subsol (#19180f),
     5.01 pe #1c1d1f, 4.56 pe #242526 — și rămâne clar sub --muted (6.42 pe același card). */
  --faint:     #8a8e7b;
  --faint-bg:  rgba(127,127,127,.08);       /* fundalul discret al iconițelor (.demg-ic) — era folosit doar ca fallback, tokenul nu exista (2026-09-01) */
  --accent:    #d4ff4a;   /* lime — accent principal */
  --accent-rgb: 212,255,74;   /* accentul ca RGB → rgba(var(--accent-rgb),a) în shell-ul comun */
  --lemon:     #ffe24a;   /* lemon */
  --banana:    #ffd84a;   /* banana */
  --lime-2:    #b6e84a;
  --ok:        #8fe36b;   /* verde — succes / creștere / live */
  --ok-ink:    var(--accent-ink);   /* cerneala de pe umplerea --ok (butonul „Copiat ✓"): 11,6:1 pe dark (C1895) */
  --warn:      #ff9f43;   /* amber — atenție (rage) */
  --danger:    #ff7d6b;   /* coral — scădere */
  --grad:      linear-gradient(118deg,#d4ff4a 0%,#ffe24a 100%);
  --grad-text: linear-gradient(118deg,#d4ff4a 0%,#ffe24a 100%);   /* textul cu gradient (marca, cifra-erou) — pe light se închide, dar RĂMÂNE gradient */
  --grad-soft: linear-gradient(135deg,rgba(212,255,74,.15),rgba(255,226,74,.08));
  /* ---- tokens pentru TEME (2026-08-10) — valorile de aici = exact literalele pe
     care le înlocuiesc, deci dark-ul rămâne pixel-identic; light le suprascrie ---- */
  --accent-ink:  #14160a;                  /* cerneala de pe umpluturile vii (butoane lime) — închisă în AMBELE teme */
  --accent-fill: #d4ff4a;                  /* umplutura vie de brand — nu se stinge în light (doar --accent, ca text, se închide) */
  --ok-rgb: 143,227,107; --warn-rgb: 255,159,67; --danger-rgb: 255,125,107;
  --veil-rgb: 255,255,255;                 /* „cerneala" overlay-urilor: rgba(var(--veil-rgb),A) — alb pe dark, închis pe light */
  --shk: 1;                                /* multiplicatorul umbrelor negre: rgba(0,0,0,calc(A*var(--shk))) */
  --surface: rgba(13,14,16,.9);            /* fundalul cardului de sticlă */
  --surface-grad: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  --shadow-card: 0 18px 50px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
  /* graficele: linia (2 capete) + umplutura de sub ea. Pe dark sunt lime→lemon
     peste un wash lime; pe light linia se închide la verde-lime, dar washul
     rămâne LIME VIU — pe alb trebuie să lumineze, nu să întunece. */
  --chart-line-a: #d4ff4a; --chart-line-b: #ffe24a; --chart-area-rgb: 212,255,74;
  --heat-rgb: 212,255,74;                  /* rampa grilei de activitate (citită din JS) */
  --cmp-b-a: .09; --cmp-a-a: .10;          /* washurile din Comparație */
  /* familiile de culoare din pagina Traseu (dark = valorile istorice) */
  --trs-ads:#8fe36b; --trs-ads-2:#a5d96a; --trs-alt:#6fd7ff;
  --trs-mail:#b79cff; --trs-gold:#f6c445; --trs-alert:#ff9f9f; --trs-direct:#9aa4b2;
  --chart-2: #8ab6ff; --chart-2-rgb: 138,182,255;   /* seria B (comparație) */
  --chart-3: #78c8ff; --chart-3-rgb: 120,200,255;   /* info / media */
  --chart-3b: #6fd8ff;                     /* Traseu — ramura secundară */
  --chart-4: #ff8a78;                      /* depășire (bara over) */
  --chart-5: #ffb24a;
  /* cerneala TEXTULUI pus pe tenta propriei culori (insigne, alerte, etichete: color X peste rgba(X,.10–.16)).
     Pe dark = exact culoarea de bază (byte-identic); light le închide la tonuri 800 (audit 2026-09-27, C0867). */
  --warn-ink: var(--warn); --warn-3-ink: var(--warn-3); --chart-2-ink: var(--chart-2); --chart-3-ink: var(--chart-3);
  --thumb-edge: transparent;               /* inelul mânerelor de slider (.rps): invizibil pe dark, 3,5:1 pe light (C0869) */
  --pop-crex: rgba(10,12,5,.72);           /* butonul „×" din previzualizarea creativului (.cre-x, C0878) */
  /* seriile per produs din Financiar (coloana „Produse" + graficul pe produs), 2026-09-16. GENERATE de
     _tools/pulse-palette.py (--apply le rescrie): 64 de perechi dark/light din aceeași familie de nuanță, alese
     greedy max-min pe ΔE2000 (minimul dintre teme) dintr-o grilă OKLCH — fiecare culoare e cât mai departe de
     toate cele dinaintea ei, primele 16 obligatoriu vii. Cerut de Liviu: „culorile cât mai diferite posibil…
     pune 32-64". NU le retușa la mână: rulează generatorul. */
  --fp-1: #d4ff4a; --fp-2: #b688fe; --fp-3: #fe773d; --fp-4: #78c7fd; --fp-5: #fd9eb2; --fp-6: #fecf86; --fp-7: #77f1d1; --fp-8: #fac0ff;
  --fp-9: #69ba7c; --fp-10: #f468c7; --fp-11: #87a0f0; --fp-12: #c5c463; --fp-13: #fd736f; --fp-14: #5efb8d; --fp-15: #ffa659; --fp-16: #89b70f;
  --fp-17: #aeaeae; --fp-18: #14bbc0; --fp-19: #fbcbb9; --fp-20: #cdd5fc; --fp-21: #b19ac0; --fp-22: #aae3ed; --fp-23: #b6a27a; --fp-24: #c8978f;
  --fp-25: #c5e1bb; --fp-26: #dedede; --fp-27: #f9c8da; --fp-28: #e3d8ab; --fp-29: #f592fe; --fp-30: #96cbbb; --fp-31: #c1b0fe; --fp-32: #7dadc2;
  --fp-33: #fda293; --fp-34: #c495a7; --fp-35: #93ae89; --fp-36: #b8dcfd; --fp-37: #f39ed3; --fp-38: #d9b795; --fp-39: #c48cd5; --fp-40: #4dd1ef;
  --fp-41: #e78d02; --fp-42: #04df9a; --fp-43: #fbd509; --fp-44: #e1cef8; --fp-45: #ff68a0; --fp-46: #bdc396; --fp-47: #06c193; --fp-48: #eeb318;
  --fp-49: #40acff; --fp-50: #d5b0d0; --fp-51: #66f1ec; --fp-52: #c39b81; --fp-53: #9aa2cb; --fp-54: #afab01; --fp-55: #e1aeb3; --fp-56: #e58491;
  --fp-57: #a6c0e5; --fp-58: #d7e414; --fp-59: #df71ea; --fp-60: #5ddd62; --fp-61: #bbb8e3; --fp-62: #fdcda6; --fp-63: #0cd8dd; --fp-64: #b0eb9c;
  --donut-1: #e3ff5c; --donut-2: #b6e84a; --donut-3: #84c63a; --donut-4: #5f9e2c;
  --donut-5: #cdf07a; --donut-6: #3f7d1f; --donut-7: #a3d44a;
  --r:         18px;
  --r-sm:      12px;
  /* ---- tokens STRUCTURALI (2026-09-14, tema light v4) — fiecare valoare de aici e EXACT
     literalul pe care l-a înlocuit în regula lui (un literal = un token, gotcha #21), deci
     dark-ul rămâne byte-identic; light-ul le redefinește într-un singur bloc, fără petice. ---- */
  --pos:            #d4ff4a;                     /* bani/delte pozitive (era var(--accent)) */
  --accent-fill-rgb: 212,255,74;
  --fill-edge: transparent;                      /* muchia umpluturilor lime: invizibilă pe dark, verde închis pe light */                 /* lime-ul VIU ca triplet — tente de brand în ambele teme */
  /* (2026-10-03, audit C2242/C2293) starea ALEASĂ și hover-ul comenzilor de bază. Pe dark lime-ul pe pista neagră
     are 16,9:1, iar hover-ul trece cerneala de la gri la lime — valorile de aici sunt exact literalele de dinainte
     (dark neatins). Pe light lime-ul pe pista gri avea 1,10:1 (ales = doar nuanță) și hover-ul gri→verde 1,1:1. */
  --on-edge:    #d4ff4a;                         /* conturul pastilei alese (.pp/.tab/.subnav-i/.cv-b/.fnl-seg .on): pe dark = umplutura însăși
                                                    (deci nu se vede), ca structura să fie aceeași în ambele teme — theme-parity */
  --hover-ink:  #d4ff4a;                         /* cerneala la hover (= --accent pe dark) */
  --hover-tint: rgba(212,255,74,.08);            /* tenta de hover a pastilelor (= rgba(--accent-rgb,.08) pe dark) */
  --glow:           1;                           /* multiplicatorul halourilor colorate: rgba(..,calc(A*var(--glow))) */
  --amb:       1;                          /* ambianța (orburi + granulație): multiplicator de opacitate, pe light se domolește, nu se stinge */
  --kico-a:         .42;  --spark-a: .8;         /* opacitatea iconiței de card / a sparkline-ului */
  --rail-bg:        rgba(6,7,9,.96);   --nav-bg: rgba(9,10,12,.9);   --tabbar-bg: rgba(6,7,9,.97);
  --mhead-bg:       linear-gradient(180deg, rgba(8,9,11,.97), rgba(8,9,11,.92));
  --share-head-bg:  linear-gradient(180deg, rgba(18,20,23,.98), rgba(12,14,16,.95));
  --surface-2:      rgba(255,255,255,.045);      /* suprafețele care POARTĂ conținut (rânduri, casete, butoane-fantomă) */
  --well:           rgba(0,0,0,.15);             /* adâncitura panoului Detalii */
  --well-deep:      rgba(0,0,0,.4);              /* caseta de link din modal */
  --code-bg:        rgba(0,0,0,.45);   --code-ink: var(--accent);
  --input-bg:       rgba(8,9,8,.6);    --input-bg-soft: rgba(8,9,8,.4);   --input-line: rgba(255,255,255,.09);
  --select-bg:      rgba(14,16,12,.7); --select-bg-hover: rgba(20,23,16,.8); --option-bg: #14160c;
  --focus-ring:     0 0 0 3px rgba(212,255,74,.18);
  --seg-track:      rgba(14,15,18,.72); --seg-track-solid: rgba(14,15,18,.92);   /* pista pastilelor de perioadă (+ Safari) */
  --ctl-bg:         rgba(14,15,18,.72); --ctl-bg-solid:    rgba(14,15,18,.92);   /* „Alege perioada” (+ Safari) */
  --subnav-bg:      rgba(22,24,18,.6);  --seg-soft: rgba(255,255,255,.045);      /* .subnav/.tabs · .cv-switch */
  --stage-bg:       #0e0f11;            --stage-veil: rgba(12, 14, 9, .45); --stage-veil-2: rgba(12, 14, 9, .55);
  --sticky-bg:      #0c0d0f;  --dot-ring: #050506;  --mark-bg: #14161a;
  --card-solid:     #151618;   /* cardul de sticlă, opac (măsurat pe pagină): coloana lipită din Financiar, C1893 */
  --fav-gd-bg:      #e9ebe4;         /* plăcuța unui favicon cu glifa ÎNCHISĂ (clasa fav-gd din nav.js): deschisă, ca la Google/Slack (C1894) */
  --fav-gl-bg:      var(--glass-2);  /* glifa DESCHISĂ (fav-gl) se vede deja pe plăcuța închisă */
  /* popover-e / tooltip-uri / modale — un token per literal */
  /* (2026-10-03, audit C2298) popover-ele de peste conținut sunt OPACE și pe dark, ca pe light (#fff): la .97-.98
     textul cardurilor de dedesubt se citea printre zilele calendarului. Aceleași culori, doar alfa 1. Rămân
     translucide voit cele de peste redare/heatmap (--pop-skip, --pop-heathint, --pop-settle, --pop-hl, --pop-veil). */
  --pop-ssw:  rgb(12,13,15);  --pop-tip: rgb(14,15,18);  --pop-sheet: #0c0d10;
  --pop-cal:  linear-gradient(180deg, rgb(20,22,16), rgb(13,14,11));
  --pop-modal: rgb(16,17,20); --pop-rp: #0d0f12;  --pop-trs: #12140f;  --pop-cdx: #1a1c17;
  --pop-ptip: rgb(12,16,24);  --ptip-ink: #e9eefb; --pop-skip: rgba(10,11,12,.86);
  --pop-heathint: rgba(10,11,12,.92); --pop-settle: rgba(10,11,12,.9); --pop-ink: #fff;
  --pop-hl:   rgba(14, 18, 10, .95);  --pop-veil: rgba(14, 18, 10, .92);  --hl-pct: #9fae8e;
  --shadow-pop: 0 30px 70px -20px rgba(0,0,0,.85);
  /* bare de date */
  --bar-grad: linear-gradient(118deg,#d4ff4a 0%,#ffe24a 100%);  --bar-fill: #d4ff4a;
  --pjax-grad: linear-gradient(90deg, #d4ff4a, #ffe24a);
  --bar-gold: linear-gradient(90deg, #ffd84a, #ffb84a);  --bar-intl: linear-gradient(90deg, #78c8ff, #9bd3ff);
  /* pastelurile de atenție (dark) — pe light devin tonuri 700 */
  --warn-2: #ff9d7d; --warn-2-rgb: 255,157,125; --warn-3: #ffb262; --warn-4: #ff9a62;
  --warn-5: #ffc454; --warn-5-rgb: 255,196,84;  --warn-6: #ffd166; --warn-7-rgb: 255,196,74;
  --danger-2: #ff9a8c; --danger-2-rgb: 255,138,120; --imp-bg: #2a1512; --lemon-rgb: 255,226,74;
  /* Înregistrări: chips-urile pe tip */
  --rp-page: #8fb7ff; --rp-page-rgb: 143,183,255; --rp-pause: #9aa0a6; --rp-pause-rgb: 154,160,166;
  /* Demografie */
  --geo-hl: #eaffb0; --geo-dot-stroke: rgba(6,7,8,.85); --geo-bg: rgba(6,7,8,.45);
  /* Traseu: cernelurile și fundalurile nodurilor */
  --trs-nl-ads: #a8e884; --trs-mail-ink: #cbb8ff; --trs-mail-rgb: 183,156,255; --trs-ads-ink: #eafbe0; --trs-ads-ink-2: #d9f7c8;
  --trs-gold-ink: #ffd97a; --trs-gold-rgb: 246,196,69; --trs-em: #c3ccd8;
  --trs-br-bg: rgba(9,12,19,.72); --trs-num-hover: rgba(9,12,19,.5);
  --trs-node-bg: linear-gradient(180deg, rgba(26,30,20,.96), rgba(15,17,12,.92));
  --trs-node-mail-bg: linear-gradient(180deg, rgba(30,26,44,.96), rgba(18,15,26,.92));
  --trs-node-gold-bg: linear-gradient(180deg, rgba(44,36,18,.96), rgba(24,19,10,.92));
}

/* =========================================================================
   TEMA LIGHT v4 (2026-09-14) — activă DOAR cu <html data-theme="light">; fără
   atribut = dark-ul de mai sus, NEATINS. Rescrisă de la zero după verdictul
   lui Liviu pe v3 („pare un dark mode inversat"): v3 păstra nuanța lime-verzuie pe
   TOATE neutrele (text, meniu, pagină), punea cifrele mari în accent olive și
   traducea voalurile din dark în pete mai închise — adică gramatica de dark, cu
   luminanța întoarsă.
   v4 e gândită ca light: neutre RECI, aproape fără cromă (nuanță ~220°, ≤3%),
   cerneală aproape neagră pentru text ȘI cifre, verde adânc DOAR pentru acțiuni
   (link-uri, iconițe, stări), lime-ul viu de brand DOAR ca umplutură (CTA, pastile
   active, bare, badge-uri) cu cerneală închisă deasupra. Nimic nu e strat translucid
   colorat; elevația o dau albul opac + hairline + umbră neutră:
     pagină #f5f6f8  →  adâncituri #eaecf0  →  card ALB + hairline + --shadow-card
     →  popover/meniu/tooltip/calendar/modal: ALB + --stroke-2 + --shadow-pop.
   Toate glow-urile colorate se sting prin --glow: 0 (multiplicator în alfa), umbrele
   negre se înmoaie prin --shk. Regulile light rămase (cele care nu pot fi tokeni:
   text-gradient → culoare plină, marca, chevronul din url(), chip-ul de meniu) stau
   într-o singură secțiune, la FINALUL fișierului. Vezi docs/design-system.md § Teme.
   ========================================================================= */
html[data-theme="light"] {
  color-scheme: light;
  --bg:        #f5f6f8;                    /* pagina — gri-neutru rece, stratul cel mai închis dintre suprafețele mari */
  --bg-2:      #eaecf0;                    /* piste / adâncituri (segmente, bare, drawere) */
  --glass:     rgba(16,20,28,.04);         /* DOAR tente de hover / repaus pe chips */
  --glass-2:   rgba(16,20,28,.07);
  --stroke:    rgba(16,20,28,.10);         /* hairline */
  --stroke-2:  rgba(16,20,28,.20);         /* linia tare (popover-e, tfoot, inputuri active) */
  --text:      #14171c;                    /* 17:1 pe alb */
  --muted:     #5a6270;                    /* 6.3:1 pe alb, 5.8 pe pagină */
  --faint:     #667080;                    /* 5.0:1 pe alb, 4.6 pe pagină */
  --faint-bg:  rgba(16,20,28,.06);
  /* accentul ca TEXT/iconiță se închide (lime-ul viu e 1.15:1 pe alb); lime-ul viu rămâne
     în --accent-fill, pe umpluturi cu --accent-ink deasupra. Niciodată pe cifre. */
  --accent:    #45700f;                    /* 5.9:1 pe alb, ≥5:1 pe orice tentă de casetă */
  --accent-rgb: 69,112,15;
  --accent-fill: #c5f235;  --accent-fill-rgb: 197,242,53;  --accent-ink: #14160a;  --fill-edge: rgba(63,98,18,.35);
  --on-edge: #4d7c0f;  --hover-ink: #1f3a05;  --hover-tint: rgba(197,242,53,.38);   /* (C2242/C2293) contur 4,2:1 pe pistă; hover: cerneală 2,05:1 față de gri + tentă de lime viu */
  /* ↑ lime-ul viu, o idee mai dens pe alb (1.30:1 față de 1.15) — cerut de Liviu: „puțin mai vizibil, nu foarte diferit" */
  --grad:      linear-gradient(118deg,#c5f235 0%,#f2dc38 100%);       /* aceeași pereche lime→lemon, la densitatea de mai sus */
  --grad-text: linear-gradient(118deg,#14171c 0%,#3f6212 100%);       /* marca și cifra-erou rămân TEXT CU GRADIENT (ca pe dark), doar în cerneală→verde */
  --amb:       .3;                         /* orburile și granulația rămân (aceeași ambianță), doar domolite — pe hârtie un glow devine tentă */
  --pos:       #15803d;                    /* bani / delte pozitive: verde, nu olive, nu lime */
  --lemon:     #a16207;  --banana: #a16207;  --lime-2: #4d7c0f;  --lemon-rgb: 161,98,7;
  --ok:        #166534;  --warn: #b45309;  --danger: #b91c1c;   /* ok = verde 800: 5.8:1 și pe tenta badge-ului „Live” */
  --ok-ink:    #ffffff;   /* pe verdele 800 cerneala închisă dădea 2,56:1; albul dă 7,1:1 (C1895) */
  --ok-rgb: 22,101,52;   --warn-rgb: 180,83,9;   --danger-rgb: 185,28,28;
  --grad-soft: linear-gradient(135deg,rgba(197,242,53,.32),rgba(197,242,53,.10));   /* o singură familie: lime, fără auriu (verde+auriu = noroi) */
  --surface:   #ffffff;
  --surface-grad: linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0));
  --surface-2: #ffffff;                    /* rândurile, casetele, butoanele-fantomă stau pe ALB, nu pe tentă */
  --veil-rgb:  16,20,28;
  --shk:       .22;
  --glow:      0;                          /* pe alb, un halo colorat e o pată — se stinge complet */
  --kico-a:    1;  --spark-a: 1;
  --shadow-card: 0 18px 50px -28px rgba(16,20,28,.22), inset 0 1px 0 rgba(255,255,255,.03);   /* EXACT geometria din dark, doar alfa/culoarea diferă */
  --shadow-pop:  0 30px 70px -20px rgba(16,20,28,.28);   /* aceeași geometrie ca pe dark (paleta ⌘K o citește din identity/palette.js) */
  /* crom */
  --rail-bg:   rgba(236,238,242,.96);  --nav-bg: rgba(245,246,248,.9);  --tabbar-bg: rgba(255,255,255,.97);
  --mhead-bg:  linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.92));   /* aceeași translucență ca pe dark */
  --share-head-bg: rgba(255,255,255,.96);
  --well:      #f7f8fa;  --well-deep: #f3f4f6;  --code-bg: #f3f4f6;  --code-ink: #14171c;
  --input-bg:  #ffffff;  --input-bg-soft: #ffffff;  --input-line: rgba(16,20,28,.18);
  --select-bg: #ffffff;  --select-bg-hover: #ffffff;  --option-bg: #ffffff;
  --focus-ring: 0 0 0 3px rgba(69,112,15,.30);
  --seg-track: #eaecf0;  --seg-track-solid: #eaecf0;  --ctl-bg: #ffffff;  --ctl-bg-solid: #ffffff;
  --subnav-bg: #eaecf0;  --seg-soft: #eaecf0;
  --stage-bg:  #e9ebef;  --stage-veil: rgba(245,246,248,.6);  --stage-veil-2: rgba(245,246,248,.65);
  --sticky-bg: #ffffff;  --dot-ring: #ffffff;  --mark-bg: #ffffff;  --card-solid: #ffffff;
  --fav-gd-bg: var(--glass-2);  --fav-gl-bg: #3b4048;   /* pe alb invers: glifa închisă se vede, cea ALBĂ primește plăcuța închisă (C2180) */
  --pop-ssw: #ffffff;  --pop-tip: #ffffff;  --pop-sheet: #ffffff;  --pop-cal: #ffffff;
  --pop-modal: #ffffff; --pop-rp: #ffffff;  --pop-trs: #ffffff;    --pop-cdx: #ffffff;
  --pop-ptip: #ffffff;  --ptip-ink: #14171c; --pop-skip: rgba(255,255,255,.92);
  --pop-heathint: #ffffff;  --pop-settle: #ffffff;  --pop-ink: #14171c;
  --pop-hl:   #ffffff;  --pop-veil: #ffffff;  --hl-pct: #5a6270;
  /* grafice: linia se închide (contrast), washul de sub ea rămâne lime VIU (luminozitate) */
  --chart-line-a: #4d7c0f; --chart-line-b: #3f6212; --chart-area-rgb: 163,230,53;
  /* rampa zi×oră + harta Demographics (2026-09-27, audit C2244): #65a30d ajungea la plin doar la 3,09:1 pe
     alb, deci scala se comprima (50% față de 100% = 1,82:1) și vârfurile nu ieșeau în evidență. Tonul
     închis al liniei graficelor (--chart-line-b, #3f6212): plin 7,08:1, 50%/100% = 3,06:1, harta la
     maxim 5,0:1. Aceeași formulă de alfa, se schimbă doar cerneala. */
  --heat-rgb: 63,98,18;
  --cmp-b-a: .16; --cmp-a-a: .30;
  --chart-2: #2563eb; --chart-2-rgb: 37,99,235;
  --chart-3: #0284c7; --chart-3-rgb: 2,132,199;
  --chart-3b: #0369a1;
  --chart-4: #dc2626;
  --chart-5: #d97706;
  --fp-1: #4d7c0f; --fp-2: #611ba7; --fp-3: #822e02; --fp-4: #0e6a9b; --fp-5: #b60152; --fp-6: #9c6d0e; --fp-7: #118b73; --fp-8: #9a5d9f;
  --fp-9: #015e28; --fp-10: #870168; --fp-11: #34468e; --fp-12: #696708; --fp-13: #92081a; --fp-14: #078f42; --fp-15: #915006; --fp-16: #3f5703;
  --fp-17: #484848; --fp-18: #05585b; --fp-19: #966c5c; --fp-20: #6d759b; --fp-21: #584365; --fp-22: #4a818b; --fp-23: #5d4a24; --fp-24: #6a4039;
  --fp-25: #66805d; --fp-26: #696969; --fp-27: #94697a; --fp-28: #82784e; --fp-29: #9628a1; --fp-30: #3c6f61; --fp-31: #6853a0; --fp-32: #255367;
  --fp-33: #ba0d01; --fp-34: #673f4f; --fp-35: #3d5534; --fp-36: #5a7b99; --fp-37: #904476; --fp-38: #7b5c3e; --fp-39: #673477; --fp-40: #0f6f82;
  --fp-41: #6e4106; --fp-42: #107550; --fp-43: #8c7608; --fp-44: #806e94; --fp-45: #8e0049; --fp-46: #63673f; --fp-47: #005b44; --fp-48: #7e5d07;
  --fp-49: #065182; --fp-50: #775774; --fp-51: #108986; --fp-52: #67442d; --fp-53: #444a6e; --fp-54: #525001; --fp-55: #82555a; --fp-56: #812a3b;
  --fp-57: #4e6486; --fp-58: #777f0b; --fp-59: #7c0387; --fp-60: #057918; --fp-61: #615e84; --fp-62: #aa641f; --fp-63: #007275; --fp-64: #52883e;
  /* (2026-10-03, audit C1986) fiecare felie ≥3:1 pe cardul alb (#a3e635 / #84cc16 / #c5e86c aveau 1,4–2:1, iar „Social”
     e de obicei felia cea mai mare) și vecinele distincte: sursele 1-2-3-4 alternează deschis/închis (3,2 · 3,0 · 1,7 · 1,8),
     dispozitivele (1-2-4) au trei trepte (Mobil/Tabletă erau două verzi închise la 1,38:1). Aceeași familie verde. */
  --donut-1: #65a30d; --donut-2: #1a4d2e; --donut-3: #16a34a; --donut-4: #0f766e;
  --donut-5: #5a8f0e; --donut-6: #2e7d32; --donut-7: #365314;
  /* bare de date: lime luminos → verde adânc (fără galben); aur și albastru în tonuri 600-800 */
  --bar-grad: linear-gradient(118deg,#a3e635 0%,#4d7c0f 100%);  --bar-fill: #65a30d;   /* același unghi ca --grad din dark */
  --pjax-grad: linear-gradient(90deg,#65a30d,#3f6212);
  --bar-gold: linear-gradient(90deg,#d97706,#b45309);  --bar-intl: linear-gradient(90deg,#0284c7,#075985);
  /* semantic: pastelurile de dark devin tonuri 700 (AA pe alb) */
  --warn-2: #9a4706; --warn-2-rgb: 154,71,6; --warn-3: #b45309; --warn-4: #b45309;
  --warn-5: #b45309; --warn-5-rgb: 180,83,9; --warn-6: #b45309; --warn-7-rgb: 180,83,9;
  --danger-2: #b91c1c; --danger-2-rgb: 185,28,28; --imp-bg: #fbe9e5;
  /* (audit 2026-09-27, C0867) tonurile 700 sunt AA pe alb pur, dar sub text stă o tentă din aceeași
     culoare (.10–.16), care închide fundalul: „De reținut" 3,4:1, insignele/alertele amber 4,0–4,4:1,
     „B" din Comparație 4,1:1. Cerneala 800 le duce la 5,3–7,0:1, pe card alb și pe pagină. --chart-3
     (#0284c7) avea doar 4,1:1 chiar și pe alb. Culorile de bază (grafice, bare, borduri) rămân neatinse. */
  --warn-ink: #92400e; --warn-3-ink: #92400e; --chart-2-ink: #1e40af; --chart-3-ink: #075985;
  --thumb-edge: rgba(16,20,28,.5);         /* inel neutru de 1px pe mânerul alb: 3,5:1 pe panoul alb (C0869) */
  --pop-crex: rgba(255,255,255,.92);       /* „×"-ul creativului: pastilă albă, ca --pop-skip peste redare (C0878) */
  --rp-page: #2563eb; --rp-page-rgb: 37,99,235; --rp-pause: #64748b; --rp-pause-rgb: 100,116,139;
  --geo-hl: #3f6b0e; --geo-dot-stroke: rgba(255,255,255,.9); --geo-bg: rgba(255,255,255,.55);
  /* Traseu */
  --trs-ads:#3f6212; --trs-ads-2:#65a30d; --trs-alt:#0369a1;
  --trs-mail:#6d28d9; --trs-gold:#b45309; --trs-alert:#b91c1c; --trs-direct:#64748b;
  --trs-nl-ads: #3f6212; --trs-mail-ink: #5b21b6; --trs-mail-rgb: 109,40,217; --trs-ads-ink: #1f5c0a; --trs-ads-ink-2: #1f5c0a;
  --trs-gold-ink: #92400e; --trs-gold-rgb: 180,83,9; --trs-em: #64748b;
  --trs-br-bg: rgba(255,255,255,.9); --trs-num-hover: rgba(255,255,255,.7);
  --trs-node-bg: linear-gradient(180deg,#ffffff,#f7f8fa);
  --trs-node-mail-bg: linear-gradient(180deg,#ffffff,#f7f3ff);
  --trs-node-gold-bg: linear-gradient(180deg,#ffffff,#fff8e6);
}

* { box-sizing: border-box; }
/* fără scroll orizontal (ex. drawer-ul off-canvas). `clip` nu creează container de scroll → sticky rămâne ok */
html, body { overflow-x: clip; max-width: 100%; }
/* Fără „tras în lateral și sare înapoi" pe telefon (Liviu, 2026-10-09: „pare că există scroll orizontal, doar că
   revine"). Pagina în sine nu se derulează (clip-ul de mai sus ține — verificat în simulatorul iOS 26.5), dar pe
   iPhone ORICE zonă cu overflow-x:auto (rânduri de file, tabele, pastile de perioadă) care depășește chiar și cu
   1-2 px se lasă trasă ~50 pt peste capăt și revine — arată ca pagina care fuge. Măsurat: 2 px de depășire =
   50 pt de tragere; cu overscroll-behavior-x:none = 0. Pe toate elementele, intenționat: tabelele lungi se
   derulează în continuare, doar fără tragerea peste capete; proprietatea nu se moștenește și nu face nimic pe
   ce nu se derulează. Ferestrele/listele care cer `overscroll-behavior: contain` au reguli mai specifice.
   NU pe <html>/<body>: pagina nu se derulează lateral oricum, iar acolo regula ar opri pe Mac/Android gestul
   cu două degete pentru „Înapoi". */
body * { overscroll-behavior-x: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text);
  background-color: var(--bg);   /* grain-ul e pe stratul fix #bgGlows (parallax, nu derulează) */
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14.5px; line-height: 1.55; letter-spacing: .1px;
  -webkit-font-smoothing: antialiased; position: relative; min-height: 100vh;
  /* footer lipit de jos chiar și pe pagini scurte (cerut 2026-07-14) — main.wrap crește să umple
     spațiul rămas, footer-ul rămâne mereu ultimul, la fund. .rail/.sidenav/etc. sunt fixed, deci
     nu intră în calculul flex (elementele out-of-flow nu devin flex item). */
  display: flex; flex-direction: column;
}
/* min-width:0 = ANULEAZĂ min-width:auto implicit al unui flex item (altfel un copil care nu
   încape — ex. rândul de pastile de perioadă nedivizat — face main.wrap să crească peste lățimea
   viewportului pe mobil → TOT layout-ul depășea 375px și era tăiat de `overflow-x:clip`). Cu 0,
   main.wrap rămâne la lățimea ecranului, iar copiii wrap-uiesc/scrollează în interiorul lui. */
/* main.wrap = LĂȚIMEA STANDARD a platformei Pulse: exact 1240px pe desktop (inclusiv padding, de
   aceea box-sizing:border-box — altfel ar fi ieșit 1240+60=1300px reale), scade DOAR dacă ecranul
   n-are loc (width:auto se plafonează la 1240 prin max-width, nu coboară sub asta dacă încape).
   Era declarat separat pe `.wrap` dar `main.wrap` (mai specific) îl suprascria cu 100% → paginile
   se întindeau full-bleed pe monitoare mari (cerut/precizat din nou 2026-07-15). Un singur loc. */
main.wrap { flex: 1 0 auto; min-width: 0; width: 1240px; max-width: 100%; box-sizing: border-box; margin: 0 auto; }
.site-footer { flex-shrink: 0; }
/* glow-uri ambientale discrete (lime + banana) — radial-gradient DEJA moale (transparent 72%),
   fără `filter: blur()`: acela era un strat uriaș blurat de 100px, scump de compus la fiecare frame. */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%;
  opacity: calc(.5 * var(--amb)); pointer-events: none;
}
body::before { width: 720px; height: 720px; top: -290px; left: -220px;
  background: radial-gradient(circle, rgba(212,255,74,.26), transparent 72%); }
body::after  { width: 800px; height: 800px; bottom: -380px; right: -260px;
  background: radial-gradient(circle, rgba(255,216,74,.2), transparent 72%); }

h1,h2,h3,.display { font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif; letter-spacing: -.015em; }
a { color: var(--accent); text-decoration: none; }
/* Linkurile DIN TEXT (indicii, note, subsol, rândul de utilizare din Abonament) primesc subliniere
   (2026-09-27, audit C1214): doar culoarea nu le deosebea de textul gri din jur — pe light,
   --accent #45700f și --muted #5a6270 au aproape aceeași luminanță (1,05:1), WCAG 1.4.1. Sublinierea
   e în currentColor atenuat, deci linkurile gri voite (.page-head .sub, .ft-meta) rămân gri.
   Doar <a> fără clasă (+ .mono din subtitlu): butoanele-link, pastilele și .lnk (deja subliniat) nu se ating. */
:is(.muted, .sub, .ehint, .p-hint, .acc-hint, .slot-rule, .cf-rev, .blg-usage, .ft-meta) :is(a:not([class]), a.mono) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
/* .86em e corect în text de 13–14px, dar peste un părinte mic (11.5px: .p-hint,
   .feed .fm) dădea 9.89px — ilizibil pe telefon (audit 2026-08-05). Podeaua de
   10px se activează DOAR sub ~11.6px părinte; peste, nimic nu se schimbă. */
code,.mono { font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size: max(10px, .86em); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.num   { font-family: "Bricolage Grotesque", sans-serif; font-feature-settings: "tnum"; }

/* ---------- glass primitive ----------
   FĂRĂ backdrop-filter: era aplicat pe FIECARE panou/card/kpi (zeci pe o pagină) și forța
   compozitorul (Chrome/Firefox/Safari deopotrivă) să re-eșantioneze + blureze fundalul la
   FIECARE frame de scroll/animație → lag de secunde, mai ales la animația de intrare care mișcă
   opacity/transform pe toate simultan (raportat 2026-07-06: „merge extrem de greu, pe orice browser").
   Fundal semi-opac peste near-black = același aspect de „dark glass", dar ieftin (zero blur live). */
.glass, .panel, .kpi, .card {
  background: var(--surface-grad), var(--surface);
  border: 1px solid var(--stroke); border-radius: var(--r);
  box-shadow: var(--shadow-card);
}

/* ---------- shell unificat: rail platforme + submeniu vertical ---------- */
:root { --rail-w: 64px; --snav-w: 270px; }
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); z-index: 102;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 0 max(14px, env(safe-area-inset-bottom));
  background: var(--rail-bg); border-right: 1px solid var(--stroke);
}
.rail-home { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; color: var(--faint); border: 1px solid transparent; transition: .15s; margin-bottom: 4px; }
.rail-home .ico { width: 20px; height: 20px; }
@media (hover: hover) { .rail-home:hover { color: var(--text); background: var(--glass); border-color: var(--stroke); } }
.rail-plats { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.rail-p {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; color: var(--faint); border: 1px solid transparent; transition: .15s;
}
.rail-p .ico { width: 19px; height: 19px; }
@media (hover: hover) { .rail-p:hover { color: var(--hover-ink); background: var(--glass); border-color: var(--stroke); } }
.rail-p.on { color: var(--accent); background: var(--glass-2); border-color: rgba(var(--accent-rgb),.45);
  box-shadow: 0 0 18px -6px rgba(var(--accent-rgb),calc(.55*var(--glow))); }
/* buton de „Aplicație" fără acces (cerut 2026-07-14) — rămâne vizibil dar estompat; click → modal
   „Contul tău nu are acces la…", NU navighează (vezi data-app-locked în modal.js) */
.rail-p.locked, .sheet-p.locked { opacity: .38; cursor: pointer; }
@media (hover: hover) { .rail-p.locked:hover { opacity: .7; color: var(--faint); background: none; border-color: transparent; } }
.rail-logout { margin-top: auto; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; color: var(--faint); transition: .15s; }
.rail-logout .ico { width: 18px; height: 18px; }
@media (hover: hover) { .rail-logout:hover { color: var(--danger); background: rgba(var(--danger-rgb),.1); } }
/* „Ajutor" (2026-09-14): aceeași cutie ca .rail-logout, lipit deasupra lui. Preia `margin-top:auto`,
   deci ieșirea rămâne exact unde era; activ (modal deschis) = aceeași stare ca .rail-p.on. */
.rail-help { margin-top: auto; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; color: var(--faint); border: 1px solid transparent; transition: .15s; }
.rail-help .ico { width: 18px; height: 18px; }
.rail-help + .rail-logout { margin-top: 0; }
@media (hover: hover) { .rail-help:hover { color: var(--accent); background: var(--glass); border-color: var(--stroke); } }
.rail-help[aria-expanded="true"] { color: var(--accent); background: var(--glass-2); border-color: rgba(var(--accent-rgb),.45);
  box-shadow: 0 0 18px -6px rgba(var(--accent-rgb),calc(.55*var(--glow))); }
.rail-help:focus-visible { outline: 2px solid transparent; outline-offset: -2px; box-shadow: var(--focus-ring); }   /* conturul transparent apare în culori forțate, unde box-shadow e scos (C1278) */

.sidenav {
  --snav-pad: 12px;   /* padding orizontal — scade când meniul e restrâns; .sn-toggle îl anulează cu margini negative */
  position: fixed; left: var(--rail-w); top: 0; bottom: 0; width: var(--snav-w); z-index: 101;
  display: flex; flex-direction: column; gap: 12px; padding: 16px var(--snav-pad); overflow-y: auto;
  background: var(--nav-bg); border-right: 1px solid var(--stroke);
}
.sn-brand { padding: 2px 6px 14px; border-bottom: 1px solid var(--stroke); }

/* header mobil + tab bar jos + sheet — ascunse pe desktop */
.m-head, .tabbar, .sheet, .sheet-backdrop { display: none; }

body { padding-left: calc(var(--rail-w) + var(--snav-w)); }
/* Raportul CLIENTULUI (share) are sidenav-ul lui simplificat (fără rail) → offset doar
   cu lățimea sidenav-ului; pe mobil (≤1023px) offset-ul dispare, meniul intră în sheet. */
body.share { padding-left: var(--snav-w); }
.sidenav-share { left: 0; }
.sidenav-share .share-badge { display: flex; flex-wrap: wrap; row-gap: 5px; white-space: normal; border-radius: 14px; padding: 9px 13px; }
.sidenav-share .share-badge .sb-l { flex: 1 1 auto; }
.sidenav-share .share-badge .sb-p { flex: 1 0 100%; max-width: 100%; padding-left: 0; border-left: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* calea completă e în subtitlul paginii + title */
/* pe desktop bara de sus a raportului dispare — logo + badge trăiesc în sidenav */
@media (min-width: 1024px) { body.share .share-head { display: none; } }
.share-burger { display: none; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 30px; height: 30px; filter: drop-shadow(0 0 9px rgba(var(--accent-rgb),calc(.55*var(--glow)))); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; letter-spacing: 0;
}
.brand-by { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.brand-by .by { font-size: 10.5px; color: var(--faint); letter-spacing: .3px; }
.boostetic-logo { height: 10px; width: auto; opacity: .82; }
.boostetic-fallback { font-size: 12px; font-weight: 600; color: var(--text); opacity: .8; }

/* comutator rapid de proiecte (site-uri) — în sidenav pe desktop, în m-head pe mobil */
.site-switch { display: inline-flex; align-items: center; position: relative; }
.sidenav .site-switch { display: block; }
.ssw-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  min-width: 0; width: 232px; background: rgba(var(--veil-rgb),.03); border: 1px solid var(--stroke);
  border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: .15s; }
.sidenav .ssw-btn { width: 100%; }
.ssw-btn .ico { width: 15px; height: 15px; color: var(--faint); flex-shrink: 0; }
@media (hover: hover) { .ssw-btn:hover { border-color: rgba(var(--accent-rgb),.45); background: var(--glass-2); } }
.ssw-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
/* săgeata dropdown-ului — SVG clar, în accentul site-ului (era un „▾" text de 10px, invizibil) */
.ico.ssw-chev { width: 16px; height: 16px; color: var(--accent); transition: transform .15s; flex-shrink: 0; }
.ssw-btn.open .ico.ssw-chev { transform: rotate(180deg); }
/* [hidden] TREBUIE redeclarat aici: `display:flex` de mai jos ar învinge altfel regula UA
   `[hidden]{display:none}` (specificitate mai mare) și popover-ul ar rămâne mereu vizibil */
.ssw-pop[hidden] { display: none; }
.ssw-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: min(620px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 90px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pop-ssw); border: 1px solid var(--stroke-2); border-radius: 14px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,calc(.85*var(--shk))), 0 0 0 1px rgba(var(--accent-rgb),.05); }
/* în sidenav: popover-ul se deschide LÂNGĂ coloană (fixed, la dreapta ei), nu în ea.
   Cât e deschisă, lista e mutată de nav.js pe <body> (`.ssw-float` + `.ssw-at-side`/`.ssw-at-top`):
   în coloană ar fi la mâna oricărui strămoș care devine containing block pentru `fixed` (transform,
   filter, o animație rămasă în efect) — atunci overflow-ul coloanei o taie și lista „nu se mai
   deschide”. Pățit de trei ori; vezi nota mare din nav.js. Selectorul cu părinte rămâne doar ca
   poziționare de rezervă, pentru o listă care n-a putut fi mutată. */
.ssw-pop.ssw-float { position: fixed; z-index: 110; }   /* peste rail/coloană (101-102) și antetul mobil (100); sub tabbar (120), sheet, .sn-tip și modale */
.sidenav .ssw-pop, .ssw-pop.ssw-at-side { position: fixed; left: calc(var(--rail-w) + var(--snav-w) + 10px); top: 16px;
  width: min(620px, calc(100vw - var(--rail-w) - var(--snav-w) - 32px)); }
/* Antetul dropdown-ului (2026-09-09): titlu · căutare · „7 zile". Căutarea filtrează pe loc
   (nav.js, data-q pe fiecare rând) — la 5-15 site-uri per client, tastatul bate derulatul. */
.ssw-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 14px 10px 16px; font-family: "Bricolage Grotesque"; font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--stroke); }
.ssw-per { font-family: "Hanken Grotesk"; font-size: 11px; font-weight: 400; color: var(--faint); white-space: nowrap; }
.ssw-q { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 9px;
  background: rgba(var(--veil-rgb),.04); border: 1px solid var(--stroke); transition: border-color .15s; }
.ssw-q:focus-within { border-color: rgba(var(--accent-rgb),.5); }
.ssw-q .ico { width: 14px; height: 14px; color: var(--faint); flex-shrink: 0; }
.ssw-q input { flex: 1; min-width: 0; background: none; border: none; padding: 0; margin: 0;
  font-family: "Hanken Grotesk", sans-serif; font-weight: 400; font-size: 13px; color: var(--text); }
.ssw-q input:focus { outline: none; box-shadow: none; }
.ssw-q input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ssw-list { overflow-y: auto; padding: 6px; flex: 1; }
/* Antetele de client stau LIPITE sus cât derulezi grupul lor (sticky în lista derulabilă) —
   așa se vede mereu al cui e site-ul de sub cursor (cerut: „trebuie să stau să caut unde
   începe un client și unde se termină celălalt"). Fundal opac = același ca al popover-ului. */
/* top NEGATIV = padding-ul de sus al .ssw-list (6px): dreptunghiul în care se lipește un element sticky
   e zona derulabilă MICȘORATĂ cu padding-ul containerului, deci cu `top:0` antetul se oprea la 6px sub
   marginea listei și prin fâșia aia se vedeau rândurile derulate (raportat de Liviu, 2026-09-14). */
.ssw-g { position: sticky; top: -6px; z-index: 2; display: flex; align-items: center; gap: 7px;
  margin: 0 -6px; padding: 10px 16px 5px; background: var(--pop-ssw);
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ssw-i + .ssw-g { margin-top: 4px; border-top: 1px solid var(--stroke); }
.ssw-g .ico { width: 11px; height: 11px; color: var(--accent); flex-shrink: 0; }
.ssw-gl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* un client cu nume lung se scurtează, nu rupe antetul pe două rânduri */
/* Fără opacity (audit 2026-09-27, C0876): .85 peste --faint cobora „ale tale" și numărul de site-uri
   al clientului (10px) la 3,7:1 în AMBELE teme; --faint singur dă 4,66:1 (dark) și 5,0:1 (light). */
.ssw-gn { margin-left: auto; flex-shrink: 0; font-weight: 500; letter-spacing: 0; }
.ssw-i[hidden], .ssw-g[hidden], .ssw-none[hidden] { display: none; }
/* Rândul unui proiect = GRILĂ cu patru zone: iconiță · nume · campanie · cifre. Numele are
   prioritate la spațiu (auto), campania ia ce rămâne (1fr) și se scurtează prima. */
.ssw-i, .ssw-total { display: grid; grid-template-columns: 20px minmax(0, auto) minmax(auto, 1fr) auto;   /* 3: auto = podeaua din .ssw-c (audit 175) */
  grid-template-areas: "fav name camp st"; column-gap: 9px; align-items: center; }
.ssw-i { padding: 7px 10px; border-radius: 9px; color: var(--text); font-size: 13px; transition: .12s; }
@media (hover: hover) { .ssw-i:hover { background: var(--glass-2); } }
.ssw-i.on { background: rgba(var(--accent-rgb),.09); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.25); }
.ssw-n { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ssw-c { grid-area: camp; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-style: normal; font-weight: 400; font-size: 11px; color: var(--faint); }
.ssw-c .ssw-cl { color: var(--muted); }
/* Cifrele: iconiță + număr, fără cuvinte („vizualizări"/„vizitatori"/„profit" stau în title).
   Lățimi fixe, ca pe toate rândurile cifrele să înceapă în același punct. */
.ssw-st { grid-area: st; display: flex; align-items: center; gap: 8px; color: var(--faint); white-space: nowrap; }
.ssw-st .sm { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; flex: 0 0 auto; width: 58px; }
.ssw-st .sm-money { width: 100px; }
.ssw-st .ico { width: 12px; height: 12px; color: var(--faint); flex-shrink: 0; }
.ssw-st b { color: var(--text); font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ssw-none { padding: 18px 12px; text-align: center; color: var(--faint); font-size: 12.5px; }
.dot-off { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--veil-rgb),.12); display: inline-block; flex-shrink: 0; }
.ssw-total { padding: 10px 16px; color: var(--text); font-size: 13px; border-top: 1px solid var(--stroke);
  background: rgba(var(--accent-rgb),.04); transition: .12s; }
@media (hover: hover) { .ssw-total:hover { background: rgba(var(--accent-rgb),.1); } }
/* Iconița site-ului: favicon-ul lui (lib/favicon.php) sau litera din nume, colorată stabil din
   numele lui (--fh = nuanță). Punctul verde „activ acum" stă în colț, peste iconiță. */
.fav { position: relative; grid-area: fav; width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--stroke); }
.fav img { width: 14px; height: 14px; object-fit: contain; display: block; border-radius: 3px; }
/* Favicon fără contrast pe plăcuța lui (2026-09-27, audit C1894/C2180): nav.js citește tonul glifei după
   încărcare și pune fav-gd (glifă închisă, ex. GitHub #24292E) sau fav-gl (glifă albă pe transparent).
   Tokenurile dau plăcuța potrivită temei curente; restul favicon-urilor nu primesc clasă și nu se schimbă. */
.fav.fav-gd { background: var(--fav-gd-bg); }
.fav.fav-gl { background: var(--fav-gl-bg); }
.fav.fav-txt { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 10.5px; line-height: 1;
  background: hsl(var(--fh) 42% 20%); border-color: hsl(var(--fh) 40% 30%); color: hsl(var(--fh) 85% 76%); }
.fav .dot-live { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; box-shadow: 0 0 0 2px var(--pop-ssw); }
.fav-all { color: var(--accent); }
.fav-all .ico { width: 12px; height: 12px; }
.nav { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.nav a { display: flex; align-items: center; gap: 9px; color: var(--muted); font-weight: 500; font-size: 13px; padding: 9px 11px; border-radius: 10px; transition: .15s; white-space: nowrap; }
@media (hover: hover) { .nav a:hover { color: var(--hover-ink); background: var(--glass); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.22); } }
@media (hover: hover) { .nav a:hover .ico { color: var(--hover-ink); } }
.nav a.on { color: var(--text); background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--stroke); }

/* secțiunea „site curent" din sidenav — meniul vertical al site-ului (Analytics/Heatmaps/…),
   mutat aici din vechiul .subnav orizontal; pjax (nav.js) îi înlocuiește conținutul la navigare */
.sn-site { border-top: 1px solid var(--stroke); padding-top: 12px; }
.sn-site[hidden], .sheet-site[hidden] { display: none; }
/* Spațiul de dedesubt e MARGIN, nu padding (2026-08-06). Cu `padding-bottom`, `overflow:hidden`
   taie la marginea EXTERIOARĂ a casetei, deci în cei 8px de padding se vedea jumătatea de sus a
   rândului al treilea — un rând de text retezat pe orizontală, sub „…"-ul pus de line-clamp.
   Marginea nu face parte din casetă, deci tăierea cade exact la finalul rândului 2. */
.sn-sec { padding: 0 6px; margin-bottom: 8px; font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); overflow: hidden;
  /* Numele site-ului: pe un singur rând se pierdea peste jumătate din el (57% ascuns la 1024px, cu
     nume lungi de campanie). Rămâne același eyebrow uppercase, dar are voie 2 rânduri înainte de
     „…”. Meniul de dedesubt curge normal, nimic nu depinde de înălțimea lui.
     `html.snav-min .sn-sec{display:none}` are specificitate mai mare (element+2 clase), deci
     meniul restrâns continuă să-l ascundă complet. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }

/* Despărțitor de GRUP în meniu (Rezultate | Vizitatori | Optimizare).
   A fost întâi antet cu text (2026-08-06, dimineața); tot atunci, după ce l-a văzut pe ecran,
   Liviu a cerut să dispară: patru anteturi plus numele site-ului repetat costau ~155px de
   coloană și băgau meniul în scroll pe laptop. O linie grupează la fel de bine pe 1px — și e
   fix ce făcea deja meniul restrâns, deci acum cele două moduri arată la fel. */
.sn-sep { height: 0; margin: 7px 10px; border-top: 1px solid var(--stroke); }

/* DENSITATE PE ECRANE SCUNDE — ca meniul să încapă fără scroll (cerut 2026-08-06).
   Un cont cu toate paginile are 14 iteme; la 37px bucata plus logo, comutator, indicator și
   butonul de restrângere, coloana trece de 870px. Pe un laptop cu ~870-900px de viewport
   intra în scroll, iar un meniu care se derulează e greu de scanat — exact ce voiam să
   reparăm prin grupare. Strâmtăm DOAR unde e nevoie: pe ecranele înalte densitatea rămâne
   cea gândită. Pragul (900px) e ales pe cazul cel mai încărcat, nu pe cel din poză. */
@media (min-width: 1024px) and (max-height: 1040px) {   /* 2026-10-10 (audit 173): era 900 — pe laptop „Temă” și „Restrânge” ieșeau sub ecran */
  .sidenav { gap: 9px; padding-top: 12px; }
  .nav { gap: 1px; }
  .nav a { padding: 7px 11px; }
  .sn-site { padding-top: 9px; }
  .sn-sep { margin: 5px 10px; }
  .sidenav .quota-mini, .sidenav .storage-mini { margin-top: 6px; padding: 7px 11px; }
}
/* a doua treaptă, pentru ecranele de laptop cele mai joase */
@media (min-width: 1024px) and (max-height: 900px) {
  .sidenav { gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .nav a { padding: 5px 11px; }
  html.snav-min .nav a { padding: 7px 0; }
  .sn-brand { padding-bottom: 10px; }
  .sn-sep { margin: 3px 10px; }
  .sidenav .nav-acct { padding: 4px 0 2px; }
  .sn-theme { padding-top: 6px; padding-bottom: 6px; }
  .sn-toggle { padding-top: 8px; }
  .sidenav .quota-mini, .sidenav .storage-mini { margin-top: 2px; padding: 6px 11px; }
}

/* ---------- meniu lateral restrâns (doar icoane) — cerut 2026-07-28 ----------
   Butonul din josul coloanei comută între lat (270px, cu etichete) și restrâns (72px, doar icoane),
   ca să lase mai mult spațiu conținutului. Starea se ține în localStorage („pulse_snav") și se
   aplică pe <html> SINCRON, în <head> (layout_head), înainte de primul paint — altfel meniul ar
   clipi lat la fiecare încărcare. Nu recalculăm offset-uri nicăieri: TOTUL (padding-ul lui body,
   popover-ul de proiecte) derivă deja din --snav-w, deci e de ajuns să redefinim variabila.
   Restrângerea e strict desktop (≥1024px): sub breakpoint meniul e oricum sheet-ul mobil, iar
   `.nav-l` de acolo trebuie să-și păstreze etichetele chiar dacă flag-ul a rămas setat pe desktop. */
.sn-toggle {
  margin: auto calc(-1 * var(--snav-pad)) 0; padding: 12px var(--snav-pad) calc(2px + env(safe-area-inset-bottom));
  align-self: stretch; display: flex; align-items: center; gap: 9px;
  border: 0; border-top: 1px solid var(--stroke); background: none; color: var(--faint);
  font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: color .15s;
}
.sn-toggle .ico { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .24s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .sn-toggle:hover { color: var(--hover-ink); } }

/* comutatorul de temă (dark/light) — aceeași gramatică vizuală ca .sn-toggle;
   morph-ul lună↔soare + dezvăluirea circulară vin din identity/theme.js */
.sn-theme {
  /* margin-top:auto aici + anulat pe .sn-toggle de după el → perechea stă LIPITĂ
     de fundul coloanei și pe meniuri scurte (altfel Temă plutea la mijloc) */
  margin: auto calc(-1 * var(--snav-pad)) 0; padding: 9px var(--snav-pad);
  align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--stroke); color: var(--faint);
  font-size: 12.5px; font-weight: 500;
}
.sn-theme + .sn-toggle { margin-top: 0; }
/* comutatorul de limbă (2026-10-15, „Pulse în lume”): rândul de sub temă, aceeași gramatică; apare doar cu engleza pornită */
.sn-theme.sn-lang { margin-top: 0; border-top: 0; padding-top: 0; }
.lang-sw { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--stroke); border-radius: 999px; }
.lang-o { border: 0; background: none; color: var(--faint); font: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; cursor: pointer; }
.lang-o.on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.lang-o:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) { .lang-o:not(.on):hover { color: var(--text); } }
.sheet-items .sn-theme { margin: 0; border-top: 0; padding: 11px 12px; border-radius: 11px;
  font-size: 15px; color: var(--muted); }
/* „Semnalează o problemă" în meniul raportului partajat — gramatica lui .sn-theme/.sn-toggle */
.sn-help {
  margin: auto calc(-1 * var(--snav-pad)) 0; padding: 9px var(--snav-pad);
  align-self: stretch; display: flex; align-items: center; gap: 9px;
  border: 0; border-top: 1px solid var(--stroke); background: none; color: var(--faint);
  font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: inherit; text-align: left; cursor: pointer; transition: color .15s;
}
.sn-help .ico { width: 16px; height: 16px; flex-shrink: 0; }
@media (hover: hover) { .sn-help:hover { color: var(--accent); } }
/* focusul de tastatură: doar schimbarea culorii (faint→accent) dădea ~1,1:1 pe light și nimic în culori
   forțate → contur real, pe interior (coloana taie ce iese în afară) (2026-09-27, audit C1278) */
.sn-help:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--accent); }
.sidenav-share .sn-help + .sn-theme { margin-top: 0; }

@media (min-width: 1024px) {
  html.snav-min { --snav-w: 72px; }
  /* tranziția lățimii coloanei + a offset-ului conținutului; heatmap-ul (canvas) se re-așază
     la finalul ei, prin `resize` sintetic din nav.js */
  .sidenav { transition: width .24s cubic-bezier(.22,1,.36,1); }
  body { transition: padding-left .24s cubic-bezier(.22,1,.36,1); }

  /* NU `align-items:center` pe coloană: ar strânge fiecare bloc la lățimea icoanei, iar itemii de
     meniu ar rămâne ținte de click de 19px, cu pastila „activ" lipită pe icon. Blocurile rămân
     întinse pe toată lățimea, iar conținutul din ele se centrează. */
  html.snav-min .sidenav { --snav-pad: 8px; overflow-x: hidden; }
  html.snav-min .sn-brand { display: flex; justify-content: center; padding: 2px 0 12px; }
  html.snav-min .brand { gap: 0; }
  html.snav-min .site-switch { display: flex; justify-content: center; }
  html.snav-min .sn-sec, html.snav-min .ssw-chev { display: none; }
  /* Etichetele (logo, meniu, proiectul curent, Ajutor) sunt singurul NUME al linkurilor/butoanelor:
     cu display:none dispăreau și pentru cititoarele de ecran și comanda vocală („link” fără nume).
     Restrâns = ascunse DOAR vizual (același tipar ca .fb-sr); cutiile rămân identice, iar tooltipul
     din nav.js citește în continuare textul lor (2026-09-27, audit C1245). */
  html.snav-min .brand-text, html.snav-min .nav-l, html.snav-min .ssw-cur {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; flex: none; min-width: 0; }

  /* `.sn-sep` n-are nevoie de nicio regulă aici: e deja o linie, identică lat și restrâns. */

  /* comutatorul de proiecte → doar pastila cu icoana (popover-ul se deschide tot lângă coloană) */
  html.snav-min .ssw-btn { width: 44px; padding: 0; justify-content: center; }
  html.snav-min .ssw-btn .ico { width: 17px; height: 17px; color: var(--accent); }

  html.snav-min .nav a { position: relative; justify-content: center; gap: 0; padding: 10px 0; }
  html.snav-min .nav a .ico { width: 19px; height: 19px; }
  /* badge-ul „nou" n-are loc pentru text → devine un punct pe colțul icoanei */
  html.snav-min .nav-new { position: absolute; top: 7px; right: 12px; width: 7px; height: 7px;
    margin: 0; padding: 0; border-radius: 50%; overflow: hidden; text-indent: -99px; }

  /* raportul clientului: badge-ul „Raport partajat" se reduce la lacăt (calea rămâne în subtitlul paginii) */
  html.snav-min .sidenav-share .share-badge { width: 44px; margin: 0 auto; padding: 10px 0; justify-content: center; }
  html.snav-min .sidenav-share .share-badge .sb-l, html.snav-min .sidenav-share .share-badge .sb-p { display: none; }

  html.snav-min .sn-toggle { justify-content: center; }
  html.snav-min .sn-toggle .ico { transform: rotate(-90deg); }
  html.snav-min .sn-theme { justify-content: center; padding-left: 0; padding-right: 0; }
  html.snav-min .sn-theme .nav-l { display: none; }
  html.snav-min .sn-lang { display: none; }   /* meniul restrâns: doar icoane — limba se schimbă din meniul întreg */
  html.snav-min .sn-help { justify-content: center; padding-left: 0; padding-right: 0; }
  /* .sn-help .nav-l: ascunsă doar vizual de regula comună de mai sus (numele butonului, C1245) */
}
@media (prefers-reduced-motion: reduce) {
  .sidenav, body, .sn-toggle .ico { transition: none; }
}

/* eticheta care apare la hover peste o icoană, cât timp meniul e restrâns. Trăiește pe <body>
   (nu în .sidenav): coloana are overflow-y:auto, deci ar fi tăiat orice tooltip din interior. */
.sn-tip {
  position: fixed; z-index: 160; pointer-events: none; white-space: nowrap;
  padding: 6px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--pop-tip); border: 1px solid var(--stroke-2);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,calc(.9*var(--shk)));
  /* `top` primit din JS = MIJLOCUL icoanei → translateY(-50%) o centrează pe verticală */
  transform: translateY(-50%); opacity: 0; transition: opacity .12s;
}
.sn-tip.on { opacity: 1; }

/* ---------- pagina Financiar ---------- */
.fin-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }
.fin-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--muted);
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--glass); white-space: nowrap; }
.fin-badge.ok { color: var(--accent); border-color: rgba(var(--accent-rgb),.35); background: rgba(var(--accent-rgb),.06); }
/* vânzare importată din CSV (cerut 2026-07-14) — albastru rece, distinct de automat (lime)/manual (gri) */
.fin-badge.imp { color: var(--chart-2); border-color: rgba(var(--chart-2-rgb),.4); background: rgba(var(--chart-2-rgb),.1); }
/* alertă „pe pierdere" (profit negativ) pe strip-ul financiar din Panou — cerut 2026-07-14 */
.fin-badge.danger { color: var(--danger); border-color: rgba(var(--danger-rgb),.4); background: rgba(var(--danger-rgb),.1); }
.fin-badge .ico { width: 11px; height: 11px; }
.fin-hint { border-color: rgba(var(--lemon-rgb),.25); background: rgba(var(--lemon-rgb),.04); margin-bottom: 18px; }
/* cifră financiară colorată după semn (profit lime/roșu) — Panou general + dropdown proiecte */
.fin-num { font-family: "Bricolage Grotesque"; font-feature-settings: "tnum"; font-weight: 700; }
.fin-num.pos { color: var(--pos); }
.fin-num.neg { color: var(--danger); }
/* rândul „eyebrow" (numele clientului) + rezumatul financiar, pe aceeași linie — text simplu, FĂRĂ
   cardul cu bordură/fundal de dinainte (arăta ca un rând de site, confuz — raportat 2026-07-15). */
.eyebrow-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 32px 0 6px; }
.eyebrow-row .eyebrow { margin: 0; }
/* Lățimi FIXE pe cele trei perechi etichetă+sumă, din același motiv ca la `.sr-stats .st`:
   banda e ancorată la dreapta rândului, deci cât timp lățimea ei depindea de conținut, fiecare
   client își începea „VENIT" în alt punct (măsurat: 1229px la un client, 1173px la următorul).
   Cu lățimi fixe, benzile tuturor clienților se suprapun perfect pe verticală. Suma e aliniată
   la DREAPTA în celula ei (grilă `auto | 1fr`), ca cifrele să se termine la același x. (2026-08-05) */
/* `width` fixă = exact cele trei coloane + cele două spații (140+170+146 + 2×20). Astfel banda
   are ACEEAȘI lățime la toți clienții: badge-ul „Pe pierdere" (care apare doar la unii) trece pe
   rândul de sub cifre în loc să le împingă cu ~110px la stânga. `margin-left:auto` o ține lipită
   de dreapta și când `.eyebrow-row` o rupe pe un rând propriu (nume lung de client) — înainte
   sărea la stânga acolo, deci un client începea „VENIT" la 364px și următorul la 754px. */
.client-fin { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline;
  gap: 6px 20px; width: 498px; max-width: 100%; margin-left: auto; }
.cf-item { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px; }
.cf-item i { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cf-item b { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 15px; color: var(--text);
  text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cf-item.cf-rev  { width: 140px; }
.cf-item.cf-exp  { width: 170px; }
.cf-item.cf-prof { width: 146px; }
/* .ssw-prof: profitul din dropdown — fără margine proprie din 2026-09-09 (stă în coloana lui) */
/* formularul public al terților (/f/<token>) — pagină simplă, fără sidenav: anulează
   offset-ul + reafișează bara de sus pe desktop (body.share le primește pt. raportul cu meniu) */
body.expform { padding-left: 0; }
@media (min-width: 1024px) { body.expform .share-head { display: flex; } }
body.expform .tbl input, body.expform .tbl select { width: 100%; }
/* detalii opționale per serviciu în formularul colaboratorului — ASCUNSE implicit, dezvăluite de
   butonul-link „Adaugă detalii" (cerut 2026-07-14: cele 2 input-uri stivuite arătau urât) */
.hidden { display: none !important; }
/* Formularul de costuri: layout pe CSS GRID (NU tabel) — umple lățimea panoului, ZERO
   scroll orizontal; pe mobil se rearanjează în loc să scroll-eze. Fiecare serviciu e un
   .exp-item = linia principală (o singură linie) + detalii opționale dedesubt. */
.explist { display: flex; flex-direction: column; }
.exp-head, .exp-line { display: grid; grid-template-columns: minmax(0,1fr) 178px 200px 148px 42px; gap: 14px; align-items: start; }
.exp-head { padding: 0 2px 9px; color: var(--muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--stroke); }
.exp-item { padding: 13px 2px; border-bottom: 1px solid var(--stroke); }
.exp-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.exp-c-svc, .exp-c-cost, .exp-c-cat, .exp-c-date { min-width: 0; }
.exp-c-cat > select { width: 100%; }
/* celula Data: UN singur calendar (o zi = dată simplă, două zile = interval), ca în
   Analytics. .exp-daterange conține trigger-ul + popover-ul (fără toggle „+ perioadă"). */
.exp-c-date { min-width: 0; }
.exp-daterange { display: block; position: relative; }
.exp-daterange > .cal-trigger { width: 100%; justify-content: flex-start; }
.row-del { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: transparent; border: 1px solid rgba(var(--danger-rgb),.4); border-radius: 9px; color: var(--danger);
  font-size: 14px; line-height: 1; cursor: pointer; transition: background .15s, border-color .15s; }
@media (hover: hover) { .row-del:hover { background: rgba(var(--danger-rgb),.12); border-color: var(--danger); } }
/* toggle-ul de detalii e ACUM inline în celula de serviciu (iconiță comment discretă),
   nu mai ocupă o linie separată sub rând; comută arată/ascunde câmpul de detalii */
.exp-c-svc { display: flex; align-items: center; gap: 5px; }
.exp-c-svc > .svc-input { flex: 1; min-width: 0; }
.note-toggle { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; border-radius: 7px; color: var(--faint); cursor: pointer; transition: color .15s, background .15s; }
@media (hover: hover) { .note-toggle:hover { color: var(--accent); background: rgba(var(--accent-rgb),.08); } }
.note-toggle.on { color: var(--accent); }
.note-toggle .nt-ico { width: 15px; height: 15px; }
.row-note-wrap { margin-top: 10px; }
.row-note-input { width: 100%; font-size: 12.5px; color: var(--muted); background: var(--input-bg-soft); }
.exp-cat { min-width: 0; }
/* mobil: în loc de scroll orizontal, linia se rearanjează pe 3 rânduri.
   Pragul era 680px, dar cele 4 coloane FIXE ale grilei (178+200+148+42 + 4×14 gap = 624px) nu
   se pot micșora deloc, deci nu încap sub ~716px lățime de ecran: între 681px și ~960px prima
   coloană („Serviciu prestat”, minmax(0,1fr)) absorbea toată lipsa de spațiu și se strivea la
   0–130px — la 681–700px input-ul principal DISPĂREA complet (măsurat 0px), iar capetele de
   coloană „SERVICIU PRESTAT”/„CATEGORIE” se scriau unul peste altul (audit responsive
   2026-08-05). Ridicat la 960px = breakpoint deja folosit în platformă: peste el rămân ≥230px
   pentru coloana de serviciu, sub el intră exact layoutul stivuit de mai jos, deja proiectat.
   NU se schimbă nimic din design — doar pragul la care se comută. */
@media (max-width: 960px) {
  .exp-head { display: none; }
  .exp-line { grid-template-columns: 1fr auto; grid-template-areas: 'svc del' 'cat cat' 'date date' 'cost cost'; gap: 9px 10px; }
  .exp-c-svc { grid-area: svc; } .exp-c-cat { grid-area: cat; } .exp-c-date { grid-area: date; }
  .exp-c-cost { grid-area: cost; } .exp-line .row-del { grid-area: del; justify-self: end; align-self: center; }
}
/* #rowsTbl (Serviciu/Categorie/Data/Cost): fără table-layout:fixed, coloana „Serviciu prestat" (care
   are ACUM 2 input-uri stivuite — nume + detalii opționale) își cerea tot mai multă lățime automat
   și fura spațiu de la coloana „Categorie" (ajunsă ~70px în loc de cele 170px cerute pe <th>) — de-aici
   select-ul de categorie afișat anapoda/comprimat (cerut 2026-07-14: „sageata sa fie la fel ca alte
   dropdown-uri"). Fixed = coloanele respectă lățimile de pe <th>, indiferent de conținutul altei celule. */
#rowsTbl { table-layout: fixed; }
/* dezvăluirea detaliilor unei cheltuieli în tabelul owner-ului (ascunse implicit) */
.exp-note-toggle { margin-left: 6px; color: var(--faint); cursor: pointer; font-size: 11px; text-decoration: underline dotted; }
@media (hover: hover) { .exp-note-toggle:hover { color: var(--accent); } }
.exp-note-row > td { padding-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.5; background: rgba(var(--veil-rgb),.02); }
.exp-note-row .exp-note-lbl { color: var(--faint); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; margin-right: 8px; }
/* Financiar · rândul „Reclame Meta · automat” (beta „Cheltuieli Meta automate”, 2026-10-06): detaliile pe campanii
   și caseta de verificare a echipei. Doar tokenuri de temă — aceeași structură în light și dark. */
.exp-meta-row > td { padding-top: 2px; }
/* tabelul se derulează pe orizontală pe telefon (.tbl-scroll): detaliile stau lipite în partea vizibilă, la lățimea
   ecranului, nu la lățimea întregului tabel (altfel sumele ieșeau din ecran la 375px) */
.exp-meta-det { position: sticky; left: 12px; max-width: min(760px, calc(100vw - 80px)); white-space: normal; }
/* 2026-10-10 (audit 84): limita după zona vizibilă a tabelului, nu după ecran — la 820–1366 px sumele rămâneau în afara ei */
.tbl-scroll:has(.exp-meta-det) { container-type: inline-size; }
.exp-meta-det { max-width: min(760px, calc(100cqi - 24px)); }
.exp-meta-det > summary { cursor: pointer; color: var(--muted); }
.exp-meta-det[open] > summary { margin-bottom: 4px; }
.exp-meta-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; max-width: 640px; }
.exp-meta-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.exp-meta-list li > span { min-width: 0; overflow-wrap: anywhere; }
.exp-meta-list li > b { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
.exp-meta-why { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; max-width: 720px; }
.exp-meta-ctl { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--stroke-2); border-radius: 10px; max-width: 760px; }

/* atribuirea site→useri clienți (formularul de editare site, doar admini) */
.assign-users > span { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--faint); text-transform: uppercase; }
.assign-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.assign-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--stroke); background: var(--surface-2); font-size: 13px; cursor: pointer; transition: .15s; }
@media (hover: hover) { .assign-item:hover { border-color: rgba(var(--accent-rgb),.4); } }
.assign-item:has(input:checked) { border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.07); }
.assign-item input { accent-color: var(--accent); }

/* mobil: header compact sus + tab bar jos + sheet „Meniu" */
/* Nav responsive: comută pe layout-ul mobil (bară de jos) la ≤1023px — ACELAȘI breakpoint
   ca Hourglass (.bx-tabbar), ca să nu ai 2 meniuri diferite la aceeași lățime când schimbi
   aplicația. (Conținutul are propriile breakpoint-uri mai jos: 960px KPI, 780px restul.) */
@media (max-width: 1023px) {
  body { padding-left: 0; }
  .rail, .sidenav { display: none; }

  .m-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 100;
    /* env(safe-area-inset-top): pe iOS instalat (status bar translucid) conținutul nu mai urcă sub ceas/baterie */
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    /* viewport-fit=cover întinde pagina și sub decupajul camerei: în peisaj pe iPhone (47-59px lateral)
       logo-ul și comutatorul stăteau sub notch / Dynamic Island. max() = 16px peste tot în rest
       (2026-09-27, audit C1678 — același tratament pe conținut, tabbar, meniu și lista de proiecte). */
    padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
    background: var(--mhead-bg); border-bottom: 1px solid var(--stroke);
  }
  .m-head .site-switch { flex: 1; min-width: 0; justify-content: flex-end; }
  .m-head .ssw-btn { width: min(200px, 100%); }
  .m-head .ssw-pop, .ssw-pop.ssw-at-top { position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); top: calc(64px + env(safe-area-inset-top)); width: auto; }
  /* Lista stă (voit) SUB tabbar (z 110 < 120), dar înălțimea ei scădea doar 90px din 100vh: pe ecranele
     scurte (320×568, iPhone SE cu bara Safari) rândul fix „Toate site-urile”, cu totalurile, rămânea sub
     bara de jos și atingerea lui deschidea un tab. Acum se oprește deasupra tabbar-ului (84px + safe-area,
     ca scroll-padding-bottom) cu 12px aer; 100dvh = înălțimea vizibilă reală pe iOS (2026-09-27, audit C1882). */
  html:has(.tabbar) .m-head .ssw-pop, html:has(.tabbar) .ssw-pop.ssw-at-top {
    max-height: min(520px, calc(100vh - 64px - env(safe-area-inset-top) - 84px - env(safe-area-inset-bottom) - 12px));
    max-height: min(520px, calc(100dvh - 64px - env(safe-area-inset-top) - 84px - env(safe-area-inset-bottom) - 12px)); }
  /* Pe mobil (2026-09-09, cerut de Liviu: „nu se vede deloc titlul site-urilor"): un site ocupă
     DOUĂ rânduri — numele pe tot primul rând, dedesubt campania (stânga) și cifrele cu iconițe
     (dreapta). Iconița site-ului stă pe ambele rânduri. Tot ~46px, deci și zonă de atingere bună. */
  .ssw-head { grid-template-columns: auto 1fr; gap: 8px 10px; padding: 10px 12px; }
  .ssw-q { grid-column: 1 / -1; grid-row: 2; height: 36px; }
  .ssw-per { text-align: right; }
  .ssw-i, .ssw-total { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "fav name name" "fav camp st";
    row-gap: 3px; padding: 8px 10px; }
  .ssw-i .fav, .ssw-total .fav { width: 22px; height: 22px; }
  .ssw-n { font-size: 13.5px; }
  .ssw-c:empty { display: none; }
  .ssw-st { gap: 10px; justify-self: end; }
  .ssw-st .sm { width: auto; min-width: 44px; }
  .ssw-st .sm-money { width: auto; min-width: 76px; }
  /* (2026-09-27, audit C1968) Promisiunea de mai sus nu se ținea pe conturile cu Financiar: cifrele + profitul
     (~200px) luau tot rândul 2, iar campania rămânea cu 13px la 320 și 68px la 375 („H…", „Campanie re…"),
     deci două site-uri cu nume asemănătoare, tăiate la același prefix, nu se puteau deosebi. Numele se
     poate întinde pe DOUĂ rânduri (doar cele lungi; cele scurte rămân pe unul, rândul are aceeași înălțime). */
  .ssw-i .ssw-n { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; }
  /* Pe telefoanele înguste profitul iese din rândul fiecărui site, ca să rămână loc pentru campanie (de la
     13px la ~110px la 320); totalul rămâne în rândul „Toate site-urile", iar profitul fiecărui site pe pagina Financiar.
     Pragul: sub 420px campania nu mai încape lângă cele trei cifre (la 430 are ~100px). */
  @media (max-width: 419px) { .ssw-i .ssw-st .sm-money { display: none; } }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right));   /* C1678 */
    background: var(--tabbar-bg); border-top: 1px solid var(--stroke);
  }
  .tbi {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 4px 5px; border: none; background: none; border-radius: 12px;
    color: var(--faint); font-family: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer;
    letter-spacing: .02em; -webkit-tap-highlight-color: transparent; transition: color .15s;
  }
  .tbi .ico { width: 21px; height: 21px; }
  .tbi.on { color: var(--accent); }
  .tbi:active { color: var(--text); }

  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.62);
    opacity: 0; visibility: hidden; pointer-events: none; transition: .2s; }
  body.sheet-open .sheet-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  .sheet {
    display: flex; flex-direction: column; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));   /* C1678 */
    background: var(--pop-sheet); border-top: 1px solid var(--stroke-2); border-radius: 22px 22px 0 0;
    transform: translateY(105%); transition: transform .26s cubic-bezier(.22,1,.36,1);
    visibility: hidden; pointer-events: none; max-height: 82dvh; overflow-y: auto;
  }
  body.sheet-open .sheet { transform: none; visibility: visible; pointer-events: auto; }
  /* Raportul clientului n-are tabbar jos: butonul de meniu stă SUS, deci panoul coboară de sus,
     din dreptul lui. (În aplicația autentificată rămâne de jos, lângă tabbar.) */
  body.share .sheet {
    top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--stroke-2);
    border-radius: 0 0 22px 22px; transform: translateY(-105%);
    padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
    padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));   /* C1678 */
    box-shadow: 0 26px 50px -28px rgba(0,0,0,calc(.95*var(--shk)));
  }
  body.share.sheet-open .sheet { transform: none; }
  body.share .sheet-grip { order: 99; margin: 10px auto 0; }   /* mânerul jos = „trage în sus ca să închizi" */
  body.sheet-open { overflow: clip; }   /* clip, nu hidden: hidden făcea din body container de derulare și .m-head dispărea (audit 96) */
  /* (2026-09-27, audit C1969/C1131) Regula de mai sus nu bloca nimic: `html { overflow-x: clip }` oprește
     propagarea lui overflow de pe <body> spre viewport (explicat la .fb-open), deci cu Meniul sau lista de
     proiecte deschise roata/degetul pe fundal derula pagina din spate (600px măsurați). Aceeași rețetă ca
     la foaia „Ajutor": blocarea stă pe <html>, doar pe touch — pe o fereastră de desktop îngustă, dispariția
     barei de derulare ar muta pagina. :has() citește starea pusă deja de nav.js (body.sheet-open,
     .ssw-btn.open), fără cod nou. overscroll-behavior: capătul listei nu mai „trage" pagina după el. */
  @media (pointer: coarse) { html:has(> body.sheet-open), html:has(.ssw-btn.open) { overflow: hidden; } }
  .sheet, .ssw-list { overscroll-behavior: contain; }
  .sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--stroke-2); margin: 2px auto 0; flex-shrink: 0; }
  /* rândul mânerului poartă și pastila „Ajutor" (2026-09-14): la îndemână, fără rând în plus în listă.
     Poziționare cu top/margin, nu transform — `.btn:active` resetează transform și pastila ar sări. */
  .sheet-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; flex-shrink: 0; }
  .sheet-head .sheet-grip { margin: 0; }
  .sheet-head .sheet-help { position: absolute; right: 0; top: 50%; margin-top: -16px; height: 32px; gap: 6px; }
  .sheet-head .sheet-help .ico { width: 16px; height: 16px; }
  .sheet-head .sheet-help::after { content: ""; position: absolute; inset: -6px; min-height: 44px; }
  .sheet-plats { display: flex; flex-direction: column; gap: 8px; }
  .sheet-p { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px;
    border-radius: 13px; border: 1px solid var(--stroke); background: var(--surface-2); color: var(--muted);
    font-weight: 600; font-size: 13px; }
  .sheet-p .ico { width: 18px; height: 18px; }
  .sheet-p.on { color: var(--accent); border-color: rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.07); }
  .sheet-items { display: flex; flex-direction: column; gap: 2px; }
  .sheet-items a { display: flex; align-items: center; gap: 11px; padding: 13px 12px; border-radius: 11px;
    color: var(--muted); font-weight: 500; font-size: 15px; }
  .sheet-items a .ico { width: 18px; height: 18px; }
  .sheet-items .logout { color: var(--faint); border-top: 1px solid var(--stroke); border-radius: 0; margin-top: 6px; padding-top: 15px; }
  @media (hover: hover) { .sheet-items .logout:hover { color: var(--danger); } }

  /* meniul site-ului curent, în sheet: itemii verticali, dimensionați pt. deget */
  .sheet-site { border-bottom: 1px solid var(--stroke); padding-bottom: 12px; }
  /* raportul partajat: „Semnalează o problemă" stă deasupra navigării (la 320px o lista lungă o împingea sub ecran),
     cu linia de separare sub el, nu sub navigare */
  body.share .sheet-help-row { border-bottom: 1px solid var(--stroke); padding-bottom: 10px; }
  body.share .sheet-help-row + .sheet-site { border-bottom: 0; padding-bottom: 0; }
  .sheet-site .sn-sec { padding: 6px 4px 0; margin-bottom: 8px; }   /* padding-bottom → margin, vezi nota de la .sn-sec */
  .sheet-site .sn-sep { margin: 9px 4px; }
  .sheet-site .nav a { font-size: 15px; padding: 12px; }
  .sheet-site .nav a .ico { width: 18px; height: 18px; }
  /* antetul site-ului din Meniu (2026-10-14, sheet_site_html): al cui e meniul de dedesubt + „Schimbă” */
  .sheet-cur { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 9px 9px 9px 12px; border-radius: 12px;
    border: 1px solid var(--stroke); background: var(--surface-2); min-height: 48px; }
  .sheet-cur .fav { flex: none; }
  .sheet-cur .sc-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; font-size: 14.5px; color: var(--text); }
  .sheet-cur .sc-sw { flex: none; }
  .sheet-empty { padding: 2px 4px 2px; color: var(--muted); font-size: 14px; line-height: 1.55; }
  .sheet-empty p { margin: 0 0 12px; }
  .sheet-plats .sn-sec { padding: 2px 4px 0; margin-bottom: 0; }

  /* raport client: hamburger vizibil în bara de sus, deschide sheet-ul cu meniul raportului */
  .share-burger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--stroke);
    background: var(--surface-2); color: var(--muted); cursor: pointer; }
  .share-burger .ico { width: 19px; height: 19px; }
  .share-burger:active { color: var(--accent); }
  body.share { padding-left: 0; }
}

.wrap { padding: 30px 30px 100px; }   /* width/max-width/margin sunt deja pe main.wrap mai sus */

/* ---------- section headers / eyebrow / hints ---------- */
/* STRICT selectorul de perioadă rămâne sticky la scroll (cerut 2026-07-14) — NU și titlul, și
   FĂRĂ bandă de fundal (versiunea anterioară făcea sticky tot .page-head → o bandă neagră în
   spatele titlului, respinsă). Un element sticky nu poate rămâne prins dincolo de marginile
   părintelui lui direct (regulă CSS) — de-aia .page-head devine `display:contents`: dispare ca
   box, iar copiii lui (blocul-titlu + .period) devin copii DIRECȚI ai lui main.wrap (înalt cât
   pagina) → .period poate fi sticky pe toată pagina. Selectorul are deja fundal propriu pe
   pastile (.period-presets/.period-custom), deci e lizibil peste conținut fără nicio bandă. */
.page-head { display: contents; }
.page-head > :first-child { min-width: 0; margin-bottom: 12px; }   /* blocul-titlu — scroll normal */
.page-head .period { position: sticky; top: 12px; z-index: 90; display: flex; justify-content: flex-end;
  flex-wrap: wrap; margin-bottom: 8px; }
/* Desktop: selectorul stă sus-DREAPTA, aliniat la dreapta. Pe paginile CU badge-uri LIVE (Panou,
   Analytics) versiunea veche îl trăgea în sus peste rândul titlului (margin-top negativ) și
   ACOPEREA badge-urile „LIVE / N acum pe site" (bug raportat 2026-07-14 pe live — selectorul peste
   badge-uri). Acum stă pe rândul lui, imediat sub titlu, aliniat dreapta — fără overlap, indiferent
   cât de lungi sunt titlul/badge-urile. Rămâne sticky la scroll. */
@media (min-width: 1024px) {
  .page-head .period { margin-top: 2px; margin-left: auto; width: fit-content; margin-bottom: 16px; }
}
/* pe mobil rămâne pe rândul lui (sub titlu), lipit SUB .m-head (și el sticky, ~64px + safe-area).
   Cele 2 selectoare (pastile presetate + „Alege perioada") stau unul sub altul, pe TOATĂ lățimea,
   cu gap MIC (cerut 2026-07-14: „spațiul dintre cele 2 selectoare e prea mare"). Pastilele
   presetate scrollează orizontal (nu se rup pe 2 rânduri), custom-ul e full-width dedesubt. */
@media (max-width: 1023px) {
  .page-head .period { top: calc(64px + env(safe-area-inset-top)); justify-content: flex-start;
    width: 100%; gap: 6px; flex-direction: column; align-items: stretch; margin-bottom: 10px; }
  .page-head .period .period-presets { width: 100%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .page-head .period .period-presets::-webkit-scrollbar { display: none; }
  .page-head .period .pp { flex: 1 0 auto; justify-content: center; }
  .page-head .period .period-custom, .page-head .period .cal-trigger,
  .page-head .period .cal-trigger-single { width: 100%; justify-content: center; }
}
.page-head h1 { margin: 0; font-size: 28px; font-weight: 700; overflow-wrap: anywhere; }
/* (2026-09-27, audit C0950) overflow-wrap pe h1: pe Financiar/Analytics titlul e NUMELE site-ului;
   unul lung fără spații („academiadeprogramareneurolingvistica.ro") ieșea din ecran pe telefon și era
   retezat de html{overflow-x:clip}, fără „…". Se rupe doar cuvântul care nu încape, restul nu se mișcă. */
/* NICIODATĂ pe 2 rânduri (trunchiat cu „…") — textul diferă ca lungime pe fiecare tab (domeniu vs.
   text fix vs. „Heatmap · cale") și pe fiecare site; dacă s-ar împacheta, .page-head ar avea
   înălțimi diferite pe tab-uri diferite → subnav-ul de dedesubt „sare" la schimbarea tab-ului.
   (audit 2026-09-27, C0861) Regula de un rând rămâne pe TAB-URILE unui site, pentru care a fost scrisă:
   paginile cu `.h-row` (titlu + perioadă: Analytics, Comparație, Recomandări, A/B, Traseu, Financiar,
   Înregistrări…) și subtitlurile-cale (`.sub.mono`: „Heatmap · cale", raportul partajat, înregistrarea).
   Motivul ei (subnav-ul orizontal) nu mai există din 2026-07-14, dar renunțarea la ea pe tab-uri e
   decizia lui Liviu, nu o reparație. Pe paginile FĂRĂ tab-uri nowrap-ul era o scăpare: tăia pe telefon
   instrucțiuni întregi fără title (Conturi clienți, Setări site, asistenții de instalare/cumpărare,
   formularul public de cheltuieli, banda de scop din raportul partajat). Acolo textul se împachetează;
   overflow-wrap:anywhere rupe și domeniile/numele lungi fără spații. */
.page-head .sub { color: var(--muted); font-size: 13.5px; margin-top: 9px;
  overflow-wrap: anywhere; max-width: 100%; }
.page-head .sub.mono, .page-head .h-row + .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.page-head .sub a { color: inherit; }   /* link spre pagina analizată — rămâne gri-mut, nu accent lime */
@media (hover: hover) { .page-head .sub a:hover { color: var(--text); text-decoration: underline; } }
/* (2026-09-27, audit C0950) Indiciile din cardurile-pas (Instalare „Pasul următor", asistentul de
   cumpărare, formularul de site) scriu în <b>/<code> nume date de om, de obicei fără spații
   („lead_formular_contact_newsletter_…"): pe 320-390px ieșeau din card. Doar ele se rup. */
.ins-lbl ~ p b, .ins-lbl ~ p code { overflow-wrap: anywhere; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 600;
  color: var(--muted); margin: 32px 0 6px;
  scroll-margin-top: 78px;   /* desktop: clearance pt. selectorul de perioadă sticky (~60px + aer) */
}
@media (max-width: 1023px) { .eyebrow { scroll-margin-top: 140px; } }  /* + .m-head sticky (~63px) */
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px rgba(var(--accent-rgb),calc(.85*var(--glow))); }
.ehint { color: var(--faint); font-size: 12px; margin: 0 0 14px; max-width: 72ch; line-height: 1.5; }

/* ---------- KPI: ierarhie pe importanță ---------- */
.kpi-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.kpi-grid.tier1 { grid-template-columns: repeat(3, 1fr); }       /* mari, rare, sus */
.kpi-grid.tier1.kpi-two { grid-template-columns: repeat(2, 1fr); }   /* Panou: Comenzi + Profit, sub cele trei (2026-10-04) */
/* Bug persistent (raportat de 3x): două .kpi-grid consecutive (ex. Financiar: rândul mare
   Venit/Cheltuieli/Profit + rândul de indici) se ATINGEAU vertical — `gap` acționează DOAR în
   interiorul unui grid, nu ÎNTRE două grid-uri surori. De-aici „cardurile se ating", deși gap-ul
   orizontal era corect. Fix: spațiu explicit între grid-uri consecutive. */
.kpi-grid + .kpi-grid { margin-top: 16px; }
/* flex column → „⌄ detalii" poate fi împins jos (margin-top:auto), aliniat la fund pe toate
   cardurile din rând, indiferent dacă au sau nu hint deasupra (cerut 2026-07-14) */
.kpi { padding: 18px 20px; position: relative; overflow: hidden; transition: .18s; display: flex; flex-direction: column; }
@media (hover: hover) { .kpi:hover { border-color: var(--stroke-2); transform: translateY(-2px); } }
.kpi.big { padding: 26px 28px; }
.kpi .lbl { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; color: var(--muted); }
.kpi.big .lbl { font-size: 11.5px; }
.kpi .val { font-family: "Bricolage Grotesque", sans-serif; font-size: 30px; font-weight: 700; margin-top: 8px; font-feature-settings: "tnum"; line-height: 1.1; }
.kpi.big .val { font-size: 44px; }
/* Cifra-erou pe UN rând, micșorată de anim.js (fitVal) doar cât nu încape: .kpi are overflow:hidden,
   iar la 44px fix sumele lungi erau TĂIATE fără niciun semn („1.234.567,89 RON" → „1.234.5"),
   deja de la „9.999,99" la 1024px (audit 2026-09-27, C0942). Clasa o pune doar JS-ul, deci fără
   JS totul rămâne ca înainte; sub 18px JS-ul o scoate și textul se împachetează în loc să se taie. */
.kpi.big .val.val-fit { white-space: nowrap; }
.kpi.grad .val { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Unitățile de timp (h/m/s) din durate: estompate, ca să iasă cifrele în evidență */
.dur-u { font-weight: 500; opacity: .45; margin-left: .5px; }
.kpi .hint { font-size: 11px; color: var(--faint); margin-top: 9px; line-height: 1.45; }
.kpi .spark { margin-top: 13px; height: 30px; opacity: var(--spark-a); pointer-events: none; }
.kpi .spark svg { display: block; }
.kpi .delta { font-size: 12px; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.delta .d-ico { width: 13px; height: 13px; }   /* global — delta apare și în tabele (Comparație), nu doar în carduri KPI */
.kpi .delta.up { color: var(--pos); }     /* creștere = lime */
.kpi .delta.down { color: var(--danger); }    /* scădere = roșu */
.kpi .delta.flat { color: var(--faint); }

/* Financiar: profitul colorat după semn (cerut 2026-07-14) — pozitiv = accentul lime al
   platformei (nu un verde nou, care nu apare nicăieri altundeva în aplicație). */
.kpi.kpi-pos .val { color: var(--pos); }
.kpi.kpi-neg .val { color: var(--danger); }

/* bară de progres — țintă de profit lunară, proporțională cu perioada aleasă (cerut 2026-07-14) */
.kpi-goal { margin-top: 13px; }
.kpi-goal-bar { height: 6px; border-radius: 999px; background: rgba(var(--veil-rgb),.08); overflow: hidden; }
.kpi-goal-fill { height: 100%; border-radius: 999px; background: var(--danger); transition: width .3s ease; }
.kpi.kpi-pos .kpi-goal-fill { background: var(--bar-grad); }   /* profit pozitiv: gradientul lime→galben al brandului */
.kpi-goal.hit .kpi-goal-fill { background: var(--bar-fill); box-shadow: 0 0 10px rgba(var(--accent-rgb),calc(.6*var(--glow))); }
.kpi-goal-lbl { font-size: 11px; color: var(--faint); margin-top: 7px; }
.kpi-goal.hit .kpi-goal-lbl { color: var(--accent); }

/* Financiar: cardul „Venit"/„Cheltuieli" ÎNTREG e clickabil → scroll lin la secțiunea cu detalii
   (a înlocuit butonul-săgeată din colț, urât/neintuitiv — 2026-07-14). Semnalul de interactivitate:
   cursor pointer + un mic „⌄ detalii" jos, discret, care se aprinde lime la hover pe card. */
.kpi-clickable { cursor: pointer; }
/* margin-top:auto → împinge „detalii" la fundul cardului (aliniat între carduri, vezi flex column) */
.kpi-jump { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; margin-top: auto; padding-top: 11px;
  margin-left: -2px;  /* nudge optic: iconița are inset în viewBox → aliniere stângă cu label-ul/valoarea */
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); transition: color .15s; }
.kpi-jump .ico { width: 13px; height: 13px; }
@media (hover: hover) { .kpi-clickable:hover .kpi-jump { color: var(--accent); } }

/* ---------- layout grids / panels ---------- */
.grid { display: grid; gap: 16px; }
/* Elementele de grid au implicit min-width:auto → un panou cu conținut lat (grila zi×oră,
   listele cu .act-scroll) nu se putea micșora sub lățimea lui minimă și împingea pagina
   ~200px în lateral pe telefon. Cu min-width:0 panoul se strânge, iar containerele
   interne cu overflow-x:auto își fac treaba. */
.grid > * { min-width: 0; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c12 { grid-template-columns: 1.6fr 1fr; }
.panel { padding: 22px; }
.panel > h2 { margin: 0 0 16px; font-size: 15.5px; font-weight: 600; }
.panel > h2.tight { margin-bottom: 4px; }
.panel .p-hint { color: var(--faint); font-size: 11.5px; margin: 0 0 16px; line-height: 1.45; }
/* Adresele din indicii (ex. …/assets/ab.js în „Ce se verifică" de pe A/B) n-au niciun punct de rupere:
   la 320-344px ieșeau din ecran, tăiate de body{overflow-x:clip} (audit 2026-09-27, C0871). Doar în
   indicii, nu pe `code` global — acolo ar schimba min-content-ul codului din celule de tabel și flex. */
.p-hint code, .ehint code { overflow-wrap: anywhere; }
.panel > h2 .h-sub { font-size: 12px; color: var(--muted); font-weight: 400; font-family: "Hanken Grotesk"; }

/* butoanele/textarea NU moștenesc implicit font-family (default UA = Arial) → forțăm fontul brandului peste tot */
button, textarea { font-family: inherit; }
/* ---------- buttons (solid lime, text închis — clean) ---------- */
/* înălțime FIXĂ (32px) = standardul de control al site-ului (același cu input/select/.cal-trigger/
   .file-field mai jos) — coborâtă de la 42→32 (cerut 2026-07-15: „toate butoanele lime să aibă
   înălțimea butonului Testează", 32px fiind deja înălțimea lui .btn.sm). Un singur loc care fixează
   asta, nu per-caz — vezi și .btn.sm mai jos (acum identic, păstrat pt. font/radius mai mici). */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  height: 32px; box-sizing: border-box; padding: 0 16px; border-radius: 11px; border: 1px solid transparent; font-weight: 600; font-size: 13.5px;
  /* --accent-fill, nu --accent: în light accentul-ca-text se închide (olive), dar
     butonul rămâne lime VIU cu cerneala închisă — perechea CTA a brandului */
  color: var(--accent-ink); background: var(--accent-fill); box-shadow: 0 8px 22px -12px rgba(var(--accent-rgb),calc(.8*var(--glow))); transition: .16s;
  white-space: nowrap;
}
@media (hover: hover) { .btn:hover:where(:not(:disabled)) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(var(--accent-rgb),calc(.75*var(--glow))); } }
.btn:active { transform: translateY(0); }
/* (2026-09-27, audit C0931) Butonul DEZACTIVAT arăta identic cu cel activ (lime plin, cursor de
   mână) și se ridica la hover: „Aplică" din calendar fără zile alese, „Curăță rândurile orfane",
   „Conectează și sincronizează" fără conturi. Acum e estompat, fără mână, iar toate hover-urile
   .btn (inclusiv ghost/danger și varianta light) au :not(:disabled) — <a class="btn"> nu poate fi
   :disabled, deci pe linkuri nu se schimbă nimic. Regulile locale mai tari (.fb-card, .rp-ffoot:
   .55/.4) rămân cum erau. `.is-busy` (Meta „Se sincronizează…", cu iconița care se rotește) e
   dezactivat doar cât lucrează și își păstrează aspectul lucrat.
   (2026-09-29, recenzie t83) Excluderile stau în :where(), deci NU urcă specificitatea: regula de
   dezactivat are cât `.btn` (0,1,0), iar hover-urile exact cât aveau înainte. Cu `.btn:disabled:not(.is-busy)`
   (0,3,0) bătea regulile locale lucrate mai slabe — `.slot-save:disabled` (.55, cursor default, Setări →
   „Salvează alegerea") devenea .5 + not-allowed —, iar `:not(:disabled)` pe hover putea bate suprascrieri
   locale ale hover-ului. Acum orice regulă locală câștigă ca înainte. */
.btn:where(:disabled:not(.is-busy)) { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: var(--surface-2); color: var(--text); border-color: var(--stroke); box-shadow: none; }
@media (hover: hover) { .btn.ghost:hover:where(:not(:disabled)) { background: var(--glass-2); border-color: rgba(var(--accent-rgb),.45); color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.16), 0 10px 26px -14px rgba(var(--accent-rgb),calc(.5*var(--glow))); filter: none; } }
.btn.danger { background: transparent; border-color: rgba(var(--danger-rgb),.5); color: var(--danger); box-shadow: none; }
@media (hover: hover) { .btn.danger:hover:where(:not(:disabled)) { background: rgba(var(--danger-rgb),.12); border-color: var(--danger); box-shadow: 0 0 0 1px rgba(var(--danger-rgb),.25); filter: none; transform: translateY(-1px); } }
/* înălțime FIXĂ pe butoanele mici, ca perechea Editează + coș (unul cu text, altul cu icon) să
   fie mereu la fel de înalte (cerut 2026-07-14) — altfel iconul și textul dădeau înălțimi diferite */
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; line-height: 1; }
.btn.block { width: 100%; justify-content: center; }
/* buton DOAR cu iconiță (rândurile de site, 2026-09-14): pătrat, iconița centrată; eticheta stă în aria-label
   + title. Latura vine din --act (32px; rândul de site o crește la 36px pe telefon, pentru deget). */
.btn.icon { width: var(--act, 32px); height: var(--act, 32px); padding: 0; gap: 0; justify-content: center; flex-shrink: 0; }
.btn.icon .ico { width: 16px; height: 16px; }

/* ---------- forms ---------- */
input, select {
  background: var(--input-bg); border: 1px solid var(--input-line); color: var(--text);
  height: 32px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-family: inherit; min-width: 180px; transition: .15s;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
/* Indiciile din câmpuri (2026-09-27, audit C2241): fără regulă, culoarea venea din browser — în Safari pe
   light #a9a9a9 pe alb = 2,35:1, în Firefox 3,86:1, în Chrome pe dark 4,13:1. Indiciile poartă informație
   („30 (după plan)", „ex: 42, 108, SKU-CURS"), deci primesc --faint, ca restul textului secundar:
   5,0:1 pe câmpul alb, ≥4,7:1 pe câmpul închis. opacity:1 anulează estomparea implicită din Firefox.
   Login-ul își păstrează regula proprie (.bl-field input::placeholder, mai specifică). */
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
/* iOS Safari mărește pagina la focus pe ORICE câmp sub 16px și o lasă mărită (derulează lateral).
   Aceeași regulă o aplicasem doar în formularul de feedback (.fb-card/.fb-pform, 16px); aici o
   extindem la toate câmpurile, pe telefon/tabletă/ecran tactil (audit 2026-09-27, C0862).
   Înălțimile rămân cele de design (32/34/36/46px) — se schimbă doar corpul literei.
   :is(...) cu :not-urile are specificitatea (0,10,1): bate regulile mai țintite cu 12-13.5px
   (.period-custom/.cmp-custom input[type=date], .src-filter select, .ssw-q input, .copy-link input,
   .row-note-input, .bl-field input din login). NU atinge bifele, radio-urile, fișierele și
   butoanele-input (acolo iOS nu face zoom). Fără maximum-scale pe viewport: ar bloca zoom-ul de
   accesibilitate. */
@media (max-width: 1023px), (pointer: coarse) {
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]), select, textarea) { font-size: 16px; }
}
input[type=file] { padding: 7px; }
/* select premium, în tonul site-ului: chevron lime custom, fundal glass, hover subtil */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 38px;
  background-color: var(--select-bg);
  background-image:
    linear-gradient(180deg, rgba(var(--veil-rgb),.035), rgba(var(--veil-rgb),0) 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d4ff4a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat, no-repeat; background-position: center, right 14px center; background-size: auto, 12px;
  font-weight: 500; box-shadow: inset 0 1px 0 rgba(var(--veil-rgb),.04);
}
@media (hover: hover) { select:hover { border-color: var(--stroke-2); background-color: var(--select-bg-hover); } }
select option { background: var(--option-bg); color: var(--text); }

/* input de fișier stilizat (în tonul site-ului, cu iconiță) */
.file-field { position: relative; display: inline-flex; align-items: center; height: 32px; max-width: 290px;
  border: 1px solid var(--stroke); border-radius: 12px; background: var(--select-bg); overflow: hidden; cursor: pointer; }
.file-field input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 14px; flex-shrink: 0;
  background: var(--glass-2); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; border-right: 1px solid var(--stroke); }
.file-btn .ico { width: 15px; height: 15px; color: var(--accent); }
@media (hover: hover) { .file-field:hover { border-color: var(--stroke-2); } }
@media (hover: hover) { .file-field:hover .file-btn { background: rgba(var(--accent-rgb),.13); } }
.file-name { padding: 0 13px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- scrollbar în tonul site-ului ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.32) transparent; }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 10px; border: 3px solid var(--bg);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.5), rgba(150,190,60,.4)); }
@media (hover: hover) { ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent), rgba(180,232,74,.85)); } }
::-webkit-scrollbar-corner { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   ȚINTE DE ATINGERE PE TOUCH (2026-08-05, audit responsive: 56 de tipuri de
   controale sub prag pe 320–1023px).

   Aspectul NU se schimbă cu niciun pixel. Fiecare control își păstrează
   înălțimea desenată (.btn/.btn.sm 32px — decizie 2026-07-15, vezi comentariul
   de la .btn; .pp 32px; .tab 37px; .ssw-btn/.nav a 38px), iar aria de APĂSARE
   crește printr-un pseudo-element complet transparent, care nu desenează nimic.
   Regula de aur: nu mări butonul, mări degetul.

   De ce 40px și nu 44px: extinderea trebuie să încapă în spațiile libere care
   EXISTĂ deja, altfel e retezată sau fură atingeri de la vecini —
     • .period-presets: min-height 42px + bordură 1px + padding 4px → cutia de
       conținut e exact 32px, deci 40px se opresc FIX pe marginea de padding
       (obligatoriu: pe mobil are overflow-x:auto + overflow-y:hidden);
     • .tabs / .subnav: padding 5px pe .tab 37px / .subnav-i 38px;
     • .cv-switch: padding 4px; .site-row: gap 10px între rândurile împachetate.

   `.blg-toggle button` e stilizat într-un <style> inline din
   lib/billing_page.php (nu aici); regula i se aplică oricum, CSS-ul e global.

   NU se poate aplica pe <input type=text>/<select>: browserele nu randează
   pseudo-elemente pe controalele native de formular. Acolo cei 32px rămân o
   decizie de design, nu un bug de accesibilitate.

   NU se atinge `.sr-dom` (linkul de domeniu din rândul de site, 19px): aria lui
   e ținută mică INTENȚIONAT — vezi comentariul de la .sr-dom — fiindcă întreg
   `.site-row.row-link` e ținta reală (Analytics). Mărirea lui ar fura atingeri
   de la acțiunea principală și s-ar suprapune peste `.sr-link`.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px), (pointer: coarse) {
  .btn, .pp, .tab, .subnav-i, .cv-b, .ssw-btn, .nav a, a.brand,
  .kpi-jump, .ehint-more, .tbl-more button, .blg-toggle button,
  .cal-trigger, .ins-plat, a.fin-badge, .trs-help, .fnl-seg a,
  details > summary { position: relative; }

  /* `.psw` NU e în lista asta: acolo input-ul e întins invizibil peste comutator (vezi
     `.psw input`), deci aria de apăsare e deja 40×40 pe TOATE dispozitivele, nu doar
     pe cele tactile. */
  .btn::after, .pp::after, .tab::after, .subnav-i::after, .cv-b::after,
  .ssw-btn::after, .nav a::after, a.brand::after, .kpi-jump::after,
  .blg-toggle button::after, .cal-trigger::after, .ins-plat::after, a.fin-badge::after,
  .trs-help::after, .fnl-seg a::after, .trs-add::after,
  details > summary::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    /* 44px pe verticală (recomandarea Apple/Google, nu doar minimul WCAG de 24 — auditul
       responsive din 2026-09-07 a coborât la zero „tap-target-small"); lățimea rămâne la
       40, ca butoanele mici alăturate pe orizontală să nu-și fure atingerile între ele */
    width: 100%; height: 100%; min-width: 40px; min-height: 44px;
    /* strict tactil: fără fundal, fără chenar — nu se vede niciodată */
  }

  /* .tbl-more stă ÎN .tbl-scroll (overflow-x:auto → și overflow-y devine auto):
     pseudo-elementul se oprește fix la marginile de padding ale lui .tbl-more
     (10px sus / 2px jos), altfel apărea o bară verticală în scroller. */
  .tbl-more button::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -2px; min-height: 44px; }

  /* .ehint-more: marja lui de sus (-8px) intră în cea de jos a paragrafului
     (.ehint, 14px) → între ultima linie de text și buton sunt exact 6px liberi.
     Urcăm DOAR cu atât, ca să nu acoperim linkurile inline din .ehint; coborâm
     cu propria marjă de 14px. 16 + 6 + 14 = 36px. */
  .ehint-more::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -22px; min-height: 44px; }
  /* (2026-09-07) coborât la -22px: 16 + 6 + 22 = 44. Cei 8px în plus intră în marginea de sus a
     blocului următor (panou/card cu padding propriu), unde nu stă niciun control. */

  /* (2026-09-27, audit C0902) Traseu: `.fnl-seg a` (Toate/Desktop/Mobil, ~29px), `.trs-help`
     („?", 30px — înălțimea segmentului, voit) și `.trs-add` („+" dintre coloane, 24px) lipseau din
     listele de mai sus. Intră în extensia comună (40×44, desen neschimbat). `.trs-add` NU e în
     lista de `position: relative`: e deja `position: absolute` (așezat pe canvas din traseu_view.php),
     deci își ține singur pseudo-elementul; relative l-ar fi scos de pe poziție. */
  /* `.clk-btn` (numărul de click-uri din tabelul de vizite) era singurul buton
     interactiv rămas în afara listei de mai sus: 25×20px reali, sub minimul WCAG de
     24px. Găsit în auditul din 2026-08-09, la 320-1023px.
     NU folosim `min-height: 40px` ca la restul: butonul stă într-un `<td>` dintr-un
     `.tbl-scroll` (overflow-x:auto → și pe verticală devine auto), iar un pseudo-element
     mai înalt decât rândul ar scoate o bară de derulare verticală în scroller — exact
     problema pentru care `.tbl-more button` de mai sus are margini explicite.
     Celula are `padding: 11px 12px`, deci ±11px pe verticală umple EXACT rândul, fără
     să-l atingă pe următorul; ±8px pe orizontală rămâne în interiorul padding-ului de
     12px al celulei. Rezultat: 41×42px de zonă de apăsare, desen neschimbat. */
  .clk-btn { position: relative; }
  .clk-btn::after { content: ""; position: absolute; left: -8px; right: -8px; top: -11px; bottom: -11px; }

  /* Caseta de bifat rămâne 21×21 DESENATĂ; doar aria de apăsare crește. `::after`
     e ocupat de bifa SVG (decizie 2026-07-03), deci folosim `::before` — se
     pictează ÎNAINTEA bifei, deci nimic nu se schimbă vizual.
     40×34, nu 40×40: pasul vertical cel mai strâns e `.shp-row` (7+21+7+1 = 36px,
     cu două casete pe rând), iar `.shp-tbl` are overflow:hidden — 40px s-ar
     suprapune 4px peste rândul vecin și ar fi retezat la primul/ultimul rând. */
  input[type="checkbox"]::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 40px; height: 34px; transform: translate(-50%, -50%);
  }
}
label.fld { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.filters .period { margin-left: auto; }
/* label.fld e flex cu min-width:auto, iar select-ul (min-width 180px, fără max-width) lua lățimea
   celei mai lungi opțiuni: pe Heatmaps, cu o cale lungă, selectorul „Pagină" ieșea din .filters și
   din ecran la 781-800 și 1024-1101px (chevronul nu se mai vedea). Limita de 100% exista doar sub
   780px; acum e pe orice lățime (audit 2026-09-27, C0857). min-width:180px al select-ului rămâne. */
.filters .fld { min-width: 0; max-width: 100%; }
.filters .fld select { max-width: 100%; }
/* Același tipar la „Shopul comenzilor" din Setări site (obiectivul de comandă, .sf-goal-b din
   site_form.php): select-ul lua lățimea celei mai lungi etichete de shop și ieșea din card deja cu
   13px; cu 16px pe telefon (C0862, mai jos) ar fi ieșit și din ecran. Plafonat la lățimea câmpului. */
.sf-goal-b .fld { min-width: 0; }
.sf-goal-b .fld > select { max-width: 100%; }
.row-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
/* .btn (32px) și input/select (32px) sunt deja aceeași înălțime global — regula asta rămâne doar
   ca plasă de siguranță (specificitate mai mare decât .btn.sm), nu mai are nimic de suprascris. */
.row-form > .btn, .site-edit > .btn, .inline > .btn { height: 32px; padding: 0 16px; }
.inline { display: inline-flex; gap: 8px; align-items: center; }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--stroke); }
.tbl th { color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
/* coloane sortabile (tabelul de vânzări — cerut 2026-07-14) */
.tbl th.sortable { cursor: pointer; user-select: none; transition: color .12s; }
@media (hover: hover) { .tbl th.sortable:hover { color: var(--text); } }
.tbl th.sortable::after { content: '↕'; margin-left: 5px; opacity: .35; font-size: 10px; }
.tbl th.sortable.sort-asc::after { content: '↑'; opacity: 1; color: var(--accent); }
.tbl th.sortable.sort-desc::after { content: '↓'; opacity: 1; color: var(--accent); }
/* toolbar-ul secțiunii Vânzări: butonul „Adaugă vânzări" la stânga, filtrul de sursă împins la
   dreapta (cerut 2026-07-14: aranjare mai îngrijită, nu label + dropdown mare aruncate pe rând). */
.fin-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.src-filter { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; color: var(--muted); }
.src-filter > span { white-space: nowrap; }
.src-filter select { min-width: 0; width: auto; height: 36px; padding: 6px 34px 6px 13px; font-size: 12.5px; }
@media (max-width: 560px) { .src-filter { margin-left: 0; width: 100%; } .src-filter select { flex: 1; } }
.tbl td.mono { font-family: ui-monospace,monospace; font-size: 12.5px; }
.tbl tr:last-child td { border-bottom: none; }
@media (hover: hover) { .tbl tr:hover td { background: rgba(var(--veil-rgb),.025); } }
.tbl .n { text-align: right; font-family: "Bricolage Grotesque"; font-feature-settings: "tnum"; }
/* rând de total la finalul tabelului (Financiar: cheltuieli/vânzări — cerut 2026-07-14) */
.tbl tfoot td { font-weight: 700; border-top: 2px solid var(--stroke-2); border-bottom: none; color: var(--text); }
.tbl tfoot .n { color: var(--text); font-size: 14.5px; }   /* total = alb (nu lime), cerut 2026-07-14 */
.fin-foot-per { color: var(--muted); font-weight: 400; }   /* intervalul de date sub coloana Perioadă/Data */
/* coloana de acțiuni (Editează / coș) hug la marginea DREAPTĂ a tabelului, indiferent de lungimea
   celorlalte coloane (cerut 2026-07-14) — lățime cât conținutul, restul absorb spațiul rămas */
.tbl .sr-cell { width: 1%; white-space: nowrap; text-align: right; }
.tbl .sr-cell .sr-actions { justify-content: flex-end; }
/* rată de conversie (bară + procent) */
.conv-rate { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.cr-track { flex: 1; min-width: 56px; height: 7px; border-radius: 5px; background: rgba(var(--veil-rgb),.06); overflow: hidden; }
.cr-fill { display: block; height: 100%; border-radius: 5px; background: var(--bar-grad); }
/* aceeași bară, pe ton de avertisment — folosită de „Spațiu ocupat" (cont peste
   cotă, disc aproape plin). Culoarea e singurul lucru care se schimbă. */
.cr-fill.warn { background: var(--warn); }
.cr-fill.over { background: var(--chart-4); }
.conv-rate b { font-family: "Bricolage Grotesque"; font-size: 13.5px; min-width: 44px; text-align: right; color: var(--text); }

/* ── Spațiu ocupat (?action=storage) ─────────────────────────────────────────
   Bara segmentată a platformei: fiecare bucată = o componentă (o bază de date sau
   un folder), lățimea ei = felia din MAXIMUL disponibil, nu din total — altfel o
   platformă care ocupă 3% dintr-un disc de 45 GB ar desena o bară plină. */
.dbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: rgba(var(--veil-rgb),.06); border: 1px solid var(--stroke); }
.dbar i { display: block; height: 100%; min-width: 2px; }
.dbar-sc { display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 12px; color: var(--muted); font-feature-settings: "tnum"; }
.sdot { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 7px; vertical-align: baseline; flex-shrink: 0; }
.tbl tr.tr-tot td { border-top: 1px solid var(--stroke); color: var(--text); }
.stor-acts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; margin-top: 16px;
  padding-top: 15px; border-top: 1px solid var(--stroke); }
.stor-form { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0; }
.stor-form label { font-size: 12.5px; color: var(--muted); }
.stor-form input[type=number] { width: 108px; min-width: 0; }
/* Pe telefon fiecare formular ocupă tot rândul, iar câmpul se întinde: două
   controale înghesuite pe 320px n-ar fi apăsabile cu degetul. */
@media (max-width: 560px) {
  .stor-acts { flex-direction: column; align-items: stretch; gap: 14px; }
  .stor-form { width: 100%; }
  .stor-form input[type=number] { flex: 1; }
  .stor-form label { width: 100%; }
}

/* Indicator de încredere/relevanță al testului A/B (în funcție de volum) */
.ab-rel { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 4px; padding: 11px 13px;
  border-radius: 12px; border: 1px solid var(--stroke); background: var(--surface-2); font-size: 13px; }
.ab-rel-meter { flex: 0 0 90px; margin-top: 4px; height: 7px; border-radius: 999px; background: rgba(var(--veil-rgb),.08); overflow: hidden; }
.ab-rel-meter span { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.ab-rel-txt { line-height: 1.45; }
.ab-rel-ok   { border-color: rgba(var(--ok-rgb),.4); } .ab-rel-ok .ab-rel-meter span   { background: var(--ok); }
.ab-rel-warn { border-color: rgba(var(--warn-rgb),.4); }  .ab-rel-warn .ab-rel-meter span { background: var(--warn); }
.ab-rel-muted .ab-rel-meter span { background: var(--muted); }
@media (max-width: 640px) { .ab-rel { flex-direction: column; gap: 8px; } .ab-rel-meter { flex-basis: auto; width: 100%; } }

/* Variantă OPRITĂ din dashboard (2026-08-08). Estompăm doar CIFRELE, nu tot rândul:
   eticheta variantei, pastila „oprită" și comutatorul trebuie să rămână perfect lizibile —
   pe ele apeși ca s-o repui. Datele rămân la vedere tocmai ca să poți compara după. */
.tbl tr.ab-off > td { color: var(--faint); }
.tbl tr.ab-off .num, .tbl tr.ab-off b { color: var(--faint); }
.tbl tr.ab-off .cr-fill { opacity: .4; }
.tbl tr.ab-off > td:first-child > b.num, .tbl tr.ab-off > td.ab-act { color: var(--text); }
/* celula de acțiuni: comutator + „Deschide" pe UN rând, oricât de îngustă e coloana —
   ruperea în două rânduri e exact defectul reparat în „Sarcini programate" (consolă) */
.ab-act { white-space: nowrap; }
/* comutatorul (20px) și butonul (30px) sunt cutii inline de înălțimi diferite — fără
   `middle` pe amândouă, centrele lor ies decalate cu ~5px și rândul arată strâmb */
.ab-act > * { vertical-align: middle; }
.ab-act .psw { margin-right: 12px; }
.ab-note b { color: var(--text); }
.conv-el { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }
/* badge „obiectiv" — marchează în tabelul Conversii butoanele care alimentează treapta 4 din funnel */
.goal-badge { display: inline-block; vertical-align: 1px; margin-left: 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb),.12);
  border: 1px solid rgba(var(--accent-rgb),.25); border-radius: 999px; padding: 1px 7px; }
/* display:flex e OBLIGATORIU aici — fără el, gap/flex-wrap nu se aplică deloc și câmpurile +
   butonul „Salvează" stăteau lipite unele de altele (raportat pe mobil, 2026-07-03) */
/* align-items: flex-start — toate etichetele au o singură linie (înălțime egală),
   deci input-urile se aliniază oricum; iar un câmp mai înalt (retenția, cu hint-ul
   ei sub control) NU-și mai urcă controlul peste linia celorlalte (raportat
   2026-07-21). Butonul de submit rămâne aliniat la bază prin align-self. */
.site-edit { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.site-edit .fld { flex: 1 1 150px; }
/* doar input-ul DIRECT dintr-un .fld (nume/client/domeniu…) — altfel prindea și checkbox-urile
   din „Atribuit userilor" (nested în .assign-item), umflându-le la 100% lățime (raportat 2026-07-15) */
.site-edit .fld > input { width: 100%; }
/* v71: „Shop-ul comenzilor" — select-ul direct din .fld, ca input-ul de deasupra; fld-warn = shopul
   nu se poate stabili (site-ul e cu comenzile oprite până se alege) */
.site-edit .fld > select, .row-form .fld > select { width: 100%; min-width: 0; }
label.fld.fld-warn { color: var(--warn-2); }

/* v72: „Ascunde experimentul" pe pagina A/B. Butonul stă în dreapta titlului, pe aceeași linie
   pe desktop și dedesubt pe mobil (h2-ul devine flex cu wrap) — nu pe un rând propriu care ar
   împinge cifrele mai jos. Cardul ascuns (vizibil doar cu „Arată-le") rămâne lizibil, doar retras. */
h2.tight:has(.ab-hide-f) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.ab-hide-f { margin: 0; margin-left: auto; }
@media (max-width: 560px) { .ab-hide-f { margin-left: 0; } }
/* Cardul ascuns (vizibil doar cu „Arată-le"): contur întrerupt + culoare stinsă. Se folosește
   `filter`, NU `opacity`: animația de intrare are `.jsa .panel.in { opacity: 1 }`, cu specificitate
   mai mare, deci un `opacity` de-aici n-ar fi aplicat niciodată după reveal. */
.panel.ab-exp-hidden { border-style: dashed; filter: grayscale(.55) opacity(.78); }
.panel.ab-exp-hidden:hover, .panel.ab-exp-hidden:focus-within { filter: none; }
.ab-hidden-bar { margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.site-edit button[type="submit"] { margin-top: 2px; align-self: flex-end; }
/* listă vizite individuale */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl.visits { min-width: 580px; }
.tbl.visits td .conv-rate { min-width: 120px; }
.v-dev { display: inline-flex; align-items: center; gap: 6px; }
.v-ico { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.v-long { color: var(--accent); font-weight: 700; }
@media (max-width: 780px) { .panel .tbl-scroll .tbl { display: table; overflow: visible; white-space: nowrap; } }
/* Nowrap-ul de mai sus (datele și sumele pe un rând) împingea, pe telefon, coloanele cu bani în afara
   ecranului, fără niciun semn că tabelul se derulează (audit 2026-09-27, C1879). Derularea orizontală
   rămâne tiparul ales (notes: „tabele noi: întotdeauna în .tbl-scroll"); reparăm ce o făcea să ascundă:
   - .prod-cell (Produse) moștenea nowrap, iar overflow-wrap:anywhere nu mai avea efect → numele
     lung ieșea din celula de 220px și se scria PESTE sumele din Venit (ca excepția de la .camptbl);
   - eticheta din Cheltuieli / Vânzări (.fin-lbl) se împachetează pe o coloană de cel puțin 120px, în
     loc să întindă rândul pe 500+px → Suma ajunge lângă ea, în ecran sau la marginea lui. */
@media (max-width: 780px) {
  .panel .tbl-scroll .tbl .prod-cell { white-space: normal; }
  .panel .tbl-scroll .tbl td.fin-lbl { white-space: normal; min-width: 120px; overflow-wrap: anywhere; }
  /* „detalii" e lipit de etichetă (fără spațiu în markup) → s-ar rupe „detal-ii"; inline-block îl
     mută întreg pe rândul următor când nu încape */
  .panel .tbl-scroll .tbl td.fin-lbl .exp-note-toggle { display: inline-block; }
}
/* Indiciu de derulare pe ORICE .tbl-scroll care chiar se derulează: marginea din dreapta se estompează
   până ajungi la capăt. Animație legată de derulare (animation-timeline): când tabelul încape, cronologia
   e inactivă → nicio mască, totul rămâne ca înainte. Browserele fără suport ignoră blocul. Masca e
   doar alfa (negru = opac, transparent = estompat), nu o culoare afișată. Între cadrele de 97% și 100%
   masca trece discret la none: ultimul pas de derulare arată coloana din dreapta întreagă. */
@keyframes tblFade {
  from, 97% { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
                      mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  to { -webkit-mask-image: none; mask-image: none; }
}
@supports (animation-timeline: scroll()) {
  .tbl-scroll { animation: tblFade linear both; animation-timeline: scroll(self inline); }
}
/* scor de relevanță */
.rel { display: inline-block; min-width: 34px; text-align: center; padding: 2px 9px; border-radius: 8px;
  font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 13px; }
.rel-hi  { background: rgba(var(--accent-rgb),.16); color: var(--accent); }
.rel-mid { background: rgba(var(--warn-7-rgb),.14); color: var(--warn-ink); }
.rel-lo  { background: rgba(var(--veil-rgb),.05); color: var(--faint); }
/* tabel sortabil */
.sortable th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s; }
@media (hover: hover) { .sortable th[data-sort]:hover { color: var(--accent); } }
.sortable th.sort-asc::after  { content: " ↑"; color: var(--accent); }
.sortable th.sort-desc::after { content: " ↓"; color: var(--accent); }
/* click pe nr. de click-uri → butoanele apăsate */
.clk-btn { background: rgba(var(--accent-rgb),.13); color: var(--accent); border: 0; border-radius: 7px; padding: 2px 10px;
  font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 13px; cursor: pointer; transition: .12s; }
.clk-btn.on { background: var(--accent-fill); color: var(--accent-ink); }
@media (hover: hover) { .clk-btn:hover { background: var(--accent-fill); color: var(--accent-ink); } }
.clk-detail td { padding: 2px 12px 14px !important; background: rgba(var(--veil-rgb),.015); }
.clk-list { display: flex; flex-direction: column; gap: 7px; }
.clk-i { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.clk-el { color: var(--muted); }
.clk-tx { color: var(--text); }
.clk-tag { font-size: 10.5px; padding: 1px 8px; border-radius: 6px; font-weight: 600; }
.clk-tag.rage { background: rgba(var(--warn-rgb),.16); color: var(--warn-ink); }
.clk-tag.dead { background: rgba(var(--danger-rgb),.16); color: var(--danger); }
.clk-tag.media { background: rgba(var(--chart-3-rgb),.14); color: var(--chart-3-ink); }
/* funnel de scroll */
.sfunnel { display: flex; flex-direction: column; gap: 10px; }
.sf-row { display: grid; grid-template-columns: 190px 1fr 52px; align-items: center; gap: 14px; }
.sf-lbl { color: var(--muted); font-size: 13px; }
.sf-bar { height: 22px; border-radius: 7px; background: rgba(var(--veil-rgb),.05); overflow: hidden; }
.sf-fill { display: block; height: 100%; border-radius: 7px; background: var(--bar-grad); transition: width .6s cubic-bezier(.22,1,.36,1); }
.sf-pct { font-family: "Bricolage Grotesque"; font-size: 14px; text-align: right; }
@media (max-width: 560px) { .sf-row { grid-template-columns: 120px 1fr 44px; gap: 8px; } .sf-lbl { font-size: 12px; } }
/* funnel de conversie (trepte descrescătoare, centrat) */
.cfunnel { display: flex; flex-direction: column; gap: 14px; }
.cf-row { display: flex; flex-direction: column; gap: 6px; }
.cf-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cf-lbl { color: var(--text); font-size: 13.5px; }
.cf-meta { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.cf-meta b { font-family: "Bricolage Grotesque"; font-size: 15px; }
.cf-pct { color: var(--muted); font-size: 12.5px; }
.cf-drop { color: var(--danger); font-size: 11.5px; background: rgba(var(--danger-rgb),.12); border-radius: 999px; padding: 1px 7px; }
.cf-bar { height: 26px; border-radius: 8px; background: rgba(var(--veil-rgb),.05); overflow: hidden; }
.cf-fill { display: block; height: 100%; border-radius: 8px; background: var(--bar-grad); transition: width .6s cubic-bezier(.22,1,.36,1); }
/* treapta „Au cumpărat" — comenzi REALE din shop, altă unitate decât vizitatorii → separată vizual */
.cf-row-orders { border-top: 1px dashed rgba(var(--veil-rgb),.16); padding-top: 14px; margin-top: 2px; }
.cf-row-orders .cf-fill { background: var(--bar-gold); }
/* v73: treapta obiectivului principal când NU e un subset al butoanelor (formular / pagină /
   eveniment) — aceeași separare vizuală ca la comenzi, dar cu umplerea obișnuită a funnel-ului */
.cf-row-goal { border-top: 1px dashed rgba(var(--veil-rgb),.16); padding-top: 14px; margin-top: 2px; }
/* tab „Obiective" (v73): eticheta poate purta o cale lungă — se rupe oriunde, nu lățește tabelul */
.tbl td.gl-lbl { white-space: normal; overflow-wrap: anywhere; min-width: 180px; max-width: 360px; }
.cf-unit { color: var(--muted); font-size: 12.5px; }
.cf-rev { color: var(--muted); font-size: 12.5px; text-align: right; }
.cf-rev b { color: var(--text); font-family: "Bricolage Grotesque"; font-size: 14px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sec-head .eyebrow { margin-bottom: 6px; }
.v-hidden { display: none; }
/* ---------- demographics / hartă ---------- */
.geo-panel { padding: 10px; }
/* cutia ocupă TOT panoul (edge-to-edge, fără max-width care o centra ca un pătrat mic în mijloc) —
   spațiul din lateral rămâne folosit de punctele internaționale; înălțime mărită → România mai mare. */
.geomap { position: relative; width: 100%; height: 80vh; min-height: 520px; max-height: 880px;
  border-radius: 12px; overflow: hidden; background:
    radial-gradient(120% 90% at 50% 8%, rgba(var(--accent-rgb),.05), transparent 60%), var(--geo-bg);
  user-select: none; -webkit-user-select: none; }   /* fără selecție de text la click-drag pe hartă */
.geo-svg { width: 100%; height: 100%; display: block; }
.geo-shape { stroke: rgba(var(--veil-rgb),.10); stroke-width: .7px; stroke-linejoin: round; transition: fill .5s; }
.geo-w { stroke: rgba(var(--veil-rgb),.08); }
.geo-j { stroke: rgba(var(--veil-rgb),.14); stroke-width: .8px; cursor: pointer; }
.geo-shape.hl { stroke: var(--accent); stroke-width: 1.4px; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),calc(.55*var(--glow)))); }
.geo-dot { fill: var(--accent); stroke: var(--geo-dot-stroke); stroke-width: 1.2px; cursor: pointer;
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb),calc(.6*var(--glow)))); transition: transform .12s; }
.geo-dot.hl { fill: var(--geo-hl); }
.geo-tip { position: absolute; z-index: 5; transform: translate(-50%, -100%); pointer-events: none;
  background: var(--pop-sheet); border: 1px solid var(--stroke-2); border-radius: 9px; padding: 7px 11px;
  opacity: 0; transition: opacity .12s; white-space: nowrap; box-shadow: 0 12px 30px -10px rgba(0,0,0,calc(.7*var(--shk))); }
.geo-tip.on { opacity: 1; }
.geo-tip b { display: block; font-family: "Bricolage Grotesque"; font-size: 13px; color: var(--text); }
.geo-tip i { font-style: normal; font-size: 11.5px; color: var(--accent); }
.geo-reset { position: absolute; top: 12px; right: 12px; z-index: 4; }
.geo-attr { text-align: right; font-size: 10.5px; color: var(--faint); margin-top: 8px; }
/* Linkul de atribuire are 26×14px — sub minimul de atins pe touch. NU-l mărim vizual (e o notă
   discretă, intenționat mică): extindem DOAR zona de atingere. (audit responsive 2026-08-05) */
.geo-attr a { color: var(--muted); position: relative; }
.geo-attr a::after { content: ""; position: absolute; inset: -15px -10px; min-width: 44px; min-height: 44px; }
.geo-list { display: flex; flex-direction: column; gap: 2px; }
.geo-li { display: grid; grid-template-columns: 1fr 90px 42px; align-items: center; gap: 10px;
  padding: 5px 6px; border-radius: 7px; transition: background .12s; }
@media (hover: hover) { .geo-li:hover { background: rgba(var(--veil-rgb),.04); } }
.geo-li-n { font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
.geo-li-n.muted { color: var(--muted); }
.geo-flag { font-size: 14px; }
.geo-li-bar { height: 7px; border-radius: 5px; background: rgba(var(--veil-rgb),.05); overflow: hidden; }
.geo-li-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--bar-grad); }
.geo-li-bar.intl > span { background: var(--bar-intl); }
.geo-li b { font-family: "Bricolage Grotesque"; font-size: 13px; text-align: right; }
/* Sub 360px bara fixă de 90px + cifra de 42px lăsau numelui ~71px, iar „Statele Unite” /
   „Marea Britanie” se rupeau pe 2 rânduri. Bara e decor, numele e informația → cedează bara.
   La 375px numele încap deja pe un rând, de aceea pragul e 360, nu 560 — proporțiile rămân
   neatinse pe restul telefoanelor. (audit responsive 2026-08-05) */
@media (max-width: 360px) { .geo-li { grid-template-columns: 1fr 56px 42px; gap: 8px; } }
/* Harta se scalează după LĂȚIME (raport ~1,36:1), dar cutia rămânea de 520px pe telefon:
   `min-height:520px` de mai sus bătea `height:52vh`. La 320px harta desena 235px și rămâneau
   ~285px de gol — un ecran întreg de nimic. Înălțimea urmează acum raportul hărții, cu plasă
   jos (telefon în peisaj) și sus (52vh, plafonul de dinainte). (audit responsive 2026-08-05) */
@media (max-width: 780px) { .geomap { height: 78vw; min-height: 240px; max-height: 52vh; } }

/* ---------- recomandări ---------- */
.rec-card { margin-top: 12px; border-left: 3px solid var(--stroke); }
.rec-card:first-of-type { margin-top: 0; }
.rec-critical { border-left-color: var(--danger); }
.rec-warning { border-left-color: var(--warn); }
.rec-info { border-left-color: var(--chart-3); }
.rec-good { border-left-color: var(--accent); }
.rec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rec-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.rec-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.rec-badge svg { width: 12px; height: 12px; }
.rec-badge-critical { background: rgba(var(--danger-rgb),.14); color: var(--danger); }
.rec-badge-warning { background: rgba(var(--warn-rgb),.14); color: var(--warn-ink); }
.rec-badge-info { background: rgba(var(--chart-3-rgb),.14); color: var(--chart-3-ink); }
.rec-badge-good { background: rgba(var(--accent-rgb),.14); color: var(--accent); }

/* checkmark din identitatea vizuală (înlocuiește emoji ✅/✓ — cerut 2026-07-14). Disc lime PLIN
   (full color) — FĂRĂ glow. Dimensiune în `em` (nu px fix): se scalează cu font-size-ul textului
   din jur, ca să rămână proporțional și în contexte cu text mic (.small = 12.5px) și în text normal
   (cerut 2026-07-14 de 2 ori: „prea mare pt textul asta" în ambele contexte, cu font-size diferit).
   vertical-align negativ ușor = centrat vizual pe baseline-ul textului, nu doar „middle" (care lasă
   discul puțin sus/nealineat cu litere mici). */
.chk-ico { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em;
  border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); vertical-align: middle;
  position: relative; top: -0.06em;   /* `middle` lasă discul un pic sub centrul optic al textului → ridicat ușor */
  margin: 0 3px; flex-shrink: 0; }
.chk-ico .ico { width: .6em; height: .6em; }
.chk-ico .ico path { stroke-width: 2.6; }   /* bifă clară */
/* în KPI-ul de break-even (valoare 30px) 1em ar fi disproporționat de mare — plafonat la dimensiune fixă */
.kpi .chk-ico { width: 18px; height: 18px; }
.kpi .chk-ico .ico { width: 11px; height: 11px; }
.rec-finding { font-size: 14.5px; color: var(--text); line-height: 1.5; margin: 0 0 14px; }
.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rec-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 5px; }
.rec-grid p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
@media (max-width: 680px) { .rec-grid { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- interpretarea datelor ---------- */
.interp-panel { display: flex; flex-direction: column; gap: 16px; }
.interp-sec { padding-bottom: 16px; border-bottom: 1px solid var(--stroke); }
.interp-sec:last-child { border-bottom: none; padding-bottom: 0; }
.interp-lbl { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); margin-bottom: 7px; }
.interp-lbl svg { width: 13px; height: 13px; }
.interp-sec p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.65; }
.interp-sec.interp-verdict { border-bottom: none; padding: 14px 16px; margin-top: 2px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.09), rgba(var(--accent-rgb),.02)); border: 1px solid rgba(var(--accent-rgb),.18); }
.interp-verdict .interp-lbl { color: var(--accent); }

/* pagina exactă de origine, sub eticheta sursei (Social/Căutare/Referral) în tabelul de vizite.
   PHP o taie deja la 36 de coloane cu „…" (index.php, mb_strimwidth). 250px (nu 240) încap exact acele
   36 de coloane la 11px mono (măsurat: max 242px, „…" vine din fontul de rezervă) — altfel CSS-ul mai
   retează încă 2px din „…" (2026-09-29, regresie dupa0 §3.2). Ellipsis-ul CSS rămâne doar plasă. */
.v-ref { display: block; font-size: 11px; color: var(--faint); margin-top: 1px; max-width: 250px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.more-wrap { display: flex; justify-content: center; margin-top: 14px; }
.more-visits { min-width: 220px; justify-content: center; }   /* textul centrat în lățimea minimă (2026-10-15: în engleză „Load 50 more” rămânea lipit la stânga, cu 39px goi în dreapta) */
.more-visits .mv-rem { color: var(--muted); font-weight: 400; margin-left: 4px; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; border: 1px solid var(--stroke); color: var(--muted); }
.pill.hot { color: var(--warn-3-ink); border-color: rgba(var(--warn-rgb),.42); background: rgba(var(--warn-rgb),.1); }
/* „oprit(ă)" — stare aleasă deliberat, nu eroare: contur, fără fundal de alarmă */
.pill.off { color: var(--faint); border-style: dashed; }
.pill[hidden] { display: none; }   /* `hidden` pierde altfel lupta cu display:inline-block */

/* ---------- comutator on/off (switch) — token comun ----------
   Nu exista niciun switch în sistem: on/off se făcea fie cu buton („Pornește"/„Oprește",
   pagina Înregistrări), fie cu checkbox (bifa de Conversie). Ambele rămân potrivite unde
   sunt — un buton pentru O acțiune de pagină, un checkbox pentru „selectez elemente".
   Switch-ul e pentru altceva: N stări independente într-o LISTĂ, unde vrei să vezi dintr-o
   privire care e pornit și care nu (variantele A/B). Markup: label.psw > input + .psw-t + .psw-l.
   Input-ul e ascuns vizual, dar rămâne focalizabil — regula generică de checkbox de mai jos
   l-ar fi desenat ca pătrat lime peste pistă. */
.psw { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; vertical-align: middle; }
/* Input-ul NU e ascuns cu clip-path/1px, ci întins invizibil peste comutator: rămâne
   ELEMENTUL pe care se apasă și pe care cade focusul, iar aria lui e 40×40 din start —
   nu mai are nevoie de regula tactilă din @media, și nici auditorul de responsive nu
   mai vede o țintă de 1×1 acolo unde utilizatorul apasă de fapt 40×40. `inset` îl face
   cu 3px mai lat și cu 10px mai înalt decât pista desenată (34×20). */
.psw input[type="checkbox"] {
  position: absolute; inset: -10px -3px; width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 999px; opacity: 0; cursor: pointer;
}
.psw-t { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--stroke-2); transition: background .16s, border-color .16s, box-shadow .16s; }
.psw-t::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--faint); transition: transform .16s, background .16s; }
.psw input:checked + .psw-t { background: rgba(var(--accent-rgb), .2); border-color: rgba(var(--accent-rgb), .5); }
.psw input:checked + .psw-t::after { transform: translateX(14px); background: var(--accent); }
/* inputul e invizibil (opacity 0), deci conturul transparent stă pe pistă: apare în culori forțate (C1278) */
.psw input:focus-visible + .psw-t { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); outline: 2px solid transparent; outline-offset: 3px; }
.psw input:disabled + .psw-t { opacity: .45; }
.psw-l { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.psw input:checked ~ .psw-l { color: var(--text); }
@media (hover: hover) { .psw:hover .psw-t { border-color: rgba(var(--accent-rgb), .55); } }
@media (prefers-reduced-motion: reduce) { .psw-t, .psw-t::after { transition: none; } }
/* ---------- checkbox-uri custom (peste tot pe site) — dark + accent lime ---------- */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 21px; height: 21px; min-width: 21px;   /* min-width anulează 180px din regula generică `input` */
  /* PĂTRAT ORICE AR CERE O REGULĂ MAI JOS (2026-10-09, Liviu: „fă bifele pătrate”): o regulă locală cu height:16px
     lăsa min-width-ul de 21 în picioare → 21×16, o pastilă (bifa auditului; înainte, `.shp-c`). Cu limitele pe
     ambele axe, orice width/height local se oprește la 21×21. Excepția voită: `.psw` (comutatorul), care le anulează. */
  min-height: 21px; max-width: 21px; max-height: 21px;
  border-radius: 5px; flex-shrink: 0;   /* 5px, nu 7px: pătrat cu colțuri fine (7px pe 21px citea a pastilă, 2026-09-14) */
  background: var(--glass); border: 1.5px solid var(--stroke-2);
  cursor: pointer; position: relative; margin: 0; padding: 0;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
@media (hover: hover) { input[type="checkbox"]:hover { border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); } }
input[type="checkbox"]:checked { background: var(--accent-fill); border-color: var(--accent-fill); }
/* bifă = SVG centrat cu background (nu pseudo-element rotit poziționat manual — acela ieșea
   descentrat, raportat 2026-07-03); inset:0 + center = mereu perfect în mijloc */
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310130a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
/* outline transparent, nu none: în culori forțate (Windows Contrast ridicat) box-shadow-ul dispare, iar
   conturul transparent devine vizibil în culoarea sistemului; în rest nu se vede (2026-09-27, audit C1278) */
input[type="checkbox"]:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.28); }
input[type="checkbox"]:disabled { cursor: default; opacity: .6; box-shadow: none; }
@media (hover: hover) { input[type="checkbox"]:disabled:hover { border-color: var(--accent); } }
/* ---------- radio (peste tot) — pereche cu bifa ----------
   Fără regula asta, un radio primea stilul generic `input` (min-width 180px, înălțime 32px) și se desena ca un
   cerc nativ uriaș într-o casetă lată (pastila „principal" din Setări site, raportat 2026-09-14). */
input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--glass); border: 1.5px solid var(--stroke-2);
  cursor: pointer; position: relative; margin: 0; padding: 0;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
@media (hover: hover) { input[type="radio"]:hover { border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); } }
input[type="radio"]:checked { background: var(--accent-fill); border-color: var(--accent-fill); }
input[type="radio"]:checked::after { content: ''; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent-ink); }
input[type="radio"]:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.28); }   /* ca la bifă (C1278) */
input[type="radio"]:disabled { cursor: default; opacity: .6; box-shadow: none; }

.goal-check { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }
@media (hover: hover) { .goal-check:hover { color: var(--text); } }
/* eticheta urmărește starea; la cele auto-detectate spune și de unde vine bifa */
.goal-check input:checked ~ .gc-lbl::after { content: 'da, se numără'; color: var(--accent); }
.goal-check input:not(:checked) ~ .gc-lbl::after { content: 'nu'; }
.goal-check.is-auto input:checked ~ .gc-lbl::after { content: 'da, detectat automat'; }
.goal-check.is-auto input:not(:checked) ~ .gc-lbl::after { content: 'nu — dezactivat manual'; }

/* ---------- horizontal bars (solid lime — clean) ---------- */
.bars { display: flex; flex-direction: column; gap: 11px; }
.barrow { display: grid; grid-template-columns: 120px 1fr 48px; align-items: center; gap: 12px; font-size: 13px; }
/* În „Top referrers” (singurul panou cu bare pe TOATĂ lățimea) eticheta e un URL întreg, nu un
   cuvânt: la 1920px se tăiau 402px din „newsletter.aresens.ro/…”, deși bara de lângă avea sute
   de pixeli de pistă goală (audit responsive 2026-08-05). Lărgim coloana DOAR acolo — în
   panourile din .grid (Browsere, Sisteme, Rezoluții, Limbi) etichetele sunt scurte („Edge”,
   „ro-RO”) și 120px rămân exact cum erau; global, regula ar fi lăsat 50–200px de gol mort
   înaintea barei, inclusiv pe mobil, unde .grid.c2/.c3/.c12 devin o coloană sub 960px.
   Guard-ul min-width:561px păstrează regula de mobil de mai jos (84px 1fr 38px), care are
   specificitate mai mică și altfel ar fi fost învinsă de selectorul ăsta. */
@media (min-width: 561px) {
  main.wrap > .panel .barrow { grid-template-columns: clamp(120px, 32%, 380px) 1fr 48px; }
}
.barrow .bl { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barrow .bt { height: 8px; border-radius: 999px; background: rgba(var(--veil-rgb),.06); overflow: hidden; }
.barrow .bf { height: 100%; border-radius: 999px; background: var(--bar-fill); box-shadow: 0 0 12px rgba(var(--accent-rgb),calc(.4*var(--glow))); }
.barrow .bn { text-align: right; color: var(--muted); font-family: "Bricolage Grotesque"; font-feature-settings: "tnum"; }

/* ---------- donut + legend ---------- */
/* Legenda trece singură sub donut când panoul nu mai are loc pentru amândouă pe un rând
   (audit responsive 2026-08-05). Pe 1024–1101px ieșea din card peste panoul vecin și împingea
   documentul cu 57px lateral (captura de la 1024 era lată 1081px); până pe la ~1420px ieșea în
   padding-ul cardului. Fix pe CONTAINER, nu pe viewport, ca să meargă identic și cu sidenav-ul
   restrâns (--snav-w: 72px, unde spațiul e cu 198px mai mare): flex-basis-ul decide singur când
   se rupe rândul. 150px = exact cât îi trebuie legendei ca numele fixe („Referral”, „Tabletă”)
   să rămână ÎNTREGI; sub atât rândul se rupe și legenda primește toată lățimea cardului. NU
   coborî valoarea: la 125px, între 1250 și 1312px rândul rămâne întreg dar numele se taie.
   `width: 100%` rămâne pentru layout-ul pe coloană sub 780px. */
.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.donut { flex-shrink: 0; }
.legend { display: flex; flex-direction: column; gap: 9px; font-size: 13px; width: 100%; flex: 1 1 150px; min-width: 0; }
.legend .li { display: flex; align-items: center; gap: 9px; }
.legend .dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
/* `.lname` nu se strângea (min-width:auto pe flex item) → pe coloane înguste (cele 3
   carduri Dispozitive/Browsere/Sisteme stau pe un rând de la 1024px în sus) numele lungi
   („Samsung Internet”, „Instagram In-App”) împingeau `.lval` afară din card: cifra și
   procentul se tipăreau PESTE eticheta vecină, iar ultimul card ieșea din ecran. Cu
   `min-width:0` numele cedează primul, cu „…”, iar valorile rămân aliniate la dreapta.
   Audit responsive 2026-08-05. */
.legend .lname { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend .lval { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.legend .lnum { color: var(--text); font-family: "Bricolage Grotesque"; font-feature-settings: "tnum"; font-weight: 600; min-width: 22px; text-align: right; }
.legend .lpct { color: var(--muted); font-size: 11px; background: rgba(var(--veil-rgb),.06); padding: 2px 8px; border-radius: 999px; font-family: "Bricolage Grotesque"; font-feature-settings: "tnum"; }

.chart { width: 100%; display: block; }

/* ---------- activity grid ---------- */
/* pe ecrane înguste grila de 24h devine ilizibilă (~10px/celulă) → scroll orizontal
   cu min-width, ca celulele să rămână lizibile în loc să se strivească */
.act-scroll { overflow-x: auto; }
/* 2026-10-10 (audit 158): pragul după lățimea cardului (.act-split e container), nu a ecranului — la 520–540 px grila
   se derula câțiva px; regula e mai jos, în @container, împreună cu etichetele lipite */
/* Celulele rămân PĂTRATE, dar mici și dese (2026-08-06). Prima încercare le-a făcut
   dreptunghiulare ca să umple un card pe toată lățimea — greșit: Liviu a cerut pătrate tocmai
   pentru că, mici fiind, grila are nevoie de mai puțină lățime, iar cardul poate să se întoarcă
   pe o coloană. Cu latura de ~15px și interstiții de 3px (în loc de 4/5), grila coboară de la
   ~292px la ~125px, adică o reducere de 57%, și încape într-o coloană de ~500px. */
.act-rows { display: flex; flex-direction: column; gap: 3px; }
.act-row { display: grid; grid-template-columns: 26px repeat(24, 1fr); gap: 3px; align-items: center; }
.act-row .lbl { font-size: 10px; color: var(--faint); }
.act-cell { aspect-ratio: 1; border-radius: 3px; background: rgba(var(--veil-rgb),.04); }
.act-hours { display: grid; grid-template-columns: 26px repeat(24, 1fr); gap: 3px; margin-top: 6px; }
/* 10px = același corp ca eticheta de zi (.act-row .lbl) și pragul minim de
   lizibilitate pe mobil. Încape: se scrie o etichetă la fiecare 3 ore, iar o
   coloană are ~14px la min-width-ul de 470px al scroller-ului (audit 2026-08-05). */
.act-hours span { font-size: 10px; color: var(--faint); text-align: center; }
/* Derularea de sub 560px rămâne (decizia de mai sus), dar îi lipseau două lucruri (2026-09-27, audit C2053):
   - ziua: eticheta e prima coloană a grilei, deci la derulare ieșea din ecran și orele de seară (de obicei
     vârful) rămâneau fără zi → eticheta (și celula goală de sub ea, din rândul orelor) stă LIPITĂ la stânga,
     pe fundalul opac al cardului (--card-solid, ca la Financiar); umbra de 3px acoperă și interstițiul, ca
     pătratele să nu se vadă trecând pe sub ea;
   - semnul că mai e ceva la dreapta: la 320px se vedeau 12 ore din 24 → aceeași mască tblFade ca la tabele
     (marginea din dreapta se estompează până ajungi la capăt; când grila încape, nicio mască). */
@container (max-width: 434px) {
  .act-scroll .act-rows, .act-scroll .act-hours { min-width: 470px; }
  .act-scroll .act-row .lbl, .act-scroll .act-hours > span:first-child {
    position: sticky; left: 0; z-index: 1; align-self: stretch; display: flex; align-items: center;
    background: var(--card-solid); box-shadow: 3px 0 0 var(--card-solid); }
}
@supports (animation-timeline: scroll()) {
  .act-scroll { animation: tblFade linear both; animation-timeline: scroll(self inline); }
}

/* sub-antet de campanie în listele grupate (Site-uri, Acces clienți) */
.camp-head { display: flex; align-items: center; gap: 7px; margin: 16px 0 2px; padding-left: 2px;
  font-size: 13px; font-weight: 600; color: var(--muted); }
.camp-head .ico { width: 14px; height: 14px; color: var(--faint); }

/* ---------- liste compacte (Site-uri, Acces clienți) — scalează la 50-100+ intrări ---------- */
.hidden-filtered { display: none !important; }
.site-search { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; padding: 10px 14px;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--stroke); }
.site-search .ico { width: 16px; height: 16px; color: var(--faint); flex-shrink: 0; }
.site-search input { flex: 1; background: none; border: none; padding: 0; font-size: 13.5px; }
.site-search input:focus { outline: none; box-shadow: none; }
/* (2026-09-27, audit C0927) Inelul global de focus (input:focus) e anulat mai sus pe câmpul din
   pastilă, ca să nu apară în interiorul ei — dar nu fusese mutat pe pastilă, deci căutarea din
   Panou, Site-uri și Acces clienți nu arăta nimic la Tab. Aceeași pereche ca input:focus. */
.site-search:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
/* Panou (2026-09-09): căutare + ordinea site-urilor (Client · Recente · Vizualizări · Profit,
   ținută minte pe cont) pe același rând; pe îngust, căutarea ia tot rândul, pastilele coboară. */
.home-tools { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 22px 0 2px; }
/* aceeași înălțime (42px) ca grupul de pastile de sortare (.period-presets: min-height 42px) */
.home-tools .site-search { flex: 1 1 260px; margin: 0; min-height: 42px; box-sizing: border-box; padding: 0 14px; }
.home-tools .home-sort { flex: 0 0 auto; display: flex; gap: 4px; flex-wrap: wrap; }
/* Antetul unui client pe Panou: LIPIT sus cât derulezi grupul lui, cu o dungă în nuanța
   clientului (aceeași de fiecare dată) și numărul de site-uri — ca să se vadă dintr-o privire
   unde începe un client și unde se termină celălalt. */
/* NU e lipicios (încercat pe 9 sep 2026, scos în aceeași zi la cererea lui Liviu: banda opacă
   tăia rândurile de sub ea „ca un glitch"). Separarea clienților o fac dunga colorată, numele
   mai apăsat și numărul de site-uri. */
.client-head { padding: 10px 0 6px; margin: 14px 0 0; }
.client-head .eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); }
.client-head .eyebrow::before { content: ''; width: 3px; height: 14px; border-radius: 2px; flex-shrink: 0;
  background: hsl(var(--fh, 85) 70% 58%); }
.client-head.ch-rec .eyebrow::before, .client-head.ch-flat .eyebrow::before { display: none; }
.client-head .eyebrow .ico { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
.client-head .ch-n { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); }
.site-row .fav { width: 22px; height: 22px; }
.site-row .fav img { width: 16px; height: 16px; }
.sr-client { flex: 0 100 auto; min-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--muted); padding: 2px 8px; border-radius: 6px; background: var(--glass-2); }
.client-head .ch-n { white-space: nowrap; flex-shrink: 0; }
.client-group { margin-bottom: 4px; }
.camp-group { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.site-item { border-radius: 12px; background: var(--surface-2); border: 1px solid var(--stroke); overflow: hidden; }

/* =========================================================================
   RÂNDUL DE SITE — Site-uri și Panou general (.sr-grid); Acces clienți folosește doar baza.
   Desktop (≥1200px): un singur rând — iconiță · nume · chip-uri · [cifre] · acțiuni doar cu iconițe.
   Îngust (≤1199px): grilă FIXĂ — acțiunile stau mereu în colțul din dreapta sus, lângă nume; chip-urile
   și cifrele coboară sub nume, aliniate cu el. Cerut de Liviu (2026-09-14): pe mobil butonul „Analytics"
   sărea în alt loc pe fiecare card, după cât de lungi erau numele și chip-urile.
   ========================================================================= */
.site-row { --act: 32px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.site-row .dot-live { flex-shrink: 0; }
/* `min-width:0` + „…": fără ele, un nume lung (nowrap) nu se putea micșora și împingea butoanele în afara
   cardului, unde `overflow:hidden` de pe .site-item le tăia (2026-08-05). */
.sr-name { font-family: "Bricolage Grotesque"; font-weight: 600; font-size: 14px; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Numele are PRIORITATE la spațiu: la strâmtoare se scurtează întâi clientul și campania (flex-shrink 100
   față de 1 = practic pe rând: întâi ele până la minim, abia apoi numele). Chip-urile păstrează un minim de 92px („Horia Radu —…"), nu ciorturi de 3 litere;
   obiectivul și avertismentele nu se strâng deloc. Numele scurtat are titlul complet în `title`. */
.sr-grid .sr-name { flex: 0 1 auto; }
/* site fără date = fără punctul verde; pe desktop numele pornește totuși de la același x ca pe rândurile
   cu punct (8px punct + 10px spațiu). În grila de pe îngust coloana punctului există oricum. */
@media (min-width: 1200px) { .sr-dotted > .fav + .sr-name { margin-left: 18px; } }
.sr-meta { display: contents; }
.site-row .fin-badge { flex-shrink: 0; }
/* link-ul de acces client (Acces clienți) — afișat direct pe rând */
.sr-link { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 12.5px; }
@media (hover: hover) { .sr-link:hover { color: var(--accent); text-decoration: underline; } }
/* `inline-block`, nu `inline-flex`: într-un container flex textul liber devine element anonim și
   `text-overflow:ellipsis` nu i se mai aplică (2026-08-05). Iconița se aliniază din `vertical-align`. */
.sr-camp { display: inline-block; max-width: 40%; min-width: 92px; flex: 0 100 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--faint); }
.sr-camp .ico { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
/* Minimul de 92px e doar pentru numele LUNGI, ca să nu ajungă ciorturi de 3 litere. Pe unul scurt
   („Boostetic", „Marius Simion") întindea cutia peste text și lăsa un gol după nume (sesizat de Liviu,
   2026-09-14). Chip-ul scurt (≤14 caractere; campania ≤12, are și iconiță) stă exact cât textul și nu se strânge. */
.sr-client.sr-fit, .sr-camp.sr-fit { flex-shrink: 0; min-width: 0; }
/* v73: obiectivul principal, ca chip discret (duce la Setări) */
.sr-goal { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 9px;
  border-radius: 999px; font-size: 11.5px; color: var(--muted); border: 1px solid var(--stroke);
  background: rgba(var(--veil-rgb),.03); text-decoration: none; white-space: nowrap; overflow: hidden; transition: .15s; }
.sr-goal .ico { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
.sr-goal-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .sr-goal:hover { border-color: rgba(var(--accent-rgb),.5); color: var(--text); } }

/* Cifrele (Panou general): iconiță + număr, ca în dropdown-ul de proiecte — cuvintele („vizualizări",
   „vizitatori", „profit") stau în `title` (cerut 2026-09-14). Lățimi FIXE pe coloană, nu `min-width`:
   altfel coloana de profit creștea după conținut și împingea celelalte coloane de la un rând la altul
   (2026-08-05). `tabular-nums` = toate cifrele au aceeași lățime. */
.sr-stats { display: flex; flex-shrink: 0; gap: 22px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.sr-grid .sr-stats { margin-left: auto; }
.sr-stats .st { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; width: 76px; }
.sr-stats .st.st-money { width: 124px; }
.sr-stats .st .ico { width: 14px; height: 14px; color: var(--faint); flex-shrink: 0; }
.sr-stats .st b { color: var(--text); font-family: "Bricolage Grotesque"; font-weight: 700;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* varianta MARE (Panoul general) — cifrele se văd dintr-o privire */
.sr-stats.lg .st { width: 92px; gap: 8px; }
.sr-stats.lg .st.st-money { width: 152px; }
.sr-stats.lg .st .ico { width: 16px; height: 16px; }
.sr-stats.lg .st .fin-num { font-size: 20px; }   /* profitul la fel de mare ca restul cifrelor din rând */
.sr-stats.lg .st b { font-size: 20px; }

.sr-actions { display: flex; gap: 6px; flex-shrink: 0; }
.site-row .sr-actions { margin-left: auto; }
.sr-grid .sr-stats + .sr-actions { margin-left: 0; }
.sr-toggle.on { color: var(--accent); background: var(--glass-2); }
.ico.sr-chev { width: 14px; height: 14px; color: var(--accent); transition: transform .15s; }
.sr-toggle.on .ico.sr-chev { transform: rotate(180deg); }
/* rând clickabil (Panoul general → Analytics) */
.row-link { cursor: pointer; transition: background .12s; }
@media (hover: hover) { .row-link:hover { background: var(--glass-2); } }
.site-detail { padding: 16px 18px 18px; border-top: 1px solid var(--stroke); background: var(--well); }
.site-detail .site-edit { border-top: 1px dashed var(--stroke); }

/* Banda 1024–1599px: shell-ul fix (rail + sidenav = 334px) lasă rândului mai puțin loc decât un ecran
   de 1023px fără shell; cifrele se strâng puțin, campania cedează mai devreme (măsurat 2026-08-05). */
@media (min-width: 1024px) and (max-width: 1599px) {
  .sr-stats { gap: 14px; }
  .sr-stats.lg .st { width: 84px; }
  .sr-stats.lg .st.st-money { width: 140px; }
  .sr-camp { max-width: 28%; }
}

/* Sub 1200px rândul nu mai încape pe o linie (de la 1024px în sus shell-ul fură 334px). */
@media (max-width: 1199px) {
  /* rândurile fără grilă (Acces clienți): împachetare simplă, link-ul pe rândul lui */
  .site-row:not(.sr-grid) { flex-wrap: wrap; }
  .site-row:not(.sr-grid) .sr-name { max-width: calc(100% - 32px); }
  .site-row:not(.sr-grid) .sr-link { order: 3; flex-basis: 100%; }
  /* Aria de apăsare a linkului de raport (audit 2026-09-27, C0894): pe rândul lui avea 19px (12,5px, fără
     padding). Nu poate lua ::after (overflow:hidden pentru „…" l-ar reteza), deci crește în PADDING,
     compensat de margini negative — desenul și layout-ul rămân identice la pixel. Sus doar 4px: între
     link și butoanele de deasupra sunt 10px de gap, din care ::after-ul lor (44px pe 32) ia 6. Jos 7px din
     cei 10 de padding ai rândului (restul rămân pentru inelul de focus, pe care .site-item l-ar reteza).
     19 + 4 + 7 = 30px, peste minimul WCAG de 24, fără să fure atingeri de la Copiază/Detalii/Revocă. */
  .site-row:not(.sr-grid) .sr-link { padding-block: 4px 7px; margin-block: -4px -7px; }

  /* Grila: [iconiță][punct][nume][acțiuni] pe primul rând, apoi chip-urile, apoi cifrele — sub nume.
     Coloanele se numără de la DREAPTA (-3/-2/-1), ca aceeași regulă să meargă cu și fără coloana
     punctului. Totul e aliniat SUS, cu primul rând de text centrat pe butoane: butoanele stau la
     exact aceeași înălțime pe toate cardurile, oricâte rânduri ar avea numele. */
  .site-row.sr-grid { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start;
    column-gap: 10px; row-gap: 8px; padding: 12px 14px; }
  .site-row.sr-grid.sr-dotted { grid-template-columns: 22px 8px minmax(0, 1fr) auto; }
  .sr-grid > .fav { grid-column: 1; grid-row: 1; margin-top: calc((var(--act) - 22px) / 2); }
  .sr-grid > .dot-live { grid-column: 2; grid-row: 1; margin-top: calc((var(--act) - 8px) / 2); }
  .sr-grid > .sr-name { grid-column: -3 / -2; grid-row: 1; margin-left: 0; white-space: normal; overflow-wrap: anywhere;
    line-height: 18px; padding-top: calc((var(--act) - 18px) / 2);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .sr-grid > .sr-actions { grid-column: -2 / -1; grid-row: 1; margin-left: 0; }
  .sr-grid > .sr-meta { grid-column: -3 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
  .sr-grid .sr-client, .sr-grid .sr-camp { max-width: 100%; }
  /* (2026-09-27, audit C0950) Același plafon și pentru chipul obiectivului: cu `flex: none` și fără lățime
     maximă avea mereu lățimea textului, deci o etichetă de 45-80 de caractere ieșea din card (retezată de
     .site-item{overflow:hidden}, 150-270px la 320-390) și „…" de pe .sr-goal-t nu apărea niciodată.
     Eticheta completă e deja în title. Doar aici, pe rândul de chip-uri: pe desktop (.sr-meta =
     display:contents) chipul rămâne `flex: none`, ca înainte — altfel ar fi furat lățime de la nume. */
  .sr-grid .sr-meta > .sr-goal { max-width: 100%; min-width: 0; flex: 0 1 auto; }
  .sr-grid > .sr-stats { grid-column: -3 / -1; margin-left: 0; }
  /* sub nume, cifrele pornesc din stânga celulei: iconițele stau una sub alta */
  .sr-grid .sr-stats .st { justify-content: flex-start; }
}
/* telefon: butoanele cresc la 34px (ținta de deget), cu 4px între ele; numele are voie la 3 rânduri,
   fiindcă lângă patru butoane coloana lui e îngustă */
@media (max-width: 760px) { .site-row.sr-grid { --act: 34px; } .sr-grid > .sr-actions { gap: 4px; } }
@media (max-width: 560px) { .sr-grid > .sr-name { -webkit-line-clamp: 3; } }
/* Telefoane de 320–360px, pagina Site-uri (patru butoane): lângă butoane numelui i-ar rămâne sub 100px.
   Butoanele urcă pe primul rând, lângă iconiță, iar numele coboară dedesubt, pe toată lățimea —
   butoanele rămân tot în colțul din dreapta sus, la aceeași înălțime pe toate cardurile. */
@media (max-width: 360px) {
  .sr-grid.sr-dotted > .sr-actions { grid-column: -3 / -1; grid-row: 1; justify-self: end; }
  .sr-grid.sr-dotted > .sr-name { grid-column: -3 / -1; grid-row: 2; padding-top: 0; }
}
/* Pe telefon cele 3 cifre nu încap una lângă alta: grilă de 2 coloane EGALE — vizualizări și vizitatori
   sus, suma dedesubt, pe toată lățimea. Aceeași grilă pe toate cardurile, deci cifrele stau aliniate. */
@media (max-width: 560px) {
  .sr-stats, .sr-stats.lg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    white-space: normal; gap: 6px 16px; }
  .sr-stats .st, .sr-stats.lg .st { width: auto; }
  .sr-stats .st.st-money, .sr-stats.lg .st.st-money { width: auto; grid-column: 1 / -1; }
  .client-fin { justify-content: flex-start; gap: 8px 20px; }
}
/* link-urile din h-sub (domeniu/cale) rămân discrete, nu lime */
h2 .h-sub a { color: inherit; }
@media (hover: hover) { h2 .h-sub a:hover { color: var(--text); text-decoration: underline; } }
.sub.mono a { color: inherit; }
@media (hover: hover) { .sub.mono a:hover { color: var(--text); text-decoration: underline; } }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px rgba(var(--ok-rgb),var(--glow)); display: inline-block; }

/* ---------- recent activity feed ---------- */
.feed { display: flex; flex-direction: column; }
.feed .it { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--stroke); }
.feed .it:last-child { border-bottom: none; }
.feed .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--stroke); font-size: 13px; flex-shrink: 0; }
.feed .ft { flex: 1; min-width: 0; }
.feed .fp { color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pe mobil linia asta ascundea până la 80% din text („Codul Secret al Rela…” — fără nicio urmă de
   pagina vizitată, adică exact informația rândului). Rămâne aceeași linie trunchiată cu „…”, doar
   că are voie la 2 rânduri sub 700px (2026-08-05). */
@media (max-width: 700px) {
  .feed .fp { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
}
.feed .fm { color: var(--faint); font-size: 11.5px; }
/* `.mono` are `font-size:.86em` global → 9,89px aici, sub pragul de lizibilitate. Se corectează
   local, ca să nu atingem regula globală folosită și în tabele/snippet-uri (2026-08-05). */
.feed .fm .mono { font-size: 11px; }
.feed .fw { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

/* ---------- sub-nav site (Analytics | Heatmaps) ---------- */
/* display:flex (NU inline-flex) — trebuie să-și ocupe mereu rândul propriu. Fiind inline înainte,
   pe pagini unde primul lucru după subnav e un .eyebrow (tot inline-flex, ex. Demographics/Recomandări
   — fără un .kpi-grid block între ele care să forțeze rândul nou), cele două cutii inline încăpeau
   pe ACELAȘI rând (spațiu orizontal suficient în .wrap), dând impresia de nealiniere/suprapunere. */
.subnav { display: flex; width: fit-content; gap: 5px; padding: 5px; border-radius: 14px; margin: 2px 0 24px;
  background: var(--subnav-bg); border: 1px solid var(--stroke); }
.subnav-i { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 10px;
  color: var(--muted); font-weight: 600; font-size: 14px; transition: .15s; }
@media (hover: hover) { .subnav-i:not(.on):hover { color: var(--hover-ink); background: var(--glass); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.2); } }
.subnav-i.on { background: var(--accent-fill); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--on-edge), 0 6px 18px -8px rgba(var(--accent-rgb),calc(.7*var(--glow))); }
.subnav-i .ico { width: 17px; height: 17px; }

/* ---------- tabs ---------- */
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; margin-bottom: 16px;
  background: var(--subnav-bg); border: 1px solid var(--stroke); }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 10px;
  color: var(--muted); font-weight: 600; font-size: 13.5px; transition: .15s; }
/* Icoana urmează culoarea textului (stroke: currentColor), deci se inversează singură pe
   tabul activ. Ușor mai subțire decât textul, ca să nu concureze cu eticheta. */
.tab .ico { width: 16px; height: 16px; flex: none; stroke-width: 1.7; opacity: .9; }
.tab.on .ico { opacity: 1; }
@media (hover: hover) { .tab:not(.on):hover { color: var(--hover-ink); background: var(--glass); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.18); } }
.tab.on { color: var(--accent-ink); background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--on-edge), 0 6px 18px -8px rgba(var(--accent-rgb),calc(.7*var(--glow))); }
/* Tab-urile au 37px înălțime (padding-ul de 8px e alegere de design și rămâne). Ținta de
   atingere o ducem la 45px cu un pseudo-element — zero schimbare vizuală, iar cei 4px stau în
   padding-ul de 5px al lui `.tabs`, deci nu ies din container. (audit responsive 2026-08-05) */
.tab { position: relative; }
.tab::after { content: ""; position: absolute; inset: -4px 0; min-height: 45px; }   /* 37 + 8 = 45, declarat explicit ca auditul să-l măsoare */
/* Pe touch (≤1023px / pointer:coarse) blocul global de ținte de atingere pune pe `.tab::after`
   left/top 50% + translate(-50%,-50%) + width/height 100%. `inset` de mai sus suprascria doar
   left/top, iar transformul rămânea → aria de apăsare a fiecărui tab era mutată cu o jumătate
   de tab spre stânga și ~22px în sus, PESTE tab-ul vecin: atingerea pe „Click-uri" deschidea
   „Mișcare mouse" (audit 2026-09-27, C0276). Anulăm explicit transformul și dimensiunile, ca
   aria să stea fix peste propriul tab (+4px sus/jos), exact cum spune comentariul de mai sus. */
.tab::after { left: 0; right: 0; top: -4px; bottom: -4px; width: auto; height: auto; transform: none; }

/* ---------- heatmap stage ---------- */
.heat-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; }
/* Pe telefon formularul de captură primește width:100% (blocul responsive de mai jos), dar
   `.inline` nu se împachetează: `.file-field` (max-width 290px, fără min-width:0) se strivea
   între „Alege imagine" și „Urcă captură", iar numele fișierului rămânea „Ni…" sau dispărea —
   nu mai vedeai CE ai ales. Câmpul trece pe rândul lui. (audit responsive 2026-08-05) */
@media (max-width: 780px) {
  .heat-toolbar form.inline { flex-wrap: wrap; }
  .heat-toolbar .file-field { flex: 1 1 100%; max-width: 100%; min-width: 0; }
  .heat-toolbar .file-field .file-name { flex: 1 1 auto; min-width: 0; }
}
.heat-stage { position: relative; display: block; min-width: 280px; min-height: 200px;
  background: var(--stage-bg); border: 1px solid var(--stroke); border-radius: var(--r-sm); overflow: hidden; max-width: 100%;
  box-shadow: 0 20px 60px -30px rgba(0,0,0,calc(.9*var(--shk))); }
/* overflow:hidden făcea din scenă un container de derulare → cardul de încărcare (.hl-card) și
   vălul (.stage-veil-in), ambele `sticky`, se lipeau de SCENĂ, nu de ecran: pe o scenă de 20.000+ px,
   după o derulare în timpul încărcării, vedeai doar vălul blurat, fără mesaj (audit 2026-09-27,
   C0277). `clip` decupează identic, dar NU creează container de derulare, deci sticky merge pe
   ecran, cum spune comentariul de la .stage-veil-in. `hidden` rămâne mai sus ca rezervă pentru
   Safari sub 16 (nu cunoaște `clip` → ignoră declarația asta). */
.heat-stage { overflow: clip; }
/* #scaler = container la dimensiunea afișată; fundalul și scroll-layer-ul se scalează
   fiecare cu propriul transform, iar canvas-ul e dimensionat prin CSS — așa canvas-ul
   (care se redesenează des) NU mai e în același strat transformat cu iframe-ul (fix Safari). */
#scaler { position: relative; }
/* fundalul (iframe/captură) se încarcă LAZY: pornește invizibil și se estompează în vedere când e
   gata (clasa .bg-ready) — heatmap-ul (dots) apare INSTANT peste stage-ul întunecat, fundalul vine
   după, fără să blocheze nimic. */
.bg-wrap { position: absolute; top: 0; left: 0; transform-origin: top left; backface-visibility: hidden;
  opacity: 0; transition: opacity .45s ease; }
.bg-wrap.bg-ready { opacity: 1; }
.bg-img { display: block; }
.bg-frame { display: block; border: 0; background: #fff; }
/* felii de fundal live (pagini same-origin, viewport real) — vezi buildLiveBg() din dashboard.js */
/* Fundal ALB, ca al iframe-ului (.bg-frame): o felie care încă se încarcă nu mai
   apare ca bandă NEAGRĂ peste pagină — citea exact ca „heatmap tăiat în bucăți".
   Alb = culoarea paginii care urmează să apară acolo. (audit 2026-07-31) */
.bg-tile { position: absolute; left: 0; overflow: hidden; pointer-events: none; background: #fff; }
/* Până când felia CONFIRMĂ că s-a poziționat, iframe-ul ei e invizibil (altfel s-ar
   vedea capul paginii repetat în fiecare felie, cât se încarcă — raportat 2026-08-05).
   În locul lui: un sclipici discret de „se încarcă", pe fundalul alb al feliei. */
.bg-tile::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, #f4f4f4 30%, #e7e7e7 45%, #f4f4f4 60%);
  background-size: 200% 100%; animation: bgShimmer 1.15s linear infinite; }
.bg-tile.gata::after { display: none; }
@keyframes bgShimmer { to { background-position: -200% 0; } }
/* ─── ecranul de încărcare al hărții (mesaje rotitoare + progres REAL) ─────── */
.heat-loading { position: absolute; inset: 0; z-index: 14; pointer-events: none;
  background: var(--stage-veil); backdrop-filter: blur(3px);
  opacity: 1; transition: opacity .4s ease; }
.hl-card { position: sticky; top: 30vh; width: min(340px, 82%); margin: 0 auto;
  padding: 22px 24px 18px; border-radius: 16px; text-align: center;
  background: var(--pop-hl); border: 1px solid var(--stroke);
  box-shadow: 0 18px 50px rgba(0, 0, 0, calc(.45*var(--shk))); }
/* orbul: trei inele lime care respiră decalat */
.hl-orb { position: relative; width: 46px; height: 46px; margin: 0 auto 14px; }
.hl-orb span { position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--accent); }
.hl-orb span:nth-child(1) { animation: hlRot 1.1s linear infinite; }
.hl-orb span:nth-child(2) { inset: 7px; opacity: .65; animation: hlRot 1.6s linear infinite reverse; }
.hl-orb span:nth-child(3) { inset: 14px; opacity: .4; animation: hlRot 2.2s linear infinite; }
@keyframes hlRot { to { transform: rotate(360deg); } }
.hl-msg { min-height: 38px; display: flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 13.5px; line-height: 1.35;
  opacity: 1; transition: opacity .24s ease; }
.hl-msg.hl-out { opacity: 0; }
.hl-track { height: 6px; margin-top: 12px; border-radius: 4px; overflow: hidden;
  background: rgba(var(--veil-rgb), .08); }
.hl-bar { height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, #9fc832, var(--accent));
  transition: width .5s ease; position: relative; }
.hl-bar::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 200% 100%; animation: hlShine 1.4s linear infinite; }
@keyframes hlShine { to { background-position: -200% 0; } }
.hl-pct { margin-top: 7px; color: var(--hl-pct); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* vălul de peste stage, cât nu e nicio felie confirmată; spinnerul stă sticky,
   deci rămâne în dreptul ochilor oriunde ai fi derulat */
.stage-veil { position: absolute; inset: 0; z-index: 12; pointer-events: none;
  background: var(--stage-veil-2); backdrop-filter: blur(2px);
  opacity: 1; transition: opacity .35s ease; }
.stage-veil-in { position: sticky; top: 38vh; display: flex; gap: 10px; align-items: center;
  width: max-content; margin: 0 auto; padding: 10px 18px; border-radius: 12px;
  background: var(--pop-veil); border: 1px solid var(--stroke);
  color: var(--text); font-size: 14px; }
.stage-veil .spin { width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), .25); border-top-color: var(--accent);
  animation: veilSpin .8s linear infinite; }
@keyframes veilSpin { to { transform: rotate(360deg); } }
.bg-blank { background-color: #f5f6f9;
  background-image: linear-gradient(#e7e9ee 1px,transparent 1px), linear-gradient(90deg,#e7e9ee 1px,transparent 1px); background-size: 40px 40px; }
#heat { position: absolute; top: 0; left: 0; pointer-events: none; transform: translateZ(0); transition: opacity .25s ease; }
.scroll-layer { position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; }
/* eticheta „X% au ajuns la N%" se ancorează la marginea DE JOS a benzii — acolo se află pragul N%
   real (banda acoperă segmentul [N-10%, N%]; ancorată sus, eticheta „10%" ar cădea la 0%, vârful paginii). */
.scroll-band { position: absolute; left: 0; right: 0; display: flex; align-items: flex-end; }
.scroll-band span { background: rgba(0,0,0,.78); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 0 7px 0 0; font-weight: 600; }
.heat-hint { position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: var(--pop-heathint); color: var(--pop-ink); padding: 10px 16px; border-radius: 10px; font-size: 13px; border: 1px solid var(--stroke);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,calc(.8*var(--shk))); }
.heat-hint .hint-sp { display: none; }
.heat-hint.loading .hint-sp { display: block; }   /* spinner vizibil doar cât se încarcă */
/* „se așază fundalul" — discret, în colț: apare doar cât scena se re-scalează pe înălțimea
   reală a paginii (vezi showSettling() în dashboard.js). Nu blochează imaginea. */
.heat-settle { position: sticky; bottom: 12px; margin-left: auto; width: max-content; z-index: 5; display: none;
  align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; font-size: 11.5px;
  color: var(--muted); background: var(--pop-settle); border: 1px solid var(--stroke);
  box-shadow: 0 8px 22px -12px rgba(0,0,0,calc(.8*var(--shk))); pointer-events: auto; cursor: help; }
.heat-settle .hint-sp { display: block; width: 13px; height: 13px; border-width: 2px; }

/* ---------- spinner reutilizabil ---------- */
.spinner, .hint-sp { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2.5px solid rgba(var(--accent-rgb),.25); border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- bară de progres sus (la navigarea pjax) ---------- */
#pjaxbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; pointer-events: none; opacity: 0;
  background: var(--pjax-grad); box-shadow: 0 0 10px rgba(var(--accent-rgb),calc(.7*var(--glow))); border-radius: 0 2px 2px 0; }
@media (prefers-reduced-motion: reduce) { .spinner, .hint-sp { animation-duration: 1.4s; } }

/* ---------- comparație între perioade (suprapus) ----------
   A = lime (accentul site-ului), B = albastru rece var(--chart-2) — distincte și pe grafic și la cifre */
.cmp-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cmp-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); margin-left: auto; }
.cmp-custom input[type="date"] { min-width: 0; width: 128px; height: 32px; padding: 7px 9px; font-size: 12.5px; }
.cmp-tag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 12px; }
.cmp-tag.ca, .cl.ca i { background: rgba(var(--accent-rgb),.16); color: var(--accent); }
.cmp-tag.cb, .cl.cb i { background: rgba(var(--chart-2-rgb),.16); color: var(--chart-2-ink); }
/* comparație cu calendar (2 intervale) — aceeași estetică ca .period-custom */
.cmp-range { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.cmp-custom.cal-on .cmp-sep { display: none; }
.cmp-range .cal-pop { right: auto; left: 0; }
@media (max-width: 640px) { .cmp-range .cal-pop { left: 0; right: 0; } }
.cmp-legend { display: flex; gap: 18px; margin: 18px 2px 10px; }
.cl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cl i { width: 14px; height: 14px; border-radius: 5px; }
.cl.ca i { background: var(--accent); } .cl.cb i { background: var(--chart-2); }
.cmp-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cmp-vals { display: flex; align-items: baseline; gap: 9px; margin: 4px 0 6px; flex-wrap: wrap; }
.cmp-vals b { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 24px; }
.cmp-vs { font-size: 11px; color: var(--faint); }
.ca { color: var(--accent); } .cb { color: var(--chart-2); }
.cmp-tbl th.ca, .cmp-tbl td.ca b { color: var(--accent); }
.cmp-tbl th.cb, .cmp-tbl td.cb b { color: var(--chart-2); }
.cmp-tbl th.ca, .cmp-tbl th.cb { font-size: 10.5px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chart { width: 100%; display: block; }

/* ---------- snippet / code ---------- */
/* Codul se RUPE pe rânduri, nu derulează orizontal — PE TOATE lățimile, nu doar pe
   mobil (cerut 2026-08-05): cu scroll, butonul „Copiază" (așezat după cod) ajungea
   în afara ecranului, adică exact acțiunea principală era cea ascunsă. */
.snippet { display: flex; gap: 10px; align-items: flex-start; background: var(--code-bg);
  border: 1px solid var(--stroke); border-radius: 10px; padding: 11px 13px; margin-top: 8px; overflow: visible; }
/* 2026-10-10 (audit 41): word-break: normal + overflow-wrap: anywhere — se rupe întâi între cuvinte, apoi oriunde e nevoie */
.snippet code { flex: 1; min-width: 0; color: var(--code-ink); white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; }
.snippet .btn { flex-shrink: 0; }
/* Pe telefon codul ia toată lățimea, iar „Copiază" stă deasupra lui, la dreapta (cu flex: 1 codul pornea de la 0 și nu
   trecea niciodată pe rândul următor, deci stătea strâns într-o coloană îngustă lângă buton) */
@media (max-width: 700px) {
  .snippet { flex-wrap: wrap; }
  .snippet code { flex-basis: 100%; }
  .snippet .btn { order: -1; margin-left: auto; }
}
/* rândul cu cheia site-ului: cheia + butonul ei de copiat, aliniate */
.key-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.key-row code { word-break: break-all; }
.copy-link { display: flex; gap: 10px; align-items: center; }
.test-result { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.test-result > div { font-size: 13px; line-height: 1.45; display: flex; align-items: flex-start; gap: 9px; color: var(--text); }
.tr-ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.tr-ok .tr-ico   { color: var(--accent); }
.tr-warn .tr-ico { color: var(--warn); }
.tr-muted { color: var(--muted); }
.tr-muted .tr-ico { color: var(--muted); }
.copy-link input { flex: 1; font-family: ui-monospace,monospace; font-size: 12px; }

/* ---------- dialog de confirmare (înlocuiește confirm() nativ) ---------- */
.modal-ov { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(5,6,8,.72); opacity: 0; transition: opacity .18s ease; overflow-y: auto; }
.modal-ov.in { opacity: 1; }
/* max-height + overflow: pe ecrane joase (telefon culcat, fereastra de plan cu planurile pe o coloană) cardul nu mai
   iese din ecran fără să se poată derula (review 2026-09-15) */
.modal-card { width: 400px; max-width: 100%; max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border-radius: 18px;
  background: var(--pop-modal); border: 1px solid var(--stroke-2);
  box-shadow: 0 40px 90px -24px rgba(0,0,0,calc(.85*var(--shk))), 0 0 0 1px rgba(var(--accent-rgb),.05);
  transform: translateY(8px) scale(.98); transition: transform .18s cubic-bezier(.22,1,.36,1); }
.modal-ov.in .modal-card { transform: none; }
/* Pagina din spatele dialogului nu mai derulează pe telefon (2026-09-27, audit C1969): aceeași rețetă ca la
   .fb-open — blocarea pe <html> (overflow-x:clip de pe html oprește propagarea de pe body), doar pe touch,
   cât există o fereastră .modal-ov (pulseConfirm & co.) sau „Ce e nou" (#clWrap, identity/changelog_modal.php,
   care pune doar body.style.overflow — fără efect aici). overscroll-behavior: capătul textului derulat din
   dialog nu mai trage pagina după el. */
.modal-ov, .modal-card { overscroll-behavior: contain; }
@media (pointer: coarse) { html:has(.modal-ov), html:has(#clWrap) { overflow: hidden; } }
/* overflow-wrap (recenzia C1147, 2026-09-27): confirmarea ștergerii numește acum site-ul, iar un nume fără
   spații („CursNLPPractitionerCluj2026…”) e un singur cuvânt fără loc de rupere — la 320-390 px ieșea din
   card, care derula în lateral și tăia textul. Se rupe doar cuvântul care nu încape; restul, neschimbat. */
.modal-msg { font-size: 15px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-actions .btn.sm { height: 36px; padding: 0 16px; font-size: 13px; }

/* modal „Aplicație blocată" (buton Social Hub/Hourglass fără acces — cerut 2026-07-14) — badge
   rotund cu iconul + accentul aplicației respective (mov Hub / smarald Hourglass), mesaj centrat */
.modal-locked { text-align: center; }
.modal-lock-badge { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 16px; }
.modal-lock-badge .ico { width: 26px; height: 26px; }
.modal-locked .modal-msg b { display: block; margin-bottom: 4px; }
.modal-locked .modal-actions { justify-content: center; }

/* pop-up cu formular (ex. „Obiectiv de profit”, deschis din cardul Profit) */
.modal-form { text-align: left; }
.modal-head { display: flex; gap: 14px; align-items: flex-start; }
.modal-badge { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: flex;
  align-items: center; justify-content: center; background: rgba(var(--accent-rgb),.14); color: var(--accent); }
.modal-badge .ico { width: 22px; height: 22px; }
.modal-title { font-size: 16px; font-family: "Bricolage Grotesque", sans-serif; }
.modal-sub { margin: 5px 0 0; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.modal-fld { margin-top: 18px; font-size: 12px; }
.modal-fld input { width: 100%; }
.modal-spacer { flex: 1; }

/* ---------- „Ajutor": modalul de contact și raportare (2026-09-14, assets/feedback.js) ----------
   Aceleași piese ca restul modalelor (.modal-card/.modal-head/.modal-fld/.pp/.alert). Pe ≤1023px devine
   foaie de jos, ca Meniul; înălțimea o dă viewport-ul vizual (--fb-vh), ca „Trimite" să stea peste tastatură. */
.fb-ov { overscroll-behavior: contain; }
.fb-card { width: 480px; max-width: 100%; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
.fb-card [hidden], .fb-page [hidden] { display: none !important; }
.fb-grip, .fb-x { display: none; }
.fb-head { flex-shrink: 0; }
.fb-head-t { flex: 1; min-width: 0; }
.fb-card .modal-title:focus { outline: none; }
.fb-body { overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px 4px; overscroll-behavior: contain; }
.fb-draft { margin: 14px 0 0; }
.fb-kinds { display: flex; width: 100%; margin: 18px 0 0; min-inline-size: 0; }
.fb-kinds .pp { position: relative; flex: 1 1 0; justify-content: center; cursor: pointer; }
.fb-kinds .pp input { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; border: 0;
  border-radius: inherit; background: none; opacity: 0; cursor: pointer; }
.fb-kinds .pp:focus-within { box-shadow: var(--focus-ring); }
.fb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fb-msg { margin-top: 14px; }
.fb-card textarea, .fb-pform textarea { display: block; width: 100%; min-height: 116px; box-sizing: border-box; padding: 10px 12px;
  border-radius: 10px; resize: vertical; background: var(--input-bg); border: 1px solid var(--input-line); color: var(--text);
  font-size: 13.5px; line-height: 1.5; transition: border-color .15s, box-shadow .15s; }
.fb-card textarea:focus, .fb-pform textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.fb-count { align-self: flex-end; }
.fb-ferr { color: var(--danger-2); font-size: 12px; line-height: 1.4; }
.fb-files { margin-top: 14px; padding: 12px; border: 1px dashed var(--stroke); border-radius: 12px; transition: border-color .15s; }
.fb-files.is-drop { border-color: var(--accent); }
.fb-add .ico { width: 15px; height: 15px; }
.fb-hint { margin: 8px 0 0; line-height: 1.5; }
.fb-files .fb-ferr { display: block; margin-top: 6px; }
.fb-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.fb-thumbs:empty { display: none; }
.fb-th { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.fb-th-box { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 9px; border: 1px solid var(--stroke); overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); }
.fb-th-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fb-th-box .ico { width: 22px; height: 22px; }
.fb-th-n { min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.fb-rm { position: relative; }
.fb-rm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.fb-reply { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.fb-reply-l { margin: 0; overflow-wrap: anywhere; }
.fb-reply-l b, .fb-mail { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.fb-reply .fb-mailfld { margin-top: 0; }
.fb-mailfld input { width: 100%; min-width: 0; }
.fb-link { position: relative; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.fb-link::after { content: ""; position: absolute; inset: -10px -6px; }
@media (hover: hover) { .fb-link:hover { text-decoration: underline; } }
.fb-link:focus-visible { outline: none; text-decoration: underline; border-radius: 4px; box-shadow: var(--focus-ring); }
.fb-tech { margin-top: 14px; font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fb-chk { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.fb-tech-box { flex: 1 0 100%; }
.fb-tech-box .muted { margin: 0; line-height: 1.5; }
.fb-pre { margin: 8px 0; max-height: 200px; overflow: auto; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--stroke);
  background: var(--code-bg); color: var(--code-ink); font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fb-err { margin: 14px 0 0; }
.fb-foot { margin: 14px 0 0; }
.fb-actions { flex-shrink: 0; }
.fb-card .btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.fb-done { text-align: center; padding-top: 4px; }
.fb-done-badge { background: rgba(var(--accent-rgb),.14); color: var(--accent); }
.fb-done .modal-title { display: block; font-size: 18px; }
.fb-done .modal-msg { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.fb-done .modal-msg b { display: inline; margin: 0; }   /* .modal-locked face <b> bloc; aici adresa stă în propoziție */
.fb-ref { margin: 14px 0 0; color: var(--faint); }
.fb-nowrap { white-space: nowrap; }
.fb-done .modal-actions { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .fb-ov, .fb-ov .modal-card { transition: opacity .18s ease; transform: none; } }

/* pagina „Scrie-ne" fără JavaScript (?action=feedback) */
.fb-page-t { font-size: 22px; margin: 0 0 6px; }
.fb-page-sub { margin: 0 0 18px; line-height: 1.55; }
.fb-page .alert { margin: 0 0 14px; }
.auth-card .fb-pform label.fld { margin: 14px 0 0; }
.fb-pform .fb-kinds { margin-top: 0; }
.auth-card .fb-pform .fb-kinds input { width: 100%; }
.auth-card .fb-pform input[type="checkbox"] { width: 21px; }
.fb-pform .fb-chk { margin-top: 16px; }
.fb-note { margin: 12px 0 0; line-height: 1.5; }
.fb-page-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fb-page-actions.fb-center { justify-content: center; }

/* buton de acțiune pe un card KPI (ex. „Setează obiectiv” pe Profit) — arată ca „detalii”, dar e un
   buton real, clickabil independent de card (cardul Profit nu e .kpi-clickable) */
.kpi-act { background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; padding-inline: 0; position: relative; }
/* Ținta de atingere: butonul rămâne vizual IDENTIC (26px, în ton cu „⌄ detalii” de pe celelalte
   carduri KPI — e o alegere de design, nu se mărește), dar zona sensibilă la deget urcă la 44px
   printr-un pseudo-element cu inset negativ (audit responsive 2026-08-05: 134×26 pe 360–1023px).
   Insetul de jos (12px) rămâne în interiorul cardului: .kpi.big are 26px padding-jos, iar .kpi e
   overflow:hidden — dacă zona ieșea din card, ar fi fost tăiată și din hit-test, nu doar vizual. */
.kpi-act::after { content: ''; position: absolute; inset: -6px -12px -12px; }
@media (hover: hover) { .kpi-act:hover { color: var(--accent); } }
.kpi-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

@media (max-width: 1023px) {
  .fb-ov { align-items: flex-end; padding: 0; box-shadow: 0 0 0 100vmax rgba(5,6,8,.72); }   /* același văl și sub foaie, până la tastatură (audit 97) */
  .fb-card { width: min(560px, 100%); max-height: var(--fb-vh, 100dvh); border-radius: 22px 22px 0 0; background: var(--pop-sheet);
    border: 0; border-top: 1px solid var(--stroke-2); padding: 10px 16px 0; }
  .fb-grip { display: block; margin: 0 auto 12px; }
  .fb-x { display: inline-flex; margin: -2px -4px 0 auto; }
  .fb-cancel, .fb-actions .modal-spacer { display: none; }
  .fb-body { margin: 0 -16px; padding: 0 16px 4px; }
  .fb-actions { position: sticky; bottom: 0; margin: 12px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--pop-sheet); border-top: 1px solid var(--stroke); }
  .modal-actions .btn.sm.fb-send { flex: 1; height: 44px; justify-content: center; }
  .fb-done .modal-actions { margin-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .fb-done .modal-actions .btn.sm { flex: 1; height: 44px; justify-content: center; }
  .fb-card textarea, .fb-card input[type=email], .fb-pform textarea, .fb-pform input[type=email] { font-size: 16px; }
  .fb-kinds .pp { padding: 0 6px; }
  /* raportul partajat mută mânerul Meniului jos (body.share .sheet-grip, order 99); foaia formularului îl ține sus */
  body.share .fb-card .fb-grip { order: 0; margin: 0 auto 12px; }
  body.fb-open { overflow: clip; }   /* pagina din spate nu derulează sub foaie */
  /* `html { overflow-x: clip }` (mai sus) oprește propagarea lui overflow de pe body spre viewport, deci blocarea
     reală stă pe <html>. Doar pe touch: pe o fereastră de desktop îngustă, dispariția barei de derulare ar muta pagina. */
  @media (pointer: coarse) { html.fb-open { overflow: hidden; } }
  /* ținte de 44px pentru deget; aspectul rămâne același */
  .fb-chk { min-height: 44px; }
  .fb-link::after { inset: -13px -6px; }
  .fb-foot a { display: inline-block; padding: 13px 0; margin: -13px 0; }
  /* Telefon culcat cu tastatura deschisă: feedback.js pune .fb-tight sub 420px de viewport vizual. Fără
     subtitlu și insignă, bara de jos nu mai stă lipită, iar toată foaia derulează, ca textul să rămână vizibil. */
  .fb-card.fb-tight { overflow-y: auto; overscroll-behavior: contain; }
  .fb-tight > * { flex-shrink: 0; }
  .fb-tight .modal-sub, .fb-tight .modal-badge, .fb-tight .fb-grip { display: none; }
  .fb-tight .fb-body { overflow: visible; min-height: auto; }
  .fb-tight .fb-actions { position: static; }
}

/* ---------- alerts ---------- */
.alert { padding: 12px 15px; border-radius: 12px; margin-bottom: 16px; font-size: 13.5px; border: 1px solid; }
.alert.err  { background: rgba(var(--danger-rgb),.1); color: var(--danger-2); border-color: rgba(var(--danger-rgb),.32); }
.alert.ok   { background: rgba(var(--ok-rgb),.1); color: var(--ok); border-color: rgba(var(--ok-rgb),.32); }
.alert.warn { background: rgba(var(--warn-rgb),.1);  color: var(--warn-ink); border-color: rgba(var(--warn-rgb),.32); }
.alert.info { background: var(--grad-soft); color: var(--text); border-color: var(--stroke); }
/* „Am găsit pagina de după comandă” (2026-10-14, goal_nudge_html): textul și cele două butoane, pe un rând când încap */
.goal-nudge { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.kpi-grid + .goal-nudge { margin-top: 16px; }   /* pe Panou vine chiar sub cifre (ca .kpi-grid + .kpi-grid) */
.goal-nudge .gn-t { flex: 1 1 340px; min-width: 0; line-height: 1.55; overflow-wrap: anywhere; }
.goal-nudge .gn-a { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
@media (max-width: 560px) { .goal-nudge .gn-a { flex: 1 1 100%; } .goal-nudge .gn-a .btn { flex: 1 1 auto; justify-content: center; } }
@media (min-width: 561px) { .goal-nudge .gn-t code { white-space: nowrap; } }   /* calea întreagă pe un rând; pe telefon se poate rupe */

/* provizionare conturi clienți (rândul per client) */
.prov-list { display: flex; flex-direction: column; gap: 10px; }
.prov-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface-2); }
.prov-c { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.prov-c b { font-family: "Bricolage Grotesque"; font-size: 14px; }
.prov-c .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .prov-row { align-items: stretch; } .prov-row input, .prov-row .btn { max-width: none !important; width: 100%; } }

.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty p { margin-bottom: 16px; }

/* ---------- auth + share header ---------- */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
/* `width` plafonat direct, nu doar `max-width`: paginile care-și pun un `max-width` INLINE
   (lib/plans.php, lib/signup.php, lib/helpers.php) anulau plafonul de 92vw — stilul inline
   bate stylesheet-ul — și cardul rămânea 380px lat pe ecrane de 320px. `- 40px` = exact
   padding-ul lui .auth-body. (audit responsive, 2026-08-05) */
.auth-card { padding: 36px; width: min(380px, calc(100vw - 40px)); max-width: 92vw; }
.auth-card .brand { justify-content: center; margin-bottom: 6px; }
.auth-card .tag { text-align: center; color: var(--muted); margin: 0 0 20px; font-size: 13px; }
.auth-card label.fld { margin-bottom: 14px; }
.auth-card input { width: 100%; }

/* Bara e pe TOATĂ lățimea (fundal + border full-bleed), dar conținutul ei (logo + badge)
   se aliniază cu .wrap (același max-width 1240 + 30px) → logo la stânga conținutului, badge la dreapta. */
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px max(30px, calc((100% - 1240px) / 2 + 30px));
  border-bottom: 1px solid var(--stroke-2); background: var(--share-head-bg);
  box-shadow: inset 0 1px 0 rgba(var(--veil-rgb),.04), 0 10px 30px -22px rgba(0,0,0,calc(.9*var(--shk))); }
/* Badge-ul „Raport partajat": lacăt + etichetă + calea, separate printr-o linie fină.
   Calea se scurtează cu … dacă e lungă, ca badge-ul să rămână pe UN rând (titlu = calea completă). */
.share-badge { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  font-size: 11px; font-weight: 500; color: var(--text); line-height: 1;
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),.28);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.09), rgba(var(--accent-rgb),.04)); white-space: nowrap; }
.share-badge .sb-ico { width: 12px; height: 12px; flex-shrink: 0; color: var(--accent); opacity: .9; }
.share-badge .sb-l { flex: 0 0 auto; letter-spacing: .04em; text-transform: uppercase; font-size: 10px; font-weight: 600; color: var(--muted); }
/* calea e partea elastică: se scurtează cu … cât e nevoie, ca badge-ul să nu împingă
   niciodată header-ul peste ecran (pe 320px cu o cale lungă ieșea 200px afară) */
.share-badge .sb-p { flex: 0 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text);
  min-width: 3ch; max-width: 26ch; overflow: hidden; text-overflow: ellipsis;
  padding-left: 9px; border-left: 1px solid rgba(var(--accent-rgb),.26); }
.share-head .share-badge { flex: 0 1 auto; }
.share-head .brand { flex: 0 0 auto; min-width: 0; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
  .kpi-grid.tier1 { grid-template-columns: repeat(3,1fr); }
  .grid.c2,.grid.c3,.grid.c12 { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .wrap { padding: 24px 18px 90px; }
  .kpi-grid, .kpi-grid.tier1 { grid-template-columns: repeat(2,1fr); }
  .page-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-head h1 { font-size: 24px; }
  /* controlele de perioadă: presetările pe un rând, „Alege perioada" pe rândul următor */
  .filters { gap: 12px; }
  .filters .period { margin-left: 0; }
  .period { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .period-presets { width: 100%; justify-content: space-between; }
  .period-custom, .cal-trigger { width: 100%; justify-content: center; }
  .filters .fld { width: 100%; }
  .filters .fld select { width: 100%; }
  /* tab-uri / sub-nav: scroll orizontal dacă nu încap */
  .subnav, .tabs { display: flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* (2026-09-27, audit C1885) Filele heatmap-ului (Click-uri / Mișcare mouse / Scroll) au 365px: la 320-375
     a treia hartă se vedea doar ca un ↕ tăiat, fără niciun semn că rândul se derulează. Sub 420px cele
     trei file își împart lățimea (iconița deasupra textului, același corp, aceleași culori), deci încap
     toate de la 320px. Pentru orice rând de file care tot nu încape: masca tblFade de la tabele. */
}
@media (max-width: 419px) {
  .tabs .tab { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 4px;
    text-align: center; line-height: 1.2; }
}
@supports (animation-timeline: scroll()) {
  .tabs { animation: tblFade linear both; animation-timeline: scroll(self inline); }
}
@media (max-width: 780px) {
  .subnav::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .subnav-i, .tab { flex-shrink: 0; }
  /* tabele: scroll orizontal fără a strica pagina */
  .panel .tbl { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  /* pe coloană axa principală e verticală → `flex-basis: 125px` (pus mai sus pentru desktop) ar
     deveni ÎNĂLȚIME și ar lăsa spațiu gol sub legendă; îl anulăm, lățimea revine la `width: 100%`
     ca valorile să rămână aliniate la marginea dreaptă a cardului (audit 2026-08-05) */
  .donut-wrap { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 16px; }
  .legend { flex-basis: auto; }
  .heat-toolbar { padding: 12px 14px; }
  .heat-toolbar .fld, .heat-toolbar form { width: 100%; }
  .copy-link { flex-wrap: wrap; }
  .copy-link input { flex: 1 1 100%; }
  /* header-ul raportului pe 2 rânduri: logo + buton de meniu sus (butonul rămâne lângă
     colțul din dreapta, acolo unde-l caută degetul), badge-ul pe lățime dedesubt.
     Fără asta, badge-ul împingea hamburgerul singur pe un al treilea rând. */
  .share-head { padding: 13px 16px; flex-wrap: wrap; row-gap: 10px; }
  .share-head .brand { order: 1; }
  .share-head .share-burger { order: 2; margin-left: auto; }
  .share-head .share-badge { order: 3; flex-basis: 100%; max-width: 100%; }
  .dc-head { gap: 14px; }
}
@media (max-width: 560px) {
  .wrap { padding: 20px 13px 80px; }
  .kpi-grid, .kpi-grid.tier1, .kpi-grid.tier1.kpi-two { grid-template-columns: 1fr; }
  .barrow { grid-template-columns: 84px 1fr 38px; }
  .page-head h1 { font-size: 22px; }
  .kpi.big .val { font-size: 36px; }
  .kpi .val { font-size: 28px; }
  .eyebrow { margin-top: 24px; }
  .period-presets .pp { padding: 0 10px; font-size: 12.5px; }
  .site-footer .ft-inner { flex-direction: column; gap: 12px; text-align: center; }
  .share-head { flex-wrap: wrap; gap: 8px 12px; }
  .share-badge { font-size: 10px; padding: 4px 9px; gap: 5px; }
}
@media (max-width: 380px) {
  .wrap { padding: 16px 10px 70px; }
  .brand-name { font-size: 16px; }
  .brand-mark { width: 26px; height: 26px; }
  .page-head h1 { font-size: 20px; }
  .kpi.big .val { font-size: 32px; }
  .period-chip { font-size: 11px; }
  .period-presets { gap: 1px; }
  .period-presets .pp { padding: 0 8px; font-size: 12px; }
  .kpi, .panel { border-radius: 14px; }
  .share-badge { font-size: 9px; padding: 3px 8px; }
}

/* =========================================================================
   ANIMAȚII + ICON-URI + FOOTER
   ========================================================================= */
/* reveal: ascuns sub .jsa, apoi .in animează intrarea */
.jsa .kpi, .jsa .panel, .jsa .eyebrow, .jsa .ehint, .jsa .tabs, .jsa .heat-toolbar {
  opacity: 0; transform: translateY(16px) scale(.992);
}
.jsa .kpi.in, .jsa .panel.in, .jsa .eyebrow.in, .jsa .ehint.in, .jsa .tabs.in, .jsa .heat-toolbar.in {
  opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
/* După ce intrarea s-a terminat (anim.js pune .anim-done), stingem tranziția LENTĂ
   de entrance — altfel, prin specificitate, guverna și hover-ul (lift de 0.7s în loc
   de 0.18s, iar border-color sărea instant = hover „inconsistent"). Echivalentul
   pattern-ului `reveal-done` de pe site-ul public (vezi gotchas-ul de compositing). */
.jsa .kpi.in.anim-done { transition: .18s; }
.jsa .panel.in.anim-done, .jsa .eyebrow.in.anim-done, .jsa .ehint.in.anim-done,
.jsa .tabs.in.anim-done, .jsa .heat-toolbar.in.anim-done { transition: none; }
/* donut: scale + rotate in */
.jsa .donut { opacity: 0; transform: scale(.8) rotate(-10deg); }
.jsa .panel.in .donut { opacity: 1; transform: none; transition: opacity .7s ease .1s, transform .85s cubic-bezier(.22,1,.36,1) .1s; }
.jsa .legend .li { opacity: 0; }
.jsa .panel.in .legend .li { opacity: 1; transition: opacity .5s ease .2s; }
/* activitate: rânduri în cascadă */
.jsa .act-row { opacity: 0; transform: translateX(-10px); }
.jsa .panel.in .act-row { opacity: 1; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.jsa .panel.in .act-row:nth-child(2){transition-delay:.05s} .jsa .panel.in .act-row:nth-child(3){transition-delay:.1s}
.jsa .panel.in .act-row:nth-child(4){transition-delay:.15s} .jsa .panel.in .act-row:nth-child(5){transition-delay:.2s}
.jsa .panel.in .act-row:nth-child(6){transition-delay:.25s} .jsa .panel.in .act-row:nth-child(7){transition-delay:.3s}
/* tabel + feed: rânduri cascadă */
.jsa .panel.in .tbl tbody tr, .jsa .panel.in .feed .it { animation: rowIn .5s ease both; }
.jsa .panel.in .tbl tbody tr:nth-child(2),.jsa .panel.in .feed .it:nth-child(2){animation-delay:.05s}
.jsa .panel.in .tbl tbody tr:nth-child(3),.jsa .panel.in .feed .it:nth-child(3){animation-delay:.1s}
.jsa .panel.in .tbl tbody tr:nth-child(4),.jsa .panel.in .feed .it:nth-child(4){animation-delay:.15s}
.jsa .panel.in .tbl tbody tr:nth-child(n+5),.jsa .panel.in .feed .it:nth-child(n+5){animation-delay:.2s}
@keyframes rowIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
/* shell + brand pulse */
/* fill-mode BACKWARDS, nu both (2026-09-14): cu `both`, după ce animația se termină, transform-ul rămâne
   „în efect" (matrice identitate, nu cuvântul-cheie none) → .sidenav devine containing block pentru
   descendenții position:fixed și .ssw-pop e decupat de overflow:auto. anim.js stingea animația la
   `animationend`, dar pe live (HTML mare, scripturile defer rulează după ce cele 0.55s au trecut)
   handlerul se înregistra prea târziu și dropdown-ul de proiecte rămânea invizibil toată sesiunea
   (raportat de Liviu). Cadrul final = starea normală (opacity 1, transform none), deci vizual identic. */
.jsa .rail, .jsa .sidenav { animation: shellIn .55s cubic-bezier(.22,1,.36,1) backwards; }
/* după prima încărcare din sesiune, shell-ul rămâne static la navigare (fără reanimare) */
.no-shell-anim .rail, .no-shell-anim .sidenav { animation: none !important; }
@keyframes shellIn { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:none} }
.jsa .m-head { animation: topbarIn .55s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes topbarIn { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} }
.brand-mark { animation: bpulse 2.8s ease-in-out infinite; }
@keyframes bpulse { 0%,100%{filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),calc(.45*var(--glow))))} 50%{filter:drop-shadow(0 0 12px rgba(var(--accent-rgb),calc(.9*var(--glow))))} }

/* La navigarea fără reload (pjax) NU re-rula animația de intrare a cardurilor — în Safari,
   animarea transform/opacity pe zeci de elemente cu backdrop-filter = lag la fiecare click.
   Conținutul pjax apare instant; numai prima încărcare animează. */
/* Pin-ul e DOAR până sosește .in (`:not(.in)`) — un !important permanent pe transform
   omora lift-ul de hover al cardurilor pe conținutul adus prin pjax (hover „mort" după
   fiecare refresh live), iar transition:none permanent îl făcea să sară fără animație. */
.jsa main.pjax-in .kpi:not(.in), .jsa main.pjax-in .panel:not(.in), .jsa main.pjax-in .eyebrow:not(.in),
.jsa main.pjax-in .ehint:not(.in), .jsa main.pjax-in .tabs:not(.in), .jsa main.pjax-in .heat-toolbar:not(.in),
.jsa main.pjax-in .panel:not(.in) .donut, .jsa main.pjax-in .legend .li, .jsa main.pjax-in .act-row {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
.jsa main.pjax-in .tbl tbody tr, .jsa main.pjax-in .feed .it { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .jsa .kpi, .jsa .panel, .jsa .eyebrow, .jsa .ehint, .jsa .tabs, .jsa .heat-toolbar,
  .jsa .donut, .jsa .legend .li, .jsa .act-row { opacity: 1 !important; transform: none !important; }
  .brand-mark, .jsa .rail, .jsa .sidenav, .jsa .m-head, .jsa .panel.in .tbl tbody tr, .jsa .panel.in .feed .it { animation: none !important; }
}

/* ---------- icon-uri ---------- */
.ico { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.btn .ico { width: 15px; height: 15px; }
.nav a { display: flex; align-items: center; gap: 9px; }
/* badge „nou" pe un item de meniu (pagină nouă) — aliniat la dreapta, dispare când clientul deschide
   pagina (cerut 2026-07-14, generic pt. orice pagină nouă). */
.nav-new { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;   /* 9.5px era sub pragul de lizibilitate pe mobil (audit 2026-08-05) */
  color: var(--accent-ink); background: var(--accent-fill); padding: 2px 7px; border-radius: 999px; line-height: 1.4; }
.nav a.on .nav-new { background: var(--accent-ink); color: var(--accent-fill); }
.nav a .ico { width: 16px; height: 16px; opacity: .8; transition: .15s; }
@media (hover: hover) { .nav a:hover .ico { opacity: 1; } }
/* stilul lui „.on" (fundal + culoare) e definit O SINGURĂ DATĂ, mai sus (linia 101) — o a doua
   regulă duplicată aici (mai slabă, tentă lime 10%) câștiga silențios cascada CSS (apărea mai
   târziu în fișier) și făcea tab-ul activ să pară șters/greu de văzut. Păstrăm doar partea de icon. */
.nav a.on .ico { opacity: 1; }
@media (hover: hover) { .nav a.logout:hover { color: var(--danger); background: rgba(var(--danger-rgb),.1); } }
.kpi .kico { position: absolute; top: 15px; right: 15px; width: 18px; height: 18px; color: var(--accent); opacity: var(--kico-a); }
.kpi.big .kico { width: 21px; height: 21px; top: 18px; right: 18px; }
.feed .ic .ico { width: 15px; height: 15px; color: var(--accent); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--stroke); margin-top: 64px; padding: 28px 30px; background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.025)); }
.ft-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ft-brand { display: flex; align-items: center; gap: 9px; }
.ft-brand .brand-mark { width: 22px; height: 22px; }
.ft-name { font-family: "Bricolage Grotesque"; font-weight: 600; font-size: 14px; }
.ft-by { font-size: 10px; color: var(--faint); }
.ft-logo { height: 12px; width: auto; opacity: .85; }
.ft-meta { color: var(--faint); font-size: 12px; }
.ft-meta a { color: var(--muted); }
@media (hover: hover) { .ft-meta a:hover { color: var(--accent); } }
/* footer-ul e ULTIMUL în flux, dar tabbar-ul mobil e `position:fixed` peste el → ultimii ~65px
   stăteau ascunși sub tabbar (raportat 2026-07-14: „footer-ul nu se vede complet"). Padding jos =
   înălțimea tabbar-ului + safe-area, ca tot conținutul footer-ului să urce deasupra lui. Regula stă
   DUPĂ `.site-footer` de bază (altfel `padding` shorthand-ul de-acolo o suprascria — aceeași
   specificitate, sursa mai târzie câștigă). */
@media (max-width: 1023px) { .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* Decupajul camerei în peisaj (viewport-fit=cover, 2026-09-27, audit C1678): conținutul paginii (main.wrap,
   cu .page-head .period lipit în el) se retrage din benzile laterale nesigure, iar subsolul își
   păstrează cei 30px. În portret env() e 0 → margin 0 și max-width 100%, exact ca înainte (sub 1024px
   lățimea 1240px nu încape oricum, deci margin:auto dădea tot 0). */
@media (max-width: 1023px) {
  main.wrap { margin-left: env(safe-area-inset-left); margin-right: env(safe-area-inset-right);
    max-width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  .site-footer { padding-left: max(30px, env(safe-area-inset-left)); padding-right: max(30px, env(safe-area-inset-right)); }
}
/* Aceeași înălțime a tabbar-ului pentru derulările automate (focus, scrollIntoView, ancore): un câmp sau un buton
   adus în ecran nu mai rămâne sub bara fixă de jos (2026-09-15: „Confirmați retragerea” de pe Abonament). */
@media (max-width: 1023px) { html:has(.tabbar) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* Același tratament SUS (audit 2026-09-27, C1273): .m-head e sticky (0-63px) și, pe paginile cu
   perioadă, `.page-head .period` e sticky dedesubt (64-154px: pastilele + „Alege perioada").
   Fără scroll-padding-top, un control adus în ecran cu Tab ajungea sub ele (WCAG 2.4.11), mai
   ales pe telefonul culcat. Valorile = marginea de jos a benzilor + 8px aer. Selectorul lipit
   rămâne lipit (cerut 2026-07-14) — aici se schimbă doar unde se opresc derulările automate.
   .eyebrow avea scroll-margin-top 140px tocmai ca să compenseze benzile; cu padding-ul ăsta ar
   fi numărat de două ori → îl anulăm acolo unde padding-ul se aplică. */
@media (max-width: 1023px) {
  html:has(.m-head) { scroll-padding-top: calc(72px + env(safe-area-inset-top)); }
  html:has(.page-head .period) { scroll-padding-top: calc(162px + env(safe-area-inset-top)); }
  html:has(.m-head) .eyebrow, html:has(.page-head .period) .eyebrow { scroll-margin-top: 0; }
}
/* Linkurile din footer sunt text de 12px → cutie reală de 16px înălțime, mult sub minimul de
   atingere pe touch. Mărim DOAR aria de atingere, cu un pseudo-element invizibil (inset negativ) —
   aspectul rămâne identic, la fel ca la butoanele .btn.sm. Textul din jur nu e interactiv, deci
   suprapunerea ariei nu fură click-uri de la nimic. */
@media (max-width: 1023px) {
  .ft-meta a { position: relative; display: inline-block; }
  .ft-meta a::after { content: ""; position: absolute; inset: -14px -8px; min-width: 44px; min-height: 44px; }
}

/* ---------- control de perioadă (presetări + calendar) ---------- */
.period { display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* frosted glass: cât timp selectorul e sticky și conținutul defilează pe sub, fundalul se vede
   blurat prin pastile → textul rămâne lizibil (cerut 2026-07-14). Fundal mai opac pt. contrast +
   backdrop-filter blur. Excepție Safari (perf): `.is-safari` scoate blur-ul, lasă doar fundalul opac. */
/* selectoarele de perioadă (container de pastile + „Alege perioada") = 42px, DIFERIT de standardul
   de 32px al restului butoanelor/field-urilor — cerut explicit 2026-07-15 („ambele selectoare 42px"). */
.period-presets { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; min-height: 42px; box-sizing: border-box; padding: 4px; border-radius: 12px; background: var(--seg-track); border: 1px solid var(--stroke); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.is-safari .period-presets { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--seg-track-solid); }
.is-safari .period-custom, .is-safari .cal-trigger { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ctl-bg-solid); }
.pp { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; transition: .14s; }
@media (hover: hover) { .pp:not(.on):hover { color: var(--hover-ink); background: var(--hover-tint); } }
.pp.on { background: var(--accent-fill); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--on-edge); }
/* „Dintotdeauna" — separat subtil de ferestrele rulante (linie fină la stânga) */
.pp-all { margin-left: 6px; position: relative; }
.pp-all::before { content: ""; position: absolute; left: -3px; top: 6px; bottom: 6px; width: 1px; background: var(--stroke); border-radius: 1px; }
.period-custom { display: inline-flex; gap: 7px; align-items: center; padding: 4px 4px 4px 11px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--ctl-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.period-custom.on { border-color: rgba(var(--accent-rgb),.4); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.18); }
.period-custom .cal-ico { width: 15px; height: 15px; color: var(--muted); }
.period-custom input[type=date] { min-width: 0; width: 124px; height: 32px; padding: 6px 8px; font-size: 12.5px; }
.period-sep { color: var(--faint); }

/* ---------- selector de interval (calendar) ---------- */
.period-custom { position: relative; }
.period-custom.cal-on { border: 0; background: none; padding: 0; }
.cal-trigger { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit;
  height: 42px; box-sizing: border-box; padding: 0 16px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--ctl-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text); font-size: 13px; font-weight: 600; transition: .15s; }
@media (hover: hover) { .cal-trigger:hover { border-color: rgba(var(--accent-rgb),.4); background: var(--glass-2); color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.14); } }
@media (hover: hover) { .cal-trigger:hover .ico { color: var(--accent); } }
.cal-trigger .ico { width: 15px; height: 15px; color: var(--accent); }
.cal-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 80; width: max-content; max-width: calc(100vw - 32px);
  padding: 16px; border-radius: 18px;
  border: 1px solid var(--stroke-2); background: var(--pop-cal);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,calc(.95*var(--shk))); animation: cardIn .2s ease both; }
.cal-top { display: flex; align-items: center; gap: 6px; }
.cal-nav { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--surface-2); color: var(--text); font-size: 18px; cursor: pointer; flex-shrink: 0; }
@media (hover: hover) { .cal-nav:not(:disabled):hover { background: var(--glass-2); color: var(--accent); } }
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.cal-months { display: flex; gap: 22px; align-items: flex-start; }
.cal-m { width: auto; flex: 0 0 auto; }
.cal-mh { text-align: center; font-family: "Bricolage Grotesque"; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; margin-bottom: 5px; }
.cal-dow span { text-align: center; font-size: 10.5px; color: var(--faint); line-height: 18px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 32px); grid-auto-rows: 32px; align-content: start; gap: 2px; }
.cal-d { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text); font-size: 12.5px; cursor: pointer; border-radius: 9px; font-family: inherit; transition: background .12s; }
.cal-d.empty { visibility: hidden; cursor: default; }
@media (hover: hover) { .cal-d:hover:not(.disabled):not(.empty):not(.start):not(.end) { background: var(--glass-2); } }
.cal-d.disabled { color: var(--faint); opacity: .55; cursor: not-allowed; }
.cal-d.inrange { background: rgba(var(--accent-rgb),.13); border-radius: 0; }
.cal-d.start, .cal-d.end { background: var(--accent-fill); color: var(--accent-ink); font-weight: 700; }
.cal-d.start { border-radius: 9px 0 0 9px; }
.cal-d.end { border-radius: 0 9px 9px 0; }
.cal-d.start.end { border-radius: 9px; }
/* hover cu o singură zi aleasă: intervalul e OPȚIONAL → preview „fantomă" (tentă slabă
   + contur), niciodată fill plin ca selecția reală. Ziua aleasă rămâne pastilă completă. */
.cal-d.preview { background: rgba(var(--accent-rgb),.06); border-radius: 0; }
.cal-d.preview-end { border-radius: 9px; color: var(--accent); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb),.45); }
/* wrap: eticheta „Aplică <interval>" e lată — pe ecrane înguste hint-ul și butoanele
   se așază pe rânduri separate în loc să spargă popover-ul */
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.cal-foot .cal-sel { flex: 1 1 auto; min-width: 0; }
.cal-foot .cal-actions { flex: 0 0 auto; margin-left: auto; }
.cal-sel { font-size: 12.5px; color: var(--muted); }
.cal-actions { display: flex; gap: 8px; }
html.pjax-busy { cursor: progress; }
@media (max-width: 620px) {
  .cal-months { flex-direction: column; gap: 16px; align-items: center; width: 100%; }
  .cal-pop { left: 0; right: auto; }
  /* Butoanele de lună ies din flux: în rând furau 76px, iar grila (7×32 + gap = 236px)
     nu mai încăpea în cei ~256px de conținut la 320px → popover-ul dădea overflow.
     Acum stau în colțurile de sus, pe banda titlului lunii. */
  .cal-top { position: relative; display: block; }
  .cal-top > .cal-nav { position: absolute; top: -2px; width: 28px; height: 28px; z-index: 2; }
  .cal-top > .cal-nav[data-nav="-1"] { left: 0; }
  .cal-top > .cal-nav[data-nav="1"] { right: 0; }
}
/* Calendarul de perioadă pe telefon/tabletă (audit 2026-09-27, C0906): sub 1024px `.page-head .period`
   e sticky (64-154px, sub .m-head), iar .cal-pop stă ÎN el, fără limită de înălțime → derularea
   paginii nu-l mișcă; cu lunile una sub alta (~590px) „Aplică" și ultimele zile rămâneau sub bara
   de jos sau sub ecran, deci un interval ales de mână nu se putea aplica (iPhone în Safari: 548-750px
   înălțime utilă; telefonul culcat: 390px). Acum popover-ul are cel mult înălțimea dintre banda
   lipită de sus (popover-ul începe la 164px = 154 + 10) și bara de jos (73px = bara de 65px + 8px
   aer): lunile se derulează ÎN el, iar subsolul cu „Aplică" stă mereu jos, vizibil. Pe ecranele
   scunde (≤560px înălțime: telefonul culcat, iPhone SE în Safari) urcă peste rândul de pastile
   (-48px = pastile 42 + gap 6) și începe chiar sub .m-head (64px), ca să rămână loc pentru lună. Unde încape (tabletă
   în portret, desktop) nimic nu se schimbă: max-height mai mare decât popover-ul = fără efect.
   `safe center`: cât încape, săgețile rămân centrate ca înainte; când lunile se derulează, conținutul
   se aliniază sus (altfel partea de sus ar ieși PESTE zona de derulare, inaccesibilă). */
@media (max-width: 1023px) {
  .page-head .period .cal-pop { display: flex; flex-direction: column;
    max-height: calc(100vh - 164px - env(safe-area-inset-top) - 73px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 164px - env(safe-area-inset-top) - 73px - env(safe-area-inset-bottom)); }
  .page-head .period .cal-pop > .cal-top { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-items: safe center; }
  .page-head .period .cal-pop > .cal-foot { flex: 0 0 auto; }
}
@media (max-width: 1023px) and (max-height: 560px) {
  .page-head .period .cal-pop { top: -48px;
    max-height: calc(100vh - 64px - env(safe-area-inset-top) - 73px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 64px - env(safe-area-inset-top) - 73px - env(safe-area-inset-bottom)); }
}
@media (max-width: 620px) {
  /* .cal-top derulează acum (overflow) → cei -2px de sus ai săgeților ar fi tăiați */
  .page-head .period .cal-pop .cal-top > .cal-nav { top: 0; }
}

/* ---------- selector de dată UNICĂ (Financiar: cheltuieli/vânzări/formular terți) ---------- */
.cal-single-host { position: relative; display: inline-block; width: 100%; }
.cal-trigger-single { height: auto; width: 100%; box-sizing: border-box; justify-content: flex-start;
  padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; background: var(--input-bg); }
.cal-trigger-single .ico { color: var(--muted); flex-shrink: 0; }
@media (hover: hover) { .cal-trigger-single:hover .ico { color: var(--accent); } }
.cal-trigger-single .cal-tl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-pop-single .cal-months { display: block; }
/* poziția (left/top, position:fixed) e calculată și setată inline din JS — vezi reposition()
   în calendar.js — ca să nu mai depindă de `host`-ul din DOM (poate fi într-un <td> decupat). */

/* ---------- glow-uri statice în fundal: fixe (parallax), conținutul derulează peste ele ---------- */
#bgGlows { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: var(--amb);
  background: url('noise.svg'); background-size: 190px 190px; }   /* grain fix, cu parallax */
/* fără `filter: blur(70px)`: gradientele sunt deja moi (transparent 68%) — blur-ul live era scump */
#bgGlows .go { position: absolute; border-radius: 50%; }
#bgGlows .go1 { width: 540px; height: 540px; top: -140px; left: -90px;  background: radial-gradient(circle, rgba(212,255,74,.10), transparent 68%); }
#bgGlows .go2 { width: 460px; height: 460px; top: 26%;   right: -130px; background: radial-gradient(circle, rgba(255,226,74,.08), transparent 68%); }
#bgGlows .go3 { width: 620px; height: 620px; bottom: -240px; left: 24%; background: radial-gradient(circle, rgba(120,200,60,.075), transparent 68%); }
#bgGlows .go4 { width: 360px; height: 360px; top: 58%;   left: -110px;  background: radial-gradient(circle, rgba(212,255,74,.065), transparent 68%); }

/* ---------- chart „Vizualizări pe zi" cu repere ---------- */
.dc-head { display: flex; gap: 22px; flex-wrap: wrap; margin: 2px 0 14px; }
.dc-stat { font-size: 12.5px; color: var(--muted); }
.dc-stat b { font-family: "Bricolage Grotesque"; font-weight: 600; font-size: 16px; color: var(--text); margin-right: 4px; }
.daychart { display: flex; gap: 10px; }
/* Axa Y: etichetele se ancorează de fracția liniei lor de grilă (top în %, pus inline de
   chart_y_axis) — nu se mai împart spațiul cu `space-between`, care le scotea din dreptul
   liniilor cu până la 22px. `align-self:flex-start` + înălțime inline = exact înălțimea
   svg-ului, deci fracțiile înseamnă același lucru în ambele. */
.dc-y { position: relative; align-self: flex-start; text-align: right; font-size: 11px;
  color: var(--faint); min-width: 26px; font-variant-numeric: tabular-nums; }
.dc-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.dc-main { position: relative; flex: 1; min-width: 0; user-select: none; -webkit-user-select: none; }
.dc-svg { display: block; width: 100%; }
.dc-gl { stroke: rgba(var(--veil-rgb),.07); stroke-width: 1; stroke-dasharray: 3 5; }
/* Barele de vânzări/zi din „Venit vs cheltuieli" (2026-08-05). Albastrul e al treilea ton deja
   folosit în Financiar (badge-ul „importat"), ca să nu concureze cu lima venitului și roșul
   cheltuielilor. Opacitate mică: barele răspund la „din câte vânzări vine suma asta", nu preiau
   graficul. Fără `rx`: la `preserveAspectRatio="none"` raza se turtește odată cu axa X. */
.fc-bar { fill: rgba(var(--chart-2-rgb),.32); }
/* Axa X: la fel — fiecare etichetă la fracția ei reală, cu capetele ancorate de margini. */
.dc-x { position: relative; height: 15px; margin-top: 7px; font-size: 11px; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.dc-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.dc-x span.at-start { transform: none; }
.dc-x span.at-end { transform: translateX(-100%); }
/* Densitatea axei X, în trepte. Serverul trimite până la 12 etichete, fiecare cu un nivel
   (vezi chart_x_axis()); aici alegem câte se văd, după cât loc e. Nivelurile sunt așezate
   din 4 în 4 / din 2 în 2, deci la orice treaptă distanțele rămân egale.
   ~12 pe ecran lat · ~6 pe laptop · ~3 pe telefon. */
@media (max-width: 1439px) { .dc-x span[data-lvl="2"] { display: none; } }
@media (max-width: 1023px) { .dc-x span[data-lvl="1"] { display: none; } }
/* hover pe grafic: linie verticală + punct + tooltip cu valoarea exactă */
.dc-hoverline { stroke: rgba(var(--accent-rgb),.4); stroke-width: 1; }
/* Punctul e HTML, nu <circle>: svg-urile au preserveAspectRatio="none", deci un cerc din
   svg se turtește pe orizontală cu raportul lățime/1000 — pe telefon ieșea o lentilă
   (raportat 2026-08-04). Un element HTML nu trece prin transformarea viewBox-ului. */
.dc-hoverdot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--text); border: 2px solid var(--dot-ring); z-index: 3;
  pointer-events: none; box-shadow: 0 0 4px rgba(238,241,230,.55); }
.dc-tip { position: absolute; top: 0; z-index: 4; transform: translate(-50%, -100%) translateY(-8px); pointer-events: none;
  background: var(--option-bg); border: 1px solid var(--stroke-2); border-radius: 8px; padding: 6px 10px; white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,calc(.8*var(--shk))); }
.dc-tip b { font-family: "Bricolage Grotesque"; font-size: 14px; color: var(--text); }   /* alb, nu accent — prea mult galben pe pagină */
.dc-tip span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
/* rând de serie în tooltipul graficelor cu 2 linii (Financiar, Comparație) */
.dc-tip em { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 11px; color: var(--muted); }
.dc-tip em + em { margin-top: 3px; }
.dc-tip em i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dc-tip em b { margin-left: auto; padding-left: 12px; font-size: 12.5px; }
/* 2026-09-27 (C0956): tooltipul „pe produs” (nume lungi de produse, nowrap) avea ~600px pe telefon — mai lat
   decât ecranul, deci o parte (adesea chiar cifrele) ieșea mereu afară. Plafon = ecranul minus margini; numele
   se rupe pe rânduri, valoarea EXACTĂ rămâne pe un rând. width:max-content ține lățimea independentă de `left`
   (chart.js o măsoară ca să-l țină în ecran); unde încape, lățimea e exact cea de dinainte (desktop identic). */
.dc-tip { width: max-content; max-width: calc(100vw - 24px); }
.dc-tip em { white-space: normal; }
.dc-tip em b { white-space: nowrap; }
/* sparkline-urile de pe carduri: tooltip mai mic, ca să nu acopere cifra cardului */
.dc-spark .dc-tip { padding: 4px 8px; }
.dc-spark .dc-tip b { font-size: 12px; }
.dc-spark .dc-hoverdot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }

/* entrance card login/share-invalid */
.auth-card { animation: cardIn .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* live update — glow pe valoarea care se schimbă */
.kpi.flash { animation: flashGlow 1.3s ease; }
.kpi.flash .val { animation: valPop 1.1s ease; }
@keyframes flashGlow {
  /* (2026-09-27, audit C0971) alfa halourilor × --glow, ca în restul keyframes-urilor: pe light
     --glow = 0 și --accent-rgb e oliv închis, deci fără înmulțire apărea o pată închisă în jurul
     cardului și al cifrei la fiecare actualizare live. Pe dark (--glow 1) totul e identic; pe light
     rămân semnalul de bordură (--accent) și mărirea cifrei. */
  0%, 18% { border-color: var(--accent); box-shadow: 0 0 28px -2px rgba(var(--accent-rgb),calc(.55*var(--glow))), inset 0 1px 0 rgba(var(--veil-rgb),.03); }
  100%    { border-color: var(--stroke); box-shadow: 0 18px 50px -28px rgba(0,0,0,calc(.9*var(--shk))), inset 0 1px 0 rgba(var(--veil-rgb),.03); }
}
@keyframes valPop {
  0%   { text-shadow: 0 0 14px rgba(var(--accent-rgb),calc(.85*var(--glow))); transform: scale(1.04); }
  100% { text-shadow: none; transform: none; }
}
/* punct „live" lângă titlu */
.h-row { display: inline-flex; align-items: center; gap: 13px; flex-wrap: wrap; }
/* lățime minimă = cea mai lungă etichetă posibilă (interval custom „dd.mm.yyyy – dd.mm.yyyy" ≈182px,
   față de „azi" ≈65px) — altfel .h-row (h1+chip+live-badge+live-now) se împachetează la lățimi
   DIFERITE în funcție de perioada aleasă → live-now „sare" de poziție când schimbi perioada. */
.period-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text);
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--stroke-2); background: var(--glass-2); min-width: 190px; }
.period-chip .ico { width: 14px; height: 14px; color: var(--accent); }
.live-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ok); padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(var(--ok-rgb),.4); background: rgba(var(--ok-rgb),.1); }
.live-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 10px rgba(var(--ok-rgb),var(--glow)); animation: livePulse 1.7s ease-in-out infinite; }
.live-now { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted);
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--glass); white-space: nowrap; }
/* lățime stabilă pt. număr: schimbarea 0→N (poll live) să NU reflow-eze header-ul → nu mai sare meniul de perioadă */
.live-now b { font-family: "Bricolage Grotesque"; color: var(--text);
  display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.live-now.has { border-color: rgba(var(--ok-rgb),.4); color: var(--ok); }
.live-now.has b { color: var(--ok); }
.ln-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.live-now.has .ln-dot { background: var(--ok); box-shadow: 0 0 9px rgba(var(--ok-rgb),var(--glow)); animation: livePulse 1.8s ease-in-out infinite; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ok); }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(var(--ok-rgb),var(--glow)); animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .kpi.flash, .kpi.flash .val, .live-dot::before { animation: none !important; } }
/* Același puls, pe fratele din antetul paginilor Analytics și pe „N acum pe site”: scăpate din regula de
   mai sus, pulsau la nesfârșit și cu „Mișcare redusă” pornită (2026-09-27, audit C1276). Punctul rămâne
   verde, doar nu mai clipește. Indicatorii de ÎNCĂRCARE nu intră aici (se încetinesc, vezi .spinner). */
@media (prefers-reduced-motion: reduce) { .live-badge::before, .live-now.has .ln-dot { animation: none !important; } }

/* NB: blocul specific `.is-safari` (backdrop-filter:none etc.) a fost ELIMINAT 2026-07-06 — acum
   NICIUN element nu mai are backdrop-filter/blur live, pe niciun browser, deci nu mai e nevoie de
   degradare specială pe Safari. Clasa `.is-safari` se pune încă din JS, dar nu mai are reguli aici. */

/* Comutatorul de limbă RO/EN (sidenav + sheet) */
.sn-lang { margin-top: 10px; padding: 10px 4px 0; border-top: 1px solid var(--stroke); }
.lang-sw { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--seg-soft); border: 1px solid var(--stroke); }
.lang-b { padding: 4px 12px; border-radius: 7px; border: none; background: transparent; color: var(--faint);
  font: 600 11.5px/1 "Hanken Grotesk", sans-serif; letter-spacing: .06em; cursor: pointer; transition: .14s; }
@media (hover: hover) { .lang-b:hover { color: var(--text); } }
.lang-b.on { background: var(--glass-2); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.4); }
.sheet-lang { display: flex; justify-content: center; padding: 4px 0 8px; }

/* Separator „sau" + buton Google (login) */
.or-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--faint); font-size: 12px; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: rgba(178,140,255,.16); }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; border-radius: 13px;
  border: 1px solid rgba(178,140,255,.2); background: rgba(var(--veil-rgb),.04); color: #F3EEF6; font-weight: 500; font-size: 14.5px; text-decoration: none; transition: .15s; }
@media (hover: hover) { .gbtn:hover { background: rgba(var(--veil-rgb),.08); } }

/* ── Descrieri lungi strânse la 2 rânduri + tabele cu expand (2026-07-19) ── */
:is(.ehint, .clamp2).is-clampable:not(.is-open) {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ehint-more {
  display: inline-block; background: none; border: 0; padding: 0;
  margin: -8px 0 14px; cursor: pointer;
  color: var(--accent); font-size: 12px; font-family: inherit;
}
@media (hover: hover) { .ehint-more:hover { text-decoration: underline; } }
/* după un paragraf .clamp2 (margini proprii, nu cele 14px ale .ehint): butonul stă imediat sub text */
.clamp2 + .ehint-more { display: block; margin: 4px 2px 10px; }
/* un titlu de secțiune imediat după „Vezi toată descrierea” (ambele inline): titlul pe rândul lui (Optimizare ads, 2026-10-06) */
.ehint-more + .eyebrow { display: flex; width: fit-content; }
.tbl-collapsed tbody tr:nth-child(n+6) { display: none; }
.tbl-more { display: flex; justify-content: center; padding: 10px 0 2px; }
.tbl-more button {
  background: var(--surface-2); border: 1px solid var(--stroke); border-radius: 999px;
  padding: 7px 16px; cursor: pointer;
  color: var(--muted); font-size: 12px; font-family: inherit;
  transition: color .15s ease, border-color .15s ease;
}
@media (hover: hover) { .tbl-more button:hover { color: var(--text); border-color: var(--stroke-2); } }

/* câte vânzări conține un rând agregat (o zi de import) + prețul unitar — ca să fie clar
   de ce KPI-ul VÂNZĂRI e mai mare decât numărul de rânduri din tabel */
.sale-qty { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }
/* Financiar → Produse: numele vine din shop, nu e o etichetă scurtă scrisă de noi. Un singur
   nume lung („NLP Wake Up — Ediția a 2-a, pachetul VIP complet cu…") întindea tabelul de la
   ~790px la 1110px, iar pe telefon coloana „Venit" ajungea după un swipe lung. Plafonul e pe un
   DIV, nu pe celulă: `max-width` pe `td` e ignorat la `table-layout:auto` (vezi gotchas.md). */
/* ---------- Financiar: coloana „Produse" + graficul pe produs (2026-09-16) ----------
   Apare DOAR când site-ul are mai multe produse. Sub 1280px stă deasupra cifrelor, strânsă într-o bară
   care se desface (JS); de la 1280px devine coloană lipicioasă în dreapta, iar coloana principală își
   aranjează cardurile KPI după lățimea EI (container query), nu după ecran. Selecția e parametru al
   paginii (`prod`): fiecare bifă e un link, pjax-ul reface pagina cu cifrele recalculate pe server.
   Regulă light: nimic de adăugat — culorile vin din tokeni (--fp-N, --surface, --stroke…). */
.fin-layout { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; align-items: start; }
.fin-main { min-width: 0; container-type: inline-size; container-name: finmain; }
.fin-side { min-width: 0; margin: 0 0 22px; }
.fs-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 1px solid var(--stroke);
  border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.fs-title { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 600; color: var(--muted); }
.fs-title .ico { width: 14px; height: 14px; color: var(--accent); }
.fs-count { margin-left: auto; font-family: "Bricolage Grotesque"; font-feature-settings: "tnum"; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.fs-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .18s; flex: none; }
.fin-side.open .fs-chev { transform: rotate(180deg); }
.fs-body { display: none; margin-top: 10px; }
.fin-side.open .fs-body { display: block; }
.fs-panel { padding: 10px 10px 12px; }
.fs-hint { margin: 4px 8px 10px; font-size: 12px; color: var(--faint); line-height: 1.45; }
.fs-row { display: flex; align-items: stretch; gap: 2px; }
.fs-tg { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: 10px;
  color: inherit; text-decoration: none; transition: background .12s; }
@media (hover: hover) { .fs-tg:hover { background: rgba(var(--veil-rgb),.05); } }
.fs-tg:focus-visible { outline: 2px solid transparent; outline-offset: -2px; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.28); }   /* transparent → vizibil în culori forțate (C1278) */
.fs-chk { flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--stroke-2); background: var(--glass);
  display: inline-flex; align-items: center; justify-content: center; color: var(--accent-ink); transition: background .15s, border-color .15s; }
.fs-chk .ico { width: 12px; height: 12px; opacity: 0; }
.fs-chk .ico path { stroke-width: 3.2; }
.fs-row.on .fs-chk { background: var(--accent-fill); border-color: var(--accent-fill); }
.fs-row.on .fs-chk .ico { opacity: 1; }
.fs-main { flex: 1; min-width: 0; }
.fs-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.fs-nums { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); font-feature-settings: "tnum"; }
.fs-nums b { font-family: "Bricolage Grotesque"; font-weight: 600; color: var(--text); }
.fs-row:not(.on) .fs-name, .fs-row:not(.on) .fs-nums b { color: var(--faint); }
.fs-row:not(.on) .fp-dot { opacity: .45; }
.fs-solo { flex: none; align-self: center; font-size: 11.5px; color: var(--faint); padding: 6px 8px; border-radius: 8px;
  text-decoration: none; transition: color .12s, background .12s; }
@media (hover: hover) { .fs-solo:hover { color: var(--hover-ink); background: var(--hover-tint); } }
.fs-foot { margin: 10px 8px 0; display: flex; flex-direction: column; gap: 8px; }
.fs-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.fs-all .ico { width: 13px; height: 13px; }
.fs-note { margin: 0; font-size: 11.5px; color: var(--faint); line-height: 1.45; }
/* pe ecran de atins, „doar” și „Toate produsele” trebuie să aibă zona de apăsare a unui buton (≥44px),
   nu a unui cuvânt de 11px — aceeași regulă ca la .kpi-jump/.ehint-more */
@media (max-width: 1023px), (pointer: coarse) {
  .fs-solo { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; }
  .fs-all { min-height: 44px; }
  .fs-row { gap: 0; }
}
/* punctul de culoare al unui produs — același în coloană, în legenda graficului și în tabel */
.fp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; flex: none; }
/* barele de vânzări (stivuite pe produse): culoarea produsului, la aceeași transparență ca bara din „Venit vs cheltuieli” */
.fp-bar { fill-opacity: .34; }
/* antetul graficului = doar cheia „— venit  ▮ nr. vânzări” (produsele sunt în coloană și în tabel, nu și aici) */
.fp-key { display: inline-flex; align-items: center; color: var(--faint); }
.fp-key-line { display: inline-block; width: 14px; height: 2px; border-radius: 1px; background: var(--muted); margin-right: 6px; }
.fp-key-bar { display: inline-block; width: 8px; height: 11px; border-radius: 1.5px; background: rgba(var(--veil-rgb),.28); margin: 0 6px 0 12px; }
.fp-note { margin: 16px 2px 12px; }
.prod-cell .fp-dot { vertical-align: 0; }
@media (min-width: 1280px) {
  .fin-layout.has-side { grid-template-columns: minmax(0, 1fr) 272px; }
  .fin-layout.has-side .fin-side { grid-column: 2; grid-row: 1; position: sticky; top: 76px; margin: 0;
    max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: thin; }
  .fin-layout.has-side .fin-main { grid-column: 1; grid-row: 1; }
  .fs-head { pointer-events: none; cursor: default; }
  .fs-chev { display: none; }
  .fs-body { display: block; }
  /* cardurile KPI se aranjează după lățimea COLOANEI principale, nu a ecranului */
  /* sub 900px de coloană: 2 pe rând; al treilea card mare (Profit) ia tot rândul, nu rămâne orfan lângă o celulă goală */
  @container finmain (max-width: 900px) {
    .fin-layout.has-side .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .fin-layout.has-side .kpi-grid.tier1 > :nth-child(3):last-child { grid-column: 1 / -1; }
  }
}
.prod-cell { max-width: 360px; overflow-wrap: anywhere; }
.prod-shr { display: none; }
/* Pe telefon, „Medie / vânzare" + „Din venit" ocupau 308px din 738px — peste 40% din tabel
   pentru informație secundară, iar coloana „Venit" (cea cerută) ajungea abia după două ecrane
   de swipe. Le ascundem sub 700px și mutăm procentul ca sub-rând sub sumă, ca să nu se piardă. */
@media (max-width: 700px) {
  .prod-cell { max-width: 220px; }
  .prod-shr { display: block; }
  #prodTbl th:nth-child(4), #prodTbl td:nth-child(4),
  #prodTbl th:nth-child(5), #prodTbl td:nth-child(5) { display: none; }
}
/* (2026-10-09) La 320 px cele trei coloane rămase (Produs · Vânzări · Venit, antetele nowrap + 12 px de fiecare parte)
   ieșeau 13 px din card → tabelul se trăgea în lateral degeaba. 8 px de fiecare parte le aduce în card. */
@media (max-width: 400px) { #prodTbl th, #prodTbl td { padding-left: 8px; padding-right: 8px; } }   /* era 360: la 361–400 numele se rupeau în cuvânt (audit 85) */

/* permisiunile unui link de raport (Acces clienți): tabel compact Secțiune | Citire | Scriere.
   Scrierea există doar unde are sens (azi: Financiar); restul afișează „—". */
.shp-wrap { flex-basis: 100%; }
/* specificitate: .site-edit .fld / .row-form .fld setează flex-basis 150px și ar trage tabelul
   pe același rând cu câmpurile — forțăm rândul propriu, sub câmpuri */
.site-edit .fld.shp-wrap, .row-form .fld.shp-wrap { flex: 0 0 100%; }
/* Retenția = valoare + unitate (zile/luni/ani) — compactă, NU se întinde pe tot
   rândul (altfel un câmp singur pe ultimul rând se lățea la ~740px). */
.site-edit .fld.ret-wrap, .row-form .fld.ret-wrap { flex: 0 0 240px; }
.ret-ctl { display: flex; gap: 8px; }
.ret-ctl .ret-num { flex: 0 0 74px; width: 74px; min-width: 0; text-align: center; }
.ret-ctl .ret-num[hidden] { display: none; }
.ret-ctl .ret-unit { flex: 1 1 auto; min-width: 0; }
/* hint în flow sub control; câmpul e mai înalt, dar cu align-items:flex-start pe
   `.site-edit` controlul rămâne aliniat cu celelalte input-uri, iar hint-ul curge
   dedesubt fără să se suprapună cu rândul următor. */
.ret-hint { font-size: 11px; color: var(--faint); line-height: 1.4; margin-top: 1px; }
/* fără săgețile native de spinner pe input-urile numerice (arată nativ, în afara temei) */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shp-l { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.shp-tbl { max-width: 460px; border: 1px solid var(--stroke); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--veil-rgb),.025), rgba(var(--veil-rgb),.008)); }
.shp-hrow, .shp-row { display: grid; grid-template-columns: 1fr 76px 76px; align-items: center; }
.shp-hrow { padding: 9px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--stroke); background: rgba(var(--veil-rgb),.02); }
.shp-hrow span:nth-child(n+2) { text-align: center; }
.shp-row { padding: 7px 14px; border-bottom: 1px solid rgba(var(--veil-rgb),.05); }
.shp-row:last-child { border-bottom: 0; }
@media (hover: hover) { .shp-row:hover { background: rgba(var(--accent-rgb),.04); } }
.shp-n { font-size: 13.5px; }
.shp-c { display: flex; justify-content: center; align-items: center; cursor: pointer; padding: 3px 0; }
/* fără width/height aici: stilul global input[type=checkbox] e 21×21 cu min-width 21 —
   un height mai mic îl turtea în pastilă (21×15, raportat de Liviu) */
.shp-c input { margin: 0; }
.shp-na { color: var(--faint); opacity: .5; cursor: default; }

/* ============================================================================
   Campanii — integrare Meta: creativele ads-urilor (thumb în tabel + preview)
   ============================================================================ */
.meta-cta { margin-bottom: 18px; }
.meta-cta-t { display: flex; align-items: center; gap: 9px; font-size: 14.5px; margin-bottom: 8px; }
.meta-cta-t .ico { width: 17px; height: 17px; color: var(--accent); }
.meta-cta .btn { margin-top: 4px; }
.meta-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px;
  color: var(--muted); margin: -6px 0 14px; }
.meta-status .ico { width: 14px; height: 14px; color: var(--accent); opacity: .8; flex: none; }
.meta-warn { color: var(--warn-4); text-decoration: underline; text-underline-offset: 3px; }
/* buton-link discret (sincronizează/deconectează) — arată ca un link, e <button> */
.lnk { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--accent);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lnk:disabled { opacity: .55; cursor: default; }
.lnk-dim { color: var(--faint); }
@media (hover: hover) { .lnk:hover:not(:disabled) { opacity: .85; } }

/* thumbnail-ul din rândul de ad */
.ad-c { display: inline-flex; align-items: center; gap: 10px; }
.ad-thumb { position: relative; width: 34px; height: 34px; flex: none; padding: 0; border: 1px solid var(--stroke);
  border-radius: 8px; overflow: hidden; background: rgba(var(--veil-rgb),.04); cursor: zoom-in; }
.ad-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) { .ad-thumb:hover { border-color: var(--accent); } }
.ad-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.28); }
.ad-play::after { content: ''; width: 0; height: 0; border-left: 8px solid #fff;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,calc(.55*var(--shk)))); }

/* preview-ul creativului (overlay self-contained, merge și în raportul partajat) */
.cre-ov { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(7,9,3,.72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.cre-ov[hidden] { display: none; }
.cre-box { position: relative; width: min(440px, 100%); max-height: min(86vh, 720px); overflow: auto;
  border-radius: 18px; padding: 14px; }
.cre-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--stroke); background: var(--pop-crex); color: var(--muted); font-size: 17px;   /* literalul închis → token (C0878): pe light „×" era 1,3:1 */
  line-height: 1; cursor: pointer; }
@media (hover: hover) { .cre-x:hover { color: var(--text); border-color: var(--accent); } }
.cre-imgw { position: relative; border-radius: 12px; overflow: hidden; background: rgba(var(--veil-rgb),.03); }
.cre-imgw img { display: block; width: 100%; max-height: 52vh; object-fit: contain; }
.cre-badge { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; }
.cre-meta { padding: 12px 4px 2px; }
.cre-name { font-size: 11px; color: var(--faint); letter-spacing: .04em; margin-bottom: 6px; }
.cre-title { font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.cre-title[hidden], .cre-body[hidden] { display: none; }
.cre-body { font-size: 13px; color: var(--muted); line-height: 1.55; white-space: pre-line; margin-bottom: 12px; }

/* ===== Campanii — metrici de performanță Facebook (v30) ===== */
/* prima coloană (nume) rămâne fixă la scroll orizontal; coloanele de bani se dezvăluie la dreapta */
.camptbl th:first-child, .camptbl td:first-child { position: sticky; left: 0; z-index: 2; background: var(--sticky-bg); box-shadow: 1px 0 0 var(--stroke); }
.camptbl thead th:first-child { z-index: 3; }
.camptbl .fb-good { color: var(--ok); }
.camptbl .fb-bad { color: var(--danger); }
.reach-load { color: var(--faint); }
/* rând de ad expandabil */
.cdrow-x { cursor: pointer; }
/* conținutul primei celule (chevron + thumbnail + nume) aliniat vertical la mijloc, indiferent de înălțimi */
.cd-cell { display: inline-flex; align-items: center; min-width: 0; vertical-align: middle; }
/* buton de expand „friendly": pastilă rotunjită cu tentă accent mereu vizibilă (se vede că e clickabil),
   chevron care se rotește de la ▸ (închis) la ▾ (deschis) */
.cd-chev { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  margin-right: 10px; border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 999px; flex-shrink: 0;
  background: rgba(var(--accent-rgb), .09); transition: background .15s, border-color .15s, transform .15s; }
.cd-chev::before { content: ''; width: 6px; height: 6px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg); margin-left: -2px; transition: transform .18s; }
.cdrow-x.open .cd-chev { background: rgba(var(--accent-rgb), .2); border-color: rgba(var(--accent-rgb), .55); }
.cdrow-x.open .cd-chev::before { transform: rotate(45deg); margin: -2px 0 0; }
@media (hover: hover) { .cdrow-x:hover td:first-child { color: var(--text); } .cdrow-x:hover .cd-chev { border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .17); transform: scale(1.08); } }
.cdrow-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* chevronul e acum <button> (2026-09-27, audit C1281 — rândul nu mai e focusabil): aceeași pastilă,
   fără umplutura/aspectul implicit al butonului; inelul de focus doar pe el, nu pe tot rândul */
button.cd-chev { padding: 0; font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.cd-chev:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* drawer */
.cdrawer > td { padding: 0 !important; background: var(--bg-2); }
.cd-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 18px; }
.cd-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 10px; }
.cd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.cd-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-l { font-size: 10.5px; color: var(--muted); letter-spacing: .02em; }
.cd-v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cd-gap { margin: 0 18px 16px; padding: 11px 14px; border-radius: 12px; background: var(--grad-soft);
  border: 1px solid rgba(var(--accent-rgb), .18); font-size: 12.5px; line-height: 1.55; }
.cd-flag { margin: 0 18px 16px; padding: 8px 12px; border-radius: 10px; font-size: 12px; }
.cd-flag.bad { color: var(--danger); background: rgba(var(--danger-rgb),.1); }
.cd-flag.warn { color: var(--warn-ink); background: rgba(var(--warn-rgb),.1); }
@media (max-width: 1023px) {
  .cd-wrap { grid-template-columns: 1fr; gap: 14px; }
  .cd-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Funnel — traseul vizitatorului (action=funnel)
   CURĂȚAT 2026-09-01: pagina a fost rescrisă ca „Traseu" (2026-08-05), iar
   vizualizările vechi (.fz*, .fz2*, .fzh*, .fzl*, taburi, editor de pași, wizard-ul
   vechi) nu mai apăreau nicăieri în index.php/lib/assets — șterse (~30 KB).
   Au rămas DOAR clasele refolosite de Traseu și de configurarea ghidată:
   .fnl-seg, .fnl-ads-h/-row/-card, .fnl-adchip (+ regulile lui din „Lot UI"),
   .fnl-ads-toggle, .fnl-wz-grid/-card.
   ========================================================================= */
.fnl-seg { display: inline-flex; border: 1px solid var(--stroke); border-radius: 999px; background: var(--seg-soft); padding: 3px; gap: 2px; }
.fnl-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.fnl-seg a .ico { width: 13px; height: 13px; }
.fnl-seg a.on { color: var(--accent-ink); background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--on-edge); }

.fnl-ads-h { font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.fnl-ads-h .muted { font-weight: 500; font-size: 12px; }
/* padding sus/dreapta ca badge-ul ✕ (poziționat pe -7px, în afara chip-ului) să NU fie
   tăiat de clip-ul scroll-ului orizontal — overflow-x:auto face și overflow-y să clipuiască */
.fnl-ads-row { display: flex; gap: 10px; overflow-x: auto; padding: 10px 10px 6px 0; scrollbar-width: thin; }
.fnl-adchip { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px;
  border: 1px solid var(--stroke); background: var(--surface-2); flex-shrink: 0; color: var(--text); max-width: 250px; transition: .15s; }
@media (hover: hover) { .fnl-adchip:hover { border-color: rgba(var(--accent-rgb),.5); background: var(--glass-2); transform: translateY(-1px); } }

.fnl-adchip { position: relative; }

/* ---- Configurarea funnel-urilor: detectează singură, un singur buton ---- */
.fnl-wz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.fnl-wz-card { border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface-2); padding: 13px 15px;
  font-size: 13px; line-height: 1.6; }
.btn.lg { font-size: 15px; padding: 12px 26px; }

/* ===== Campanii v31 — switcher, drawer mini-carduri, galerie, recomandări ===== */
/* switcher moduri de afișare */
.cv-switch { display: inline-flex; gap: 4px; background: var(--seg-soft); border: 1px solid var(--stroke); border-radius: 12px; padding: 4px; margin: 0 0 16px; }
.cv-b { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 9px; cursor: pointer; transition: .15s; }
.cv-b.on { background: var(--accent-fill); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--on-edge), 0 5px 16px -7px rgba(var(--accent-rgb),calc(.75*var(--glow))); }
@media (hover: hover) { .cv-b:not(.on):hover { color: var(--text); background: var(--glass-2); } }

/* drawer — mini-carduri ordonate pe importanță */
.cdx { padding: 18px; background: var(--bg-2); }
.cdx-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cdx-card { position: relative; background: var(--surface-2); border: 1px solid var(--stroke); border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cdx-card.big { padding: 15px 16px; background: linear-gradient(180deg, rgba(var(--veil-rgb),.055), rgba(var(--veil-rgb),.015)); }
.cdx-card.sm { padding: 9px 11px; }
.cdx-l { font-size: 10.5px; letter-spacing: .03em; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.cdx-card.big .cdx-l { font-size: 11px; }
.cdx-v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cdx-card.big .cdx-v { font-size: 24px; }
.cdx-card.sm .cdx-v { font-size: 15px; }
.cdx-v.fb-good { color: var(--ok); } .cdx-v.fb-bad { color: var(--danger); }
.cdx-i { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--stroke-2); color: var(--faint); font-size: 9px; font-style: normal; cursor: help; }
.cdx-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 4px 0 10px; }
.cdx-card[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 10px; right: 10px; top: calc(100% + 6px); z-index: 6;
  background: var(--pop-cdx); color: var(--text); border: 1px solid var(--stroke-2); border-radius: 9px; padding: 8px 10px;
  font-size: 11.5px; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: 0; white-space: normal;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,calc(.92*var(--shk))); pointer-events: none; }
/* recomandarea din drawer */
.cd-rec { margin-top: 4px; padding: 11px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; border: 1px solid; }
.cd-rec-ok { background: rgba(var(--ok-rgb),.09); border-color: rgba(var(--ok-rgb),.3); }
.cd-rec-warn { background: rgba(var(--warn-rgb),.09); border-color: rgba(var(--warn-rgb),.3); }
.cd-rec-bad { background: rgba(var(--danger-rgb),.09); border-color: rgba(var(--danger-rgb),.3); }
.cd-rec-b { font-weight: 700; }
.cd-rec-ok .cd-rec-b { color: var(--ok); } .cd-rec-warn .cd-rec-b { color: var(--warn); } .cd-rec-bad .cd-rec-b { color: var(--danger); }
.cd-rec-n { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }

/* badge de verdict */
.vbadge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.vbadge-ok { color: var(--accent-ink); background: var(--ok); } .vbadge-warn { color: var(--accent-ink); background: var(--warn); }
.vbadge-bad { color: #fff; background: var(--danger); } .vbadge-idle { color: var(--muted); background: var(--glass-2); }

/* galerie — thumbnails mari */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.galc { background: var(--surface-2); border: 1px solid var(--stroke); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.galc-win { border-color: rgba(var(--ok-rgb),.4); } .galc-cut { border-color: rgba(var(--danger-rgb),.32); }
.galc-thumb { position: relative; aspect-ratio: 1 / 1; background: #000; }
.galc-thumb .ad-thumb-lg { width: 100%; height: 100%; padding: 0; border: 0; background: #0a0b0c; cursor: pointer; display: block; border-radius: 0; }
.galc-thumb .ad-thumb-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galc-thumb .ad-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; }
.galc-thumb .vbadge { position: absolute; top: 10px; left: 10px; box-shadow: 0 4px 12px -4px rgba(0,0,0,calc(.6*var(--shk))); }
.galc-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--faint); background: var(--bg-2); }
.galc-noimg svg { width: 40px; height: 40px; } .galc-noimg.sm svg { width: 24px; height: 24px; }
.galc-body { padding: 13px 14px; display: flex; flex-direction: column; }
.galc-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galc-camp { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0 10px; }
.galc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.galc-metrics span { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.galc-metrics em { font-style: normal; font-size: 10px; color: var(--muted); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
.galc-advice { margin-top: 10px; font-size: 11.5px; color: var(--muted); line-height: 1.4; border-top: 1px solid var(--stroke); padding-top: 9px; }

/* recomandări — grupate pe verdict */
.rec-grp { margin-bottom: 22px; }
.rec-h { font-size: 13px; font-weight: 700; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--stroke); display: flex; align-items: center; gap: 9px; }
.rec-h-ok { color: var(--ok); } .rec-h-warn { color: var(--warn); } .rec-h-bad { color: var(--danger); }
.rec-count { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--glass-2); color: var(--text); font-weight: 600; }
.rec-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border: 1px solid var(--stroke); border-radius: 14px; margin-bottom: 8px; background: var(--surface-2); }
.rec-thumb { flex-shrink: 0; width: 72px; }
.rec-thumb .ad-thumb { width: 72px; height: 72px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--stroke); display: block; }
.rec-thumb .ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rec-main { flex: 1; min-width: 0; }
.rec-name { font-weight: 600; font-size: 14px; }
.rec-camp { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.rec-advice { font-size: 13px; color: var(--text); margin-top: 3px; line-height: 1.45; }
.rec-note { display: inline-block; font-size: 11.5px; color: var(--muted); margin: 5px 12px 0 0; }
.rec-kpi { display: flex; gap: 18px; flex-shrink: 0; text-align: right; }
.rec-kpi span { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-kpi em { font-style: normal; font-size: 10px; color: var(--muted); font-weight: 400; text-transform: uppercase; }

@media (max-width: 1023px) {
  .cdx-row { grid-template-columns: 1fr 1fr; }
  .cdx { padding: 12px; }
  .rec-row { flex-wrap: wrap; }
  .rec-kpi { width: 100%; justify-content: flex-start; text-align: left; margin-top: 8px; gap: 22px; }
  .gal-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  /* Drawer-ul e un <td colspan=7> ÎN tabelul scrollabil → moștenește lățimea tabelului (~600px),
     nu a ecranului; îl pinnăm la stânga zonei vizibile + îl constrângem la viewport (audit 2026-07-23). */
  /* 2026-10-10: lățimea și lipirea la stânga s-au mutat pe .cdx, după zona vizibilă a tabelului (vezi secțiunea 7 de la final) */
}
@media (max-width: 560px) {
  .cdx-row { grid-template-columns: 1fr; }
}
/* Tabelul Campanii pe TELEFON: 7 coloane nu încap → numele mânca tot, cifrele ieșeau din ecran
   („nu se vede nimic", 2026-07-23). Arătăm doar coloanele-cheie de bani (nume + Cost + ROAS);
   Vizitatori/Reach/Conversii/Venit rămân în drawer (tap pe rând). table-layout:fixed + lățimi
   procentuale (verificat cu headless Chrome la 375 și 320px → încape exact, fără scroll). Numele
   se împachetează pe cuvinte; indentul de ierarhie e aplatizat (bold/muted/thumbnail arată nivelul).
   white-space:normal !important — bate regula generală `.panel .tbl-scroll .tbl{white-space:nowrap}`
   (linia ~652, specificitate mai mare) care altfel ar forța nowrap → overflow. */
/* (2026-10-09) Regulile numărau 7 coloane, dar cu Meta tabelul are 8 de când există „Comenzi (Pulse)": pe telefon
   se vedea „Venit (FB)" în locul lui ROAS, iar ROAS stătea într-o coloană de 0px și ieșea 19px din tabel (o zonă
   de 1.600px înălțime care se trăgea în lateral). Acum pe mod: `camp-fb` (pus din PHP când $fbOn) = Campanie ·
   Vizitatori · Reach · Cost · Conversii (FB) · Comenzi (Pulse) · Venit (FB) · ROAS → pe telefon Campanie + Cost +
   ROAS; fără Meta = Campanie · Vizitatori · Comenzi (Pulse) · Venit atribuit → Campanie + Venit, ca până acum
   (cu „Comenzi" la 22% antetul se rupea „COMEN / ZI"). Restul rămân în drawer (tap pe rând). */
@media (max-width: 680px) {
  .camptbl { min-width: 0; width: 100%; table-layout: fixed; }
  .camptbl.camp-fb th:nth-child(2), .camptbl.camp-fb td:nth-child(2),   /* Vizitatori */
  .camptbl.camp-fb th:nth-child(3), .camptbl.camp-fb td:nth-child(3),   /* Reach */
  .camptbl.camp-fb th:nth-child(5), .camptbl.camp-fb td:nth-child(5),   /* Conversii (FB) */
  .camptbl.camp-fb th:nth-child(6), .camptbl.camp-fb td:nth-child(6),   /* Comenzi (Pulse) */
  .camptbl.camp-fb th:nth-child(7), .camptbl.camp-fb td:nth-child(7),   /* Venit (FB) */
  .camptbl:not(.camp-fb) th:nth-child(2), .camptbl:not(.camp-fb) td:nth-child(2),   /* Vizitatori */
  .camptbl:not(.camp-fb) th:nth-child(3), .camptbl:not(.camp-fb) td:nth-child(3) { display: none; width: 0; padding: 0; }   /* Comenzi (Pulse) */
  .camptbl th:nth-child(1), .camptbl td:nth-child(1) {
    position: static; width: 46%; max-width: none; box-shadow: none; padding-left: 10px !important;
    /* FĂRĂ hyphens:auto (2026-09-27, audit C0972): cu <html lang="ro"> browserul despărțea numele în
       silabe („vizita-tori”, „Genogra-mă”) — regula casei: nicio despărțire în silabe, nicăieri.
       break-word rupe doar un cuvânt care nu încape singur pe rând (tabelul e table-layout:fixed). */
    white-space: normal !important; word-break: normal; overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual;
  }
  .camptbl th:nth-child(4), .camptbl td:nth-child(4) { width: 32%; }   /* Cost (cu Meta) / Venit atribuit (fără) */
  .camptbl.camp-fb th:nth-child(8), .camptbl.camp-fb td:nth-child(8) { width: 22%; }   /* ROAS */
  /* antetele se pot rupe („Venit atribuit fără TVA”), sumele nu (2026-10-10, audit 196, 120: „3.715,69 / RON”) */
  .camptbl th.n { white-space: normal !important; overflow-wrap: break-word; font-size: 12.5px; }
  .camptbl td.n { white-space: nowrap !important; font-size: 12.5px; }
  .camptbl th, .camptbl td { padding: 10px 7px; }
  .camptbl .ad-thumb { width: 32px; height: 32px; }
  .camptbl .cd-chev { width: 20px; height: 20px; margin-right: 6px; }
  .camptbl .ad-c { gap: 7px; }
}

/* ============================================================
   Lot UI — sesiune review live 2026-07-24
   ============================================================ */

/* #3 — selectorul de vizualizare (Tabel/Galerie/Recomandări) împins la dreapta pe rândul eyebrow */
.eyebrow-row .cv-switch { margin: 0; }
@media (max-width: 560px) {
  .eyebrow-row { align-items: center; }
  .eyebrow-row .cv-switch { width: 100%; }
  .eyebrow-row .cv-b { flex: 1; text-align: center; padding: 7px 8px; }
}

/* #16/#21 — rândul secundar de KPI: carduri mai mici. `kpi-sec6` = 6 pe rând (ROAS + Comenzi +
   Afișări + Clicuri + CTR + CPC), ca sus să rămână 3 carduri mari fără spațiu gol. */
.kpi-grid.kpi-sec { grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
.kpi-grid.kpi-sec6 { grid-template-columns: repeat(6, 1fr); }
.kpi-sec .kpi { padding: 13px 15px; }
.kpi-sec .kpi .val { font-size: 20px; }
.kpi-sec .kpi .kico { width: 15px; height: 15px; }
.kpi-sec .kpi .hint { font-size: 10.5px; }
@media (max-width: 1100px) { .kpi-grid.kpi-sec6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .kpi-grid.kpi-sec, .kpi-grid.kpi-sec6 { grid-template-columns: repeat(2, 1fr); } }

/* #4 — antete sortabile în tabelul Campanii */
.sortable-th { cursor: pointer; user-select: none; position: relative; }
.sortable-th::after { content: '↕'; opacity: .3; margin-left: 5px; font-size: 11px; }
.sortable-th.sort-asc::after  { content: '↑'; opacity: 1; color: var(--accent); }
.sortable-th.sort-desc::after { content: '↓'; opacity: 1; color: var(--accent); }
@media (hover: hover) { .sortable-th:hover { color: var(--text); } .sortable-th:hover::after { opacity: .7; } }

/* #6 — buton „Arată toate ad-urile" (reset filtru) pe Funnel */
.fnl-ads-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* #12 — ad-urile Funnel pe rânduri (fără scroll orizontal), plafonate la ~2 rânduri + „vezi mai multe" */
.fnl-ads-row { flex-wrap: wrap; overflow: hidden; max-height: 160px; transition: max-height .28s ease; }
.fnl-ads-row.fold-open { max-height: 1600px; }
.fnl-adchip { max-width: none; flex: 0 1 232px; min-width: 0; }
/* markup-ul nou (traseu_ads_html) scrie <b>/<em> direct, fără .fnl-adname/.fnl-adnum —
   le dăm aceleași reguli, altfel numele lung umflă pastila și cifra iese italic. */
.fnl-adchip > b { min-width: 0; font-weight: 600; font-size: 12.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fnl-adchip > em { flex: none; font-style: normal; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.fnl-ads-toggle { display: inline-flex; align-items: center; gap: 5px; margin: 8px 0 2px; font-size: 12.5px; font-weight: 600;
  color: var(--accent); background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .3);
  padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: .15s; }
@media (hover: hover) { .fnl-ads-toggle:hover { background: rgba(var(--accent-rgb), .16); } }

/* #18 — selector de site mai lat pe tabletă/mobil (dacă e spațiu) ca să încapă numele */
@media (max-width: 1023px) {
  .m-head .ssw-btn { width: auto; max-width: min(58vw, 340px); }
}

/* #19 — pe mobil, cardurile de metrici din drawer-ul ad-ului pe 2 coloane, compacte (nu 1 coloană) */
@media (max-width: 560px) {
  .cdx-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .cdx-card { padding: 8px 9px; }
  .cdx-card.big { padding: 9px 10px; }
  .cdx-v { font-size: 14px; }
  .cdx-card.big .cdx-v { font-size: 17px; }
  .cdx-l, .cdx-card.big .cdx-l { font-size: 9.5px; }
  .cdx { overflow-x: hidden; }
}

/* #15 — secțiunea de sincronizare Facebook vizibilă (card, nu linie discretă) + buton clar + spinner */
.meta-status.meta-card { background: linear-gradient(180deg, rgba(var(--accent-rgb),.05), rgba(var(--veil-rgb),.015)), var(--bg-2);
  border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 14px; padding: 12px 16px; gap: 8px 14px;
  color: var(--text); margin: 6px 0 18px; }
.meta-card .ms-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; background: rgba(var(--accent-rgb), .12); }
.meta-card .ms-ic .ico { width: 17px; height: 17px; opacity: 1; color: var(--accent); }
.meta-card .ms-body { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.meta-card .ms-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.meta-card .ms-acct { color: var(--accent); }
.meta-card .ms-meta { font-size: 11.5px; color: var(--muted); }
.meta-card .ms-auto { color: var(--accent); opacity: .9; }
.meta-card .ms-sync { flex: none; }
/* iconița e pe butonul LIME → trebuie închisă la culoare (inherit din .btn = #14160a); altfel
   regula veche `.meta-status .ico{color:accent}` o face lime-pe-lime = invizibilă (bug 2026-07-24). */
.meta-card .ms-sync .ico { width: 14px; height: 14px; margin-right: 5px; color: inherit; opacity: 1; }
.meta-card .ms-sync.is-busy .ico { animation: spin .7s linear infinite; }
.meta-card .ms-disc { flex: none; }
@media (max-width: 560px) { .meta-card .ms-body { margin-right: 0; width: 100%; } .meta-card .ms-sync { flex: 1; justify-content: center; } }

/* #4 — video în modalul de creativ: buton „Redă" proeminent + overlay play pe imagine (deschide
   postarea/reel-ul pe Facebook, unde rulează — FB nu expune un source video redabil stabil). */
.cre-play { background: var(--accent-fill) !important; color: var(--accent-ink) !important; border-color: transparent !important; font-weight: 700; }
.cre-imgw.cre-vidplay { cursor: pointer; }
.cre-imgw.cre-vidplay::after { content: '▶'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--accent-ink);
  background: rgba(var(--accent-fill-rgb), .92); border-radius: 50%; box-shadow: 0 10px 30px -8px rgba(0,0,0,calc(.7*var(--shk))); padding-left: 4px; }
@media (hover: hover) { .cre-imgw.cre-vidplay:hover::after { transform: translate(-50%,-50%) scale(1.08); } }

/* --- Optimizare ads & avatar cumpărător (pagina Recomandări) --- */
.avatar-card { margin-top: 12px; }
.avatar-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.avatar-head h3 { margin: 0; font-size: 1.02rem; }
.avatar-badge { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; background: rgba(var(--accent-rgb),.14);
  color: var(--accent); flex: none; }
.avatar-badge .ico { width: 17px; height: 17px; }
.avatar-persona { font-size: 1.02rem; font-weight: 600; line-height: 1.45; margin: 0 0 10px; }
.avatar-why ul { margin: 4px 0 0; padding-left: 18px; }
.avatar-why li { font-size: .86rem; color: var(--faint); line-height: 1.5; margin: 2px 0; }

.tgt-panel { margin-top: 12px; }
.tgt-panel h3 { font-size: .98rem; margin: 0 0 10px; }
.tgt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tgt-col .rec-lbl { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.tgt-col .rec-lbl .ico { width: 15px; height: 15px; }
.tgt-good { color: var(--ok); }
.tgt-bad  { color: var(--danger); }
.tgt-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--stroke); }
.tgt-row:last-child { border-bottom: 0; }
.tgt-name { font-size: .9rem; font-weight: 500; }
.tgt-num { font-size: .8rem; color: var(--faint); white-space: nowrap; }
.tgt-src { font-weight: 400; color: var(--faint); font-size: .82rem; }
.tgt-note { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; }
.tgt-note .ico { width: 14px; height: 14px; margin-top: 2px; flex: none; }

.recipe-panel { margin-top: 12px; }
.recipe-step { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--stroke); }
.recipe-step:first-child { padding-top: 2px; }
.recipe-step:last-child { border-bottom: 0; padding-bottom: 2px; }
.recipe-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; background: var(--glass);
  color: var(--accent); flex: none; }
.recipe-ic .ico { width: 16px; height: 16px; }
.recipe-h { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 2px; }
.recipe-step p { margin: 0; font-size: .88rem; color: var(--faint); line-height: 1.5; }

@media (max-width: 640px) {
  .tgt-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Fallback de dimensiune pt. ORICE iconiță fără container care s-o dimensioneze — altfel un
   icon() pus direct în text (ex. nota de coverage din Recomandări) se umflă la mărimea viewport-ului
   (bug „icon uriaș" 2026-07-24). Regulile specifice `.X .ico{width}` au specificitate mai mare → câștigă. */
.ico { width: 16px; height: 16px; flex: none; }

/* link „Vezi reclama" din rețeta de campanie (Recomandări → Optimizare ads) */
.recipe-link { color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
@media (hover: hover) { .recipe-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* tab-urile paginii Recomandări (site vs optimizare ads) */
.rec-tabs { margin: 0 0 18px; }
/* Recomandări (2026-10-06): lista scurtă din card (reclame, grupe) și linkurile spre dovadă (hartă, înregistrări…) */
.rec-items { list-style: none; margin: -4px 0 14px; padding: 0; }
.rec-items li { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 14px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--stroke); }
.rec-items li:last-child { border-bottom: 0; }
.rec-it-n { font-size: 13.5px; font-weight: 500; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.rec-it-m { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rec-it-w { flex-basis: 100%; font-size: 12px; color: var(--muted); line-height: 1.45; }
.rec-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.rec-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.rec-link .ico { width: 15px; height: 15px; }
@media (hover: hover) { .rec-link:hover span { text-decoration: underline; text-underline-offset: 3px; } }
/* verdictul pe tot contul, sub cardurile de bani (Optimizare ads) */
.ads-verdict { margin: 0 2px 4px; font-size: 14px; line-height: 1.55; color: var(--text); }
.kpi-grid.kpi-sec5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .kpi-grid.kpi-sec5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .kpi-grid.kpi-sec5 { grid-template-columns: repeat(2, 1fr); } }
/* „Pe cine să targetezi”: trei coloane — aduc profit / încă neclar / pierzi bani */
.tgt-grid.tgt-grid3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .tgt-grid.tgt-grid3 { grid-template-columns: 1fr; gap: 14px; } }
.tgt-mid { color: var(--muted); }
.tgt-grid3 .tgt-row { flex-wrap: wrap; row-gap: 2px; }
.tgt-grid3 .tgt-num { white-space: normal; text-align: right; }
.tgt-tag { font-weight: 600; white-space: nowrap; }
.tgt-tag-win, .tgt-tag-up { color: var(--ok); }
.tgt-tag-lose, .tgt-tag-down { color: var(--danger); }
.tgt-tag-flat { color: var(--warn-ink); }

/* Nota de fereastră a experimentului A/B (când a început să împartă variante / asignări instabile) */
.ab-window-note { margin: -4px 0 12px; line-height: 1.55; }
.ab-window-note .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; color: var(--accent); }
/* semnal „suma include mai multe valute" — nu există curs de schimb configurat */
.cur-mixed { font-size: .82em; color: var(--warn, var(--faint)); font-weight: 400; white-space: nowrap; }

/* Panouri de reconciliere pe pagina A/B — explică de ce o cifră diferă de Analytics/Financiar
   (intenții numărate doar în test; comenzi care n-au putut fi legate de o variantă). */
.ab-recon { margin-top: 12px; padding: 12px 14px; }
.ab-recon p { margin: 0; color: var(--faint); line-height: 1.55; }
.ab-recon .ico { width: 15px; height: 15px; color: var(--accent); vertical-align: -2px; margin-right: 4px; }
.ab-recon b { color: var(--text, inherit); }

/* Bloc compact „Recomandări demografice" de pe pagina Campanii (teaser din demographics_prep) */
.demg-block { margin-top: 10px; }
.demg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.demg-item { display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px;
  background: var(--surface-2); border: 1px solid var(--stroke); border-radius: 12px; }
.demg-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; background: var(--faint-bg, rgba(127,127,127,.08));
  color: var(--accent); flex: none; }
.demg-ic .ico { width: 17px; height: 17px; }
.demg-tx { display: flex; flex-direction: column; min-width: 0; }
.demg-t { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.demg-s { font-size: .8rem; color: var(--faint); margin-top: 2px; line-height: 1.35; }
.demg-more { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; }
.demg-more .ico { width: 15px; height: 15px; }

/* nota „harta e desenată din N din M click-uri" — plafonul de 20.000 din api_points */
.heat-cap-note { margin: 8px 0 0; line-height: 1.5; }

/* selector de campanii per site (scopare Facebook — v35) */
.camp-scope { margin-bottom: 14px; }
.camp-scope > summary { cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-size: .9rem; color: var(--faint); line-height: 1.5; }
.camp-scope > summary b { color: var(--text, inherit); }
.camp-scope > summary .ico { width: 16px; height: 16px; flex: none; color: var(--accent); }
.camp-scope[open] > summary { margin-bottom: 2px; }
.cs-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px;
  max-height: 320px; overflow-y: auto; }
.cs-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; }
@media (hover: hover) { .cs-row:hover { background: var(--glass); } }
.cs-row input { margin: 0; flex: none; align-self: center; }   /* bifa pe linia numelui (2026-10-10, audit 119) */
.cs-nm { font-weight: 500; font-size: .9rem; }
.cs-meta { font-size: .78rem; color: var(--faint); margin-left: auto; white-space: nowrap; }
.cs-auto { color: var(--ok, #9bd84a); }
.cs-dest { font-family: ui-monospace, monospace; opacity: .8; }
@media (max-width: 640px) {
  .cs-row { flex-wrap: wrap; }
  .cs-meta { margin-left: 26px; width: 100%; white-space: normal; }
}

/* ora vânzării din tabelul Financiar (comenzile pixel au DATETIME; cele manuale doar dată) */
.sale-time { opacity: .72; margin-left: 4px; }
.sale-time.none { opacity: .38; }

/* cheltuială din AFARA perioadei selectate: rămâne în listă (altfel o recurentă activă ar
   dispărea), dar e vizibil că nu intră în „Total în perioadă" — coloana se adună pe ecran. */
/* (2026-09-27, audit C0932) Estomparea rămâne, dar prin CULOARE, nu prin opacity .5/.72: opacitatea
   cobora tot rândul sub contrastul minim (2,2-3,4:1 pe light, „Editează" 3,4:1 — un buton activ).
   Tonurile sunt alese să arate la fel ca înainte: celulele de date → --faint (pe dark ≈ textul la .5),
   denumirea → --muted (≈ .72); ambele trec AA pe ambele teme. Coloana de acțiuni (.sr-cell: Editează /
   Șterge) nu se mai estompează deloc. .muted și insigna „colaborator" din rând iau același ton. */
.tbl tr.exp-outside > td:not(.sr-cell) { color: var(--faint); }
.tbl tr.exp-outside > td:first-child { color: var(--muted); }
.tbl tr.exp-outside > td :is(.muted, .fin-badge) { color: inherit; }

/* reclamă REDENUMITĂ în Facebook după click: numele din UTM nu mai desemnează nicio
   reclamă din campania respectivă. Nu ghicim care e — o marcăm (vezi metrics_ad_identity). */
.ad-renamed[title] { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: .68rem; white-space: nowrap;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  color: var(--warn); }

/* ad care a cheltuit dar n-a adus vizite etichetate (Campanii → Galerie) */
.galc-untracked[title] { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: .68rem; white-space: nowrap;
  background: color-mix(in srgb, var(--warn, #ffb24a) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #ffb24a) 32%, transparent);
  color: var(--warn, #ffb24a); }

/* Scopul raportului partajat, spus explicit: aceleași etichete ca pe dashboard, dar populația e
   o singură PAGINĂ (path forțat din token), nu tot site-ul. Vezi view_share(). */
.share-scope { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px;
  font-size: .82rem; color: var(--faint); }
.share-scope .ico { width: 13px; height: 13px; margin-top: 3px; flex: none; }
/* (audit 2026-09-27, C0861) Subtitlul din .page-head se împachetează acum; ca flex, textul liber și
   <b>-ul ar fi devenit coloane separate pe telefon. Bloc cu iconița în padding (aceeași poziție: x 0,
   y 3px, textul de la 19px = 13 + gap 6), deci pe un rând arată identic, iar pe două rândurile curg sub text. */
.page-head .sub.share-scope { display: block; position: relative; padding-left: 19px; }
.page-head .sub.share-scope .ico { position: absolute; left: 0; top: 3px; margin-top: 0; }

/* Treapta „Au cumpărat" într-un raport restrâns la o pagină: comenzile se înregistrează pe shop,
   nu pe o cale a landing-ului, deci treapta e pe TOT site-ul, spre deosebire de cele de deasupra.
   Marcaj scurt în loc de un procent calculat între două populații diferite. */
.cf-scope[title] { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: .64rem; font-weight: 500; white-space: nowrap;
  background: var(--glass); border: 1px solid var(--stroke); color: var(--muted); }

/* amprenta cheii Mailgun salvate (capetele + lungimea) — ca să se vadă DACĂ e cea așteptată,
   fără s-o dezvăluim; curățarea de copy-paste se aplică doar la salvare, nu retroactiv */
.mg-fp { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.mg-fp b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); font-weight: 600; }

/* `.card` e doar suprafața de sticlă, fără padding — componentele și-l pun singure. `.pad` e
   varianta gata spațiată, pentru cardurile cu conținut simplu (raportat de 2 ori: 2026-07-23,
   2026-07-29). */
.card.pad { padding: 26px 28px; }
@media (max-width: 1023px) { .card.pad { padding: 18px 16px; } }

/* Tooltip instant (assets/tip.js) — înlocuiește tooltipul nativ, care apărea abia după ~1,5s
   și făcea cursorul „help" să pară o promisiune neonorată. (2026-07-29) */
.ptip { position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity .11s ease, transform .11s ease; max-width: 360px;
  background: var(--pop-ptip); color: var(--ptip-ink); border: 1px solid var(--stroke-2, rgba(var(--veil-rgb),.14));
  border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; font-weight: 400;
  box-shadow: 0 12px 34px rgba(0,0,0,calc(.55*var(--shk))); text-align: left; white-space: normal; }
.ptip.on { opacity: 1; transform: none; }

/* --- Consum lunar (lib/quota.php) ---------------------------------------- */
/* Bannerul stă în layoutul global, deci trebuie să se poarte bine pe ORICE pagină:
   nu împinge conținutul lateral, se rupe pe mobil, și nu strigă când nu e cazul. */
.quota-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(var(--accent-rgb),.07); border: 1px solid rgba(var(--accent-rgb),.28);
  border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; }
.quota-bar.over { background: rgba(var(--danger-2-rgb),.08); border-color: rgba(var(--danger-2-rgb),.35); }
/* `warn` LIPSEA din CSS, deși dunning-ul îl emite pentru zilele 3-6 de plată
   eșuată — deci avertismentul „cardul tău nu a mers" se randa pe stilul implicit,
   verde-lime, adică exact ca un mesaj de succes. Un avertisment care arată ca o
   veste bună nu e un avertisment. (audit 2026-07-31) */
.quota-bar.warn { background: rgba(var(--warn-5-rgb),.08); border-color: rgba(var(--warn-5-rgb),.4); }
.quota-bar.warn .quota-dot { background: var(--warn-5); }
.quota-bar > span:nth-child(2) { flex: 1 1 16rem; min-width: 0; }
.quota-bar .btn { flex: none; }
.quota-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bar-fill); flex: none; }
/* Două ieșiri la limita gratuită (2026-10-14, lib/quota.php): Pro + pachetul de vizualizări, una lângă alta pe desktop;
   pe telefon textul sus, butoanele dedesubt, pe toată lățimea, unul sub altul (eticheta pachetului e lungă). */
.quota-bar .qb-a { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
@media (max-width: 760px) {
  .quota-bar.qb2 { align-items: flex-start; }
  .quota-bar.qb2 > span:nth-child(2) { flex: 1 1 0; }
  .quota-bar.qb2 .quota-dot { margin-top: .5em; }
  .quota-bar .qb-a { flex: 1 1 100%; }
  .quota-bar .qb-a .btn { flex: 1 1 100%; justify-content: center; }
}
.quota-bar.over .quota-dot { background: var(--chart-4); }
/* ≤420px: textul are loc sub 16rem, deci trecea pe rândul 2 și lăsa punctul singur pe primul. Punctul
   rămâne lângă prima linie de text, doar butonul coboară pe rândul lui. */
@media (max-width: 420px) {
  .quota-bar { align-items: flex-start; }
  .quota-bar > span:nth-child(2) { flex: 1 1 0; }
  .quota-dot { margin-top: .5em; }
  .quota-bar .btn { flex: 1 1 100%; justify-content: center; }
}

/* MODUL DEMO PUBLIC (2026-10-14, lib/demo.php): banda „Ești în demo” — un rând pe desktop; pe telefon textul scurt
   și cele două butoane pe un rând sub el (fără regula de ≤420px a benzilor de consum, care le punea unul sub altul). */
.quota-bar.demo-bar { flex-wrap: nowrap; }
.demo-bar .demo-bar-t { min-width: 0; }
.demo-bar .demo-bar-a { display: flex; gap: 8px; flex: none; }
.quota-bar.demo-bar .demo-bar-a .btn { flex: none; }
@media (max-width: 1023px) { .demo-bar .demo-bar-x { display: none; } }
@media (max-width: 600px) {
  .quota-bar.demo-bar { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 10px 12px; font-size: 13px; }
  .demo-bar .demo-bar-m { display: none; }
  .quota-bar.demo-bar > span.demo-bar-t { flex: 1 1 0; }
  .demo-bar .quota-dot { margin-top: .5em; }
  .demo-bar .demo-bar-a { flex: 1 1 100%; }
  .quota-bar.demo-bar .demo-bar-a .btn { flex: 1 1 auto; justify-content: center; }
  .quota-bar.demo-bar .demo-bar-a .btn.ghost { flex: none; }
}
/* bara de progres a ecranului „Pregătim demo-ul” (prima intrare după un deploy) */
.demo-prog { height: 8px; margin: 0 0 10px; border-radius: 999px; background: rgba(var(--veil-rgb),.08); overflow: hidden; }
.demo-prog i { display: block; height: 100%; border-radius: inherit; background: var(--bar-fill); transition: width .4s ease; }
/* ecranele demo (Abonament, Cont, Site nou): un card cu titlu, două paragrafe și butoanele */
.demo-card { max-width: 760px; }
.demo-card .demo-h { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 22px; line-height: 1.25; margin: 10px 0 12px; }
.demo-card p { margin: 0 0 12px; line-height: 1.6; }
.demo-card .demo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
@media (max-width: 420px) { .demo-card .demo-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* rândul permanent din meniul lateral — nudge-ul constant, discret */
.quota-mini { display: block; margin: 10px 12px 0; padding: 9px 11px; border-radius: 9px;
  background: rgba(var(--veil-rgb),.035); border: 1px solid var(--stroke);
  text-decoration: none; color: var(--muted); font-size: 11.5px; transition: border-color .15s; }
.quota-mini:hover { border-color: var(--accent); }
.quota-mini b { color: var(--text); font-weight: 600; }
.quota-mini.warn b { color: var(--warn-6); }
.quota-mini.over b { color: var(--chart-4); }
.qm-bar { display: block; height: 3px; margin-top: 7px; border-radius: 3px;
  background: rgba(var(--veil-rgb),.08); overflow: hidden; }
.qm-bar i { display: block; height: 100%; background: var(--bar-fill); border-radius: 3px;
  transition: width .4s ease; }
.quota-mini.warn .qm-bar i { background: var(--warn-6); }
.quota-mini.over .qm-bar i { background: var(--chart-4); }
/* meniul restrâns la icoane: rândul de consum n-ar încăpea, deci dispare */
.snav-min .quota-mini { display: none; }

/* Banda de sesiune de suport (administrator conectat în contul unui client).
   Deliberat mai insistentă decât celelalte benzi: e singura care spune „ce vezi
   nu e contul tău". `position:sticky` ca să rămână vizibilă și după derulare —
   un avertisment care dispare la primul scroll nu e un avertisment. */
/* Banda de sesiune de suport (administrator conectat în contul unui client).
   NU e sticky, deși prima variantă era — și era stricată în trei feluri deodată
   (audit 2026-07-31): fundal translucid peste conținut care se derulează pe sub
   (ilizibilă), z-index 60 sub selectorul de perioadă sticky de 90 (butonul „Ieși"
   acoperit pe desktop), și top:0 în conflict cu antetul sticky de z-index 100
   între 561px și 1023px (complet invizibilă pe tabletă).
   Trei conflicte pentru un beneficiu mic spune că soluția era greșită, nu că
   trebuie ajustată. Rămâne în capul conținutului — dar OPACĂ și evidentă.
   Protecția reală nu e banda oricum: scrierile sunt blocate pe server, în
   identity/app_gate.php, pentru toate Aplicațiile. Banda doar explică de ce. */
.imp-bar { border-style: dashed; border-width: 2px;
  background: var(--imp-bg); border-color: rgba(var(--danger-2-rgb),.65); }
.imp-bar b { font-weight: 700; }

/* Oglinda „cât iese pe vânzare" de sub câmpul Total din Financiar (2026-08-04).
   Apare doar când rândul are mai mult de o vânzare — vezi comentariul din finance.php. */
.rev-per { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3;
  color: var(--accent); white-space: nowrap; }
.rev-per:empty { display: none; }
/* În formularul de editare (rând compact, `.row-form` aliniat la flex-end) oglinda NU are
   voie să ocupe spațiu: ar înălța doar câmpul ei și ar împinge input-ul mai sus decât
   celelalte, strâmbând tot rândul (raportat de Liviu: „arată foarte urât"). Scoasă din
   flux, plutește sub input. În tabelul de adăugare rămâne block — acolo celulele au loc. */
#editRevForm .fld { position: relative; }
#editRevForm .rev-per { position: absolute; top: 100%; left: 0; margin-top: 3px; }

/* Financiar → „Adaugă vânzări” pe telefon (2026-09-27, audit C1880). Formularul e un tabel (#revRowsTbl) cu
   coloane fixe (Data 150 + Nr. 105 + Total 150 + ✕), prins în .tbl-scroll cu nowrap: la 320px se vedeau doar
   „Descriere” și o fâșie din „Data”, iar „Nr. vânzări” și „Total” rămâneau în afara ecranului — se putea salva
   fără să fi văzut câmpul de sumă. Derularea orizontală e pentru tabelele de CITIT, nu pentru un formular de
   introdus. Sub 780px fiecare rând devine un bloc stivuit, ca liniile formularului public /f/ (.exp-line):
   Descriere + ✕ sus, Data pe toată lățimea, apoi Nr. vânzări și Total alături. Antetul tabelului dispare, iar
   eticheta fiecărui câmp vine din `data-lbl` (același text ca în antet), cu stilul lui. Rândurile adăugate din
   JS au același markup. Peste 780px tabelul rămâne exact cum era. Doar structură — culorile vin din tokeni. */
@media (max-width: 780px) {
  .panel .tbl-scroll #revRowsTbl { display: block; white-space: normal; }
  #revRowsTbl thead { display: none; }
  #revRowsTbl tbody { display: block; }
  #revRowsTbl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: 'lbl lbl del' 'date date date' 'qty amt amt'; gap: 9px 10px; padding: 13px 2px;
    border-bottom: 1px solid var(--stroke); }
  #revRowsTbl tbody tr:last-child { border-bottom: 0; }
  #revRowsTbl tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  #revRowsTbl tbody td:nth-child(1) { grid-area: lbl; }
  #revRowsTbl tbody td:nth-child(2) { grid-area: date; }
  #revRowsTbl tbody td:nth-child(3) { grid-area: qty; }
  #revRowsTbl tbody td:nth-child(4) { grid-area: amt; }
  #revRowsTbl tbody td:nth-child(5) { grid-area: del; align-self: end; }
  #revRowsTbl tbody td[data-lbl]::before { content: attr(data-lbl); display: block; margin-bottom: 6px;
    color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
  #revRowsTbl input { width: 100%; min-width: 0; }
  #revRowsTbl .cal-trigger { width: 100%; justify-content: flex-start; }
  #revRowsTbl tbody tr:hover td { background: none; }
}

/* Financiar: coloana de acțiuni (Editează / Șterge) lipită în dreapta tabelului (2026-09-27, audit C1893). Pe un
   site cu bara laterală de Produse, coloana principală are 540-700px la 1100-1440px, iar tabelul de cheltuieli
   cere ~820px: ultima coloană, cu singurele butoane de editare și ștergere, ieșea complet din card. Acum celula
   de acțiuni stă lipită la marginea din dreapta a cardului (ca prima coloană din Campanii, .camptbl), pe
   fundalul opac al cardului (--card-solid, definit pe ambele teme), iar derularea orizontală dezvăluie restul
   coloanelor PE SUB ea. Doar în tabelele Financiarului care chiar au acțiuni (:has) — raportul doar-citire nu
   primește o coloană goală lipită. Indiciul de derulare (masca tblFade) se oprește AICI: ar estompa tocmai
   butoanele lipite la margine; marginea tăiată a coloanelor de sub acțiuni rămâne semnul că tabelul continuă.
   DOAR peste 780px (recenzie t129r, 2026-09-29): pe telefon celula de acțiuni are ~145px dintr-o zonă vizibilă de
   252-315px, deci lipită ar fi acoperit mai mult de jumătate din tabel — în „Vânzări” o bandă goală peste Sumă
   pe fiecare comandă automată. Pe telefon rămâne tiparul ales pentru tabele (derulare internă + masca tblFade). */
/* Fundalul opac + linia de separare apar DOAR cât tabelul chiar se derulează (cronologia de derulare a
   .tbl-scroll e inactivă când totul încape → animația nu se aplică): pe un ecran lat tabelul arată exact ca
   înainte. --card-solid = culoarea cardului, pe ambele teme. Browserele fără animation-timeline le primesc
   mereu (o linie subțire înaintea acțiunilor). Antetul (gol) al coloanei se lipește și el: altfel „Sursă”
   ar sta deasupra butoanelor. */
@keyframes finStick { from, to { background: var(--card-solid); box-shadow: -1px 0 0 var(--stroke); } }
@media (min-width: 781px) {
  .fin-main .tbl-scroll:has(> .tbl .sr-actions) { animation: none; -webkit-mask-image: none; mask-image: none; }
  .fin-main .tbl:has(.sr-actions) :is(td.sr-cell, thead th:last-child) { position: sticky; right: 0; z-index: 1; }
  @supports (animation-timeline: scroll()) {
    .fin-main .tbl:has(.sr-actions) :is(td.sr-cell, thead th:last-child) { animation: finStick linear both; animation-timeline: scroll(nearest inline); }
  }
  @supports not (animation-timeline: scroll()) {
    .fin-main .tbl:has(.sr-actions) :is(td.sr-cell, thead th:last-child) { background: var(--card-solid); box-shadow: -1px 0 0 var(--stroke); }
  }
}

/* Financiar · tabelul de cheltuieli, varianta COMPACTĂ (2026-10-16). Tabelul întreg (8 coloane) cere 740–811px, dar pe
   desktop zona lui are 540–740px: 584px la 1024, 740px la 1180, iar cu panoul „Produse” în dreapta 540px la 1280 și
   700px la 1440 → derulare laterală. Sub 860px de zonă (container query pe .exp-scroll), tabelul se strânge fără să
   piardă nimic: categoria și eticheta sursei („colaborator”, „automat · Meta”, când există) trec sub denumire (.exp-sub),
   tipul coboară sub sumă („/lunar”, „≈ …/zi”, iar la cele unice „o dată”, .exp-once), datele rămân întregi pe rând (.exp-d;
   „–” din interval lipită de data ei, .exp-sep), Editează și coșul devin butoane pătrate cu iconiță (creionul), iar
   spațiul dintre coloane scade de la 12 la 10px (fără el, 12 rânduri cu denumiri lungi treceau cu ~20px de 540px).
   Coloanele Categorie, Tip și Sursă se ÎNCHID la 0px (conținutul ascuns, fără padding), nu se scot cu display:none:
   o celulă scoasă ar muta celulele de după ea sub alte anteturi în tfoot („Total în perioadă” are colspan 2), iar
   rândurile de detalii (colspan 8) ar adăuga coloane goale. Doar de la 1024px: pe telefon și tabletă tabelul rămâne cum
   era (derulare + tblFade); peste 860px de zonă (de la ~1300px fără panou) arată exact ca înainte. Regulă light: nimic. */
.exp-sub, .exp-once, .exp-edit .ico { display: none; }
@media (min-width: 1024px) {
  .exp-scroll { container-type: inline-size; }
  @container (width < 860px) {
    .exp-tbl :is(th, td) { padding-left: 10px; padding-right: 10px; }
    .exp-tbl :is(.exp-cc, .exp-ct, .exp-cs) { width: 0; padding-left: 0; padding-right: 0; }
    .exp-tbl :is(.exp-cc, .exp-ct, .exp-cs) > * { display: none; }
    .exp-sub, .exp-sfx, .exp-once { display: block; }
    .exp-d, .exp-sep { white-space: nowrap; }
    .exp-sub { margin-top: 2px; }
    /* „detalii” e lipit de ultimul cuvânt din denumire (fără spațiu în markup) → ca pe telefon, inline-block îl lasă
       să treacă singur pe rândul următor, altfel „Business)detalii” ținea coloana cu 22px mai lată */
    .exp-tbl td.fin-lbl .exp-note-toggle { display: inline-block; }
    .exp-edit .ico { display: inline-block; }
    .exp-edit .exp-edit-t { display: none; }
    .exp-tbl .sr-actions > .btn { width: 32px; padding: 0; justify-content: center; }
  }
}

/* „vizite respinse" pe pagina Site-uri — origine străină de domeniul conectat (2026-08-04) */
.fin-badge.warn { color: var(--warn-2); border-color: rgba(var(--warn-2-rgb),.42); background: rgba(var(--warn-2-rgb),.10); }

/* ============================================================================
   TRASEU — pagina rescrisă (2026-08-05). Înlocuiește vechiul „funnel" (.fzh-*, .fnl-*).
   (Reparat 2026-09-01: în textul vechi, „.fzh-" cu asterisc era urmat direct de
   slash, iar asterisc+slash ÎNCHIDEA comentariul chiar aici; restul textului
   devenea un selector invalid care înghițea regula .trs-tools de mai jos —
   bara de unelte a Traseului rămânea nestilată.)
   Principiul de densitate cerut de Liviu: pe ecran doar eticheta, numărul mare,
   sursele și procentul. Restul apare în panoul #trs-tip, la hover (sau la tap).
   ========================================================================== */
.trs-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
/* aceeași înălțime cu segmentul de lângă el (.fnl-seg: 3px padding + 5px/12px pe linkuri) */
.trs-help { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--stroke-2);
  background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 700; cursor: help;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trs-help:hover { color: var(--text); border-color: var(--accent); }

.trs-card { position: relative; padding: 22px 24px 20px; }
/* padding-ul de jos ține scrollbar-ul orizontal lipit de conținut, nu de marginea cardului */
/* overflow-y explicit HIDDEN: cu un singur ax setat, celălalt devine „auto" din spec, iar
   trucul de padding negativ producea un scrollbar vertical de 6px — dunga aurie subțire
   de la marginea dreaptă a cardului (vânată pe screenshot, 2026-08-05). */
.trs-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
/* desenul se lățește cu numărul de coloane (`--n` vine din traseu_view.php): la 5 pași
   iese fix 760px, ca înainte, dar de la 6 în sus coloanele nu se mai calcă — .trs-scroll
   e oricum derulabil pe orizontală, deci lățimea în plus nu costă nimic. */
.trs-in { min-width: max(760px, calc(var(--n, 5) * 152px)); }
/* eticheta unui nod — stă deasupra lui, în banda lui */
.trs-nl { position: absolute; transform: translateX(-50%); display: inline-flex; align-items: center;
  gap: 6px; white-space: nowrap; padding: 0 4px; }
.trs-nl .trs-ic { display: inline-flex; color: var(--faint); }
.trs-nl .trs-ic svg { width: 14px; height: 14px; }
.trs-nl b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.trs-nl.mail .trs-ic, .trs-nl.mail b { color: var(--trs-mail); }
.trs-nl.ads .trs-ic, .trs-nl.ads b { color: var(--trs-nl-ads); }
/* „✕" apare doar când treci cu mouse-ul peste etapă — ca în Figma, nu ca într-o bară de unelte */
.trs-x { position: absolute; top: -7px; right: -20px; opacity: 0; transition: opacity .12s; }
.trs-nl:hover .trs-x, .trs-x:focus-within { opacity: 1; }
.trs-x button { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--stroke-2);
  background: var(--bg-2); color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; }
/* ținta de atingere, nu butonul: cercul rămâne 20px la vedere, degetul prinde 34px.
   Nu-l ducem până la 44px — e o acțiune distructivă (scoate pasul din traseu) și n-are
   confirmare, deci o zonă prea generoasă ar produce ștergeri din greșeală. */
.trs-x button::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.trs-x button:hover { color: var(--danger); border-color: var(--danger); }

.trs-canvas { position: relative; }
.trs-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* eticheta unei RAMURI de sursă — stă la capătul din stânga al panglicii ei */
.trs-br { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: 11px;
  color: var(--muted); display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px;
  border-radius: 999px; background: var(--trs-br-bg); border: 1px solid var(--stroke); }
.trs-br i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.trs-br b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }

.trs-num { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 1px; cursor: help; padding: 4px 10px; border-radius: 12px; }
.trs-num.mail b, .trs-nl.mail b { color: var(--trs-mail-ink); }
.trs-num.ads b { color: var(--trs-ads-ink); }
.trs-num:hover, .trs-num:focus { background: var(--trs-num-hover); outline: none; }
.trs-num b { font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif; font-size: 30px;
  font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,calc(.85*var(--shk))), 0 0 3px rgba(0,0,0,calc(.6*var(--shk))); }
.trs-num em { font-style: normal; font-size: 10px; color: var(--trs-em); text-transform: uppercase;
  letter-spacing: .05em; text-shadow: 0 1px 8px rgba(0,0,0,calc(.9*var(--shk))); }
.trs-pct { position: absolute; transform: translateX(-50%); font-size: 12px; font-weight: 700;
  color: var(--muted); background: var(--bg-2); border: 1px solid var(--stroke); border-radius: 999px;
  padding: 2px 9px; cursor: help; font-variant-numeric: tabular-nums; }
.trs-pct:hover, .trs-pct:focus { color: var(--text); border-color: var(--accent); outline: none; }

/* butonul „+" dintre coloane — invizibil până treci cu mouse-ul peste desen */
.trs-add { position: absolute; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%;
  border: 1px dashed var(--stroke-2); background: var(--bg-2); color: var(--muted); font-size: 15px;
  line-height: 1; cursor: pointer; opacity: 0; transition: opacity .14s, color .14s, border-color .14s; }
.trs-canvas:hover .trs-add, .trs-add:focus { opacity: 1; }
.trs-add:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }

.trs-tip { position: fixed; z-index: 200; max-width: 340px; background: var(--pop-trs); color: var(--text);
  border: 1px solid var(--stroke-2); border-radius: 11px; padding: 10px 12px; font-size: 12px;
  line-height: 1.5; box-shadow: 0 16px 40px -16px rgba(0,0,0,calc(.95*var(--shk))); pointer-events: none; }

.trs-addform { margin-top: 14px; padding: 18px 20px; }
.trs-af-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.trs-af-row label { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--muted); }
.trs-af-row select, .trs-af-row input[type=text] { min-width: 220px; }
.trs-af-back { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--stroke);
  font-size: 12px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.trs-note { margin: 14px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.trs-empty { padding: 28px 30px; }
.trs-recent { margin-top: 14px; padding: 18px 20px 8px; }
.trs-recent-h { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.fnl-ads-card { margin-top: 14px; padding: 16px 20px; }
.fnl-ads-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 13px; }
.fnl-ads-h .muted { font-size: 11.5px; }
.fnl-ads-h .lnk { margin-left: auto; }

@media (max-width: 1023px) {
  .trs-card { padding: 16px 14px 14px; }
  .trs-addform, .trs-recent, .fnl-ads-card, .trs-empty { padding-left: 14px; padding-right: 14px; }
  .trs-num b { font-size: 25px; }
  .trs-tip { max-width: calc(100vw - 48px); }
  .trs-af-row select, .trs-af-row input[type=text] { min-width: 0; width: 100%; }
  .trs-af-row label { width: 100%; }
  /* pe telefon nu există hover: „+"/„✕" rămân vizibile, discret */
  .trs-add, .trs-x { opacity: .5; }
}


/* ============================================================
   TRASEU v2 (2026-08-05) — carduri care își conțin conținutul.
   Mărimea o arată DOAR grosimea panglicilor; cardul are padding
   real, deci cifra nu mai poate ieși din chenar.
   ============================================================ */
.trs-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; min-width: 96px; padding: 15px 20px 12px;
  border-radius: 18px; cursor: help; white-space: nowrap;
  background: var(--trs-node-bg);
  border: 1px solid rgba(var(--ok-rgb),.5);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,calc(.9*var(--shk))), inset 0 1px 0 rgba(var(--veil-rgb),.06); }
.trs-node b { font-family: "Bricolage Grotesque", "Hanken Grotesk", sans-serif; font-size: 26px;
  font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.trs-node em { font-style: normal; font-size: 9px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .07em; line-height: 1.2; }
.trs-node:hover, .trs-node:focus { border-color: rgba(var(--ok-rgb),.9); outline: none; }
/* Focusul de TASTATURĂ pe cifrele, procentele și nodurile Traseului (au tabindex): doar fundalul/bordura
   schimbate abia se vedeau, iar în culori forțate deloc → contur real, doar la :focus-visible; mouse-ul
   rămâne ca înainte (2026-09-27, audit C1278). */
.trs-num:focus-visible, .trs-pct:focus-visible, .trs-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trs-node.mail { border-color: rgba(var(--trs-mail-rgb),.5);
  background: var(--trs-node-mail-bg); }
.trs-node.mail b { color: var(--trs-mail-ink); }
.trs-node.mail:hover, .trs-node.mail:focus { border-color: rgba(var(--trs-mail-rgb),.9); }
.trs-node.ads b { color: var(--trs-ads-ink-2); }
.trs-node.gold { border-color: rgba(var(--trs-gold-rgb),.6);
  background: var(--trs-node-gold-bg); }
.trs-node.gold b { color: var(--trs-gold-ink); }
.trs-node.gold:hover, .trs-node.gold:focus { border-color: rgba(var(--trs-gold-rgb),.95); }

/* eticheta de rând a unui produs, sub cardul lui de landing */
.trs-rowtag { position: absolute; transform: translateX(-50%); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); background: var(--c, var(--accent-fill));
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; opacity: .92; }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD RESTRUCTURAT (2026-08-05) — carduri cu tab-uri în grilă 1→2 coloane
   + cardurile KPI care comută metrica graficului mare.
   Pagina de Analytics avea 15 secțiuni una sub alta; acum sunt ~9 blocuri, iar
   variantele aceleiași teme (Surse | Referrers | UTM) stau în tab-uri.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pragul se ia din LĂȚIMEA CONTAINERULUI, nu din viewport — la 1024px conținutul are
   ~630px (shell fix: rail 64 + sidenav 270), adică MAI PUȚIN decât la 1023px (~963px),
   deci orice media query ar comuta pe 2 coloane exact acolo unde e mai puțin loc.
   Bonus: prinde și restrângerea sidenav-ului (270→72px), care nu schimbă viewport-ul.
   Fallback pe motoare fără @container: rămâne o coloană — degradare inofensivă. */
.dash-scope { container-type: inline-size; margin-top: 26px; }
/* Gap-ul pe coloane e 32px, nu 16: la 16px cele două coloane se citeau ca un singur bloc
   înghesuit („sunt prea înghesuite acum" — 2026-08-06). Pe rânduri, 26px ține locul marginii
   de eyebrow pe care am scos-o, ca ritmul vertical să rămână același. */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 26px 32px; align-items: start; }
.dash-grid > * { min-width: 0; }        /* fără el, un tabel lat împinge toată coloana (vezi .grid > *) */
.dash-full { grid-column: 1 / -1; }
/* Pragul e 860px de CONTAINER, adică ~422px per coloană — nu mai jos. La 760px ar fi ieșit
   coloane de 372px, în care tabelele de 5-6 coloane (Pagini, Comenzi) intrau în scroll
   orizontal permanent: două coloane înghesuite se citesc mai greu decât una lată. */
@container (min-width: 860px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  /* Pe două coloane, bara de tab-uri NU are voie să se rupă pe al doilea rând: un card cu
     bara ruptă (Tehnologie, 5 tab-uri, sub ~1350px de fereastră) își cobora titlul cu 23px
     față de vecinul din dreapta și rândul ieșea strâmb. Nerupt + scroll orizontal e exact ce
     face aplicația cu barele de tab-uri când spațiul e mic (vezi .tabs/.subnav pe mobil).
     În modul pe o coloană rămâne rupt pe rânduri: acolo nu e cu cine să se alinieze. */
  /* 2026-10-04: dacă bara nu încape lângă titlu (Tehnologie, 5 tab-uri, la ~960/1280/1366px), coboară ÎNTREAGĂ sub
     titlu în loc să-și ascundă ultimul tab într-o derulare invizibilă. Titlul are înălțimea barei (40px), centrat:
     un card cu bara dedesubt și vecinul cu bara alături își țin titlurile pe aceeași linie. */
  .dash-cell .eyebrow-row { flex-wrap: wrap; align-content: flex-start; }
  .dash-cell .eyebrow { flex: none; min-height: 40px; display: flex; align-items: center; }
}

/* ALINIEREA CELOR DOUĂ COLOANE (2026-08-06, cerut de Liviu: „cardurile arată all over the
   place"). Cauza dezalinierii: fiecare card are titlu + descriere + panou, iar descrierile au
   lungimi diferite — deci panourile porneau de la înălțimi diferite, iar rândul arăta strâmb.
   Fix: fiecare card e un `subgrid` de 3 rânduri peste rândurile grilei-părinte, deci titlurile
   se aliniază cu titlurile, descrierile cu descrierile și panourile cu panourile. `align-content:
   start` ține conținutul sus în celulă; înălțimea panourilor rămâne după conținut (a le întinde
   ar lăsa goluri mari sub un donut de lângă un tabel lung). */
@supports (grid-template-rows: subgrid) {
  .dash-cell { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 6px; align-content: start; }
  /* Aceeași regulă ca pe grila-părinte, din același motiv: un element de grilă are implicit
     `min-width: auto`, deci un tabel lat (Pagini, Conversii) își împingea panoul până la 1100px
     în interiorul unei celule de 300px — conținutul ieșea tăiat pe telefon, fără scroll de
     pagină, deci fără niciun semn. Cu `min-width: 0`, panoul se strânge la celulă, iar tabelul
     își folosește propriul `.tbl-scroll`, ca peste tot. (prins de audit, 2026-08-06) */
  .dash-cell > * { min-width: 0; }
  /* Panoul are înălțimea CONȚINUTULUI lui, nu a rândului. Într-un subgrid, rândul e cât cel
     mai înalt card de pe linie, iar un element de grilă se întinde implicit pe tot rândul —
     deci „Adâncime scroll" (5 bare) se umfla până la înălțimea tabelului de comenzi de lângă
     el și rămânea cu jumătate de card gol. `align-self: start` îl oprește la conținut și îl
     ține lipit de marginea de SUS, deci cele două carduri pornesc tot de pe aceeași linie —
     singurul lucru care conta de fapt. (cerut de Liviu, 2026-08-06)
     Rândurile de titlu și de descriere rămân întinse: acolo alinierea între coloane e chiar
     scopul (vezi comentariul de deasupra). */
  .dash-cell > .panel { align-self: start; }
}
 /* `center`, nu `baseline` (regula globală): cardurile cu bară de tab-uri au rândul de titlu
   mai înalt cu ~13px decât cele fără, iar la aliniere pe linia de bază titlurile ieșeau decalate
   exact cu atât între cele două coloane. Centrat pe înălțimea rândului, se aliniază toate. */
.dash-cell .eyebrow-row { margin: 0; align-items: center; }
.dash-cell .ehint { max-width: none; margin: 0; }  /* în coloană îngustă, 72ch nu limitează nimic util */
/* Învelișul descrierii (vezi dash_card): ține și butonul „Vezi toată descrierea" injectat de
   collapse.js în ACELAȘI rând de grilă, ca să nu ajungă peste panou. */
.dash-cell .dash-hint { min-width: 0; }
.dash-cell .dash-hint .ehint-more { margin-top: 4px; }
/* Rândul de descriere există și gol (vezi dash_card): fără el, cardurile fără descriere ar
   decala panoul față de vecin. Gol = zero înălțime, nu un spațiu fantomă. */
.dash-cell .ehint.is-empty { display: block; min-height: 0; margin: 0; }
@supports not (grid-template-rows: subgrid) {
  .dash-cell .dash-hint { margin-bottom: 6px; }
  .dash-cell .eyebrow-row { margin-bottom: 6px; }
}
.eb-sub { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); font-size: 11px; }

/* Bara de tab-uri a unui card — aceeași componentă ca la Campanii (.cv-switch/.cv-b, deci
   și aceleași ținte de atingere de 40px), doar puțin mai compactă: într-o coloană de ~580px
   pot fi cinci tab-uri (Tehnologie), iar la dimensiunea implicită se rupeau pe două rânduri. */
.dash-tabs .cv-b { padding: 6px 12px; font-size: 12.5px; }
/* Bara NU se rupe pe două rânduri nici pe o coloană (2026-10-04, Liviu: „nu se vede bine între tabletă și
   desktop” — Tehnologie, 5 tab-uri, ieșea 3+2 în aceeași căsuță). Dacă nu încape lângă titlu, `.eyebrow-row`
   (flex-wrap) o mută ÎNTREAGĂ pe rândul următor; dacă nici acolo nu încape, se derulează lateral, ca .tabs/.subnav. */
.dash-tabs { flex-wrap: nowrap; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tabs .cv-b { flex: none; white-space: nowrap; }
@container (max-width: 460px) { .dash-tabs { width: 100%; } .dash-tabs .cv-b { flex: 1 0 auto; padding: 6px 8px; } }   /* 5 tab-uri încap și la 360px (2026-10-04) */

/* Panourile ascunse. Regula e redeclarată explicit (nu ne bazăm pe UA `[hidden]`): dacă
   cineva dă vreodată `display:` pe .dt-pane, atributul `hidden` ar pierde tăcut, iar toate
   tab-urile s-ar vedea deodată. Vezi și nota de la .ssw-pop[hidden]. */
.dt-pane[hidden], .mchart-pane[hidden] { display: none; }
.dt-pane > .p-hint:first-child { margin-top: -2px; }
.dt-pane .tbl-scroll:last-child { margin-bottom: -4px; }

/* Numele metricii desenate, în antetul graficului mare. Lime = același semnal ca inelul
   cardului KPI activ, ca legătura „cardul ăsta → curba asta" să fie evidentă dintr-o privire. */
.dc-name { font-family: "Bricolage Grotesque"; font-weight: 600; font-size: 15px; color: var(--accent);
  margin-right: 2px; align-self: center; }
.dc-q { display: inline-block; width: 13px; height: 13px; line-height: 13px; text-align: center;
  border: 1px solid var(--stroke-2); border-radius: 50%; font-size: 9px; color: var(--faint);
  vertical-align: 1px; margin-left: 2px; cursor: help; }

/* Cardul KPI care comută graficul. Starea activă e un inel lime + eticheta aprinsă — NU o
   schimbare de fundal: cardurile stau unul lângă altul și un fundal plin ar fi rupt rândul.
   Tranziția e prinsă pe ramura .anim-done (regula din 2026-07-21): cât timp durează animația
   de intrare (0.6-0.7s), ea guvernează și hover-ul, deci inelul ar „curge" la primul click. */
.kpi-metric { position: relative; }
.jsa .kpi-metric.in.anim-done { transition: box-shadow .16s, border-color .16s; }
.kpi-metric.on { border-color: rgba(var(--accent-rgb),.55);
  box-shadow: 0 18px 50px -28px rgba(0,0,0,calc(.9*var(--shk))), inset 0 0 0 1px rgba(var(--accent-rgb),.45); }
.kpi-metric.on .lbl { color: var(--accent); }
.kpi-mjump { color: var(--faint); }
.kpi-metric.on .kpi-mjump { color: var(--accent); }
.kpi-metric:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .kpi-metric:not(.on):hover { border-color: var(--stroke-2); } }

/* ===== Înregistrări de sesiune — player ===================================
   rrweb-player se construiește la dimensiuni FIXE (cele de la înregistrare):
   redă o pagină reală, cu layoutul ei de-atunci, deci n-are cum să se „întindă"
   responsiv fără să deformeze exact ce vrem să vedem. Îl scalăm cu `transform`,
   după CE E MAI STRÂMT — lățimea disponibilă sau înălțimea rămasă în fereastră —
   ca înregistrarea să încapă ÎNTREAGĂ, fără scroll.
   Bara lui de control e OPRITĂ (`showController: false`) și înlocuită cu cea de
   mai jos: fiind în afara elementului scalat, rămâne la mărime naturală. Cu bara
   originală, la 0,25× butoanele ar fi ajuns de 4 pixeli. */
.replay-panel { overflow: hidden; }
/* OBLIGATORIU: `display` bate atributul `hidden` (regula lui din browser e doar
   `[hidden]{display:none}`, adică specificitate 0,1,0 — o pierde în fața oricărei
   clase). Fără linia asta, „Se încarcă înregistrarea…" rămânea scris PESTE pagina
   redată, iar bara de control se vedea înainte să existe ce controla.
   Același tipar e folosit deja în app.css la .ssw-pop / .sn-site / .ret-num. */
/* O regulă pentru TOATĂ familia `rp-*`, nu una per componentă: enumerarea a fost
   greșită de trei ori la rând (mesajul „se încarcă" peste înregistrare, badge-ul de
   filtre care arăta „0" permanent, caseta de partajare mereu deschisă). Orice
   element `rp-*` cu atributul `hidden` chiar dispare, indiferent ce `display` are. */
[class^="rp-"][hidden], [class*=" rp-"][hidden] { display: none !important; }
.rp-stage { position: relative; width: 100%; overflow: hidden;
  background: var(--stage-bg); border: 1px solid var(--stroke); border-radius: var(--r-sm);
  box-shadow: 0 20px 60px -30px rgba(0,0,0,calc(.9*var(--shk))); }
.rp-fit { transform-origin: top left; }
.rp-hint { position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: 13.5px; }
/* Player-ul desenează pagina redată (fundal alb, al clientului) — noi îi dăm doar
   colțurile și îi scoatem umbra proprie, care se bătea cu a scenei. */
.rp-stage .rr-player { border-radius: var(--r-sm); box-shadow: none; background: transparent; }
.rp-stage .replayer-wrapper { background: #fff; }

/* ---- bara de control, în limbajul vizual al aplicației ---- */
.rp-ctl { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--stroke); border-radius: 999px; flex-wrap: wrap; }
.rp-btn { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--stroke-2); background: var(--glass-2);
  color: var(--text); cursor: pointer; transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.rp-btn:hover { background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .5); transform: translateY(-1px); }
.rp-btn .ic-pause, .rp-btn.on .ic-play { display: none; }
.rp-btn.on .ic-pause { display: block; }
.rp-btn.on { background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .55); color: var(--accent); }
.rp-time { font-size: 12.5px; color: var(--muted); flex: 0 0 auto; font-feature-settings: "tnum"; }
/* Banda de timp are DOUĂ etaje: sus reperele cu iconițe (ce s-a întâmplat), jos
   șina cu progresul și pauzele. Reperele au nevoie de spațiu propriu — puse peste
   șină, la 4px lățime, nu se putea nici distinge tipul, nici nimeri cu degetul. */
.rp-track { position: relative; flex: 1 1 240px; height: 50px; margin-inline: 7px; cursor: pointer; touch-action: none; }   /* reperul de la capăt rămâne în bară (audit 135) */
.rp-marks { position: absolute; top: 0; left: 0; right: 0; height: 28px; }
.rp-rail { position: absolute; top: 36px; left: 0; right: 0; height: 6px; }
.rp-track-bg { position: absolute; inset: 0; border-radius: 999px; background: rgba(var(--veil-rgb),.10); }
.rp-fill { position: absolute; top: 0; left: 0; height: 6px; border-radius: 999px; background: var(--bar-grad); width: 0; }
.rp-head { position: absolute; top: 33px; left: 0; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); pointer-events: none; }
/* Pauzele: hașură discretă pe șină. Se vede dintr-o privire cât din înregistrare
   e timp mort — și de ce săritul peste ele scurtează atât de mult filmul. */
.rp-pauses { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; }
/* `rp-gap`, NU `rp-pauza`: `rp-<tip>` e folosit ca MODIFICATOR de tip pe reperele de
   pe bară, pe rândurile din listă și în legendă — iar o clasă `.rp-pauza` cu
   `position:absolute; height:100%` se lipea și de ele. Rândurile „A stat pe gânduri"
   din listă ajungeau poziționate absolut, cu hașură pe fundal, ieșite din panou. */
.rp-gap { position: absolute; top: 0; height: 100%;
  background: repeating-linear-gradient(115deg, rgba(var(--veil-rgb),.34) 0 3px, rgba(var(--veil-rgb),.08) 3px 7px); }
/* Reperele: pastile cu iconiță, colorate pe tip. CODIȚA de dedesubt (::after) nu e
   decor — fără ea plutesc deasupra barei ca niște forme fără legătură cu nimic, exact
   cum le-a văzut Liviu („ce sunt astea"). Codița le leagă vizual de momentul lor.
   Dimensiunea (2026-08-08): 22px cu simbol de 12px era „prea mic și prea vag" — la
   atât, un cursor și un ceas au aceeași pată. 30/18 e pragul de la care silueta se
   citește fără să te apleci spre ecran. */
.rp-mark { position: absolute; top: 0; width: 30px; height: 30px; margin-left: -15px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--stroke-2); background: var(--mark-bg); color: var(--accent);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.rp-mark::after { content: ""; position: absolute; top: 29px; left: 50%; width: 1.5px; height: 6px;
  margin-left: -.75px; background: currentColor; opacity: .55; }
.rp-marki { display: grid; place-items: center; }
.rp-mark svg { width: 18px; height: 18px; display: block; }
.rp-mark:hover, .rp-mark:focus-visible { transform: scale(1.18); z-index: 5;
  border-color: currentColor; box-shadow: 0 4px 16px -4px rgba(0,0,0,calc(.85*var(--shk))); }
/* Eticheta de la hover: pe bară încap zeci de repere, iar `title`-ul nativ apare
   după o secundă și pe touch niciodată. Asta spune tipul instant, cu numele scris. */
.rp-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  display: none; width: max-content; max-width: 300px; padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--pop-rp); border: 1px solid var(--stroke-2); box-shadow: 0 10px 26px -8px rgba(0,0,0,calc(.92*var(--shk)));
  font-size: 11.5px; line-height: 1.45; text-align: left;
  pointer-events: none; z-index: 6; }
/* Titlul moștenește culoarea reperului (currentColor vine din `.rp-mark.rp-<tip>`):
   aceeași culoare pe simbol și pe nume = legătura se face singură în cap. */
.rp-tip b { display: block; color: currentColor; font-weight: 600; font-size: 12.5px; }
.rp-tipd { color: var(--muted); }
.rp-tipd { display: block; }
/* Contorul de pe un reper-grup: „aici sunt N momente, nu unul". */
/* inelul „decupajului" și cerneala erau hex-uri de dark (#14161a/#0b0d10) — pe
   tokenuri (2026-09-01), ca badge-ul să arate corect și pe tema light */
.rp-mn { position: absolute; top: -4px; right: -5px; min-width: 16px; height: 16px; padding: 0 3.5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--rp-c, var(--accent)); box-shadow: 0 0 0 2px var(--bg);
  color: var(--accent-ink); font-size: 10px; font-weight: 700; line-height: 1; font-feature-settings: "tnum"; }
.rp-mark-l .rp-tip { left: -6px; transform: none; }
.rp-mark-r .rp-tip { left: auto; right: -6px; transform: none; }
.rp-mark:hover .rp-tip, .rp-mark:focus-visible .rp-tip { display: block; }

/* LEGENDA — răspunsul la „nu se înțelege ce e". Se generează doar pentru tipurile
   prezente în înregistrarea curentă, ca să nu explice simboluri care nu apar.
   Din 2026-08-08 fiecare rând SPUNE ce înseamnă: o iconiță, oricât de mare, tot
   trebuie explicată o dată în cuvinte („nu prea înțeleg ce reprezintă"). */
.rp-legend { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.rp-legh { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px; }
.rp-legg { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 10px 20px; }
.rp-lg { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.45; }
.rp-lgt { min-width: 0; color: var(--muted); }
.rp-lgt b { display: block; color: var(--text); font-weight: 600; font-size: 13px; margin-bottom: 1px; }
.rp-lgi { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; margin-top: 1px;
  border-radius: 50%; border: 1.5px solid var(--stroke-2); background: var(--mark-bg); color: var(--accent); }
.rp-lgi svg { width: 18px; height: 18px; display: block; }
.rp-lgband { background: repeating-linear-gradient(115deg, rgba(var(--veil-rgb),.34) 0 3px, rgba(var(--veil-rgb),.08) 3px 7px); }

/* Culorile pe tip, în același loc pentru toate cele trei contexte (bară, listă,
   legendă) — când erau împrăștiate, un tip nou ieșea colorat doar pe jumătate.
   `--rp-c` dublează culoarea ca variabilă pentru că `background: currentColor` se
   rezolvă după `color`-ul PROPRIU al elementului: pe contorul de grup, care își pune
   textul închis la culoare, ieșea o bulină neagră cu cifra invizibilă. */
.rp-mark.rp-furie,  .rp-lg.rp-furie  .rp-lgi, .rp-mom.rp-furie  .rp-mi
  { --rp-c: var(--danger); color: var(--danger); border-color: rgba(var(--danger-rgb),.6);  background: rgba(var(--danger-rgb),.12); }
.rp-mark.rp-mort,   .rp-lg.rp-mort   .rp-lgi, .rp-mom.rp-mort   .rp-mi
  { --rp-c: var(--warn);   color: var(--warn);   border-color: rgba(var(--warn-rgb),.55);  background: rgba(var(--warn-rgb),.12); }
.rp-mark.rp-input,  .rp-lg.rp-input  .rp-lgi, .rp-mom.rp-input  .rp-mi
  { --rp-c: var(--lemon);  color: var(--lemon);  border-color: rgba(var(--lemon-rgb),.45);  background: rgba(var(--lemon-rgb),.10); }
.rp-mark.rp-pagina, .rp-lg.rp-pagina .rp-lgi, .rp-mom.rp-pagina .rp-mi
  { --rp-c: var(--rp-page); color: var(--rp-page); border-color: rgba(var(--rp-page-rgb),.5);  background: rgba(var(--rp-page-rgb),.12); }
.rp-mark.rp-pauza,  .rp-lg.rp-pauza  .rp-lgi, .rp-mom.rp-pauza  .rp-mi
  { --rp-c: var(--rp-pause); color: var(--rp-pause); border-color: rgba(var(--rp-pause-rgb),.4);  background: rgba(var(--rp-pause-rgb),.10); }
.rp-mark.rp-click,  .rp-lg.rp-click  .rp-lgi, .rp-mom.rp-click  .rp-mi
  { --rp-c: var(--accent); color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .10); }

/* Apăsarea, vizibilă PESTE înregistrare — altfel te uiți la film și nu-ți dai
   seama când a dat click. Cercul pulsează o dată, apoi dispare. */
.rp-over { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; }
.rp-ripple { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .9);
  animation: rp-pulse .9s ease-out forwards; }
.rp-ripple.rp-furie { background: rgba(var(--danger-rgb),.6); box-shadow: 0 0 0 2px rgba(var(--danger-rgb),.95); }
.rp-ripple.rp-mort  { background: rgba(var(--warn-rgb),.55); box-shadow: 0 0 0 2px rgba(var(--warn-rgb),.9); }
@keyframes rp-pulse {
  0%   { transform: scale(.35); opacity: 0; }
  18%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(3.6); opacity: 0; }
}
/* Anunțul „am sărit N secunde" — fără el, saltul pare că filmul s-a blocat. */
.rp-skipmsg { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; color: var(--text);
  background: var(--pop-skip); border: 1px solid var(--stroke-2); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rp-ripple { animation-duration: .01s; } }
.rp-opts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rp-speed { padding: 5px 9px; font-size: 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--stroke); background: transparent; color: var(--muted); font-family: inherit; }
.rp-speed:hover { color: var(--text); border-color: var(--stroke-2); }
.rp-speed.on { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .1); }
.rp-skip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
/* ===== Ecran complet în player (2026-09-27, audit C2140) =================
   Butonul e un .rp-btn (același desen ca Redă), lângă timpul total; iconița spune starea (colțuri spre
   afară = mărește, spre înăuntru = revino). Modul mare = panoul fix peste tot ecranul, pe fundalul
   paginii (opac: altfel se vedea pagina prin sticla panoului), cu scena și bara centrate pe verticală;
   înălțimea scenei o calculează incadreaza() din replay_view.php. Legenda și notele de sub film ies din
   modul mare — acolo contează doar filmul. z-index 150: peste antetul (100) și bara de jos (120) de pe
   telefon, sub ferestrele de dialog (200), sub bulele .ptip și sub paleta ⌘K. Ecranul complet REAL
   (Fullscreen API, unde există) folosește aceeași clasă. Doar tokenuri de temă → același în light. */
.rp-btn-mare .ic-mic, .rp-btn-mare[aria-pressed="true"] .ic-mare { display: none; }
.rp-btn-mare[aria-pressed="true"] .ic-mic { display: block; }
.replay-panel.rp-mare { position: fixed; inset: 0; z-index: 150; margin: 0; border: 0; border-radius: 0;
  display: flex; flex-direction: column; justify-content: center; overflow-x: hidden; overflow-y: auto;
  background: var(--bg); box-shadow: none;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.replay-panel.rp-mare > :not(.rp-stage):not(.rp-ctl) { display: none; }
.replay-panel.rp-mare .rp-stage { flex: 0 0 auto; }
.replay-panel.rp-mare .rp-ctl { flex: 0 0 auto; margin-top: 10px; }
html.rp-mare-on, html.rp-mare-on body { overflow: hidden; }
/* Telefonul CULCAT (lat, dar sub 1023px): pe telefon bara se pliază pe două etaje (banda de timp pe rândul
   ei), adică ~70px de înălțime luați filmului exact acolo unde înălțimea e puțină. În modul mare, cât încape,
   bara rămâne pe UN rând, ca pe desktop. */
@media (max-width: 1023px) and (min-width: 640px) {
  .replay-panel.rp-mare .rp-track { flex-basis: 120px; order: 0; }
  .replay-panel.rp-mare .rp-opts { margin-left: 0; }
}

/* ===== Înregistrări peste plafon: captate, dar estompate ==================
   Conținutul CHIAR e acolo — nu e o listă falsă. Estompăm doar celulele de
   conținut; ora, dispozitivul și butonul rămân citibile, ca omul să înțeleagă
   ce cumpără. `user-select:none` ca textul să nu poată fi copiat din spatele
   estompării. */
/* ===== Banda de stare a înregistrărilor ===================================
   Puls viu + contor + bară de progres față de plafonul lunii + comutatorul de
   pornire/oprire. Crestătura de pe bară = cât din plafon e DEBLOCAT până azi
   (plafonul se deschide treptat) — tooltip-ul benzii explică. */
/* Așezarea (2026-10-09): pe un rând cât încape, altfel cifrele coboară sub titlu — o decide
   conținutul, nu o lățime fixă. Înainte, .rp-snum (nowrap, aliniat la dreapta) trecea PESTE
   „Eșantion…" când banda era mai îngustă decât textul (~1024–1180 px pe desktop, cu meniul
   lateral), iar pe telefon ieșea din bandă și era tăiat.
   - .rp-shead crește, .rp-sprog NU: pe același rând cifrele stau lipite de buton; când
     coboară pe rândul lor, stau la stânga, sub text (margin-left = punctul + spațiul lui).
   - .rp-snum = bucăți separate; o bucată coboară întreagă, nu se rupe la mijloc. Punctul
     dintre bucăți e ::before în spațiul dintre ele; la început de rând cade în afara
     benzii de text și îl taie clip-path, deci un rând rupt nu începe cu „·".
   - Pe telefon (bandă < 560px) butonul rămâne sus, lângă titlu, iar cifrele iau toată lățimea. */
.rp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px;
  padding: 13px 18px; border-radius: var(--r); border: 1px solid rgba(var(--accent-rgb), .25);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .06), var(--glass) 55%);
  container-type: inline-size; container-name: rpstat; }
/* fără spațiu orizontal propriu: pe același rând, distanța până la cifre o dă margin-left-ul lui .rp-sprog */
.rp-sbody { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.rp-shead { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 16px; }
.rp-status.off { border-color: var(--stroke);
  background: var(--glass); }
.rp-sdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5);
  animation: rp-puls 2.2s ease-out infinite; }
.rp-status.off .rp-sdot { background: var(--faint); animation: none; box-shadow: none; }
@keyframes rp-puls {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .45); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
.rp-stxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-stxt b { font-size: 13.5px; letter-spacing: -.01em; }
.rp-stxt span { font-size: 12px; color: var(--muted); }
.rp-sprog { display: flex; align-items: center; gap: 8px 12px; flex: 0 1 auto; min-width: 0;
  margin-left: 25px; }
/* lățime, nu doar flex-basis: WebKit calculează lățimea naturală a benzii din `width` (un div
   gol cu flex-basis contează 0 și bara ar fi rămas la minim). 26cqi = un sfert din bandă, ca
   pe laptop (bandă ~890px la 1280) titlul și cifrele să încapă tot pe un rând; 260px pe ecrane mari. */
.rp-sbar { position: relative; flex: 0 1 auto; width: 260px; width: clamp(140px, 26cqi, 260px); min-width: 96px; height: 6px; border-radius: 999px;
  background: rgba(var(--veil-rgb),.09); overflow: visible; }
.rp-sfill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--bar-grad);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), calc(.35*var(--glow))); transition: width .5s cubic-bezier(.4,0,.2,1); }
.rp-sfill.warn { background: linear-gradient(90deg, var(--accent), var(--warn)); }
.rp-snotch { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
  border-radius: 2px; background: rgba(var(--veil-rgb),.45); }
/* Întâi se scurtează bara (până la 96px), abia apoi se rup cifrele: .rp-snum nu se strânge
   prin flex (orice strângere, oricât de mică, rupea ultima bucată pe rândul următor), ci doar
   prin max-width — tot rândul, sau rândul minus bara la minim + spațiul ei. Nici flex-shrink
   subunitar: singur pe rând, o sumă de factori < 1 strânge doar o fracțiune din depășire și
   restul trecea peste buton (prins de sondă, 2026-10-09). */
.rp-snum { font-size: 12.5px; color: var(--muted); font-feature-settings: "tnum";
  flex: 0 0 auto; max-width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3ch; row-gap: 2px;
  clip-path: inset(-.5em 0 -.5em 0); }
.rp-sbar + .rp-snum { max-width: calc(100% - 108px); }
.rp-snum > span { position: relative; text-wrap: balance; }   /* o bucată ruptă (doar pe telefon): două jumătăți, nu un cuvânt orfan */
.rp-snum > span + span::before { content: "·"; position: absolute; right: 100%; width: 3ch; text-align: center; }
.rp-snum b { color: var(--text); }
.rp-inf { color: var(--accent); font-size: 15px; line-height: 0; }   /* mai mare, dar fără să înalțe rândul: punctul și bucata lui rămân pe aceeași linie cu restul */
.rp-sform { flex: 0 0 auto; }
@container rpstat (max-width: 559px) {
  .rp-sbody { display: contents; }
  .rp-shead { order: 1; flex: 1 1 0; }
  .rp-sform { order: 2; }
  .rp-sprog { order: 3; flex: 1 1 calc(100% - 25px); flex-wrap: wrap; }
  .rp-sbar { flex: 1 1 120px; width: auto; }
  .rp-sbar + .rp-snum { max-width: 100%; }   /* aici bara își ia rândul ei când nu încap amândouă */
}
@media (prefers-reduced-motion: reduce) { .rp-sdot { animation: none; } }

/* ===== Panoul de filtre al înregistrărilor ================================
   Un singur buton în capul secțiunii; panoul se desface sub el (trucul cu
   grid-template-rows 0fr→1fr — animăm înălțimea fără s-o măsurăm din JS).
   Sliderele de interval: două <input type=range> native suprapuse (tastatură și
   atingere gratis), invizibile în afara mânerelor; șina, umplutura cu gradient
   și etichetele sunt desenate de noi. */
.rp-fright { display: flex; align-items: center; gap: 14px; }
.rp-fbtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 999px; border: 1px solid var(--stroke-2); background: var(--glass-2);
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.rp-fbtn:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), .5); }
.rp-fbtn.on { color: var(--accent); border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .1); }
.rp-fbtn svg:first-child { width: 14px; height: 14px; }
/* --accent-fill + --accent-ink, nu --accent + hex: pe light accentul-ca-text se
   închide (olive) și cerneala fixă #10120a devenea ilizibilă pe el (2026-09-01) */
.rp-fbadge { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; }
/* modalul cu link de copiat (window.pulseLinkModal) */
/* Mai lat decât modalul de confirmare: un link de ~120 de caractere într-o casetă
   îngustă se derulează la coadă și vezi doar `…sid=16a763…`, adică fix partea care
   nu-ți spune nimic. `width` + `max-width` ca să respire și pe ecrane mari. */
.modal-link { width: min(680px, calc(100vw - 40px)); max-width: none; text-align: left; }
.modal-link .modal-head { margin-bottom: 6px; }
.modal-link .modal-head b { font-size: 15.5px; }
.modal-link .modal-msg { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.ml-row { display: flex; gap: 8px; align-items: flex-start; }
.ml-url { flex: 1 1 auto; min-width: 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  border-radius: var(--r-sm); border: 1px solid var(--stroke-2);
  background: var(--well-deep); color: var(--text);
  resize: none; word-break: break-all; overflow: hidden; }
.ml-url:focus { outline: none; border-color: rgba(var(--accent-rgb), .55); }
.ml-row .btn { flex: 0 0 auto; white-space: nowrap; }
.ml-row .btn.ok { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
@media (max-width: 1023px) { .ml-row { flex-direction: column; } .ml-row .btn { width: 100%; } }

.rp-freset { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
  border-radius: 999px; border: 1px solid var(--stroke); background: transparent;
  color: var(--muted); font-family: inherit; font-size: 12.5px; cursor: pointer;
  transition: color .14s ease, border-color .14s ease, transform .14s ease; }
.rp-freset:hover { color: var(--danger); border-color: rgba(var(--danger-rgb),.45); transform: translateY(-1px); }
.rp-fchev { transition: transform .25s ease; opacity: .6; }
.rp-fbtn[aria-expanded="true"] .rp-fchev { transform: rotate(180deg); }

.rp-fwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.rp-fwrap.on { grid-template-rows: 1fr; }
.rp-fclip { overflow: hidden; min-height: 0; }
.rp-fpanel { display: grid; grid-template-columns: 280px 1fr; gap: 20px 34px;
  margin: 2px 0 16px; padding: 22px; border-radius: var(--r);
  border: 1px solid var(--stroke); background: var(--surface-2);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .25s ease .05s, transform .25s ease .05s; }
.rp-fwrap.on .rp-fpanel { opacity: 1; transform: none; }
.rp-flab { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px; }

/* dispozitive: segmente-pastilă cu iconițe */
.rp-fseg { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-fseg button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
  border-radius: 999px; border: 1px solid var(--stroke); background: transparent;
  color: var(--muted); font-family: inherit; font-size: 12.5px; cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease, transform .14s ease; }
.rp-fseg button svg { width: 15px; height: 15px; }
.rp-fseg button:hover { color: var(--text); border-color: var(--stroke-2); transform: translateY(-1px); }
.rp-fseg button.on { color: var(--accent); border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .1); }

/* conversia: un comutator-pastilă cu steaua conversiei */
.rp-fchip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-radius: 999px; border: 1px solid var(--stroke); background: transparent;
  color: var(--muted); font-family: inherit; font-size: 12.5px; cursor: pointer; text-align: left;
  transition: color .14s ease, border-color .14s ease, background .14s ease; }
.rp-fchip .rp-fstar { opacity: .5; transition: opacity .14s ease, transform .2s ease; }
.rp-fchip:hover { color: var(--text); border-color: var(--stroke-2); }
.rp-fchip[aria-pressed="true"] { color: var(--accent); border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .1); }
.rp-fchip[aria-pressed="true"] .rp-fstar { opacity: 1; transform: scale(1.25); }

/* sliderele de interval */
.rp-fsliders { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rps-head { display: flex; align-items: baseline; justify-content: space-between; }
.rps-head .rp-flab { margin-bottom: 6px; }
.rps-val { font-size: 12.5px; color: var(--muted); font-feature-settings: "tnum"; transition: color .15s ease; }
.rps-val.on { color: var(--accent); font-weight: 600; }
/* --rps-th = DIAMETRUL mânerului. Nu e doar stil: scriptul îl citește ca să
   termine umplutura exact în centrul cercului (mânerul nativ călătorește pe
   „lățime − diametru", nu pe toată șina). Schimbi diametrul → schimbi variabila,
   iar geometria se ajustează singură. Șina (rps-bg) e trasă cu o rază înăuntru
   la fiecare capăt, ca să înceapă și să se termine tot sub centrele mânerelor. */
.rps-track { position: relative; height: 28px; --rps-th: 18px; }
.rps-bg { position: absolute; top: 12px; left: calc(var(--rps-th) / 2); right: calc(var(--rps-th) / 2);
  height: 4px; border-radius: 999px; background: rgba(var(--veil-rgb),.1); }
.rps-fill { position: absolute; top: 12px; height: 4px; border-radius: 999px; background: var(--bar-grad);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), calc(.3*var(--glow))); }
.rps.on .rps-fill { box-shadow: 0 0 14px rgba(var(--accent-rgb), calc(.5*var(--glow))); }
.rps-track input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
/* Șina INTERNĂ a inputului primește exact înălțimea barei vizibile (4px) — WebKit
   o centrează vertical în input (28px → axa la 14px, fix unde e desenată .rps-bg),
   iar mânerul se așază relativ la EA: margin-top = (șină − mâner) / 2 îl centrează
   matematic pe axă. Fără înălțime explicită pe șină, poziția mânerului era
   nedeterminată — cercul stătea sub bară (raportat de Liviu, cu poză, a doua oară). */
.rps-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: 0; height: 4px; }
.rps-track input[type="range"]::-moz-range-track { background: transparent; border: 0; height: 4px; }
/* Conturul mânerului (audit 2026-09-27, C0869): mânerul alb pe panoul alb al temei light avea doar umbra
   înmuiată de --shk (.22) → marginea ~1,3:1, sub pragul 3:1 al WCAG 1.4.11. Primul strat de umbră e un
   inel de 1px în --thumb-edge: pe dark e transparent (identic ca înainte), pe light 3,5:1 pe alb.
   Aceeași structură în ambele teme; stările de hover/focus/active îl repetă, fiindcă rescriu box-shadow. */
.rps-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  pointer-events: auto; width: var(--rps-th); height: var(--rps-th);
  margin-top: calc((4px - var(--rps-th)) / 2); border-radius: 50%;
  background: #fff; border: 0; cursor: grab;
  box-shadow: 0 0 0 1px var(--thumb-edge), 0 1px 4px rgba(0,0,0,calc(.55*var(--shk))), 0 3px 10px rgba(0,0,0,calc(.35*var(--shk)));
  transition: transform .12s ease, box-shadow .12s ease; }
.rps-track input[type="range"]::-moz-range-thumb { pointer-events: auto;
  width: var(--rps-th); height: var(--rps-th); border-radius: 50%;
  background: #fff; border: 0; cursor: grab;
  box-shadow: 0 0 0 1px var(--thumb-edge), 0 1px 4px rgba(0,0,0,calc(.55*var(--shk))), 0 3px 10px rgba(0,0,0,calc(.35*var(--shk)));
  transition: transform .12s ease, box-shadow .12s ease; }
.rps-track input[type="range"]:hover::-webkit-slider-thumb,
.rps-track input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.15);
  box-shadow: 0 0 0 1px var(--thumb-edge), 0 0 0 6px rgba(var(--accent-rgb), .18), 0 1px 4px rgba(0,0,0,calc(.55*var(--shk))); }
.rps-track input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.22);
  box-shadow: 0 0 0 1px var(--thumb-edge), 0 0 0 9px rgba(var(--accent-rgb), .24), 0 1px 4px rgba(0,0,0,calc(.55*var(--shk))); }
/* Aceleași stări pentru Firefox (audit 2026-09-27, C0874): existau doar pe ::-webkit-slider-thumb, iar
   pe Gecko cele două input-uri suprapuse (minim/maxim) aveau același inel pe toată șina — nu se vedea
   care mâner are focusul. Blocuri SEPARATE: un selector care amestecă ::-moz- cu ::-webkit- e invalid
   în ambele motoare și ar arunca și regula webkit. */
.rps-track input[type="range"]:hover::-moz-range-thumb,
.rps-track input[type="range"]:focus-visible::-moz-range-thumb { transform: scale(1.15);
  box-shadow: 0 0 0 1px var(--thumb-edge), 0 0 0 6px rgba(var(--accent-rgb), .18), 0 1px 4px rgba(0,0,0,calc(.55*var(--shk))); }
.rps-track input[type="range"]:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.22);
  box-shadow: 0 0 0 1px var(--thumb-edge), 0 0 0 9px rgba(var(--accent-rgb), .24), 0 1px 4px rgba(0,0,0,calc(.55*var(--shk))); }
.rps-track input[type="range"]:focus { outline: none; }

/* subsolul panoului: numărătoarea live + ștergerea */
.rp-ffoot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.rp-fcount { font-size: 12.5px; color: var(--muted); font-feature-settings: "tnum"; }
.rp-ffoot .btn[disabled] { opacity: .4; cursor: default; pointer-events: none; }
tr.rp-fhide { display: none; }
/* lista de înregistrări cere rândurile de la server (2026-09-02): cât așteaptă, corpul
   tabelului se estompează în loc să dispară — omul vede că a pornit ceva */
.rp-table tbody { transition: opacity .15s; }
.rp-table.rp-loading tbody { opacity: .45; pointer-events: none; }
.rp-noresult { display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; text-align: center; padding: 36px 16px; color: var(--muted); font-size: 13.5px; }

@media (max-width: 1023px) {
  .rp-fright { flex-wrap: wrap; gap: 10px; }
  .rp-fpanel { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .rp-fseg button { flex: 1 1 auto; justify-content: center; padding: 10px 12px; }
  .rp-fchip { width: 100%; justify-content: center; }
  /* mâner mai mare pe atingere — DOAR prin variabilă: dimensiunea, centrarea
     (margin-top calculat din ea) și geometria din JS o citesc toate pe --rps-th,
     deci un override direct pe width/height le-ar fi rupt pe celelalte două */
  .rps-track { --rps-th: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-fwrap, .rp-fpanel, .rp-fchev { transition: none; }
}
tr.rp-locked > td { filter: blur(4.5px); opacity: .75; user-select: none; pointer-events: none; }
tr.rp-locked > td:first-child,
tr.rp-locked > td:last-child { filter: none; opacity: 1; user-select: auto; pointer-events: auto; }
tr.rp-locked { cursor: pointer; }
tr.rp-locked:hover > td { opacity: .9; }
.rp-lockbtn { color: var(--accent) !important; border-color: rgba(var(--accent-rgb), .4) !important; }
.rp-lockbtn:hover { background: rgba(var(--accent-rgb), .12) !important; }

.rp-upsell { display: flex; align-items: center; gap: 18px; margin-top: 14px;
  border-color: rgba(var(--accent-rgb), .3);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .07), rgba(var(--veil-rgb),.04) 60%); }
.rp-up-ico { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 16px; color: var(--accent);
  background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .35); }
.rp-up-txt { flex: 1 1 auto; min-width: 0; }
.rp-up-txt h3 { font-size: 16px; letter-spacing: -.01em; margin-bottom: 5px; }
.rp-up-txt p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 0; }
.rp-up-btn { flex: 0 0 auto; }
@media (max-width: 1023px) {
  .rp-upsell { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rp-up-btn { width: 100%; text-align: center; }
}

/* ---- lista de momente cheie ----
   Grilă, nu flex: pe mobil rândul se pliază în două etaje (tip+oră sus, descrierea
   dedesubt) fără să ascundă eticheta de tip — înainte `.rp-mk` dispărea sub 1023px
   și rămâneai iar cu o iconiță nenumită, exact problema pe care o rezolvăm. */
.rp-moments { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.rp-mom { display: grid; grid-template-columns: auto 46px 132px 1fr;
  grid-template-areas: "ico ora tip desc"; align-items: center; gap: 4px 12px;
  width: 100%; padding: 9px 10px; text-align: left;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text);
  font-family: inherit; font-size: 13.5px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.rp-mom:hover { background: var(--glass); border-color: var(--stroke); }
.rp-mom.on { background: rgba(var(--accent-rgb), .09); border-color: rgba(var(--accent-rgb), .35); }
.rp-mi { grid-area: ico; display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; background: var(--glass-2); border: 1.5px solid var(--stroke); color: var(--accent); }
.rp-mi svg { width: 20px; height: 20px; display: block; }
.rp-momfoot { display: flex; justify-content: center; margin-top: 12px; }
.rp-mt { grid-area: ora; color: var(--faint); font-size: 12px; font-feature-settings: "tnum"; }
.rp-mk { grid-area: tip; color: var(--muted); font-size: 12px; }
.rp-mx { grid-area: desc; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-mom.rp-furie .rp-mk { color: var(--danger); }
.rp-mom.rp-mort  .rp-mk { color: var(--warn); }

@media (max-width: 1023px) {
  .replay-panel { padding: 14px; }
  .rp-ctl { border-radius: var(--r-sm); gap: 8px; }
  .rp-track { flex-basis: 100%; order: 5; }
  .rp-opts { margin-left: auto; }
  /* Pe ecran îngust rândul se pliază pe două etaje. Varianta veche ascundea complet
     eticheta de tip — și rămâneai cu o iconiță pe care tocmai o facem lizibilă. */
  .rp-mom { font-size: 13px; grid-template-columns: auto 1fr auto;
    grid-template-areas: "ico tip ora" "ico desc desc"; align-items: center; }
  .rp-mk { font-size: 12.5px; color: var(--text); font-weight: 600; }
  .rp-mom.rp-pauza .rp-mk, .rp-mom.rp-click .rp-mk { color: var(--muted); font-weight: 500; }
  .rp-mx { white-space: normal; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
  .rp-legg { grid-template-columns: 1fr; gap: 12px; }
  /* „Sari peste pauze" ieșea din bară la 320px (vitezele + eticheta = 273px, bara are ~246): grupul se
     plafonează la lățimea barei și eticheta coboară pe rândul ei DOAR când nu încape (audit 2026-09-27,
     C0895). row-gap 15 ≥ cei 8px cu care aria vitezelor iese în jos + 6,5 ai casetei de bifat (34 pe 21) în sus. */
  .rp-opts { flex-wrap: wrap; max-width: 100%; row-gap: 15px; }
}
/* Ținte tactile în player (audit 2026-09-27, C0895) — rețeta blocului „aria de apăsare" de mai sus:
   desenul NU se schimbă, doar aria crește printr-un pseudo-element transparent.
   • .rp-btn (Redă, 38px) → 44×44 centrat; lângă el e doar textul timpului, la 8px.
   • .rp-speed (1×/2×/4×/8×, ~33×28) → +8px sus și jos (44px; exact gap-ul de 8px dintre rândurile barei,
     deci nu intră în desenul lui Redă când opțiunile coboară sub el); pe orizontală exact jumătate din gap-ul
     de 6px pe fiecare parte (39px = pasul dintre ele), ca vitezele vecine să nu-și fure atingerile.
     z-index 1: aria globală a casetei de bifat (::before 40px pe 21) ieșea 3,5px PESTE desenul lui „8×"
     (eticheta stă la 6px de el) — acum viteza își păstrează desenul + 3px, bifa rămâne cu restul.
   • .rp-mark (reperele, 30px): cel mult 34×34 — pasul de grupare din replay_view.php (prag 34px = 30 +
     4 aer) garantează că două repere nu stau mai aproape, deci ariile nu se suprapun; crește doar în
     sus, ca să nu acopere șina de derulare de dedesubt. ::before, pentru că ::after e codița. */
@media (max-width: 1023px), (pointer: coarse) {
  .rp-btn, .rp-speed { position: relative; }
  .rp-speed { z-index: 1; }
  .rp-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  /* -4 pe orizontală = 1px bordura + 3px (jumătate din gap). Sus -8, nu -9: măsurat cu elementFromPoint, în
     Chromium și WebKit aria pornea cu 1px mai sus decât marginea de padding a butonului și intra în ultimul
     rând desenat al lui Redă; cu -8 se oprește fix sub el. Jos -9 (sub viteze e aerul de 8px al barei). */
  .rp-speed::after { content: ""; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -9px; }
  .rp-mark::before { content: ""; position: absolute; left: -3.5px; right: -3.5px; top: -5.5px; bottom: -1.5px; }
}

/* ═══ Compactarea zonei de sus (2026-08-06) ═══════════════════════════════════
   Cerut de Liviu: „fă mai compacte KPI-urile de la început, ca să încapă și graficul above
   the fold. Lasă max 2 rânduri la descrierea mică."
   Măsurat înainte: cardul mare 280px, graficul începea la y=838px — pe un laptop de 900px
   se vedeau 62px din el, iar la 1280×800 era complet sub linia de plutire.
   Tăieturile de mai jos NU ating scara tipografică (44px/30px pe cifre rămân neschimbate —
   sunt semnătura paginii): doar respirația din jurul lor, care se aduna de 7 ori per card. */
.kpi { padding: 15px 18px; }
.kpi.big { padding: 19px 22px; }
.kpi .val { margin-top: 5px; }
.kpi .delta { margin-top: 4px; }
/* Descrierea: maximum 2 rânduri, restul se citește la hover (`title`, pus în kpi_card). */
.kpi .hint { margin-top: 6px; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Sparkline-ul rămâne lipit de fundul cardului (înainte era împins acolo de „⌄ detalii", care
   pe cardurile de metrică a dispărut) — altfel liniile ar sta la înălțimi diferite în același
   rând, după cât de lungă e descrierea fiecăruia. */
.kpi.kpi-metric .spark { margin-top: auto; padding-top: 10px; }
.kpi .spark { margin-top: 10px; height: 24px; }
.kpi-grid + .kpi-grid { margin-top: 10px; }
/* Eticheta de secțiune dinaintea graficului: 32px de aer deasupra erau prea mulți exact acolo
   unde ne luptăm pentru fiecare pixel. Restul paginii păstrează ritmul obișnuit. */
 /* Fără eticheta de secțiune, descrierea e primul element al zonei: are nevoie de aer deasupra,
   cât avea eticheta, ca să nu se lipească de rândul de carduri. */
.zone-a .ehint { margin: 16px 0 8px; }
.zone-a .panel { padding: 12px 18px 10px; }
/* Tabelul de pagini: calea pe UN singur rând. Trunchierea se face pe server, cu mb_strimwidth
   (ca la Conversii și la lista de înregistrări), iar calea întreagă rămâne în `title`. Înainte
   se rupea pe patru rânduri și înălța cardul cu ~350px față de vecinul lui de pe rând. */
.tbl-paths td.mono { white-space: nowrap; }
/* Tabelele din cardurile pe coloane: celule puțin mai strânse (10/9 în loc de 11/12). Șase
   coloane × 6px de padding în minus înseamnă ~36px recuperați — exact cât trebuia ca tabelul
   de comenzi să încapă într-o coloană de 427px (la 1280px de fereastră) fără scroll ascuns.
   Restul tabelelor din aplicație rămân neatinse. */
.dash-cell .tbl th, .dash-cell .tbl td { padding: 10px 9px; }
/* Capetele de tabel din carduri: spațierea între litere pe majuscule adaugă lățime reală pe
   șase coloane. .05em rămâne lizibil și recuperează ultimii pixeli care lipseau. */
.dash-cell .tbl th { letter-spacing: .05em; }
/* Coloanele numerice au valori scurte (cifre) — le ajung 6px laterali, iar cei 18px recuperați
   pe trei coloane sunt exact cât lipsea ca tabelul de comenzi să încapă la 1280px. */
.dash-cell .tbl th.n, .dash-cell .tbl td.n { padding-left: 6px; padding-right: 6px; }

/* ═══ Respirația din cardurile KPI (2026-08-06, runda 2) ══════════════════════
   Cerut de Liviu: „mai mult spațiu sub sparkline, e prea mult spațiu între descriere și
   sparkline, și spațiul dintre rândul 1 și 2 de carduri să fie egal cu cel dintre carduri."
   Descrierea ocupă acum FIX două rânduri, la toate cardurile: cardurile dintr-un rând au
   aceeași înălțime oricum (grilă), iar diferența de o linie se aduna toată într-un gol între
   descriere și sparkline — pe cardul cu descriere scurtă erau 15px, pe celelalte zero.
   Cu blocul fix, golul dispare și distanța devine aceeași peste tot, fără ca vreun card
   să crească: spațiul doar s-a mutat acolo unde se citește ca aer, nu ca greșeală. */
.kpi .hint { min-height: 2.8em; }
/* Sparkline-ul stă LÂNGĂ descriere, nu împins la fundul cardului: aerul rămas se adună dedesubt,
   unde se citește ca margine, nu ca gol între două elemente. Alinierea între carduri o dă acum
   structura identică (descriere de două rânduri + loc rezervat pentru deltă), nu `margin-top:auto`. */
.kpi .spark { margin-top: 10px; }
.kpi .delta.delta-hold { min-height: 19px; }
.kpi { padding-bottom: 18px; }
.kpi.big { padding-bottom: 22px; }
/* Egal cu gap-ul dintre carduri (16px), cerut explicit — `gap` nu acționează între două grile. */
.kpi-grid + .kpi-grid { margin-top: 16px; }

/* ═══ Alarma „nu se colectează nimic" (2026-08-08) ════════════════════════════
   Înlocuiește un badge discret de pe pagina Site-uri care a lăsat două site-uri
   să nu mai colecteze două zile fără ca nimeni să observe. Deci: roșu, lat, cu
   textul afară — nu într-un `title` — și pus DEASUPRA cifrelor pe care le invalidează. */
.oal { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 18px;
  padding: 16px 18px; border-radius: var(--r); border: 1px solid rgba(var(--danger-rgb),.45);
  background: linear-gradient(120deg, rgba(var(--danger-rgb),.10), rgba(var(--danger-rgb),.03) 60%); }
.oal-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 12px; color: var(--danger);
  background: rgba(var(--danger-rgb),.13); border: 1px solid rgba(var(--danger-rgb),.35); }
.oal-ico svg { width: 21px; height: 21px; }
.oal-txt { flex: 1 1 auto; min-width: 0; }
.oal-txt b { display: block; color: var(--text); font-size: 15px; letter-spacing: -.01em; margin-bottom: 5px; }
.oal-txt p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 0; }
.oal-txt .mono { color: var(--text); }
.oal-fix { margin-top: 6px !important; }
.oal-fix a { color: var(--accent); }
/* v74: două acțiuni (Acceptă și acest domeniu · E o copie, ignoră), stivuite, de aceeași lățime */
.oal-acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.oal-act .btn { width: 100%; justify-content: center; }
@media (max-width: 1023px) {
  .oal { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .oal-acts { width: 100%; }
  .oal-act .btn { width: 100%; }
}

/* Fereastra scurtată de plan (2026-08-10). Datele mai vechi EXISTĂ, dar nu sunt incluse
   în plan — semnalul trebuie să fie citibil, nu alarmant: e o limită, nu o eroare. */
.period-clamp{margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11.5px;
  font-weight:600;letter-spacing:.01em;white-space:nowrap;cursor:help;
  background:rgba(var(--accent-rgb,212,255,74),.13);color:var(--accent,#d4ff4a);
  border:1px solid rgba(var(--accent-rgb,212,255,74),.3)}
/* Pe telefon pastila era ASCUNSĂ (display:none sub 560px) — singurul semn că planul a scurtat
   fereastra: un cont Free vedea „dintotdeauna" deasupra unor cifre din ultimele 30 de zile
   (audit 2026-09-27, C1881; vezi comentariul din period_chip()). Acum rămâne vizibilă: chip-ul
   se împachetează, iar când nu încape lângă perioadă pastila trece pe rândul ei, dedesubt,
   centrată ca restul chip-ului (distanța orizontală o dă gap-ul chip-ului, 7px). */
@media (max-width:560px){
  .period-chip:has(.period-clamp){flex-wrap:wrap;row-gap:5px}
  .period-clamp{margin-left:0}
}

/* =========================================================================
   TEMA LIGHT v4 — regulile care NU pot fi tokeni (2026-09-14). Tot ce ține de
   culoare e în blocul de tokeni de sub :root; aici rămân doar diferențele de
   STRUCTURĂ: ambianța stinsă, text-gradient → culoare plină, marca plată,
   chevronul din url() (var() nu intră în url), chip-ul alb ridicat al meniului,
   muchia butoanelor lime pe alb și câteva inele/animații.
   Regula casei: o singură regulă light per selector (gotcha #24) și NIMIC aici
   care s-ar putea rezolva printr-un token.
   ========================================================================= */
/* ambianța (orburi + granulație) și textele cu gradient rămân — prin --amb și --grad-text, nu prin reguli.
   Paritate cu dark (2026-09-14, Liviu): nimic în plus, nimic în minus, nimic diferit ca STRUCTURĂ. */
html[data-theme="light"] .boostetic-logo,
html[data-theme="light"] .ft-logo { filter: brightness(0); opacity: .9; }
/* marca: aceeași pastilă (umplere + contur + puls), doar culorile: lime plin, contur mai închis, pulsul în cerneală;
   pulsul (bpulse) rulează și aici — alfa lui e înmulțită cu --glow, deci pe alb nu lasă halo */
html[data-theme="light"] .brand-mark rect { fill: var(--accent-fill); stroke: #a9d62a; }
html[data-theme="light"] .brand-mark path { stroke: #1f2a10; }
/* select: chevronul e o imagine de fundal cu culoarea în URL → nu poate citi un token */
html[data-theme="light"] select {
  background-image:
    linear-gradient(180deg,rgba(16,20,28,.02),rgba(16,20,28,0) 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2345700f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
html[data-theme="light"] textarea { background-color: var(--input-bg); border-color: var(--input-line); color: var(--text); }
/* filtrul SVG de glow (feGaussianBlur peste linie) e lumină-pe-întuneric; pe alb dă o pată */
html[data-theme="light"] .chart-line,
html[data-theme="light"] .spark .chart-line { filter: none; }
/* butoane: lime-ul viu e 1.15:1 pe alb, deci primarul are nevoie de o MUCHIE; umbra e neutră,
   nu halou; hover = lime puțin mai închis (brightness(1.08) n-are ce lumina pe alb) */
/* butoane: lime-ul e 1.30:1 pe alb, deci primarul are nevoie de o MUCHIE; umbra are EXACT geometria
   halo-ului din dark (0 8px 22px -12px), doar că e neutră; hover = lime puțin mai închis
   (brightness(1.08) l-ar deschide, adică l-ar face mai puțin vizibil pe alb) */
html[data-theme="light"] .btn:not(.ghost):not(.danger) { border-color: rgba(63,98,18,.35); box-shadow: 0 8px 22px -12px rgba(16,20,28,.5); }
@media (hover: hover) {
  html[data-theme="light"] .btn:not(.ghost):not(.danger):hover:where(:not(:disabled)) { filter: none; background: #b9e82c; box-shadow: 0 10px 26px -8px rgba(16,20,28,.28); }
}
html[data-theme="light"] .btn.ghost:not(.danger) { border-color: rgba(16,20,28,.16); }
/* „Copiat ✓" din fereastra de link (2026-09-27, audit C1895): cele două reguli de mai sus (0,4,1 și hover
   0,5,1) băteau .ml-row .btn.ok (0,3,0) — cu mouse-ul pe buton, imediat după clic, rămânea lime și
   confirmarea nu se vedea. Aceeași specificitate, puse DUPĂ ele → verdele --ok, ca pe dark, și sub mouse. */
html[data-theme="light"] .ml-row .btn.ok,
html[data-theme="light"] .ml-row .btn.ok:hover { background: var(--ok); border-color: var(--ok); }
/* Bordurile de STARE (selectat / deschis / focus) — 2026-09-27, audit C2125. Pe dark, accentul lime la
   alfa .45–.55 dă 3,4–5,6:1; pe light accentul e verdele închis #45700f, iar aceeași alfa pe alb iese
   palidă: 1,8–2,4:1 (sub pragul de 3:1 pentru indicatori). La .ssw-q și .ml-url bordura e SINGURUL semn
   al focusului (câmpul are outline:none). Alfa .85 → 4,26:1 pe alb, 3,4:1 pe rail (glass-2). Doar
   culoarea bordurii; structura (grosime, inel, fundal) rămâne cea din dark. Tentele lime cu muchie
   pală (.ssw-i.on, .sheet-p.on…, mai sus) au altă regulă și nu se ating. */
html[data-theme="light"] .rail-p.on,
html[data-theme="light"] .rail-help[aria-expanded="true"],
html[data-theme="light"] .ssw-q:focus-within,
html[data-theme="light"] .kpi-metric.on,
html[data-theme="light"] .rp-speed.on,
html[data-theme="light"] .ml-url:focus,
html[data-theme="light"] .slot-row.on,
html[data-theme="light"] .acc-role:has(input:checked) { border-color: rgba(var(--accent-rgb),.85); }
/* familia de tente lime CU text: pe alb, o alfa mică peste accentul închis dă gri-kaki; tenta
   corectă se face din lime-ul VIU, mai densă, cu o margine care o ține pe hârtie */
html[data-theme="light"] .ssw-i.on,
html[data-theme="light"] .goal-badge,
html[data-theme="light"] .rel-hi,
html[data-theme="light"] .clk-btn:not(.on),
html[data-theme="light"] .rec-badge-good,
html[data-theme="light"] .fin-badge.ok,
html[data-theme="light"] .cal-d.inrange,
html[data-theme="light"] .cd-chev,
html[data-theme="light"] .fnl-ads-toggle,
html[data-theme="light"] .sheet-p.on,
html[data-theme="light"] .period-clamp { background: rgba(var(--accent-fill-rgb),.32); border-color: rgba(163,199,40,.5); }
/* (2026-09-27, audit C0917) Regula de mai sus (0,2,1) bătea stările (.clk-btn.on / :hover și
   .fnl-ads-toggle:hover, 0,2,0): pe light, rândul de vizită cu click-urile deschise arăta ca unul
   închis și hover-ul nu schimba nimic. `.clk-btn.on` cade acum pe regula de bază (lime plin + cerneală,
   ca pe dark); hover-urile primesc aici aceeași structură ca pe dark — plin la .clk-btn, tentă dublă
   la .fnl-ads-toggle (pe dark .08 → .16; aici .32 → .5, cât încape fără să devină plin). */
@media (hover: hover) {
  html[data-theme="light"] .clk-btn:hover { background: var(--accent-fill); color: var(--accent-ink); }
  html[data-theme="light"] .fnl-ads-toggle:hover { background: rgba(var(--accent-fill-rgb),.5); }
}
/* stări semantice: umplere plină + text alb (pastelurile de dark cădeau sub 3:1 pe alb) */
html[data-theme="light"] .vbadge-ok,
html[data-theme="light"] .vbadge-warn { color: #fff; }
/* .alert de bază n-are culoare de bordură → moștenește currentColor (pe alb: chenar negru) */
/* (2026-09-27, audit C0918) + :not(.info): .alert.info are bordură (--stroke) și gradient propriu
   (--grad-soft, cu valoare dedicată pentru light); shorthand-ul `background:#fff` îl ștergea. */
html[data-theme="light"] .alert:not(.err):not(.ok):not(.warn):not(.info) { border-color: var(--stroke-2); background: #fff; }
/* (2026-09-27, audit C0935) unitățile h/m/s rămân estompate (convenția din design-system), dar .45 era
   calibrat pe dark (4,1:1): pe alb, cerneala #14171c la .45 dădea 2,94:1 pe cifrele-erou (text mare, prag
   3:1). .55 → 4,0:1. Opacitate, nu culoare: în .kpi.grad textul e gradient (text-fill transparent). */
html[data-theme="light"] .dur-u { opacity: .55; }
/* (2026-09-27, audit C1278) inelul de focus al comutatorului .psw (variantele A/B): alfa .2 e calibrat pe
   dark; pe alb, verdele închis la .2 abia se vedea (~1,3:1) → .45. Doar culoarea, structura e aceeași. */
html[data-theme="light"] .psw input:focus-visible + .psw-t { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .45); }
/* monograma site-ului: tentă pală + cerneală închisă, în aceeași nuanță stabilă */
html[data-theme="light"] .fav.fav-txt { background: hsl(var(--fh) 60% 92%); border-color: hsl(var(--fh) 45% 78%); color: hsl(var(--fh) 45% 32%); }
/* paleta ⌘K (identity/palette.js) își ia cutia din --bg-2; un panou flotant e ALB pe lumină */
html[data-theme="light"] #bxk-box { background: #fff; }
/* Abonament (lib/billing_page.php, stiluri inline): cardul „cel mai ales" — aceeași structură (bordură + gradient 55%) */
html[data-theme="light"] .blg-card.hot { border-color: rgba(101,163,13,.6); background: linear-gradient(180deg,rgba(var(--accent-fill-rgb),.30),var(--surface-2) 55%); }
/* formularul de site (lib/site_form.php, v73): tentele „selectat" sunt lime VIU, nu accent la alfa
   mică (= kaki pe alb); cardurile mari primesc o tentă pală, chip-ul ★ și cutia iconiței una densă */
html[data-theme="light"] .sf-goal.on,
html[data-theme="light"] .sf-kind:has(input:checked) { background: rgba(var(--accent-fill-rgb),.14); }
html[data-theme="light"] .sf-ki { background: rgba(var(--accent-fill-rgb),.32); }

/* ── Site-uri pe pauză (v76, 2026-09-15): panoul „ce site rămâne pornit" de pe Site-uri ──────────────
   Doar tokenuri, fără reguli pe temă: dark și light au aceeași structură. Rândul e o etichetă întreagă
   (clic oriunde bifează), iar insigna de stare folosește .fin-badge, ca pe lista de site-uri. */
.slot-panel { border-color: rgba(var(--warn-2-rgb),.42); }
.slot-panel > h2 { margin-bottom: 6px; }
.slot-list { display: grid; gap: 8px; margin: 0 0 16px; }
.slot-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-width: 0;
  border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface-2); cursor: pointer;
  transition: border-color .15s; }
.slot-row.on { border-color: rgba(var(--accent-rgb),.45); }
.slot-row input[type="checkbox"] { flex: none; margin: 0; }
.slot-row input[type="checkbox"]:disabled, .slot-row:has(input:disabled) { cursor: not-allowed; }
.slot-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Numele și rândul „domeniu · N vizualizări" se ÎMPACHETEAZĂ, nu se scurtează cu „…" (audit 2026-09-27,
   C0860): pe telefon „…" tăia exact cifra de vizualizări (singurul criteriu afișat pentru alegere) și
   făcea identice două site-uri cu același început de nume — iar alegerea se blochează apoi
   SITE_PAUSE_CHANGE_DAYS zile. Pe touch un title n-ar fi ajutat. overflow-wrap:anywhere rupe și
   domeniile lungi fără spații; coloana are deja min-width:0 (și minmax(0,1fr) pe mobil). */
.slot-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.slot-sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.slot-sub.slot-dep { white-space: normal; }
.slot-row .fin-badge { flex: none; }
.slot-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.slot-count { font-size: 13px; color: var(--muted); }
.slot-count b { color: var(--text); font-feature-settings: "tnum"; }
.slot-save:disabled { opacity: .55; cursor: default; }
.slot-rule { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 14px 0 0; }
.slot-rule a { color: var(--accent); }
/* Pe telefon: bifa și iconița rămân pe primul rând, lângă nume; insigna trece sub text, aliniată cu el. */
@media (max-width: 520px) {
  .slot-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 12px; row-gap: 7px; }
  /* poziții fixe: o insignă cu coloană explicită ar fi așezată prima de algoritmul grilei și ar muta iconița pe rândul 2 */
  .slot-row > * { grid-row: 1; grid-column: 2; }
  .slot-row > input[type="checkbox"] { grid-column: 1; }
  .slot-row > .slot-main { grid-column: 3; }
  .slot-row > .fin-badge { grid-row: 2; grid-column: 3; justify-self: start; }
  .slot-foot .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Funcții din alt plan, în meniu (cererea lui Liviu, 2026-09-15) ----------
   Intrarea rămâne un <a> din .nav (aceeași mărime, aceeași țintă), doar estompată, cu pastila planului
   minim. Click → fereastra .modal-plan (modal.js). Doar tokeni: dark și light au aceeași structură. */
.nav-plan { display: inline-flex; align-items: center; margin-left: auto; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; white-space: nowrap;
  color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.06); }
.nav a.plan-locked { color: var(--faint); }
.nav a.plan-locked .ico { opacity: .55; }
@media (hover: hover) {
  .nav a.plan-locked:hover { color: var(--muted); background: var(--glass); box-shadow: inset 0 0 0 1px var(--stroke); }
  .nav a.plan-locked:hover .ico { color: inherit; opacity: .8; }
}
@media (min-width: 1024px) {
  html.snav-min .nav a.plan-locked .nav-plan { position: absolute; top: 7px; right: 10px; width: 7px; height: 7px;
    margin: 0; padding: 0; border: 0; border-radius: 50%; overflow: hidden; text-indent: -99px; background: var(--accent); }
}
/* culoare estompată, nu opacitate: cu opacity pastila PRO/MAX pica sub 4.5:1 în tema luminoasă (review 2026-09-15) */
.btn.plan-locked { color: var(--muted); }
.btn.plan-locked .nav-plan { margin-left: 6px; }

.modal-plan { width: 440px; text-align: left; }
.mpl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mpl-head .nav-plan { margin-left: 0; }
.mpl-desc { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.mpl-cyc { margin-top: 16px; }
.mpl-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mpl-p { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 13px;
  border: 1px solid var(--stroke); background: var(--glass); }
.mpl-p.on { border-color: rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.06); }
.mpl-k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.mpl-l { font-size: 15px; color: var(--text); }
.mpl-price { font-size: 15px; font-weight: 600; color: var(--accent); font-feature-settings: "tnum"; }
.mpl-m { font-size: 12px; line-height: 1.45; color: var(--muted); }
.mpl-change { margin-top: 12px; }
.mpl-act { flex-wrap: wrap; }
@media (max-width: 420px) {
  .mpl-plans { grid-template-columns: 1fr; }
  .mpl-act .btn.sm { flex: 1 1 100%; height: 44px; justify-content: center; }
  .mpl-act [data-buy] { order: -1; }
}

/* Site-uri: numele e link spre Analytics, fără să arate altfel decât înainte */
a.sr-name { color: inherit; text-decoration: none; }
@media (hover: hover) { a.sr-name:hover { color: var(--accent); } }
/* Acces clienți: linkul abia creat */
.site-item.is-new > .site-row { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.5); border-radius: 12px; background: rgba(var(--accent-rgb),.05); }
.mpl-cyc .pp { border: 0; font-family: inherit; cursor: pointer; }
.mpl-cyc .pp:not(.on) { background: none; }
/* Recheck 15 sept 2026: comutatorul Lunar/Anual din fereastra de plan avea butoane de 32px la orice lățime.
   Doar în fereastră: ținte de 40px pe toată lățimea; bara de perioade din antetul paginilor rămâne cum e. */
.period-presets.mpl-cyc { display: flex; flex-wrap: nowrap; min-height: 50px; }
.mpl-cyc .pp { flex: 1 1 0; height: 40px; justify-content: center; }
/* acțiunile de 44px pe orice ecran de telefon sau tabletă, și ținut în lateral (înainte doar sub 420px) */
@media (max-width: 1023px), (pointer: coarse) {
  .mpl-act .btn.sm { height: 44px; }
}

/* =========================================================================
   TIPĂRIRE / „Salvează ca PDF" (audit 2026-09-27, C1985). Nu exista nicio regulă de print:
   (1) blocurile cu reveal (.jsa .kpi/.panel/…) rămâneau la opacity:0 până le atingea
       IntersectionObserver-ul din anim.js → de la pagina a doua PDF-ul ieșea gol;
   (2) fără „Grafică de fundal" (implicit în dialog) dispăreau fundalurile: cifra-erou cu gradient
       (background-clip:text) și marca ieșeau goale, barele și graficele pierdeau umpluturile, iar pe
       dark textul deschis ieșea gri-pal pe hârtie albă;
   (3) la lățimea A4 pagina intră în layoutul ≤1023px → antetul mobil, bara de jos (fixed) și
       glow-urile fixe se tipăreau pe FIECARE pagină, peste conținut.
   Reparația: reveal-ul forțat vizibil (fără tranziții — la trecerea în print ar porni de la 0),
   culorile tipărite exact ca pe ecran (print-color-adjust:exact, moștenit de toată pagina — așa
   gradientul, barele și tema aleasă ies ca pe ecran; structura temelor nu se atinge), shell-ul
   interactiv ascuns și cardurile nerupte între pagini.
   ========================================================================= */
@media print {
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* + descendenții cu reveal propriu (opacity:0 până la .panel.in): donutul, legenda și rândurile
     de activitate ale panourilor nederulate ieșeau goale în PDF — aceeași listă ca la reduced-motion
     (recenzia t81, 2026-09-28) */
  .jsa .kpi, .jsa .panel, .jsa .eyebrow, .jsa .ehint, .jsa .tabs, .jsa .heat-toolbar,
  .jsa .donut, .jsa .legend .li, .jsa .act-row {
    opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .rail, .sidenav, .m-head, .tabbar, .sheet, .sheet-backdrop, #bgGlows, #pjaxbar, .share-burger { display: none !important; }
  body::before, body::after { display: none; }
  body { padding-left: 0 !important; }
  .page-head .period { position: static; }
  .kpi, .card { break-inside: avoid; }
}

/* =========================================================================
   CULORI FORȚATE (Windows „Contrast ridicat”) — 2026-09-27, audit C1277.
   În modul ăsta browserul înlocuiește fundalurile și umbrele cu culorile sistemului, deci tot ce
   arăta o stare DOAR prin background/box-shadow ieșea identic bifat/nebifat: punctul radio-ului
   (obiectivul principal), bifa (SVG cu cerneală fixă, invizibilă pe negru), comutatorul .psw al
   variantelor A/B, pastila de perioadă activă, pagina curentă din meniu și tab-ul curent de jos.
   Regulile stau DOAR aici: aspectul obișnuit (dark și light) nu se schimbă cu nimic. Culorile sunt
   cele de sistem (CanvasText / Highlight), singurele care au sens în acest mod.
   ========================================================================= */
@media (forced-colors: active) {
  input[type="radio"]:checked::after { forced-color-adjust: none; background: CanvasText; }
  /* bifa devine mască (aceeași formă) umplută cu culoarea textului sistemului */
  input[type="checkbox"]:checked::after { forced-color-adjust: none; background: CanvasText;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310130a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310130a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
  .psw-t::after { forced-color-adjust: none; background: CanvasText; }
  .psw input:checked + .psw-t { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .psw input:checked + .psw-t::after { background: HighlightText; }
  /* contur pe interior: coloana de navigare taie ce iese în afară */
  .pp.on, .nav a.on, .tbi.on { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ---------- „Companie / client” și „Campanie” — listele din formularul site-ului (2026-10-06, assets/labels.js) ----------
   Butonul arată ca un câmp (aceeași înălțime, fundal și chenar ca input-urile); lista se deschide pe <body>, sub el, în
   tonul listei de proiecte (.ssw-pop): fundal opac --pop-ssw, chenar --stroke-2, iar litera fiecărui client are nuanța
   dungii lui de pe Site-uri și Panou (favicon_hue). Pe ecranele tactile rândurile au 44px. Doar tokenuri: light = dark. */
label.fld.lp { min-width: 0; }
.lp-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 32px; padding: 0 10px 0 7px;
  background: var(--input-bg); border: 1px solid var(--input-line); border-radius: 10px; color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lp-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
@media (hover: hover) { .lp-btn:hover { border-color: var(--stroke-2); } }
.lp.is-open .lp-btn { border-color: var(--accent); box-shadow: var(--focus-ring); }
.lp.is-err .lp-btn { border-color: var(--danger); }
.lp-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-v.lp-ph { color: var(--faint); font-weight: 400; padding-left: 5px; }
.lp-flag { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
.lp-flag .ico { width: 14px; height: 14px; }
.lp-flag.lp-flag-off { color: var(--faint); }
.ico.lp-chev { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; transition: transform .15s; }
.lp.is-open .ico.lp-chev { transform: rotate(180deg); }
.lp-err { color: var(--danger); font-size: 12px; line-height: 1.45; }
.lp-note { color: var(--muted); font-size: 12px; line-height: 1.45; }
.lp-err[hidden], .lp-note[hidden] { display: none; }
@media (max-width: 1023px), (pointer: coarse) { .lp-btn { font-size: 16px; } }   /* ca input-urile de lângă el */

.lp-pop { position: absolute; z-index: 115; display: flex; flex-direction: column; max-height: min(420px, 70vh); overflow: hidden;
  background: var(--pop-ssw); border: 1px solid var(--stroke-2); border-radius: 14px; color: var(--text); font-size: 13px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,calc(.85*var(--shk))), 0 0 0 1px rgba(var(--accent-rgb),.05);
  opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; }
.lp-pop.up { transform: translateY(4px); }
.lp-pop.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lp-pop, .ico.lp-chev { transition: none; } .lp-pop { transform: none; } }
.lp-head { padding: 10px 10px 8px; border-bottom: 1px solid var(--stroke); }
/* căutarea din listă: aceeași înfățișare ca .ssw-q din lista de proiecte, dar clasă PROPRIE — nav.js tratează orice
   `.ssw-q input` ca filtrul listei de proiecte și căuta `.ssw-pop` în jurul ei (eroare în consolă la fiecare literă) */
.lp-q { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 9px;
  background: rgba(var(--veil-rgb),.04); border: 1px solid var(--stroke); transition: border-color .15s; }
.lp-q:focus-within { border-color: rgba(var(--accent-rgb),.5); }
html[data-theme="light"] .lp-q:focus-within { border-color: rgba(var(--accent-rgb),.85); }   /* ca .ssw-q pe light (C2125) */
.lp-q .ico { width: 14px; height: 14px; color: var(--faint); flex-shrink: 0; }
.lp-q input { flex: 1; min-width: 0; height: auto; background: none; border: none; padding: 0; margin: 0;
  font-family: "Hanken Grotesk", sans-serif; font-weight: 400; font-size: 13px; color: var(--text); }
.lp-q input:focus { outline: none; box-shadow: none; }
.lp-q input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.lp-row { display: flex; align-items: center; gap: 2px; border-radius: 9px; }
.lp-row + .lp-row { margin-top: 1px; }
@media (hover: hover) { .lp-row:not(.on):hover { background: var(--glass-2); } }
.lp-row.on { background: rgba(var(--accent-rgb),.09); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.25); }
.lp-opt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 6px 10px; border: 0;
  border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.lp-opt:focus-visible, .lp-del:focus-visible, .lp-add:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lp-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lp-m { flex-shrink: 0; font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-ck { display: grid; place-items: center; flex-shrink: 0; color: var(--accent); }
.lp-ck .ico { width: 15px; height: 15px; }
.lp-del { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: none; color: var(--faint); cursor: pointer; transition: color .12s, background .12s; }
.lp-del .ico { width: 15px; height: 15px; }
@media (hover: hover) { .lp-del:hover { color: var(--danger); background: rgba(var(--danger-rgb),.1); } }
.lp-empty { margin: 0; padding: 12px 10px; color: var(--faint); font-size: 12.5px; line-height: 1.5; }
.lp-g { margin: 0; padding: 8px 10px 4px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.lp-foot { padding: 6px; border-top: 1px solid var(--stroke); background: rgba(var(--accent-rgb),.04); }
.lp-add { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.lp-add[hidden] { display: none; }
.lp-add .ico { width: 16px; height: 16px; flex-shrink: 0; }
.lp-add span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .lp-add:hover { background: rgba(var(--accent-rgb),.1); } }
.lp-newf { display: flex; gap: 6px; align-items: center; margin: 0; }
.lp-newf[hidden] { display: none; }
.lp-newf input { flex: 1; min-width: 0; height: 36px; }
.lp-newf .btn { height: 36px; flex-shrink: 0; }
@media (pointer: coarse) {
  .lp-opt, .lp-add { min-height: 44px; }
  .lp-del { width: 44px; height: 44px; }
  .lp-newf input, .lp-newf .btn { height: 44px; }
}
/* fereastra de ștergere (aceleași piese ca restul ferestrelor): badge roșu, ce se întâmplă cu conturile de client, eroarea */
.modal-badge.is-danger { background: rgba(var(--danger-rgb),.12); color: var(--danger); }
.lp-modal .modal-fld select, .lp-modal .modal-fld input { width: 100%; min-width: 0; }
.lp-modal .lp-mnew[hidden] { display: none; }
.lp-imp { margin: 14px 0 0; padding: 0 0 0 18px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.lp-imp li + li { margin-top: 4px; }
.lp-imp b { color: var(--text); font-weight: 600; }
.lp-imp .lp-wait { color: var(--faint); }
.lp-merr { margin: 12px 0 0; color: var(--danger); font-size: 12.5px; line-height: 1.5; }
.lp-imp[hidden], .lp-merr[hidden] { display: none; }
/* „Alege compania” pe grupul fără companie / client de pe pagina Site-uri */
.client-head .ch-assign { align-self: center; }
/* pastila de ordonare „Companie / client”: pe ecranele foarte înguste doar „Companie”, ca pastilele Panoului să rămână pe un rând */
@media (max-width: 360px) { .home-sort .pp-tail { display: none; } }

/* =========================================================================
   AUDITUL UI DIN 7 OCT 2026 — punctele alese de Liviu (raport: claude.ai/artifact/Q2wXQwVDCHZhvRhsWsByMz)
   Totul pe tokenurile existente: dark și light au aceeași structură, se schimbă doar culorile.
   Comportamentul (pastila de perioadă, „?", perechile, antetul lipit, „Pe scurt") e în assets/ux.js.
   ========================================================================= */

/* ---------- 3 · Antetul pe un rând: titlul + „acum pe site" în stânga, perioada în dreapta ----------
   Selectorul nu mai e lipit sus pe toată pagina (acoperea titlurile secțiunilor la derulare): când antetul
   iese din ecran, apare pastila plutitoare „7 zile ▾" (.per-float), care deschide același selector. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.page-head > :first-child { margin-bottom: 0; min-width: 0; flex: 0 1 auto; }
.page-head .period { position: static !important; margin: 0 !important; width: auto; }
@media (min-width: 1024px) { .page-head .period { margin-left: auto !important; } }
.period-notes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.period-notes .period-clamp { margin-left: 0; }
.per-pill { display: none; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 14px; border-radius: 999px;
  border: 1px solid var(--stroke-2); background: var(--glass-2); color: var(--text); cursor: pointer;
  font: 600 13px/1 inherit; white-space: nowrap; flex: none; }
.per-pill .ico { width: 15px; height: 15px; color: var(--accent); }
.per-pill .per-chev { width: 14px; height: 14px; opacity: .7; transition: transform .15s; }
.per-pill[aria-expanded="true"] .per-chev { transform: rotate(180deg); }
.per-float { position: fixed; z-index: 95; top: 12px; right: 24px; display: inline-flex; box-shadow: var(--shadow-pop);
  background: var(--pop-cal); }
.per-float[hidden] { display: none !important; }
.per-pop { position: fixed; z-index: 130; padding: 14px; border-radius: var(--r); border: 1px solid var(--stroke-2);
  background: var(--pop-cal); box-shadow: var(--shadow-pop); width: max-content; max-width: calc(100vw - 24px); }
.per-pop[hidden] { display: none !important; }
.per-pop .period { display: flex !important; flex-direction: column; align-items: stretch; gap: 8px; }
.per-pop .period .period-presets { flex-wrap: wrap; overflow: visible; width: auto; }
.per-pop .period .period-custom, .per-pop .period .cal-trigger { width: 100%; justify-content: center; }
@media (max-width: 1023px) {
  .page-head .h-row { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; }
  .page-head .h-row h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .h-row .per-pill { display: inline-flex; margin-left: auto; }
  .page-head > :first-child { width: 100%; }
  .page-head .period { display: none !important; }
  .per-pop .period { display: flex !important; }
  .per-float { top: calc(64px + env(safe-area-inset-top) + 8px); right: 12px; }
  /* 2026-10-08 (Liviu: „selectorul de perioadă îl deschizi din partea de sus, dar apare în partea de jos pe mobil”):
     nu mai e foaie lipită de marginea de jos, ci fereastră sub pastila care a deschis-o (ux.js, perPlace pune `top`),
     cu 12 px de margine în stânga și în dreapta. Înălțimea e cât rămâne până la bara de jos; restul se derulează înăuntru. */
  .per-pop { left: 12px !important; right: 12px !important; bottom: auto !important; width: auto; max-width: none;
    overflow-y: auto; overscroll-behavior: contain; }
  .per-pop .period .pp { flex: 1 0 auto; justify-content: center; }
  /* calendarul stă ÎN fereastră, pe rândul lui, sub butonul „Alege perioada” (formularul e flex pe rând: fără wrap,
     calendarul se așeza lângă buton și ieșea din fereastră în dreapta), nu plutind peste pagină */
  .per-pop .period-custom { flex-wrap: wrap; }
  .per-pop .cal-pop { position: static; flex: 1 0 100%; box-sizing: border-box; margin-top: 10px; width: 100%; max-width: none;
    box-shadow: none; animation: none; }
  /* „Dintotdeauna” ajunge singur pe al doilea rând: linia de despărțire din stânga lui (de pe desktop) nu mai are ce despărți */
  .per-pop .pp-all { margin-left: 0; }
  .per-pop .pp-all::before { display: none; }
}

/* ---------- 2 · Cardurile cu cifre: „față de ce" și „?" ---------- */
.kpi .delta { flex-wrap: wrap; row-gap: 2px; }
.kpi .delta .vs { font-weight: 500; color: var(--faint); margin-left: 4px; }
.kpi .delta .vs b { font-weight: 600; color: var(--muted); }
.kq { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--stroke-2); background: transparent; color: var(--faint); cursor: pointer;
  font: 700 10px/1 inherit; letter-spacing: 0; text-transform: none; vertical-align: 1px; flex: none; }
.kq::after { content: ""; position: absolute; inset: -12px; }   /* ținta de atingere: 40 px, cât butoanele de pe telefon */
@media (hover: hover) { .kq:hover { color: var(--text); border-color: var(--muted); } }
.kq[aria-expanded="true"] { color: var(--text); border-color: var(--muted); }
.kpi .lbl { display: flex; align-items: center; }
.kpi .lbl .kq { margin-left: 7px; }
.kq-pop { position: fixed; z-index: 140; max-width: min(320px, calc(100vw - 24px)); padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--stroke-2); background: var(--pop-tip); box-shadow: var(--shadow-pop);
  color: var(--text); font-size: 12.5px; line-height: 1.55; text-transform: none; letter-spacing: 0; font-weight: 400; }
.kq-pop[hidden] { display: none !important; }
.kq-pop a { color: var(--accent); }
.kpi.kpi-be .val { font-size: 22px; }

/* ---------- 11 · Funnel: scăderile neutre, doar cea mai mare pierdere iese în evidență ---------- */
.cf-drop { color: var(--faint); background: transparent; padding: 1px 0 1px 4px; }
.cf-drop.cf-drop-max { color: var(--danger); background: rgba(var(--danger-rgb), .12); padding: 1px 7px; }
.cf-loss { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: var(--danger); background: rgba(var(--danger-rgb), .1); vertical-align: 1px; white-space: nowrap; }
.cf-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cf-more .ico { width: 13px; height: 13px; transform: rotate(-90deg); }
@media (hover: hover) { .cf-more:hover { text-decoration: underline; } }

/* ---------- 12 · Bare în loc de gogoși (+ 7: rândurile filtrează pagina) ---------- */
.bars-share { gap: 4px; }
.bars-share .barrow { grid-template-columns: minmax(64px, 118px) 1fr auto; padding: 6px 8px; margin: 0 -8px; border-radius: 9px; }
.bars-share .barrow .bn { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 8px; min-width: 76px; color: var(--text); }
.bars-share .bp { min-width: 34px; text-align: right; font-size: 12px; color: var(--faint); }
a.barrow.bar-f { color: inherit; text-decoration: none; cursor: pointer; }
@media (hover: hover) { a.barrow.bar-f:hover { background: rgba(var(--veil-rgb), .05); } }
a.barrow.bar-f.on { background: rgba(var(--accent-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35); }
a.pth-f { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--stroke-2); }
@media (hover: hover) { a.pth-f:hover { color: var(--accent); border-bottom-color: currentColor; } }

/* ---------- 7 · Pastilele filtrului activ ---------- */
.flt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -4px 0 16px; }
.flt-k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.flt-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 5px 0 12px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .12); font-size: 13px; font-weight: 600; color: var(--text); max-width: 100%; }
.flt-chip .flt-n { font-weight: 500; color: var(--muted); }
.flt-chip .flt-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.flt-x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--text); background: rgba(var(--veil-rgb), .08); flex: none; }
.flt-x .ico { width: 12px; height: 12px; }
.flt-note { font-size: 12.5px; color: var(--muted); }

/* ---------- 14 · „Pe scurt" ---------- */
.pescurt { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 18px; margin: 0 0 16px; }
.pescurt .ps-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.pescurt .ps-ico .ico { width: 16px; height: 16px; }
.pescurt p { margin: 0; flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.pescurt .ps-link { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.pescurt .ps-link .ico { width: 13px; height: 13px; transform: rotate(-90deg); }
.pescurt .ps-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -6px -4px 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--faint); cursor: pointer; }
.pescurt .ps-x .ico { width: 14px; height: 14px; }
@media (hover: hover) { .pescurt .ps-x:hover { color: var(--text); background: rgba(var(--veil-rgb), .06); } }
@media (max-width: 640px) { .pescurt { flex-wrap: wrap; } .pescurt p { flex-basis: calc(100% - 90px); } .pescurt .ps-link { order: 3; margin-left: 44px; } }

/* ---------- 5 · Perechi aliniate, cardul singur pe toată lățimea, concluziile grilei de ore ---------- */
.dash-cell > .panel.eq { align-self: stretch !important; }
.dash-cell.dash-full:not(:has(.dash-tabs)) .eyebrow { min-height: 0; }
.dash-cell.dash-full .dash-hint:has(.ehint.is-empty) { display: none; }
.act-split { container-type: inline-size; }
.act-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.act-sum b { display: block; font: 700 18px/1.15 "Bricolage Grotesque", sans-serif; color: var(--text); font-feature-settings: "tnum"; }
.act-sum span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.act-split:has(.act-sum) .act-peak { display: none; }
/* 2026-10-08: grila crește odată cu cardul, până la ~27 px pe pătrat (760 px), ca să se citească de la distanță; concluziile
   trec în dreapta abia când grila are loc de cel puțin ~20 px pe pătrat lângă ele. Interogările privesc .act-split (containerul),
   iar rândul îl face .act-in, copilul lui — vezi comentariul din analytics_sections. */
.act-main { max-width: 760px; }
@container (min-width: 900px) {
  .act-in { display: flex; align-items: center; gap: 40px; }
  .act-in .act-main { flex: 1 1 auto; min-width: 0; }
  .act-in .act-sum { flex: 0 0 236px; grid-template-columns: 1fr; gap: 20px; margin-top: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--stroke); }
  .act-sum b { font-size: 22px; }
}
/* pe telefon cele trei concluzii, una sub alta: pe trei coloane de ~95 px textul se rupea pe patru rânduri */
@container (max-width: 479px) { .act-sum { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- 1 · Vizitele individuale, la cerere ---------- */
.visits-sec { margin-top: 26px; }
.visits-sec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap;
  padding: 18px 22px; border-radius: var(--r); border: 1px solid var(--stroke); background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; }
.visits-sec > summary::-webkit-details-marker { display: none; }
.visits-sec .vl-txt { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.visits-sec .vl-t { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.visits-sec .vl-t::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px rgba(var(--accent-rgb),calc(.85*var(--glow))); }
.visits-sec .vl-sub { font-size: 13.5px; color: var(--muted); }
.visits-sec .vl-btn { flex: none; gap: 6px; }
.visits-sec .vl-btn .ico { width: 14px; height: 14px; transition: transform .15s; }
.visits-sec .vl-close { display: none; }
.visits-sec[open] .vl-open { display: none; }
.visits-sec[open] .vl-close { display: inline; }
.visits-sec[open] .vl-btn .ico { transform: rotate(180deg); }
.visits-sec .visits-body { margin-top: 14px; }
.visits-sec .visits-body .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.visits-sec .visits-body .sec-head .ehint { margin: 0; }

/* ---------- 17 · Tabelele lungi: data pe un rând, coloanele încap, antetul rămâne sus ---------- */
.tbl.visits .v-when { white-space: nowrap; }
.tbl.visits .v-dev { white-space: nowrap; }
@media (min-width: 1024px) {
  .tbl.visits td .conv-rate { min-width: 96px; }
  .tbl.visits .v-ref { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.th-stick { position: fixed; z-index: 90; top: 0; display: flex; align-items: center; height: 42px; overflow: hidden;
  border: 1px solid var(--stroke-2); border-top: 0; border-radius: 0 0 12px 12px; background: var(--pop-tip); box-shadow: var(--shadow-pop); }
.th-stick::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 400px; background: var(--bg); }   /* nimic din tabel nu se vede DEASUPRA antetului */
.th-stick[hidden] { display: none !important; }
.th-stick span { flex: none; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.th-stick span.n { text-align: right; }

/* ---------- 9 · Site nou: pașii până la prima vizită ---------- */
.onb { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px 44px; margin-top: 6px; }
.onb h2 { margin: 18px 0 8px; font: 700 26px/1.15 "Bricolage Grotesque", sans-serif; }
.onb p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 44ch; }
.onb-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.onb-pulse { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .35); }
.onb-pulse span { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .14), 0 0 14px rgba(var(--accent-rgb), calc(.7 * var(--glow))); }
.onb-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.onb-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
.onb-steps li + li { border-top: 1px solid var(--stroke); }
.onb-steps .si { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 "Bricolage Grotesque", sans-serif; border: 1px solid var(--stroke-2); color: var(--muted); }
.onb-steps .si .ico { width: 15px; height: 15px; }
.onb-steps li.done .si { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.onb-steps li.now .si { border-color: rgba(var(--accent-rgb), .7); color: var(--text); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
.onb-steps b { display: block; font-size: 14.5px; margin-top: 4px; }
.onb-steps li:not(.done):not(.now) b { color: var(--muted); }
.onb-steps span:not(.si) { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
@media (max-width: 1023px) { .onb { grid-template-columns: 1fr; padding: 26px 20px; gap: 22px; } }

/* ---------- 8 · Un singur accent pe ecran: butoanele de pe rânduri sunt discrete, „NOU" e un punct ---------- */
.tbl td .btn:not(.ghost):not(.danger) { background: transparent; color: var(--text); border-color: var(--stroke-2); box-shadow: none; }
.tbl td .btn:not(.ghost):not(.danger) .ico { color: var(--accent); }
@media (hover: hover) { .tbl td .btn:not(.ghost):not(.danger):hover { border-color: var(--muted); filter: none; } }
.nav-new { font-size: 0 !important; width: 7px; height: 7px; min-width: 0; padding: 0 !important; border-radius: 50%; margin-right: 6px; box-shadow: inset 0 0 0 1px var(--on-edge) !important; }   /* pe light, inel verde închis (audit 176); pe dark = umplutura */
/* cât antetul tabelului e lipit sus, pastila plutitoare de perioadă se retrage (i-ar acoperi ultima coloană) */
.th-stuck .per-float { display: none !important; }
/* #21 — „fără TVA” lângă sumele de vânzare: aceeași bază ca Financiarul, scrisă la vedere */
.vat-lbl { color: var(--muted); font-weight: 500; font-size: .88em; white-space: nowrap; letter-spacing: 0; }
.tbl th .vat-lbl, .kpi .lbl .vat-lbl { font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; opacity: .72; }
/* #18 — comenzile pe graficul mare: linie punctată + numărul comenzilor jos, totalul în antet, rândul din tooltip */
.ord-layer { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; z-index: 1; }
.ord-pin { position: absolute; top: 0; bottom: 0; width: 0; }
.ord-line { position: absolute; left: 0; top: 18px; bottom: 30px; border-left: 1px dashed rgba(var(--accent-rgb), .4); }
.ord-dot { position: absolute; left: 0; bottom: 6px; transform: translateX(-50%); box-sizing: border-box; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--accent);
  color: var(--text); font: 700 11px/1 "Bricolage Grotesque", sans-serif; font-feature-settings: "tnum"; }
.ord-tip { position: absolute; left: 10px; top: 0; white-space: nowrap; padding: 5px 10px; border-radius: 9px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--stroke-2); color: var(--muted); box-shadow: var(--shadow-pop); }
.ord-tip-l { left: auto; right: 10px; }
.ord-tip b { color: var(--text); font-weight: 600; }
.dc-stat.ord-leg { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.dc-stat.ord-leg i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); display: inline-block; flex: none; }
.dc-tip .dc-tip-e { color: var(--text); font-size: 11px; margin-top: 3px; }
/* multe zile: fără liniile punctate (pe 30 de zile erau 27 de linii), iar mai departe reperul devine un punct;
   cifra rămâne în tooltip */
.ord-d2 .ord-line, .ord-d3 .ord-line { display: none; }
.ord-d3 .ord-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; bottom: 9px; border-width: 2px; }
@media (max-width: 899px) {
  .ord-d2 .ord-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; bottom: 9px; border-width: 2px; }
}
@media (max-width: 599px) {
  .ord-tip { display: none; }   /* pe telefon, ziua cu cele mai multe comenzi se vede în tooltip */
  .dc-stat.ord-leg { margin-left: 0; }
}

/* =========================================================================
   #06 — PANOUL CA TABEL (auditul UI din 7 oct 2026, ales de Liviu): un singur card per client, rânduri
   despărțite de o linie, antetul coloanelor deasupra cifrelor; acțiunile discrete (rândul întreg deschide
   deja Analytics). Doar pe Panou (.cg-table) — pagina Site-uri păstrează cardurile ei.
   ========================================================================= */
.camp-group.cg-table { gap: 0; background: var(--surface-2); border: 1px solid var(--stroke); border-radius: var(--r); overflow: hidden; }
.cg-table .site-item { border: 0; border-radius: 0; background: transparent; overflow: visible; }
/* linia doar între rândurile VIZIBILE: căutarea ascunde rânduri, iar primul rămas n-are linie deasupra */
.cg-table .site-item:not(.hidden-filtered) ~ .site-item:not(.hidden-filtered) { border-top: 1px solid var(--stroke); }
.cg-table .sr-head { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--stroke);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.cg-table .sr-head .h-site { flex: 1 1 auto; padding-left: 32px; }
.cg-table .sr-head .sr-stats { margin-left: auto; font-size: inherit; color: inherit; }
.cg-table .sr-head .sr-stats .st { justify-content: flex-end; }
.cg-table .sr-head .h-act, .cg-table .sr-actions { width: 70px; flex: none; justify-content: flex-end; }
.st-l { display: none; font-style: normal; }
@media (min-width: 1200px) {
  .cg-table .sr-stats .st .ico { display: none; }   /* sensul îl dă antetul */
}
@media (hover: hover) and (min-width: 1200px) {
  .cg-table .sr-actions { opacity: .4; transition: opacity .15s; }
  .cg-table .site-row:hover .sr-actions, .cg-table .sr-actions:focus-within { opacity: 1; }
}
@media (max-width: 1199px) {
  .cg-table .sr-head { display: none; }
  .cg-table .sr-actions { width: auto; }
  /* cifrele sub nume: cuvântul lângă cifră, în locul iconiței */
  .cg-table .sr-stats .st .ico { display: none; }
  .cg-table .sr-stats .st { width: auto; gap: 6px; align-items: baseline; }
  .cg-table .st-l { display: inline; font-size: 12px; color: var(--muted); }
}
/* tabletă: cifrele din rânduri diferite pornesc din aceleași coloane (pe telefon e deja o grilă de 2) */
@media (min-width: 561px) and (max-width: 1199px) { .cg-table .sr-stats .st:not(.st-money) { min-width: 150px; } }

/* #16 — meniul: munca sus, contul jos. Blocul contului stă lipit de Temă, la fundul coloanei (margin-top:auto
   trece de la .sn-theme la el); restrâns (doar icoane), itemii lui se comportă ca ai meniului de sus. */
.sidenav .nav-acct { margin-top: auto; padding: 8px 0 6px; border-top: 1px solid var(--stroke); }
.sidenav .nav-acct + .sn-theme { margin-top: 0; }

/* #22 — Heatmaps: clasamentul lângă hartă, pe ecrane late și benzi înguste (vezi view_heatmap) */
.heat-split .hs-stage { min-width: 0; }
@media (min-width: 1200px) {
  .heat-split.hs-phone { display: grid; grid-template-columns: min(var(--hs-w), 50%) minmax(0, 1fr); gap: 28px; align-items: start; }
  .heat-split.hs-phone .hs-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain; min-width: 0; }
  .heat-split.hs-phone .hs-side > .eyebrow:first-child { margin-top: 0; }
}
@media (min-width: 1600px) {
  .heat-split.hs-tab { display: grid; grid-template-columns: min(var(--hs-w), 60%) minmax(0, 1fr); gap: 28px; align-items: start; }
  .heat-split.hs-tab .hs-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain; min-width: 0; }
  .heat-split.hs-tab .hs-side > .eyebrow:first-child { margin-top: 0; }
}

/* #23 — Campanii: conexiunea Facebook expirată = o singură stare, în roșu, cu „Reconectează” ca singur buton */
.meta-status.meta-card.expired { border-color: rgba(var(--danger-rgb), .45); }
.meta-card.expired .ms-ic { background: rgba(var(--danger-rgb), .12); border-color: rgba(var(--danger-rgb), .3); }
.meta-card.expired .ms-ic .ico { color: var(--danger); }
.meta-card .ms-title-exp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.meta-status .ms-bad { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--danger); background: rgba(var(--danger-rgb), .12); white-space: nowrap; }

/* #24 — Financiar: numărul de vânzări scris sub fiecare zi (nu bare pe axa de lei) */
.sales-strip { position: relative; height: 28px; margin-top: 8px; border-top: 1px dashed var(--stroke); }
.sales-strip span { position: absolute; top: 6px; transform: translateX(-50%); box-sizing: border-box; min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 999px; display: grid; place-items: center; font: 700 11px/1 "Bricolage Grotesque", sans-serif; font-feature-settings: "tnum";
  color: var(--text); background: rgba(var(--veil-rgb), .08); }
.sales-strip span.z { color: var(--faint); background: transparent; }
.sales-strip span.at-start { transform: none; }
.sales-strip span.at-end { transform: translateX(-100%); }
/* 17–45 de zile: cifre mai mici, ca vecinele să nu se atingă (~30 px pe zi la 1440, ~21 px la 1024) */
.sales-strip.strip-d2 span { min-width: 18px; height: 18px; padding: 0 4px; font-size: 10.5px; top: 7px; }
/* aici capetele rămân centrate pe ziua lor (ies puțin în margine): trase în interior, se suprapuneau peste vecina */
.sales-strip.strip-d2 span.at-start, .sales-strip.strip-d2 span.at-end { transform: translateX(-50%); }
@media (max-width: 899px) {
  /* multe zile pe ecran îngust: punct pe ziua cu vânzări, cifra în tooltip */
  .sales-strip.strip-d2 span { min-width: 7px; width: 7px; height: 7px; padding: 0; top: 10px; font-size: 0; background: var(--text); opacity: .55; }
}

/* =========================================================================
   #25 — „SETĂRI FINANCIARE”: nota de TVA + butonul sus; panoul = <dialog> nativ, cu un singur „Salvează”
   lipit jos. Aceeași gramatică vizuală ca .modal-card (pulseConfirm); pe telefon, foaie care urcă de jos.
   ========================================================================= */
.fin-set { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 0 2px 12px; }
.fin-set-note { margin: 0; flex: 1 1 320px; min-width: 0; }
.fin-set .fin-set-btn { flex: none; }
.fin-set .fin-set-btn .ico { width: 15px; height: 15px; }
.fin-dlg { padding: 0; width: min(560px, calc(100vw - 32px)); max-height: min(86dvh, 780px); overflow: hidden;
  color: var(--text); background: var(--pop-modal); border: 1px solid var(--stroke-2); border-radius: 18px;
  box-shadow: 0 40px 90px -24px rgba(0,0,0,calc(.85*var(--shk))), 0 0 0 1px rgba(var(--accent-rgb),.05); overscroll-behavior: contain; }
.fin-dlg::backdrop { background: rgba(5,6,8,.72); }
.fin-dlg[open] { display: flex; flex-direction: column; animation: finDlgIn .18s ease; }
@keyframes finDlgIn { from { opacity: 0; } to { opacity: 1; } }
.fin-dlg-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.fin-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--stroke); }
.fin-dlg-head h2 { margin: 0; font-size: 18px; }
.fin-dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px; overscroll-behavior: contain; }
.fin-dlg-sec { padding: 16px 0 18px; }
.fin-dlg-sec + .fin-dlg-sec { border-top: 1px solid var(--stroke); }
.fin-dlg-sec h3 { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fin-dlg-row { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.fin-dlg-row .fld { flex: 1 1 170px; min-width: 0; margin: 0; }
.fin-dlg-row .fld select, .fin-dlg-row .fld input { width: 100%; max-width: 100%; }
.fin-dlg-row .fld-wide { flex: 1.6 1 230px; }
.fin-dlg-head h2:focus { outline: none; }
.fin-dlg-note { margin: 10px 2px 0; }
.fin-dlg-val { margin: 0; font-size: 15px; }
.fin-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--stroke); }
.fin-dlg .alert { margin: 12px 20px 0; }
@media (pointer: coarse) { html:has(.fin-dlg[open]) { overflow: hidden; } }
@media (max-width: 600px) {
  .fin-dlg { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .fin-dlg-foot .btn { flex: 1; justify-content: center; }
}

/* #25 — Setări site: „Salvează” rămâne la vedere cât derulezi formularul (deasupra barei de jos, pe telefon) */
.sf-actions.sf-sticky { position: sticky; bottom: 0; z-index: 6; margin-top: 16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--tabbar-bg); border: 1px solid var(--stroke); border-bottom: 0; border-radius: 14px 14px 0 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 1023px) { .sf-actions.sf-sticky { bottom: calc(68px + env(safe-area-inset-bottom)); padding-bottom: 12px; border-bottom: 1px solid var(--stroke); border-radius: 14px; } }

/* #28 — Site-uri: ștergerea la capătul panoului de detalii, despărțită de restul acțiunilor */
.sd-danger { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--stroke); }
.sd-danger .btn .ico { width: 14px; height: 14px; }

/* =========================================================================
   #19 — SCHELET LA ÎNCĂRCARE: forma paginii în gri, cât vine pagina următoare (nav.js → skelSchedule) și cât se
   încarcă o înregistrare. Fără mișcare pentru cine a cerut asta din sistem.
   ========================================================================= */
.sk { display: block; position: relative; overflow: hidden; border-radius: var(--r); background: rgba(var(--veil-rgb), .055); }
.sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(var(--veil-rgb), .06), transparent); animation: skShim 1.3s ease-in-out infinite; }
@keyframes skShim { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { display: none; } }
main.wrap.skel-on > :not(.pjax-skel) { display: none !important; }
.pjax-skel { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; animation: skIn .2s ease; }
@keyframes skIn { from { opacity: 0; } to { opacity: 1; } }
.sk-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sk-h1 { width: min(260px, 55%); height: 34px; border-radius: 10px; }
.sk-pill { width: 116px; height: 38px; border-radius: 999px; }
.sk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sk-kpi { height: 132px; }
.sk-chart { height: 280px; }
.sk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sk-panel { height: 240px; }
@media (max-width: 760px) {
  .sk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sk-kpi { height: 110px; }
  .sk-chart { height: 220px; }
  .sk-two { grid-template-columns: 1fr; }
}
/* înregistrarea, cât se încarcă: o pagină schițată în spatele mesajului */
.rp-hint.rp-hint-load { align-content: end; padding-bottom: 14%;
  background:
    linear-gradient(rgba(var(--veil-rgb),.08), rgba(var(--veil-rgb),.08)) 6% 6% / 20% 14px no-repeat,
    linear-gradient(rgba(var(--veil-rgb),.06), rgba(var(--veil-rgb),.06)) 94% 6% / 28% 10px no-repeat,
    linear-gradient(rgba(var(--veil-rgb),.09), rgba(var(--veil-rgb),.09)) 50% 20% / 70% 26px no-repeat,
    linear-gradient(rgba(var(--veil-rgb),.06), rgba(var(--veil-rgb),.06)) 50% 28% / 54% 11px no-repeat,
    linear-gradient(rgba(var(--veil-rgb),.06), rgba(var(--veil-rgb),.06)) 50% 32% / 46% 11px no-repeat,
    linear-gradient(rgba(var(--veil-rgb),.07), rgba(var(--veil-rgb),.07)) 50% 60% / 88% 30% no-repeat; }
html:has(main.wrap.skel-on) .per-float { display: none !important; }   /* pastila plutitoare e a paginii care pleacă */

/* =========================================================================
   #13 — UN SINGUR SET DE MĂSURI (auditul UI din 7 oct 2026, ales de Liviu): același comutator peste tot —
   40 px înălțime, 4 px între margine și pastile, colț 12 / 9 px, literă de 13 px seminegru. Înainte același tip
   de control avea 37 / 41 / 42 / 44 / 49 px, trei raze și trei mărimi de literă. Două înălțimi: 40 (controlul)
   și 32 (pastila din el). Pe ecranele tactile ținta rămâne de 44 px (::after, din regula comună de mai sus).
   ========================================================================= */
/* --ctl-pad 3px + chenarul de 1px = cei 4 px dintre marginea exterioară și pastilă; 1 + 3 + 32 + 3 + 1 = 40 */
:root { --ctl-h: 40px; --ctl-in: 32px; --ctl-pad: 3px; --ctl-r: 12px; --ctl-r-in: 9px; --ctl-fs: 13px; }
.period-presets, .tabs, .cv-switch, .fnl-seg { box-sizing: border-box; min-height: var(--ctl-h); padding: var(--ctl-pad); gap: 2px;
  border-radius: var(--ctl-r); align-items: center; }
.tabs, .cv-switch, .fnl-seg { height: var(--ctl-h); }
.pp, .tab, .cv-b, .fnl-seg a, .dash-tabs .cv-b { box-sizing: border-box; height: var(--ctl-in); padding: 0 12px; border-radius: var(--ctl-r-in);
  font-size: var(--ctl-fs); font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* 2026-10-08 (Liviu: „pe mobil textul din butoanele care selectează ce se afișează nu e centrat”): regula de mai sus
   făcea pastilele inline-flex fără justify-content, deci acolo unde se întind (pe telefon, flex:1) textul rămânea lipit
   la stânga — `text-align:center` din regulile vechi nu mai are efect pe flex. Tot ea suprascria și spațierea strânsă
   de pe telefon a filelor din carduri (aceeași specificitate, mai jos în fișier), iar la Tehnologie a cincea filă
   („Limbi”) ieșea tăiată. Le repun aici, după ea. */
@media (max-width: 560px) { .eyebrow-row .cv-b { padding: 0 8px; } }
@container (max-width: 460px) {
  .dash-tabs .cv-b { padding: 0 7px; font-size: 12px; }
}
.cal-trigger { height: var(--ctl-h); border-radius: var(--ctl-r); }
.period-custom { box-sizing: border-box; min-height: var(--ctl-h); padding: 3px 3px 3px 11px; border-radius: var(--ctl-r); }
.per-pill { height: var(--ctl-h); }
/* „?” de lângă segmentul din Traseu: aceeași înălțime cu el */
.trs-help { width: var(--ctl-h); height: var(--ctl-h); }
/* sub 420 px filele heatmap-ului pun iconița deasupra textului (C1885): acolo înălțimea vine din conținut */
@media (max-width: 419px) {
  .tabs { height: auto; }
  .tabs .tab { height: auto; min-height: var(--ctl-in); padding: 7px 4px; }
}

/* =========================================================================
   #04 — TELEFONUL (auditul UI din 7 oct 2026, ales de Liviu)
   ========================================================================= */
/* Cifrele Analytics pe 2 coloane: cele două grile devin una (display:contents); la număr impar, ultimul card ocupă
   tot rândul. Explicația scurtă (.hint) stă la „?” din etichetă; „față de …” rămâne. */
@media (max-width: 560px) {
  .kpi-zone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-zone > .kpi-grid { display: contents; }
  .kpi-zone:has(> .kpi-grid:first-child > .kpi:last-child:nth-child(odd)):has(> .kpi-grid:last-child > .kpi:last-child:nth-child(even)) > .kpi-grid:last-child > .kpi:last-child,
  .kpi-zone:has(> .kpi-grid:first-child > .kpi:last-child:nth-child(even)):has(> .kpi-grid:last-child > .kpi:last-child:nth-child(odd)) > .kpi-grid:last-child > .kpi:last-child { grid-column: 1 / -1; }
  .kpi-zone .kpi, .kpi-zone .kpi.big { padding: 14px 14px 12px; min-width: 0; }
  .kpi-zone .kpi .val, .kpi-zone .kpi.big .val { font-size: 26px; margin-top: 6px; }
  .kpi-zone .kpi .lbl { font-size: 10px; letter-spacing: .1em; padding-right: 18px; }
  .kpi-zone .kpi .kico { width: 15px; height: 15px; }
  .kpi-zone .kpi .hint { display: none; }
  .kpi-zone .kpi .spark { margin-top: 8px; }
  .kpi-zone .kpi .delta .vs { display: block; margin: 3px 0 0; }
}

/* Vizitele ca rânduri-card: sursa și scorul sus, când · dispozitiv · pagina dedesubt, timp + scroll + click-uri jos.
   2026-10-08: după clasă, nu după lățimea ecranului — ux.js (visitsFit) o pune pe telefon (≤640 px) ȘI pe desktop când
   tabelul nu încape în cardul lui, ca nicio coloană să nu rămână în afara ecranului. Fără JS: tabelul cu derulare. */
.panel .tbl.visits.v-cards, .tbl.visits.v-cards { display: block; overflow: visible; white-space: normal; min-width: 0; width: 100%; }
.tbl.visits.v-cards thead { display: none; }
.tbl.visits.v-cards tbody { display: block; }
.tbl.visits.v-cards tr.v-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "src src src rel" "when dev pg pg" "tm sc sc ck"; align-items: center; gap: 7px 12px; padding: 13px 0; border-bottom: 1px solid var(--stroke); }
.tbl.visits.v-cards tr.v-row.v-hidden { display: none; }
.tbl.visits.v-cards tr.v-row:last-child { border-bottom: 0; }
.tbl.visits.v-cards tr.v-row > td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; white-space: nowrap; }
.tbl.visits.v-cards td.v-src { grid-area: src; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; }
.tbl.visits.v-cards td.v-src .v-ref { display: inline; margin-left: 8px; font-weight: 400; font-size: 11.5px; color: var(--faint); }
.tbl.visits.v-cards td.v-rl { grid-area: rel; justify-self: end; }
.tbl.visits.v-cards td.v-when { grid-area: when; font-size: 12px; color: var(--muted); }
.tbl.visits.v-cards td.v-dv { grid-area: dev; font-size: 12px; color: var(--muted); }
.tbl.visits.v-cards td.v-pg { grid-area: pg; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.tbl.visits.v-cards td.v-when::after, .tbl.visits.v-cards tr:has(td.v-pg) td.v-dv::after { content: "·"; margin-left: 12px; color: var(--faint); }
.tbl.visits.v-cards td.v-tm { grid-area: tm; font-weight: 600; font-size: 12.5px; }
.tbl.visits.v-cards td.v-sc { grid-area: sc; }
.tbl.visits.v-cards td.v-sc .conv-rate { display: flex; align-items: center; gap: 8px; }
.tbl.visits.v-cards td.v-sc .cr-track { flex: 1; }
.tbl.visits.v-cards td.v-ck { grid-area: ck; justify-self: end; font-size: 12.5px; color: var(--muted); }
.tbl.visits.v-cards td.v-ck::after { content: " click"; }

/* #04 — Traseul de sus în jos, pe telefon (traseu_vertical_html); desenul lat, la buton */
.trs-v { display: none; }
@media (max-width: 640px) {
  .trs-card:not(.trs-show) { display: none; }
  .trs-v { display: block; margin: 0 0 16px; }
}
.trs-v-grp { padding: 10px 14px; border: 1px solid var(--stroke); border-radius: var(--r); background: var(--surface-2); }
.trs-v-grp + .trs-v-grp { margin-top: 10px; }
.trs-v-grp.ads { box-shadow: inset 3px 0 0 var(--trs-ads); }
.trs-v-grp.mail { box-shadow: inset 3px 0 0 var(--trs-mail); }
.trs-v-t { margin: 4px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.trs-v-list { list-style: none; margin: 0; padding: 0; }
.trs-v-node { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "ic l n" ". brs brs"; align-items: center; gap: 4px 10px; padding: 8px 0; border-radius: 10px; }
.trs-v-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trs-v-node .trs-ic { grid-area: ic; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--veil-rgb), .05); border: 1px solid var(--stroke); color: var(--muted); }
.trs-v-node .trs-ic .ico { width: 15px; height: 15px; }
.trs-v-l { grid-area: l; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.trs-v-n { grid-area: n; text-align: right; }
.trs-v-n b { display: block; font: 700 21px/1.05 "Bricolage Grotesque", sans-serif; font-feature-settings: "tnum"; color: var(--text); }
.trs-v-n em { font-style: normal; font-size: 11px; color: var(--muted); }
.trs-v-node.gold .trs-v-n b { color: var(--trs-gold-ink, var(--trs-gold)); }
.trs-v-node.gold .trs-ic { border-color: rgba(var(--trs-gold-rgb, 246,196,69), .55); color: var(--trs-gold); }
.trs-v-brs { grid-area: brs; display: flex; flex-wrap: wrap; gap: 6px; }
.trs-v-br { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--stroke); font-size: 11.5px; color: var(--muted); }
.trs-v-br i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.trs-v-br b { color: var(--text); font-weight: 600; }
.trs-v-pct { display: flex; align-items: center; gap: 9px; padding: 0 0 0 15px; font-size: 12px; color: var(--muted); }
.trs-v-pct i { flex: none; width: 2px; height: 26px; border-radius: 2px; background: var(--stroke-2); }
.trs-v-pct b { color: var(--text); font-weight: 700; font-feature-settings: "tnum"; }
.trs-v-full { margin-top: 10px; }

/* Ținte de atingere pentru componentele noi (auditul responsive din 7 oct): 44 px pe verticală pe ecranele tactile /
   înguste, desenul rămâne același — aceeași rețetă ca extensia comună (.btn::after & co.) */
@media (max-width: 1023px), (pointer: coarse) {
  .kq::after { inset: -15px; }   /* 16 px desenat, cu chenarul de 1 px: −15 dă exact 44 (cu −14 ieșea 42, auditul din 8 oct) */
  /* „Alege în «Setări financiare»” din nota de TVA (Financiar): un link-buton de 19 px înălțime pe telefon */
  .fin-set-note .lnk { position: relative; }
  .fin-set-note .lnk::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  /* NU și pastila plutitoare (2026-10-08): .per-float e tot .per-pill, iar `relative` de aici bătea `position: fixed` —
     pe telefon și pe tabletă pastila nu mai plutea sus la derulare, ci ajungea la capătul paginii, sub subsol */
  .per-pill:not(.per-float), .pescurt .ps-x, .pescurt .ps-link, a.pth-f, a.barrow.bar-f { position: relative; }
  .per-pill::after, .pescurt .ps-x::after, .pescurt .ps-link::after {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 44px; min-height: 44px; }
  a.pth-f::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%); }   /* calea „/” (audit 161) */
  /* barele-filtru: rândul crește la 40 px (padding), iar extensia de 2 px intră doar în golul de 4 px dintre rânduri */
  .bars-share .barrow.bar-f { padding-top: 10px; padding-bottom: 10px; }
  a.barrow.bar-f::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
}
/* Pe telefoanele înguste titlul are prioritate pe rândul lui (la 320 px „Analytics” ieșea „Ana…”): pastila „acum pe site”
   rămâne doar cu punctul și cifra — sensul e în `title` și pe Panou. */
@media (max-width: 480px) {   /* 2026-10-10: era 420; la 421–480 (iPhone Plus/Pro Max) textul împingea titlul la „Panou gen…” */
  .page-head .h-row { gap: 8px; }
  .page-head .h-row .live-now { flex: none; }
  .page-head .h-row .live-now .ln-t { display: none; }
}
@media (max-width: 360px) { .page-head .h-row { gap: 5px; } .page-head .h-row .per-pill { padding: 0 10px 0 12px; } }   /* „Panou general” încape întreg la 320 px */

/* =========================================================================
   2026-10-08 — REPARAȚII DE AȘEZARE (raportate de Liviu în Safari: „unele carduri nu au spațiu între ele”,
   „selectorul de perioadă apare jos”, „textul din butoane nu e centrat”, „box-urile de pe ore sunt mici”).
   Găsite toate cu detectorul din _tools/pulse-audit/ui-fix-2026-10-08.nosync (layout-checks.js, pop-sweep.mjs).
   ========================================================================= */
/* Cardurile cu cifre și graficul de dedesubt: spațiul îl dădea fraza „Apasă pe oricare card…” (margine 16 px), scoasă pe
   7 oct (punctul 10) — de atunci graficul stătea lipit de rândul de carduri. Același spațiu ca între rândurile de carduri. */
.kpi-zone + .zone-a { margin-top: 16px; }
@media (max-width: 560px) { .kpi-zone + .zone-a { margin-top: 10px; } }   /* = golul dintre carduri pe telefon (.kpi-zone gap) */
/* Două panouri puse direct unul sub altul (Acces clienți: formularul + „Niciun link…”; Site-uri: locurile din plan + lista)
   stăteau lipite. Marginile se combină (se ia cea mai mare), deci unde exista deja spațiu nu se schimbă nimic. */
main.wrap > .panel + .panel { margin-top: 16px; }
/* Pe o singură coloană (telefon, tabletă) rândul de descriere gol al unui card nu mai are cu ce să se alinieze: lăsa
   un gol de 32 px între file și panou (Vânzări, Surse de trafic), față de 6 px la cardurile fără file. */
@container (max-width: 859px) { .dash-cell .dash-hint:has(.ehint.is-empty) { display: none; } }
/* Filele unui card care tot nu încap (Tehnologie, 5 file, sub ~360 px): aceeași estompare la margine ca la .tabs și la tabele */
@supports (animation-timeline: scroll()) {
  .dash-tabs { animation: tblFade linear both; animation-timeline: scroll(self inline); }
}

/* Sumele dintr-o celulă de tabel nu se rup pe două rânduri („4.152,83 / RON”). Pe telefon, Campanii își păstrează regula ei. */
.tbl td.n { white-space: nowrap; }

/* Vizitele individuale: pe desktop tabelul ieșea din card (1.153 px într-un card de 1.000 la un site cu multe pagini) și
   Click-uri + Relevanță rămâneau în afara ecranului. Coloanele se strâng (pagina pe 24 de caractere, sursa pe 160 px,
   bara de scroll mai scurtă); dacă tot nu încape, tabelul trece pe rândurile-card de pe telefon (ux.js, clasa .v-cards). */
.tbl.visits:not(.v-cards) th, .tbl.visits:not(.v-cards) td { padding-left: 10px; padding-right: 10px; }
/* Pagina ia lățimea rămasă în tabel (width 100% + max-width 1px = coloana nu cere loc după conținut) și se taie cu „…”.
   Sub 150 px n-ar mai fi recognoscibilă: atunci ux.js trece tabelul pe rânduri-card. */
.tbl.visits:not(.v-cards) td.v-pg { width: 100%; max-width: 1px; overflow: hidden; }
.tbl.visits:not(.v-cards) .v-pgt { display: block; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) {
  .tbl.visits:not(.v-cards) .v-dev { max-width: 124px; }
  .tbl.visits:not(.v-cards) .v-dev-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tbl.visits td .conv-rate { min-width: 84px; gap: 8px; }
  .tbl.visits td .conv-rate .cr-track { min-width: 40px; }
  .tbl.visits .v-ref { max-width: 160px; }
}

/* Produsele din Financiar: lângă panoul lateral (1280-1439 px) coloana principală are ~540 px, iar tabelul de 5 coloane
   rupea numele și sumele pe câte două rânduri și tot ieșea din card. După lățimea COLOANEI (nu a ecranului), aceeași
   formă ca pe telefon: Medie și bara se ascund, procentul stă sub sumă. */
@container finmain (max-width: 640px) {
  .prod-shr { display: block; }
  #prodTbl th:nth-child(4), #prodTbl td:nth-child(4),
  #prodTbl th:nth-child(5), #prodTbl td:nth-child(5) { display: none; }
}

/* Traseul: desenul lat nu încape între ~640 și ~1100 px (tabletă, desktop îngust) — ieșea tăiat în dreapta. Acolo se
   vede varianta de sus în jos de pe telefon, cu „Vezi desenul complet” (ux.js pune .trs-fitv când desenul nu încape). */
.trs-fitv > .trs-card:not(.trs-show) { display: none; }
.trs-fitv > .trs-v { display: block; margin: 0 0 16px; }
/* Tabelul de pagini pe un card îngust (desktop cu meniul lateral la ~1024 px, telefon): butonul „Heatmap” rămâne doar cu
   iconița (numele e în aria-label), ca tabelul să încapă fără derulare — la 1024 px ieșea 644 px într-un card de 584. */
@container (max-width: 700px) {
  .pg-hm .pg-hm-t { display: none; }
  .pg-hm { padding-left: 0; padding-right: 0; width: 40px; justify-content: center; }
}
/* Tabelele din cardurile pe două coloane: 8 px lateral (în loc de 9) — cu sumele pe un singur rând, tabelul de comenzi
   cerea 385 px într-o coloană de 381 la 1280 px. */
.dash-cell .tbl th, .dash-cell .tbl td { padding-left: 8px; padding-right: 8px; }
/* Locurile din plan (Site-uri) stau deasupra listei, cu un <script> între ele — regula de panouri vecine nu le prinde */
.slot-panel { margin-bottom: 16px; }
/* Reclamele din Traseu, strânse la ~3 rânduri: din al patrulea rând se vedea o fâșie (chenarul de sus al pastilelor),
   ca o margine ruptă. Se estompează, ca la tabele — semnul că lista continuă sub „Vezi mai multe”. */
.fnl-ads-row.can-fold:not(.fold-open) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }

/* ---------- Oferta „Audit gratuit” de la Boostetic (2026-10-08, lib/audit_oferta.php + assets/audit.js) ----------
   Cardul din meniul lateral e un nudge, nu un banner: un rând de 46px, accentul doar în pătratul iconiței și în chenar.
   Fereastra NU poartă clasa .modal-ov: stă în pagină cât timp oferta e valabilă, iar `html:has(.modal-ov)` ar bloca
   derularea paginii pe telefon permanent. Are stratul ei (.audit-ov), cu aceleași valori ca .modal-ov. */
.audit-mini { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 8px 9px; border-radius: 11px;
  text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.13), rgba(var(--accent-rgb),.03) 70%);
  border: 1px solid rgba(var(--accent-rgb),.3); transition: border-color .15s ease, transform .15s ease; }
.audit-mini:hover { border-color: rgba(var(--accent-rgb),.7); transform: translateY(-1px); }
.audit-mini .am-ic, .sheet-audit .am-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; background: var(--accent-fill); color: var(--accent-ink); }  /* umplutura vie, ca butoanele: în light --accent se închide */
.audit-mini .am-ic .ico { width: 15px; height: 15px; }
.audit-mini .am-txt, .sheet-audit .am-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.audit-mini .am-txt b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.audit-mini .am-txt small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit-mini .am-go { margin-left: auto; display: flex; color: var(--faint); }
.audit-mini .am-go .ico { width: 14px; height: 14px; transform: rotate(-90deg); }
@media (min-width: 1024px) and (max-height: 900px) { .audit-mini { margin-top: 6px; padding: 6px 8px; } }
@media (min-width: 1024px) and (max-height: 760px) { .audit-mini .am-txt small { display: none; } }
@media (min-width: 1024px) {
  .snav-min .audit-mini { justify-content: center; padding: 7px 0; margin: 10px 10px 0; }
  .snav-min .audit-mini .am-txt, .snav-min .audit-mini .am-go { display: none; }
}
/* Meniul de pe telefon: primul rând din lista contului, cu accent */
.sheet-items a.sheet-audit { gap: 12px; padding: 11px 12px; margin-bottom: 6px; color: var(--text);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.15), rgba(var(--accent-rgb),.04) 70%);
  border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 13px; }
.sheet-items a.sheet-audit .am-ic { width: 32px; height: 32px; border-radius: 9px; }
.sheet-items a.sheet-audit .am-ic .ico { width: 17px; height: 17px; }
.sheet-audit .am-txt b { font-size: 14.5px; font-weight: 600; }
.sheet-audit .am-txt small { font-size: 12px; color: var(--muted); font-weight: 400; }

.audit-ov { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(5,6,8,.72); opacity: 0; transition: opacity .18s ease; overflow-y: auto; overscroll-behavior: contain; }
.audit-ov[hidden] { display: none; }
.audit-ov.in { opacity: 1; }
.audit-ov.in .modal-card { transform: none; }
@media (pointer: coarse) { html.audit-open { overflow: hidden; } }
.audit-card { width: 460px; position: relative; padding: 26px 26px 20px; }
.audit-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 9px; border: 0;
  background: transparent; color: var(--faint); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.audit-x:hover { background: rgba(var(--veil-rgb),.06); color: var(--text); }
.audit-x .ico { width: 16px; height: 16px; }
.audit-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; letter-spacing: .02em; background: rgba(var(--accent-rgb),.13); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.3); }
.audit-tag .ico { width: 13px; height: 13px; }
.audit-title { margin: 14px 36px 0 0; font: 600 22px/1.22 "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
[data-step="form"] > .audit-title, .audit-gata .audit-title { margin-top: 2px; }
.audit-sub { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.audit-sub b { color: var(--text); font-weight: 600; }
.audit-pasi { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.audit-pasi li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.audit-pasi li b { color: var(--text); font-weight: 600; }
.ap-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.12); color: var(--accent); }
.ap-ic .ico { width: 15px; height: 15px; }
.audit-mic { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--faint); text-align: right; }
.audit-mic b { color: var(--muted); font-weight: 500; overflow-wrap: anywhere; }
.audit-card .modal-actions .btn, .audit-page .modal-actions .btn { white-space: nowrap; }
.audit-form .modal-fld { display: block; margin-top: 14px; }
.audit-form .modal-fld > span { display: block; margin-bottom: 6px; color: var(--muted); }
.audit-form select, .audit-form textarea, .audit-form input[type="tel"] { width: 100%; }
.audit-form textarea { display: block; min-height: 84px; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; resize: vertical;
  background: var(--input-bg); border: 1px solid var(--input-line); color: var(--text); font-size: 13.5px; line-height: 1.5;
  transition: border-color .15s, box-shadow .15s; }
.audit-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.audit-form > .modal-fld:first-of-type { margin-top: 18px; }
.audit-card:focus { outline: none; }
.audit-pasi li span, .audit-sub, .audit-acord span { text-wrap: pretty; }
.audit-acord { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
/* bifa: pătratul de 21px al platformei (o mărime proprie de 16px o turtea în 21×16, 2026-10-09) */
.audit-acord input { flex: none; margin-top: -1px; }
.audit-err { margin: 14px 0 0; }
.audit-gata { text-align: center; }
.audit-gata .modal-actions { justify-content: center; }
.audit-ok { background: rgba(var(--accent-rgb),.14); color: var(--accent); }
.audit-ok .ico { width: 26px; height: 26px; }
.audit-page { max-width: 560px; }
.audit-page .audit-title { margin-right: 0; }
@media (max-width: 480px) {
  .audit-ov { padding: 12px; align-items: flex-end; }
  .audit-card { padding: 24px 18px 18px; border-radius: 18px; }
  .audit-title { font-size: 19px; }
  .audit-card .modal-actions, .audit-page .modal-actions { flex-direction: column-reverse; }
  .audit-card .modal-actions .btn, .audit-page .modal-actions .btn { width: 100%; justify-content: center; }
  .audit-mic { text-align: center; }
}

/* Cererea de acces a echipei Boostetic (2026-10-08, lib/acces.php → ?action=acces): motivul colegului, citat, și cele trei
   garanții. Pagina publică din account_public_page() (.acc-pub), deci doar tokenurile temei, fără alt fundal. */
.acces-motiv { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--accent-fill); background: var(--surface-2);
  border-radius: 0 10px 10px 0; color: var(--text); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.acces-pasi { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px;
  line-height: 1.5; color: var(--muted); }
.acces-pasi li { padding-left: 18px; position: relative; text-wrap: pretty; }
.acces-pasi li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill); }
.acces-pasi b { color: var(--text); font-weight: 600; }

/* =========================================================================
   2026-10-10 — AUDITUL RESPONSIVE (184 de defecte confirmate de doi verificatori;
   _tools/pulse-audit/resp-2026-10-10.nosync). Doar reparații de așezare, fără redesign.
   ========================================================================= */
/* 1 · Titlul paginii pe telefon (132, 78, 43, 170, 94, 150, 23): rândul antetului nu se rupea, iar titlul era singurul
   element care ceda („F…”, „A.”), iar butonul de perioadă ieșea din ecran. Notele de plan („detaliile: ultimele 3 luni”)
   și pastila cu produsele alese trec acum pe rândul următor; titlul, „acum pe site” și butonul de perioadă rămân sus. */
@media (max-width: 1023px) {
  .page-head .h-row:has(> .period-notes, > .fin-scope) { flex-wrap: wrap; row-gap: 0; }
  .page-head .h-row:has(> .period-notes, > .fin-scope) > h1 { flex: 1 1 0; max-width: max-content; }
  .page-head .h-row:has(> .period-notes, > .fin-scope)::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  .page-head .h-row > .period-notes, .page-head .h-row > .fin-scope { order: 2; margin-top: 8px; }
  /* raportul public: eticheta e scrisă de om și poate fi lungă — se împarte pe rânduri, nu se taie cu „…” */
  body.share .page-head .h-row h1 { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* 4 · Cardurile KPI (82, 112, 136, 152, 171, 191, 192, 13, 193): iconița din colț e absolută și eticheta nu-i lăsa loc,
   așa că textul și „?” intrau sub ea. Eticheta rezervă acum cât intră iconița în conținut, plus 4 px. */
.kpi:has(> .kico) > .lbl { padding-right: 19px; }
.kpi.big:has(> .kico) > .lbl { padding-right: 21px; }
@media (max-width: 560px) {
  .kpi-zone .kpi.big .kico { top: 15px; right: 15px; }
  .kpi-zone .kpi:has(> .kico) > .lbl { padding-right: 20px; }
  /* rândul secundar (Recomandări → ads, Campanii): același tratament ca .kpi-zone, altfel „Cost / vânzare” trecea pe 2 rânduri */
  .kpi-sec .kpi { padding-left: 14px; padding-right: 14px; }
  .kpi-sec .kpi .lbl { font-size: 10px; letter-spacing: .1em; }
  .kpi-sec .kpi:has(> .kico) > .lbl { padding-right: 20px; }
}
/* Campanii: 6 carduri mici erau strivite (~113 px) lângă meniul deschis; aceeași grilă de 3 ca sub 1100 px */
@media (min-width: 1101px) and (max-width: 1279px) {
  html:not(.snav-min) .kpi-grid.kpi-sec6 { grid-template-columns: repeat(3, 1fr); }
}
/* ultimul card fără pereche ia tot rândul, nu rămâne lângă o gaură (44, 83, 151, 145, 13) — ca pe Analytics */
@media (min-width: 561px) and (max-width: 780px) {
  .kpi-grid.tier1 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .kpi-grid.kpi-sec5 > .kpi:last-child:nth-child(odd), .kpi-grid.kpi-sec > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Financiar (80, 81): rândul de carduri mici rămânea pe 4 coloane lângă meniul lateral — „nedeterminat” ieșea din card,
   sumele se rupeau. Trece pe 2 × 2 după lățimea COLOANEI principale, ca deja sub 960 px și lângă coloana de produse. */
@media (min-width: 961px) {
  @container finmain (max-width: 1000px) {
    .fin-main > .kpi-grid:not(.tier1) { grid-template-columns: repeat(2, 1fr); }
  }
}
/* eticheta înălțată de ux.js (kpiRows) ca cifrele din rând să stea pe aceeași linie: textul rămâne sus, nu la mijloc */
.kpi .lbl.lbl-eq { align-items: flex-start; }

/* 5 · Sume și unități (87, 24, 120, 196, 116, 45, 68, 69): fmt_money leagă suma de monedă cu U+00A0; tabelul de Campanii
   pe telefoanele înguste lasă puțin mai mult loc sumei, ca să încapă pe un rând. */
@media (max-width: 399px) {
  .camptbl.camp-fb th:nth-child(4), .camptbl.camp-fb td:nth-child(4) { width: 36%; }   /* Cost */
  .camptbl.camp-fb th:nth-child(8), .camptbl.camp-fb td:nth-child(8) { width: 18%; }   /* ROAS */
  .camptbl th.n, .camptbl td.n { padding-left: 4px; padding-right: 6px; font-size: 12px; }
}
/* Spațiu ocupat: al doilea text trece sub primul când nu mai încap amândouă pe rând (69) */
.dbar-sc { flex-wrap: wrap; gap: 2px 16px; }

/* 7 · Panoul unei reclame din Campanii (113, 114): lățimea lui venea din 100vw (fără meniul lateral și marginile reale),
   iar lipirea la stânga stătea pe <td>, care nu se poate deplasa — panoul ieșea tăiat în dreapta. Acum ia lățimea zonei
   vizibile a tabelului (container query) și se lipește el la stânga. */
.tbl-scroll:has(> .camptbl) { container-type: inline-size; container-name: cvscroll; }
.camptbl tr.cdrawer > td { padding: 0 !important; }
.cdrawer > td .cdx { position: sticky; left: 0; z-index: 1; width: 100cqi; max-width: 100cqi; box-sizing: border-box; }
@media (min-width: 561px) {
  @container cvscroll (max-width: 820px) { .cdx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}
/* 320 px: în cele două coloane sumele mari („2.228,54 RON”) rămân pe un rând */
@container cvscroll (max-width: 300px) { .cdx-card.big .cdx-v { font-size: 14px; } .cdx-card.big { padding: 9px 8px; } }

/* 8 · Butoane (21, 58, 169, 61): „Acces clienți” din bara de jos stă pe un rând, centrat, și la 320–360 px; butoanele
   unei ferestre de confirmare trec pe rândul următor în loc să iasă din card; butonul întins din Conturi clienți are
   textul centrat. */
@media (max-width: 1023px) {
  .tbi { text-align: center; }
  .tbi .tab-l { white-space: nowrap; }
}
.modal-actions { flex-wrap: wrap; }
@media (max-width: 640px) { .prov-row .btn { justify-content: center; } }

/* 9 · Formulare (79, 102, 134): regula globală `input, select { min-width: 180px }` împingea câmpurile peste margini. */
/* „Adaugă vânzări” lângă meniul lateral / coloana de produse: rândurile se stivuiesc după lățimea COLOANEI (ca #prodTbl),
   nu doar sub 780 px de ecran — altfel „Total” și ✕ ieșeau din card la 781–1440 px. Aceleași reguli ca mai sus. */
@container finmain (max-width: 879px) {
  .panel .tbl-scroll #revRowsTbl { display: block; white-space: normal; }
  #revRowsTbl thead { display: none; }
  #revRowsTbl tbody { display: block; }
  #revRowsTbl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: 'lbl lbl del' 'date date date' 'qty amt amt'; gap: 9px 10px; padding: 13px 2px;
    border-bottom: 1px solid var(--stroke); }
  #revRowsTbl tbody tr:last-child { border-bottom: 0; }
  #revRowsTbl tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  #revRowsTbl tbody td:nth-child(1) { grid-area: lbl; }
  #revRowsTbl tbody td:nth-child(2) { grid-area: date; }
  #revRowsTbl tbody td:nth-child(3) { grid-area: qty; }
  #revRowsTbl tbody td:nth-child(4) { grid-area: amt; }
  #revRowsTbl tbody td:nth-child(5) { grid-area: del; align-self: end; }
  #revRowsTbl tbody td[data-lbl]::before { content: attr(data-lbl); display: block; margin-bottom: 6px;
    color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
  #revRowsTbl input { width: 100%; min-width: 0; }
  #revRowsTbl .cal-trigger { width: 100%; justify-content: flex-start; }
  #revRowsTbl tbody tr:hover td { background: none; }
}
.fin-dlg-row .fld select, .fin-dlg-row .fld input { width: 100%; max-width: 100%; min-width: 0; }   /* Cota de TVA la 402 px */
/* sliderele din Filtre (Înregistrări): fără rama și lățimea minimă a câmpurilor obișnuite; focusul rămâne pe mâner */
.rps-track input[type="range"] { border: 0; padding: 0; border-radius: 0; min-width: 0; box-shadow: none; }

/* 10 · Recomandări (12, 22): coloanele `1fr` nu coborau sub cel mai lung cuvânt (o adresă), iar textul ieșea din card;
   linkurile din josul cardurilor aveau 20 px pe touch — acum ținta e de 44 px, cu desenul neschimbat. */
.rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) { .rec-grid { grid-template-columns: minmax(0, 1fr); } }
.rec-grid p { overflow-wrap: anywhere; }
@media (max-width: 1023px), (pointer: coarse) {
  .rec-link { position: relative; }
  .rec-link::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;
    min-width: 40px; min-height: 44px; }
  .rec-links { row-gap: 24px; }
}

/* 11 · Restul (2026-10-10) */
/* Safari (42): un link aflat la finalul notei strânse urca după „…” pe rândul 2 și era tăiat; un caracter invizibil după el oprește asta */
:is(.ehint, .clamp2).is-clampable:not(.is-open)::after { content: "\2060"; }
/* cardul „N înregistrări sunt blocate” (62, 133): butonul întins pe telefon are textul centrat */
.rp-up-btn { justify-content: center; }
/* Acces clienți la 320–339 px (19, 65): Copiază / Detalii / Revocă ieșeau 12 px din rând */
@media (max-width: 339px) {
  .site-row:not(.sr-grid) .sr-actions { gap: 4px; }
  .site-row:not(.sr-grid) .sr-actions > .btn.sm { padding: 0 10px; }
}
/* „Creează un link de acces” pe telefon (20): câmpurile căzute unul sub altul iau tot rândul, ca la .site-edit */
@media (max-width: 560px) {
  .row-form > label.fld { flex: 1 1 100%; min-width: 0; }
  .row-form > label.fld > input:not([type=checkbox]):not([type=radio]) { width: 100%; }
}
.site-edit .fld.shp-wrap, .row-form .fld.shp-wrap { flex: 0 0 100%; min-width: 0; }
@media (max-width: 359px) { .shp-hrow, .shp-row { grid-template-columns: 1fr 64px 64px; } }
/* paginile publice (3, 4): pe telefon aceeași spațiere ca la login; titlurile cu rânduri strânse, fără cuvânt singur jos */
@media (max-width: 440px) { .auth-card { padding: 32px 22px 28px; } }
.auth-card > h1 { line-height: 1.2; text-wrap: balance; }
/* Comparație (117): cele două tabele unul lângă altul doar când au loc; antetele întregi */
@media (min-width: 961px) {
  .grid.c2:has(> .panel .cmp-tbl) { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }
  .cmp-tbl th.ca, .cmp-tbl th.cb { max-width: none; }
}
.cmp-tbl .delta { white-space: nowrap; }
/* Teste A/B (118): pe desktop, spațiere mai mică între coloane, ca „Deschide” să încapă */
@media (min-width: 1024px) {
  .tbl:has(td.ab-act) th, .tbl:has(td.ab-act) td { padding-left: 7px; padding-right: 7px; }
  .tbl:has(td.ab-act) th:first-child, .tbl:has(td.ab-act) td:first-child { padding-left: 12px; }
  .tbl:has(td.ab-act) th:last-child, .tbl:has(td.ab-act) td:last-child { padding-right: 12px; }
  .tbl:has(td.ab-act) .conv-rate { min-width: 0; }
}
/* Heatmaps → „Elemente cele mai clickuite” (137): selectorul pe un rând, scurtat cu „…” (întreg în title);
   Click-uri și Frustrate rămân în cadru */
#elsPanel .tbl td.mono { max-width: 0; width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#elsPanel .tbl th { white-space: nowrap; }
@media (max-width: 780px) { #elsPanel .tbl-scroll .tbl td:not(.mono) { white-space: normal; } }
/* Spațiu ocupat (190, 55, 199, 63): „Cât încape” (2 coloane) se împachetează pe telefon în loc să ascundă valorile;
   „Pe conturi” mai strâns, ca să încapă de la ~1250 px, cu numele contului pe cel mult 3 rânduri */
@media (max-width: 780px) { .panel .tbl-scroll .tbl.tbl-kv { white-space: normal; } }
@media (max-width: 359px) { .panel .tbl-scroll .tbl.tbl-kv :is(th, td) { padding-left: 9px; padding-right: 9px; } }
.tbl.stor-acc th, .tbl.stor-acc td { padding-left: 8px; padding-right: 8px; }
.tbl.stor-acc th { letter-spacing: .04em; }
.tbl.stor-acc .conv-rate { min-width: 112px; gap: 8px; }
.tbl.stor-acc .cr-track { min-width: 44px; }
.tbl.stor-acc td:first-child { min-width: 130px; }
/* lista de proiecte (175): coloana client/campanie nu mai ajunge la 0 px lângă numele lungi */
@media (min-width: 1024px) { .ssw-c:not(:empty) { min-width: 120px; } }
/* iPhone (99): „↕” din antetele sortabile se desena ca emoji; un font de sistem cu săgeata de text */
.tbl th.sortable:not(.sort-asc):not(.sort-desc)::after, .sortable-th:not(.sort-asc):not(.sort-desc)::after {
  font-family: "Apple SD Gothic Neo", "Apple Symbols", "Segoe UI Symbol", sans-serif; }
/* desktop (172): calendarul deschis din pastila plutitoare stă sub fereastra perioadei, aliniat la dreapta, nu peste ea */
@media (min-width: 1024px) {
  .per-pop .period-custom { position: static; }
  .per-pop .cal-pop { top: calc(100% + 9px); right: -1px; }
}
/* „Traseul complet…” (161): țintă de 44 px pe touch, desenul neschimbat */
@media (max-width: 1023px), (pointer: coarse) {
  .cf-more { position: relative; }
  .cf-more::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 100%; min-height: 44px; transform: translateY(-50%); }
}
/* Filtrul „Dispozitiv” (140): când cele 4 nu încap pe un rând, 2 + 2 egale, nu „Mobil” singur */
.rp-fseg { container-type: inline-size; }
@container (max-width: 359px) { .rp-fseg button { flex: 1 1 calc(50% - 5px); justify-content: center; } }
/* „Atribuit userilor” / „Funcții beta” pe telefon (46): casetele au lățimea câmpului, emailul sub nume */
@media (max-width: 560px) {
  .assign-item { flex: 1 1 100%; flex-wrap: wrap; column-gap: 8px; row-gap: 0; max-width: 100%; }
  .assign-item > .muted { flex-basis: 100%; padding-left: 29px; overflow-wrap: anywhere; }
}
/* Etichetele barelor pe telefon (162): coloana numelui ia lățimea celui mai lung nume din listă (cel mult 42%), nu 84 px
   fixe — „m.facebook.com”, „Samsung Internet” apăreau cu „…” deși bara avea loc. Barele rămân aliniate (subgrid). */
@media (max-width: 560px) {
  .bars:not(.bars-share) { display: grid; grid-template-columns: fit-content(42%) minmax(0, 1fr) 38px; column-gap: 12px; row-gap: 11px; }
  .bars:not(.bars-share) > .barrow { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .bars:not(.bars-share) > :not(.barrow) { grid-column: 1 / -1; }
}
/* explicația „?” (155): când ux.js îi limitează înălțimea între antet și bara de jos, textul se derulează înăuntru */
.kq-pop { overflow-y: auto; overscroll-behavior: contain; }
/* Ecranele de oprire (5): acțiunea principală stă în același rând cu Înapoi / Deschide Pulse (stop_page din helpers.php);
   formularul ei nu mai adaugă margine, iar pe telefon butoanele se întind egal în loc să facă o scară aliniată la stânga */
.stop-acts form { display: contents; }
@media (max-width: 480px) { .stop-acts > .btn, .stop-acts form > .btn { flex: 1 1 auto; justify-content: center; } }
/* Vânzări la 1280 px cu meniul (159): coloana de card are ~410 px, iar Comenzi recente / Ads care vând rămâneau la lățimea
   minimă de conținut (Produs rupt cuvânt cu cuvânt, cardul cu 250-300 px mai înalt decât Traseul de lângă el).
   Doar în banda îngustă a celor 2 coloane: Comanda trece sub dată, iar numele reclamei primește o lățime minimă. */
.oid-sub { display: none; }
@container (min-width: 860px) and (max-width: 999px) {
  .dash-cell .tbl-orders th:nth-child(2), .dash-cell .tbl-orders td:nth-child(2) { display: none; }
  .dash-cell .tbl-orders .oid-sub { display: block; }
  .dash-cell .tbl-ads td:first-child { min-width: 7.5em; }
}
/* Ținte de atingere (74, 143, 127, 202, 90, 188): desenul rămâne același, doar aria de apăsare ajunge la 44 px pe touch */
@media (max-width: 1023px), (pointer: coarse) {
  .meta-card .ms-disc, .fnl-ads-toggle, .rp-fbtn, .rp-freset, .alert .lnk, td.fin-lbl .exp-note-toggle, #clWrap .cl-x { position: relative; }
  .meta-card .ms-disc::after, .fnl-ads-toggle::after, .rp-fbtn::after, .rp-freset::after, .alert .lnk::after,
  td.fin-lbl .exp-note-toggle::after, #clWrap .cl-x::after { content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 44px; min-height: 44px; }
}
/* Un singur cuvânt pe ultimul rând (32, 67, 166): titlurile Recomandărilor, „Așteptăm prima vizită”, textul paginilor de plan */
.rec-head h3, .onb h2, main.auth-card > p.muted { text-wrap: balance; }
/* Minore (2026-10-10, runda 2): */
.tbi { line-height: inherit; }   /* 179: „Meniu” pe aceeași linie de bază cu Panou / Site-uri / Acces clienți */
.rail > .rail-plats:first-child { border-top: 0; }   /* 180: fără linia de separare orfană deasupra iconiței Pulse */
@media (max-width: 1023px) { #rpNow::after { content: "\00a0/"; color: var(--faint); } }   /* 141: „0:00 / 0:09”, nu lipite */
@media (max-width: 1023px) and (min-width: 640px) { .replay-panel.rp-mare #rpNow::after { content: none; } }   /* cronologia revine între timpi */
.hl-card, .stage-veil-in { margin: 24px auto 0; }   /* 149: „Se încarcă…” nu mai e lipit de marginea de sus a scenei */
.btn.demg-more { max-width: 100%; white-space: normal; height: auto; min-height: 32px; padding-block: 6px; line-height: 1.3; text-wrap: balance; justify-content: center; text-align: center; }   /* 122 */
.demg-more .ico { flex: none; }
@media (max-width: 419px) {   /* pe 2 rânduri: iconița intră în rândul de text, ca tot butonul să stea centrat */
  .btn.demg-more { display: inline-block; }
  .btn.demg-more .ico { margin-right: 7px; vertical-align: -5px; }
}
.trs-in { min-width: max(810px, calc(var(--n, 5) * 162px)); }   /* 121: ✕-ul pasului nu se mai lipește de eticheta coloanei vecine */
.site-search ~ .camp-group { margin-top: 18px; }   /* 31: Acces clienți — căutarea nu mai e lipită de listă */
@media (max-width: 521px) { .client-fin .cf-item.cf-rev, .client-fin .cf-item.cf-prof { width: 146px; } }   /* 50: cifrele stivuite se aliniază */
@media (max-width: 355px) { .client-fin .cf-item.cf-item { width: 170px; } }
@media (min-width: 1024px) {   /* 76: în meniul restrâns, funcțiile blocate au un inel, nu bulina plină a funcțiilor noi */
  html.snav-min .nav a.plan-locked .nav-plan { border: 1.5px solid var(--accent); background: transparent; box-sizing: border-box; }
}
.sec-head { align-items: baseline; }   /* 104, 142: eticheta de secțiune pe aceeași linie de bază cu „1 moment” / „Filtre” */
@media (max-width: 1023px) {   /* 106: fără inelul albastru de sistem pe „Meniu” / „Ajutor” */
  .tbi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .sheet-head .sheet-help:focus-visible { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--focus-ring); }
}
.auth-card.stop-card .brand { justify-content: flex-start; }   /* 40: pe ecranele de oprire marca stă aliniată cu titlul și textul */
.site-search input { text-overflow: ellipsis; }   /* 48, 108: un indiciu tăiat se termină în „…”, nu în mijlocul cuvântului */
.site-footer { margin-top: 0; }   /* 49: aerul de sub ultimul card rămâne cel de pe .wrap (fără încă 64 px) */
.sr-client, .sr-camp { flex-shrink: 100000; }   /* 51: la 1200–1599 px numele site-ului nu se mai scurtează cu „…” când încape */
.sr-client.sr-fit, .sr-camp.sr-fit { flex-shrink: 0; }
@media (min-width: 1024px) and (max-width: 1069.98px) {   /* 129: bara de perioadă pe rândul ei, nu la 11 px de titlu */
  html:not(.snav-min) body:not(.share) .page-head > .period { flex: 1 1 100%; }
  html:not(.snav-min) body:not(.share) .page-head > .period .period-presets { flex: 1 1 auto; }
  html:not(.snav-min) body:not(.share) .page-head > .period .pp { flex: 1 0 auto; }
}
/* 200: Obiective pe telefon — numele obiectivului cerea min. 180 px, deci tabelul de 3 coloane se derula 5–45 px */
@media (max-width: 560px) { .tbl td.gl-lbl { min-width: 120px; } }
/* 201: titlurile centrate / butoanele lungi fără un singur cuvânt pe ultimul rând */
main.wrap > .panel > h2, #pw-step1 button { text-wrap: balance; }

/* ===== 2026-10-11 — „Legarea site-ului” (lib/legare.php) ===== */
/* Banda „Confirmă-ți adresa”, ca un rând discret, fără buton plin (lib/signup.php → signup_verify_banner_html). */
.verify-line { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--muted);
  margin: 0 0 18px; line-height: 1.45; min-width: 0; }
.verify-line .quota-dot { width: 7px; height: 7px; margin-top: .45em; }
.verify-line > span:nth-child(2) { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.verify-line b { color: var(--text); font-weight: 600; }
.verify-line-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; }
/* Câmpurile de introducere ≥ 16 px pe telefon: sub 16 px, Safari pe iPhone mărește pagina când atingi câmpul (toate
   înscrierile reale din 9–11 oct au venit de pe iPhone). Doar dimensiunea textului; înălțimile rămân ale fiecărui câmp. */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]),
  select, textarea { font-size: 16px; }
}