/* ============================================================================
   x-verdict.css · §2 VERDICT · namespace `xvd` / `xvp`
   Generat de `fac_vd2.py` la 2026-09-12 00:31:02.

   ⚠ STRUCTURA e cea de pe site (`blocks/analiza-verdict-hero.php`) plus demoul
     02, cu asezarea ceruta: scara si verdictul in STANGA, textele si butoanele
     in DREAPTA, separator intre ele.
   ⚠ TOATE textele din `texte-verdict.<lang>.json`, cheile `_ui`. Zero sir
     scris de mine, in afara de „Arhetip" si „Cei sase piloni".
   ⚠ R23-R26: titlu de card 21→24, text de sprijin `--xf-sm`, culori numai din
     treptele temei.
   ============================================================================ */

/* ⚠ Cele sase culori sunt ale HERO-ului (`mds-asset.css:62-67`), bulele g1..g6. */
:root{
  --xvd-g1:10,98,134; --xvd-g2:240,159,35; --xvd-g3:234,69,11;
  --xvd-g4:174,14,7;  --xvd-g5:11,87,120;  --xvd-g6:0,201,35;
}

.xvd{ font-family:var(--xf); color:var(--xc-ink); letter-spacing:-.004em; margin-top:var(--xsp-sec,39px); }
.xvd *,.xvp *{ box-sizing:border-box; border:0; }

/* ⚠⚠ CONTURUL ANIMAT (cometa) A FOST SCOS.
   Motivele, pe scurt — pe larg in AMPRENTE:
     · aurora poarta informatie (isi ia culoarea din banda si se schimba cu ea),
       cometa era decor identic pe orice actiune
     · marginea e cel mai prost loc pentru miscare: ochiul foloseste conturul ca
       sa delimiteze obiectul, deci o margine care se misca trage atentia
       permanent; aurora e in interior si ramane periferica
     · cometa anima o proprietate inregistrata intr-un `conic-gradient`, deci
       repicta la fiecare cadru, la fel ca aurora — doua repictari continue
   `@property --xvd-ang` si `@keyframes xvdRing` au disparut odata cu ea.
   ⚠ `overflow:hidden` RAMANE: aurora depaseste cardul si trebuie retezata.
   ⚠ FARA CONTUR. Pusesem un `inset 0 0 0 1px rgba(255,255,255,.05)` cand am scos
     cometa, ca sa nu se piarda marginea. Scos la cerere: cardul se delimiteaza
     prin suprafata si umbra, ca toate celelalte. */
.xvd__card{ position:relative; overflow:hidden; border-radius:28px;
  background:var(--xs-card); box-shadow:var(--xe-lift); }

/* ── antetul cardului, cu marimile celorlalte carduri ── */
.xvd__hd{ padding:26px 24px 28px; padding-bottom:0; }
/* ⚠ ACELASI CORP CA LA „Ce trebuie sa stii despre actiunile X" — cele doua
   carduri stau acum unul sub altul, iar un titlu de 24px urmat de unul de 34px
   facea verdictul sa para subordonat rezumatului, adica pe dos.
   `clamp(26px, …, 34px)` si greutatea 700, ca la `.xrz__t`. */
.xvd__ct{ margin:0; font-weight:700; font-size:var(--xt-3);
  line-height:1.15; letter-spacing:-.022em; }
.xvd__cs{ margin:8px 0 0; font:400 var(--xf-sm)/1.5 var(--xf); color:var(--xc-ink2); }

/* ⚠ Pe MOBIL cele doua coloane devin `display:contents`, deci copiii lor ajung
   direct in grila si pot fi reordonati. E tiparul temei (`verdict.css:94`).
   Ordinea ceruta: scara → cuvinte → badge-uri → FRAZA MARE → rezumat →
   concluzia de sector → piloni → butoane. */
.xvd__top{ padding:26px 24px 28px; display:grid; grid-template-columns:1fr; gap:0; }
.xvd__st,.xvd__dr{ display:contents; }
.xvd__sc{ order:1; } .xvd__ws{ order:2; } .xvd__bgs{ order:3; }
.xvd__h{ order:4; } .xvd__t{ order:5; }
.xvd__vpf{ order:6; } .xvp{ order:7; } .xvd__btns{ order:8; }

/* ── coloana stanga: scara, verdict, cuvinte, badge-uri, vpf ── */
.xvd__sc{ display:flex; align-items:flex-end; gap:16px; }
/* ⚠ Inaltimile si latimile SUNT ALE TEMEI (`verdict.css:59-77`): 46→54px,
   bare de 13→15px. Le facusem 56→64, mai mari decat pe site fara motiv. */
.xvd__scal{ display:flex; align-items:flex-end; gap:5px; height:46px; flex:none; }
.xvd__scal i{ display:block; width:13px; height:var(--h); border-radius:5px;
  background:var(--sc); opacity:var(--o); }
/* ⚠⚠ 22→26px, nu 24→32. La 32px eticheta era MAI MARE decat fraza principala
   (30px), deci ochiul citea intai cuvantul si abia apoi propozitia cu continut.
   Doua elemente peste 30px in acelasi card e unul in plus. Pe site eticheta e
   22px/600 (`mds-design.css:341`); aici ramane apropiat, dar INTOTDEAUNA sub
   fraza — la 390 fraza e 21px, deci eticheta trebuie sa fie 19, nu 22. */
/* ⚠⚠ 28→42px. Pana acum eticheta era tinuta SUB fraza principala, ca sa nu fie
   doua prim-planuri. Acum aurora s-a mutat peste coloana verdictului, deci
   ACOLO e focarul, si eticheta trebuie sa fie cel mai mare lucru din card —
   altfel lumina arata spre ceva mic. Coloana din dreapta ramane explicatia. */
.xvd__r{ font:700 var(--xt-2)/1.02 var(--xf); letter-spacing:-.024em; }
/* ══ VARIANTA B · fara grafic ══════════════════════════════════════════════
   Eticheta la marimea frazei principale, in culoarea benzii, si sub ea o bara
   care porneste din rosu si ajunge in culoarea benzii — tiparul scarii de la
   „Recomandarea analistilor". */
.xvd__sc--b{ display:block; }
.xvd__r--b{ display:block; font-size:var(--xt-2); font-weight:700;
  letter-spacing:-.024em; line-height:1.02; }
.xvd__bw{ position:relative; margin:16px 0 0; }
.xvd__bt{ position:relative; height:var(--xbar); border-radius:var(--xr-p);
  background:var(--xs-track); overflow:hidden; }
/* ⚠ Degradeul se compune in marcaj, cu un opritor pe banda acoperita. */
.xvd__bf{ position:absolute; left:0; top:0; height:100%; border-radius:var(--xr-p); }
.xvd__bt i{ position:absolute; top:0; width:1px; height:100%;
  background:rgba(8,9,10,.45); }
.xvd__bm{ position:absolute; top:calc(var(--xbar) / 2); width:15px; height:15px;
  border-radius:50%; transform:translate(-50%,-50%); background:var(--bc);
  box-shadow:0 2px 10px rgba(0,0,0,.85); }

.xvd__ws{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 4px; }
/* ⚠⚠ FARA PASTILE. Trei dreptunghiuri colorate langa un verdict de 42px erau
   prea grele si rupeau coloana in doua blocuri. Acum e UN RAND: cuvintele stau
   in text, fiecare cu o bulina de culoarea lui, despartite de un punct.
   Culoarea ramane — se muta din fundal in bulina si in scris — dar nu mai
   concureaza cu eticheta.
   ⚠ Culoarea vine din harta de sentiment a temei (`analiza.php:736`), cu o
     singura completare: „creștere" lipsea si cadea pe `neu` (portocaliu). Se
     adauga prin FILTRUL temei, nu prin editarea ei. */
.xvd__ws{ gap:0 6px; }
.xvd__ws b{ display:inline-flex; align-items:center; gap:7px; padding:0;
  font:600 var(--xt-7)/1.4 var(--xf); color:var(--wc); }
.xvd__ws b::before{ content:""; width:7px; height:7px; border-radius:50%;
  background:currentColor; flex:none; }
/* ⚠ Fara punct de despartire intre cuvinte. Il pusesem ca separator, dar se
   citea ca o bulina gri lipita de cuvantul dinainte. Bulina colorata din fata
   fiecarui cuvant e destul ca sa le separe. */
.xvd__ws b + b{ margin-left:9px; }
/* ⚠ Badge-uri JOASE, cum ai cerut: 5px pe verticala, nu 9. */
.xvd__bgs{ display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 0; }
.xvd__bg{ padding:5px 11px; border-radius:var(--xr-p); background:var(--xs-inset);
  font:400 var(--xt-7)/1.35 var(--xf); color:var(--xc-ink2); }
.xvd__bg b{ color:var(--xc-ink); font-weight:600; }
.xvd__bg[style*="--bc"]{ background:color-mix(in srgb, var(--bc) 14%, transparent);
  color:var(--bc); font-weight:600; }
.xvd__vpf{ list-style:none; margin:22px 0 0; padding:0; }
.xvd__vpf li{ padding:11px 0; font:400 var(--xf-sm)/1.55 var(--xf); color:var(--xc-ink2); }
.xvd__vpf li + li{ background:var(--xsep) no-repeat top/100% 1px; }
.xvd__vpf b{ color:var(--xc-ink); font-weight:700; }

/* ── coloana dreapta: fraza mare, rezumat, butoane ── */
/* ⚠ `margin-top` AICI, nu in blocul de ordine: regula de baza vine mai jos in
   fisier si ar fi batut-o pe aceea. Masurat inainte: 4px intre pastile si fraza,
   pe mobil — efectiv lipite. */
/* ⚠⚠ `text-wrap:pretty`, NU `balance`, pe mobil. `balance` EGALIZEAZA lungimea
   randurilor, deci le face mai SCURTE decat cutia: masurat, 204/110/105/105/251
   intr-o cutie de 302px. Cutia era corecta — textul n-o umplea.
   `pretty` umple randurile si doar evita un ultim cuvant orfan.
   Pe desktop `balance` ramane: acolo fraza are 2-3 randuri lungi si echilibrarea
   arata bine. */
.xvd__h{ position:relative; margin:30px 0 0; font-size:var(--xt-4);
  font-weight:700; line-height:1.28; letter-spacing:-.018em; text-wrap:pretty; }

/* ── AURORA ────────────────────────────────────────────────────────────────
   Conturul cardului e paleta hero-ului in MISCARE. Aurora sunt aceleasi culori
   plus cea a verdictului, mai lenta si mai difuza.

   ⚠ ELEMENT PROPRIU, nu pseudo-element al frazei. Motive:
     · are nevoie de DOUA straturi (`::before` + `::after`) pentru cele doua
       ritmuri; pe `.xvd__card` `::before` e deja luat de cometa
     · trebuie asezata independent de text — pe mobil sus, pe desktop peste
       coloana verdictului
     · pe mobil coloanele sunt `display:contents`, iar un element cu
       `display:contents` NU randeaza pseudo-elemente

   ⚠ PE MOBIL: porneste de la marginea de SUS a cardului si acopera prima
     jumatate. PE DESKTOP: se muta peste coloana din stanga, acolo unde sta
     verdictul, si creste.

   ⚠⚠ MISCAREA E PE `background-position`, nu pe `transform`. Cu `transform` se
      muta tot stratul deodata: petele isi pastreaza compozitia si doar
      gliseaza, iar amplitudinile necesare ca sa se vada le scot din masca si
      readuc muchia. Masurat atunci: 2-6 unitati RGB in 11 secunde.
      Cu `background-position` fiecare pata se plimba independent, masca sta pe
      loc, deci nicio muchie oricat s-ar misca.
   ⚠ Petele sunt mai MICI decat cutia: procentele de `background-position` se
     raporteaza la spatiul RAMAS, deci o pata cat cutia n-ar avea unde sa se
     mute.
   ⚠ Costul: `background-position` repicteaza, nu compune pe GPU. */
/* ⚠⚠ AURORA IESE PESTE MARGINILE CARDULUI si e TAIATA de ele.
   Pana acum masca era o elipsa inscrisa, care se stingea la toate cele patru
   margini — de aceea lumina se aduna in centru si se vedea ca o pata. Acum e
   invers: cutia depaseste cardul in sus si pe laterale, iar `overflow:hidden`
   al cardului o reteaza. Culoarea ajunge VIE pana la muchie, deci se citeste ca
   o lumina care vine de dincolo de card, nu ca un obiect asezat in el.
   ⚠ Se stinge DOAR spre interior — in jos pe mobil, in jos SI spre dreapta pe
     desktop — adica exact acolo unde intalneste textul. Restul e taiat, nu
     stins, si taietura urmeaza raza cardului.
   ⚠⚠ OPACITATILE SUNT MICI (11-24%). Efectul de „iese peste margini" vine din
      GEOMETRIE, nu din intensitate: cutia depaseste cardul si e retezata. Prima
      incercare avea 28-44% si spala cardul — verdictul de 42px ajunsese pe un
      fundal portocaliu la RGB(80,53,26), iar textul pierdea contrast. Masurat. */
/* ⚠ PE MOBIL: deplasata spre STANGA si cu 30% mai scunda (92% → 64%).
   Cutia iese 40% din latimea cardului in stanga si doar 4% in dreapta, deci
   centrul ei cade la ~32% din latime, nu la 50%. Ambele capete raman in afara
   cardului si sunt retezate de `overflow:hidden` — asa nu apare nicio muchie. */
.xvd__au{ position:absolute; top:-22%; left:-40%; right:-4%; height:64%;
  z-index:0; pointer-events:none; }
.xvd__au::before,.xvd__au::after{ content:""; position:absolute; inset:0;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.46) 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 54%,rgba(0,0,0,.46) 78%,transparent 100%); }

/* stratul cald-rece: CULOAREA VERDICTULUI si albastrul adanc din hero */
.xvd__au::before{
  background-image:
    radial-gradient(closest-side, color-mix(in srgb, var(--vb) 27%, transparent), transparent),
    radial-gradient(closest-side, rgba(var(--xvd-g5),.34), transparent);
  background-size:74% 128%, 78% 136%;
  background-position:2% 34%, 96% 72%;
  animation:xvdAurA 4s ease-in-out infinite alternate; }

/* stratul de accente: chihlimbarul si verdele din hero */
.xvd__au::after{
  background-image:
    radial-gradient(closest-side, rgba(var(--xvd-g2),.22), transparent),
    radial-gradient(closest-side, rgba(var(--xvd-g6),.17), transparent);
  background-size:66% 118%, 62% 112%;
  background-position:78% 6%, 4% 92%;
  animation:xvdAurB 5.5s ease-in-out infinite alternate-reverse; }

/* ⚠ 4s si 5,5s. Coborate in cinci trepte: 21/29 → 15/21 → 9/13 → 6/8,5 → 4/5,5.
   Duratele tot nu se divid (8 si 11 jumatati de secunda), deci compozitia
   completa se reia abia la 44 de secunde. */
@keyframes xvdAurA{ to{ background-position:62% 78%, 26% 18%; } }
@keyframes xvdAurB{ to{ background-position:18% 44%, 80% 26%; } }
/* ⚠ Aceeasi regula ca a temei pentru bulele din hero (`mds-asset.css:74`). */
@media (prefers-reduced-motion:reduce){
  .xvd__au::before,.xvd__au::after{ animation:none; } }

/* ⚠ Tot continutul cardului trece peste aurora. */
.xvd__hd,.xvd__top,.xvd__disc{ position:relative; z-index:1; }

.xvd__h em{ font-style:normal; font-weight:600; color:var(--xc-ink2); }
.xvd__h b{ font-weight:700; }
.xvd__t{ position:relative; z-index:1; margin:18px 0 0; }
.xvd__t p{ margin:0; font:400 var(--xf-sm)/1.65 var(--xf); color:var(--xc-ink2); }
.xvd__t b{ color:var(--xc-ink); font-weight:700; }
/* ⚠ Cele doua butoane pe ACELASI rand, ca in demo. Textul ALB, cum ai cerut. */
.xvd__btns{ display:grid; grid-template-columns:1fr; gap:10px; margin:24px 0 0; }
.xvd__btn{ display:flex; align-items:center; gap:12px; padding:14px 16px; text-align:left;
  border-radius:var(--xr-i); background:var(--xs-inset); cursor:pointer; color:inherit; }
.xvd__btn:hover{ background:var(--xs-track); }
.xvd__btn svg{ width:19px; height:19px; flex:none; color:var(--xc-ink3); }
/* ⚠ BUTOANELE SI TABURILE COBOARA O TREAPTA: `--xt-7` (13,5px), nu `--xf-sm`
   (15,5px). 24 din cele 29 stateau exact la marimea prozei pe care o
   intrerup, si la 600 — adica strigau mai tare decat ce scria in ele.
   Cutia ramane neatinsa (44px inaltime, acelasi padding), deci se apasa la
   fel de usor cu degetul. */
.xvd__btn b{ display:block; font:600 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink); }
.xvd__btn em{ display:block; margin-top:3px; font:400 var(--xt-8)/1.35 var(--xf);
  font-style:normal; color:var(--xc-ink3); }

/* ── disclaimerul, in card ── */
.xvd__disc{ margin:0; padding:18px 24px 28px;
  background:var(--xsep) no-repeat top/100% 1px;
  font:400 var(--xt-8)/1.55 var(--xf); color:var(--xc-ink3); }
.xvd__disc a{ color:var(--xc-ink2); font-weight:600; }

/* ══ CEI SASE PILONI · IN AFARA CARDULUI ═══════════════════════════════════
   ⚠ Semicercul e un `conic-gradient` pornit de la -90deg, deci 0 e la ora 9 si
     180deg de baleiaj ajung la ora 3. Cutia are jumatate din inaltimea
     cercului, iar `overflow:hidden` taie jumatatea de jos. Gaura din mijloc o
     face o masca radiala — asa arcul are grosime, nu e disc plin. */
/* ⚠⚠ `min-width:0` pe INVELIS, nu pe pista. Pe mobil `.xvd__dr` e
   `display:contents`, deci itemul de grila e `.xvp` (care poarta titlul si
   pista), nu `.xvp__tr`. Minimul automat al unui item de grila e `min-content`,
   asa ca `.xvp` se intindea la 624px si trăgea coloana dupa el — masurat:
   `grid-template-columns: 576px` pe o fereastra de 350. Pusesem `min-width:0`
   pe pista, unde n-avea ce repara. */
.xvp{ min-width:0; margin:24px 0 0; }
.xvp__t{ margin:0 0 12px; font:600 var(--xf-sm)/1.3 var(--xf); color:var(--xc-ink3); }
/* ⚠ TOATE PE UN RAND. Pe mobil pista deruleaza lateral, cu `scroll-snap`, deci
   degetul se opreste pe un card, nu intre doua. Cardurile ies pana la marginea
   cardului mare prin marje negative, ca ultimul sa nu para taiat de padding. */
/* ⚠⚠ `min-width:0`. Pe mobil `.xvd__dr` e `display:contents`, deci pista devine
   item de grila, iar minimul automat al unui item de grila e `min-content`:
   pista se INTINDEA la 616px in loc sa deruleze, si impingea toata pagina.
   Masurat inainte: `scrollWidth == clientWidth` si derulare orizontala de
   pagina. Aceeasi capcana ca la tabelul de triangulare din §8. */
.xvp__tr{ min-width:0; display:flex; gap:9px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:0 calc(-1 * 24px);
  padding:2px 24px;
  scrollbar-width:none; -ms-overflow-style:none; }
.xvp__tr::-webkit-scrollbar{ display:none; }
.xvp__c{ flex:0 0 108px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:13px 8px 11px; border-radius:var(--xr-i); background:var(--xs-inset);
  text-decoration:none; color:inherit; }
.xvp__c:hover{ background:var(--xs-track); }
/* ⚠ ALB, cum ai cerut. */
.xvp__k{ font:600 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink); text-align:center; }
/* ⚠ Semicercul: `conic-gradient` pornit de la -90deg, deci 0 e la ora 9 si
   180deg de baleiaj ajung la ora 3. Cutia are jumatate din inaltimea cercului si
   taie restul; gaura din mijloc o face o masca radiala, ca arcul sa aiba
   grosime. Micsorat de la 92 la 66px, cum ai cerut. */
.xvp__g{ position:relative; width:66px; height:33px; overflow:hidden; }
.xvp__g::before{ content:""; position:absolute; left:0; top:0; width:66px; height:66px;
  border-radius:50%;
  background:conic-gradient(from -90deg,
    var(--pc) 0 calc(var(--p) * 1.8deg),
    var(--xs-track) calc(var(--p) * 1.8deg) 180deg,
    transparent 180deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 62%, #000 62.5%);
  mask:radial-gradient(circle at 50% 50%, transparent 62%, #000 62.5%); }
.xvp__n{ position:absolute; left:0; right:0; bottom:0; text-align:center;
  font:700 var(--xt-6)/1 var(--xf); letter-spacing:-.014em; font-variant-numeric:tabular-nums; }

/* ══ FERESTRELE ═══════════════════════════════════════════════════════════
   ⚠⚠ TOATE REGULILE DE INVELIS SUNT `.mdsx .vmod.xvm…`, adica (0,3,0).
      Tema are `.mdsx .vmod`, `.mdsx .vmod__box`, `.mdsx .vmod__hd`,
      `.mdsx .vmod__x` — toate (0,2,0), la `verdict.css:195-245`. Regulile mele
      erau `.xvm__box` etc., (0,1,0), deci PIERDEAU: ferestrele aratau in
      continuare designul temei — colturi de 16px, fundal #121214, chenar de 1px.
      Nu s-a vazut in preview fiindca designul temei e el insusi decent.
      A TREIA OARA cu aceeasi capcana, dupa `.lede` si `.mdsx .band p b`.
      O clasa in plus (`.vmod.xvm`) castiga indiferent de ordinea de tiparire.
   ⚠ Regulile de CONTINUT (`.xvm__tab`, `.xvm__tr`…) raman la (0,1,0): tema n-are
     nimic pe numele astea, deci n-au cu ce sa se lupte.
   ⚠ DESCHIDEREA O FACE TEMA, prin `display:none` → `.is-open{display:flex}`.
     Nu se lupta cu ea: `display` nu se poate anima oricum.
   ⚠ `mds-verdict.js` adauga clasa `.is-open` si STERGE `aria-hidden`. */
.mdsx .vmod.xvm{ padding:20px; background:rgba(8,9,10,.76);
  backdrop-filter:blur(10px) saturate(1.1); font-family:var(--xf); color:var(--xc-ink); }
.mdsx .vmod.xvm .xvm__box{ width:min(620px,100%);
  /* ⚠ Inaltime redusa cu ~28% fata de tema (86vh → 62vh), cum ai cerut. */
  max-height:62vh;
  background:var(--xs-card); border:0; border-radius:28px;
  box-shadow:0 26px 70px -22px rgba(0,0,0,.8); }
/* ⚠⚠ `justify-content:space-between` si `align-items:flex-start`.
   Tema are doar `display:flex; align-items:center; gap:12px` pe `.vmod__hd`
   (`verdict.css:221`), fara `justify-content` — deci butonul X statea LIPIT de
   titlu, nu in coltul cardului. Se pierduse cand am rescris blocul.
   `flex-start` il tine sus, in colt, si cand titlul curge pe doua randuri.
   ⚠ Titlul primeste `min-width:0`, altfel un titlu lung ar impinge butonul in
     afara cutiei: minimul automat al unui item de flex e tot `min-content`. */
.mdsx .vmod.xvm .xvm__hd{ padding:20px 24px 14px; border-bottom:0;
  justify-content:space-between; align-items:flex-start; gap:16px; }
.mdsx .vmod.xvm .xvm__t{ min-width:0; }
.mdsx .vmod.xvm .xvm__t{ font-weight:600; font-size:var(--xt-4);
  line-height:1.25; letter-spacing:-.012em; color:var(--xc-ink); }
.mdsx .vmod.xvm .xvm__x{ width:34px; height:34px; border-radius:50%;
  background:var(--xs-inset); color:var(--xc-ink2); }
.mdsx .vmod.xvm .xvm__x:hover{ background:var(--xs-track); color:var(--xc-ink); }
.mdsx .vmod.xvm .xvm__x svg{ width:16px; height:16px; }
.mdsx .vmod.xvm .xvm__b{ padding:0 24px 28px;
  overflow-y:auto; overscroll-behavior:contain; }

.xvm__lede{ margin:0 0 18px; font:400 var(--xf-sm)/1.55 var(--xf); color:var(--xc-ink); }

/* ── comutatorul de orizont ── */
.xvm__r0{ position:absolute; opacity:0; pointer-events:none; }
.xvm__tabs{ display:flex; gap:5px; margin:0 0 18px; padding:4px; border-radius:var(--xr-p);
  background:var(--xs-track); width:fit-content; max-width:100%; overflow-x:auto;
  scrollbar-width:none; }
.xvm__tabs::-webkit-scrollbar{ display:none; }
.xvm__tab{ padding:8px 14px; border-radius:var(--xr-p); font:600 var(--xt-7)/1.2 var(--xf);
  color:var(--xc-ink3); cursor:pointer; white-space:nowrap; }
.xvm__tab:hover{ color:var(--xc-ink); }
.xvm__pan{ display:none; }
#xtr-90:checked ~ .xvm__pan--90, #xtr-180:checked ~ .xvm__pan--180,
#xtr-365:checked ~ .xvm__pan--365, #xtr-730:checked ~ .xvm__pan--730{ display:block; }
#xtr-90:checked ~ .xvm__tabs [for=xtr-90], #xtr-180:checked ~ .xvm__tabs [for=xtr-180],
#xtr-365:checked ~ .xvm__tabs [for=xtr-365],
#xtr-730:checked ~ .xvm__tabs [for=xtr-730]{ background:var(--xs-card); color:var(--xc-ink); }

.xvm__sum{ margin:0 0 16px; font:400 var(--xf-sm)/1.55 var(--xf); color:var(--xc-ink2); }
.xvm__sum b{ color:var(--xc-ink); font-weight:700; }

/* ── tabelul de benzi ── */
.xvm__thd,.xvm__tr{ display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center; gap:4px 12px; }
.xvm__thd{ padding:0 0 8px; font:600 var(--xt-8)/1.3 var(--xf); letter-spacing:.06em;
  text-transform:uppercase; color:var(--xc-ink4); }
.xvm__thd span:nth-child(2){ display:none; }
.xvm__thd span:nth-child(3),.xvm__thd span:nth-child(4){ text-align:right; }
.xvm__tr{ padding:13px 0; }
.xvm__tr + .xvm__tr{ background:var(--xsep) no-repeat top/100% 1px; }
/* ⚠ Banda companiei, marcata cu o adancitura, nu cu chenar. */
.mdsx .vmod.xvm .xvm__tr.is-here{ margin:0 -12px; padding:13px 12px;
  border-radius:var(--xr-i); background:var(--xs-inset); }
.mdsx .vmod.xvm .xvm__tr.is-here + .xvm__tr{ background-image:none; }
.xvm__tb{ grid-row:1; grid-column:1; justify-self:start; padding:4px 11px;
  border-radius:var(--xr-p); font:600 var(--xt-7)/1.35 var(--xf);
  background:color-mix(in srgb, var(--bc) 15%, transparent); color:var(--bc); }
.xvm__tn{ grid-row:2; grid-column:1; font:400 var(--xt-8)/1.35 var(--xf); color:var(--xc-ink4);
  font-variant-numeric:tabular-nums; }
.xvm__tr b{ grid-row:1/span 2; font:600 var(--xt-6)/1.2 var(--xf); text-align:right;
  font-variant-numeric:tabular-nums; }
.xvm__tx{ grid-row:1/span 2; font:400 var(--xt-8)/1.35 var(--xf); color:var(--xc-ink4);
  text-align:right; max-width:11ch; }

/* ── cronologia si randurile de istoric ── */
.xvm__tl{ display:flex; gap:2px; height:8px; margin:0 0 18px; }
.xvm__tl i{ display:block; width:var(--w); border-radius:3px; background:var(--c);
  opacity:var(--o); }
.xvm__ir{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px;
  padding:14px 0; }
.xvm__ir + .xvm__ir{ background:var(--xsep) no-repeat top/100% 1px; }
.xvm__ia{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.xvm__iv{ padding:4px 11px; border-radius:var(--xr-p); font:600 var(--xt-7)/1.35 var(--xf);
  background:color-mix(in srgb, var(--bc) 15%, transparent); color:var(--bc); }
.xvm__io{ padding:3px 9px; border-radius:var(--xr-p); background:var(--xs-inset);
  font:600 var(--xt-8)/1.35 var(--xf); color:var(--xc-ink3); }
.xvm__id{ flex:1 1 100%; font:400 var(--xt-8)/1.4 var(--xf); color:var(--xc-ink4);
  font-variant-numeric:tabular-nums; }
.xvm__ip{ grid-column:1; font:500 var(--xt-7)/1.3 var(--xf); color:var(--xc-ink2);
  font-variant-numeric:tabular-nums; }
.xvm__ic{ grid-column:2; grid-row:1/span 2; text-align:right; }
.xvm__ic b{ display:block; font:600 var(--xt-6)/1.2 var(--xf); font-variant-numeric:tabular-nums; }
.xvm__ic span{ display:block; margin-top:3px; font:400 var(--xt-8)/1.3 var(--xf);
  color:var(--xc-ink4); font-variant-numeric:tabular-nums; }

.xvm__nota{ margin:20px 0 0; padding:19px 21px; border-radius:var(--xr-i);
  background:var(--xs-inset); font:400 var(--xt-8)/1.55 var(--xf); color:var(--xc-ink3); }
.xvm__nota a{ color:var(--xc-ink2); font-weight:600; white-space:nowrap; }

/* ── pictograma „deschide in fereastra", pe buton ── */
.xvd__bx{ margin-left:auto; flex:none; display:flex; color:var(--xc-ink4); }
.xvd__bx svg{ width:14px; height:14px; }
.xvd__btn:hover .xvd__bx{ color:var(--xc-ink2); }

@container mdsx (min-width:900px){
  .xvd__card{ border-radius:var(--xr-c); }
  /* ⚠ Pe desktop aurora sta peste coloana din STANGA — acolo unde e verdictul —
     si iese peste marginea de sus si peste cea din stanga, unde e taiata de
     card. Se stinge doar spre dreapta si in jos, adica spre text.
     ⚠ DOUA masti combinate cu `intersect`: una stinge la dreapta, alta in jos.
       Ordinea conteaza — `mask` e o SCURTATURA care include `mask-composite`,
       deci compozitiile se scriu DUPA ambele scurtaturi, altfel se reseteaza la
       `add` si masca devine reuniune. */
  .xvd__au{ right:auto; top:-26%; left:-16%; width:76%; height:124%; }
  .xvd__au::before,.xvd__au::after{
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.4) 74%,transparent 100%),
      linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.4) 80%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 44%,rgba(0,0,0,.4) 74%,transparent 100%),
      linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.4) 80%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect; }
  .xvd__hd{ padding:29px 31px 31px; padding-bottom:0; }
  .xvd__top{ padding:29px 31px 31px;
    grid-template-columns:minmax(0,0.92fr) 1px minmax(0,1.08fr); gap:0; }
  /* ⚠ Coloanele redevin blocuri, deci `order` nu mai are efect si ordinea e cea
     din marcaj: stanga intreaga, apoi dreapta intreaga. */
  .xvd__st,.xvd__dr{ display:block; }
  /* ⚠ `balance` doar pe desktop: fraza are 2-3 randuri lungi si echilibrarea
     le face egale, fara sa le scurteze vizibil. */
  .xvd__h{ margin-top:0; text-wrap:balance; }
  /* ⚠⚠ TOATE TREI cu `grid-area` EXPLICIT, pe randul 1.
     Fara randul explicit, plasarea automata punea pseudo-elementul SINGUR in
     randul 1 — care are inaltime 0, fiindca n-are continut — si impingea
     coloanele in randul 2. Masurat: `grid-template-rows: 0px 326px`.
     Separatorul exista, avea 1px latime si ZERO inaltime, deci era invizibil.
     ⚠ E o COLOANA de 1px in grila, nu o bordura: asa se opreste exact la
       marginile continutului, nu la ale cardului. */
  .xvd__st{ grid-area:1 / 1; padding-right:31px; }
  .xvd__top::before{ content:""; grid-area:1 / 2; align-self:stretch;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.11) 14%,
      rgba(255,255,255,.11) 86%,transparent); }
  .xvd__dr{ grid-area:1 / 3; padding-left:31px; }
  .xvd__disc{ padding:18px 31px 31px; }
  .xvd__btns{ grid-template-columns:1fr 1fr; }
  .xvd__scal{ height:54px; gap:6px; } .xvd__scal i{ width:15px; }
  .xvp__tr{ margin:0; padding:2px 0; overflow-x:visible; }
  .xvp__c{ flex:1 1 0; min-width:0; }
  /* ⚠ Pe desktop fereastra se centreaza si primeste raze pe toate colturile;
     pe mobil urca de jos, lipita de marginea ecranului. */
  .xvm{ align-items:center; padding:29px; }
  .xvm__box{ border-radius:var(--xr-c); max-height:80vh; }
  .xvm__hd{ padding:24px 34px 16px; }
  .xvm__b{ padding:0 34px 34px; }
}