/* =============================================================================
   acx-meniu.css — meniul aplicației (bara laterală .acx și meniul de telefon), „Continuare Arhitectura Noua Design Dennis".
   Se încarcă pe TOATE paginile care includ partials/acx-chat-side.html.twig (chat, magazin, program, livrare,
   favorite, cont), după stilurile paginii — ca meniul să arate la fel oriunde te duci.
   Se aplică pe body.acx-page (clasa pe care o pun deja controllerele acestor pagini).
   · sub 1024px: meniul pe tot ecranul, în limba meniului de pe landing — sticla rgba(8,11,18,.7) + blur(26px)
     saturate(1.3), lumina din centru, valul de puncte din buton (acx-meniu.js), opțiunile urcă pe rând (60 ms);
     locurile sunt rânduri mari (Andu cu chipul lui, Magazin cu descrierea), Mail și Feedback două butoane mici,
     iar dedesubt cardul de cont gratuit (beneficii + „Intră în cont" / „Creează cont");
   · de la 1024px: bara laterală veche, cu ajustări: strângere/deschidere lină (coregrafia din acx-meniu.js),
     sticlă și lumini ca pe telefon, chipul lui Andu, descrierile, același card de cont;
   · scara: între 1100 și 1899px pagina rămâne la 100% (fonts.css o punea la 75%), ca meniul și textul să aibă
     aceeași mărime pe toate paginile aplicației.
   Numele claselor `pm-*` sunt ale acestui strat (pm = „meniu"); textele sunt în acx-chat-side.html.twig.
   ========================================================================== */
@media (max-width: 1023.98px) {
/* ── comun · sticla ─────────────────────────────────────────────────────── */
  body.acx-page .acx {
    --e: cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.acx-page .acx-shell {
    background: rgba(8, 11, 18, 0.7);
    -webkit-backdrop-filter: blur(26px) saturate(1.3);
    backdrop-filter: blur(26px) saturate(1.3);
  }
  body.acx-page .acx[data-minified] .acx-shell {
    transition: opacity 0.45s var(--e);
  }
  /* la închidere: opțiunile dispar primele (0,12 s), apoi se stinge sticla */
  body.acx-page .acx:not([data-minified]) .acx-shell {
    transition:
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.07s,
      visibility 0s linear 0.37s;
  }
  /* lumina din centru, în locul vălului de gradient (0,22) */
  body.acx-page .acx-shell::before {
    background:
      radial-gradient(60% 34% at 50% 44%, rgba(124, 92, 252, 0.12), transparent 70%),
      radial-gradient(46% 22% at 14% 90%, rgba(0, 150, 255, 0.13), transparent 72%),
      radial-gradient(46% 22% at 86% 88%, rgba(181, 33, 233, 0.13), transparent 72%);
    opacity: 0;
    transform: scale(0.94);
    transition:
      opacity 0.2s ease,
      transform 0.25s ease;
  }
  body.acx-page .acx[data-minified] .acx-shell::before {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.9s ease-out 0.12s,
      transform 1.1s var(--e) 0.12s;
  }
  body.acx-page .acx-shell > .mn-waves {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  /* ── comun · intrarea: blocurile de azi nu mai urcă în grup, ci fiecare opțiune pe rând ── */
  body.acx-page .acx-card,
  body.acx-page .acx-pills,
  body.acx-page .acx-guest,
  body.acx-page .acx[data-minified] .acx-card,
  body.acx-page .acx[data-minified] .acx-pills,
  body.acx-page .acx[data-minified] .acx-guest {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.acx-page .acx .pm-u {
    opacity: 0;
    transform: translateY(0.875rem);
    transition:
      opacity 0.12s ease-out,
      transform 0.2s ease-in;
  }
  body.acx-page .acx[data-minified] .pm-u {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.6s ease-out calc(0.2s + var(--i, 0) * 0.06s),
      transform 0.8s var(--e) calc(0.2s + var(--i, 0) * 0.06s),
      color 0.2s,
      background 0.2s;
  }
  body.acx-page .acx .acx-head.pm-u {
    transform: none;
  }
  /* „Contul meu" + Autentificare / Creare cont apăreau de DOUĂ ori la musafir (aici și în cardul de jos):
     rămân o singură dată, în cardul de jos */
  body.acx-page .acx .acx-item--static,
  body.acx-page .acx .acx-sub {
    display: none;
  }
  body.acx-page .acx-guest-badge {
    display: none;
  }
  /* ── comun · butonul de meniu: fără cutie, ca pe landing ── */
  body.acx-page .acx-mbtns {
    right: 0.5rem;
  }
  body.acx-page .acx-mbtn.acx-mburger {
    background: none;
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-tap-highlight-color: transparent;
  }
}
/* ════════════════════════════════════════════════════════════════════════════
   TELEFON (sub 1024px) · meniul pe ecran întreg, în limba meniului de pe landing (28 sept)
   Principiile:
   1. Meniul are trei feluri de lucruri, deci trei forme:
      LOCURI (Andu, Programul meu, Mesaje favorite, Magazin, Contul meu) = rânduri mari;
      ACȚIUNI care deschid o fereastră (Mail săptămânal, Feedback) = două butoane mici, alăturate;
      CONTUL (musafir) = o frază + două butoane, „Intră în cont" / „Creează cont".
   2. Ordinea o dau alinierea și spațiul, nu cutiile: fără panouri, fără plăcuțe sub pictograme,
      fără săgeți „›" (ele promit un ecran nou, iar Mail / Feedback deschid o fereastră).
   3. Contul vine ultimul, după locuri și acțiuni: musafirul are cardul „Cu un cont gratuit" (cu „Creează cont"
      ca buton principal), iar cine e logat are doar „Ieși din cont", discret.
   4. Andu e o persoană, nu o intrare de meniu: rândul lui are chipul lui (ca în capul conversației).
   ════════════════════════════════════════════════════════════════════════════ */
.acx .pm-av,
.acx .pm-sub {
  display: none;
}
@media (max-width: 1023.98px) {
  body.acx-page .acx-nav {
    gap: 0;
    padding: 0.5rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
  body.acx-page .acx-card,
  body.acx-page .acx-group {
    display: contents;
  }
  /* cardul de unelte al programului (Unelte / Progres / Întreabă despre plan) rămâne ascuns pe telefon, ca în
     meal-plan-v7-chrome.css: aceleași unelte sunt în bara de jos a paginii (up5m.*). Regula de mai sus (display:
     contents) l-ar fi scos la iveală, de aceea e repetată aici, mai tare. */
  body.acx-page .acx-card.acx-tools {
    display: none;
  }
  /* LOCURILE */
  body.acx-page .acx-item {
    display: grid;
    grid-template-columns: 2.75rem 1fr auto;
    align-items: center;
    column-gap: 0.875rem;
    min-height: 4rem;
    margin: 0 -0.75rem;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: 1rem;
    background: none;
    font: 700 1.375rem/1.15 "Sora", "Inter", sans-serif;
    letter-spacing: -0.03em;
    color: #fff;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  body.acx-page .acx-item:hover,
  body.acx-page .acx-item[data-active] {
    background: none;
  }
  body.acx-page .acx-item:active {
    background: rgba(255, 255, 255, 0.05);
  }
  body.acx-page .acx-item[data-active]::before {
    display: none;
  }
  body.acx-page .acx-item svg {
    justify-self: center;
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 1.6;
    color: rgba(212, 197, 255, 0.82);
  }
  /* linia dintre rânduri pornește de la text, nu de sub pictogramă */
  body.acx-page .acx-card > .acx-item + .acx-item::after,
  body.acx-page .acx-group > .acx-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(0.75rem + 3.625rem);
    right: 0.75rem;
    height: 0.0625rem;
    background: rgba(255, 255, 255, 0.07);
  }
  body.acx-page .pm-sub {
    display: block;
    margin-top: 0.25rem;
    font: 500 0.8125rem/1.35 "Inter", sans-serif;
    letter-spacing: 0;
    color: var(--muted);
  }
  /* Andu: chipul lui, cu inelul în gradient și punctul verde, ca în capul conversației */
  body.acx-page .acx-card > .acx-item:has(> .pm-av) svg {
    display: none;
  }
  body.acx-page .pm-av {
    display: block;
    position: relative;
    justify-self: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.125rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #00c2ff, #b521e9);
  }
  body.acx-page .pm-av img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 0.125rem solid #0b0e15;
  }
  body.acx-page .pm-av::after {
    content: "";
    position: absolute;
    right: -0.0625rem;
    bottom: -0.0625rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #01db69;
    border: 0.15625rem solid #0b0e15;
  }
  /* „Abonament" e un <button>: acx-abonament.css îi pune `font: inherit` cu specificitate mai mare
     (.acx-nav .acx-item.acx-abonament) — îl aducem la rândul comun */
  body.acx-page .acx-nav .acx-item.acx-abonament {
    width: auto;
    font: 700 1.375rem/1.15 "Sora", "Inter", sans-serif;
    letter-spacing: -0.03em;
  }
  body.acx-page .acx-abonament .acx-abonament-stare {
    font-family: "Inter", sans-serif;
    letter-spacing: 0;
  }
  /* ACȚIUNILE: două butoane mici, alăturate */
  body.acx-page .acx-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-top: 1.25rem;
  }
  body.acx-page .acx-pill {
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.25rem;
    padding: 0.5rem 0.625rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.045);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.05);
    font: 600 min(0.9375rem, 3.75vw)/1.2 "Inter", sans-serif;
    color: #fff;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  body.acx-page .acx-pill svg {
    width: 1.125rem;
    height: 1.125rem;
    color: rgba(212, 197, 255, 0.82);
  }
  body.acx-page .acx-pill:active {
    background: rgba(255, 255, 255, 0.08);
  }
  /* CONTUL: o frază, apoi „Intră în cont" | „Creează cont" (acțiunea principală în dreapta, ca în iOS) */
  body.acx-page .acx-guest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-top: 1.75rem;
    padding: 0;
    background: none;
    border: 0;
    overflow: visible;
    text-align: left;
  }
  body.acx-page .acx-guest::before {
    display: none;
  }
  body.acx-page .acx-guest-t {
    grid-column: 1 / -1;
    margin: 0 0 0.25rem;
    font: 500 0.875rem/1.45 "Inter", sans-serif;
    letter-spacing: 0;
    color: var(--muted);
    text-align: center;
  }
  body.acx-page .acx-guest-alt,
  body.acx-page .acx-guest-cta {
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 3.25rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 62.4375rem;
    font: 700 1rem/1.2 "Inter", sans-serif;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.acx-page .acx-guest-alt {
    grid-column: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  }
  body.acx-page .acx-guest-cta {
    grid-column: 2;
    color: #fff;
    background: linear-gradient(90deg, #2d9cff, #8b3cf0);
    box-shadow: 0 0.75rem 1.75rem -0.75rem rgba(124, 92, 252, 0.7);
  }
  body.acx-page .acx-guest-cta::before {
    display: none;
  }
  /* logat: rămâne doar „Ieși din cont", discret, pe toată lățimea */
  body.acx-page .acx-guest:not(:has(.acx-guest-alt)) .acx-guest-cta {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.05);
    border: 0.0625rem solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }
}
/* ── telefon · meniul pe ecran întreg + cardul de cont, cu beneficiile (28 sept) ──
   Contul e motivul pentru care un musafir deschide meniul, deci primește suprafața cea mai bogată:
   un card de sticlă cu inel în gradient, cele trei beneficii pe care aplicația le promite deja
   (fereastra „Îți trebuie cont"), apoi „Intră în cont" | „Creează cont". Stă jos, sub deget,
   și umple spațiul de sub opțiuni. */
@media (max-width: 1023.98px) {
  body.acx-page .acx-guest {
    position: relative;
    margin-top: 0;
    padding: 1.375rem 1.25rem 1.25rem;
    border-radius: 1.5rem;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(124, 92, 252, 0.16), transparent 62%),
      rgba(255, 255, 255, 0.035);
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.7);
  }
  /* două grupuri: sus LOCURILE, jos ACȚIUNILE + CONTUL (sub deget). Spațiul liber rămâne între ele;
     când nu mai e loc, se strânge la 1,5rem și meniul derulează. */
  /* RITMUL (28 sept, după „e foarte mult spațiu sus"): conținutul pornește aproape de antet, ca în B —
     distanța de sus (~32pt până la chipul lui Andu) e cât cea dintre grupuri, nu mai mare.
     locuri → ~38pt → acțiuni → 24pt → cont; ce rămâne stă jos, deasupra barei Safari. */
  body.acx-page .acx-nav {
    padding-top: 0.75rem;
  }
  body.acx-page .acx-pills {
    margin-top: 1.75rem;
    margin-bottom: 1.5rem;
  }
  body.acx-page .acx-guest::before {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.0625rem;
    background: linear-gradient(135deg, rgba(0, 194, 255, 0.6), rgba(124, 92, 252, 0.22) 45%, rgba(181, 33, 233, 0.6));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  body.acx-page .acx-guest-t {
    margin: 0 0 0.875rem;
    text-align: left;
    color: var(--fg-2);
  }
  body.acx-page .acx-guest-t b {
    display: block;
    margin-bottom: 0.875rem;
    font: 700 1.25rem/1.25 "Sora", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: #fff;
  }
  body.acx-page .acx-guest-t ul {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  body.acx-page .acx-guest-t li {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    font: 500 0.9375rem/1.35 "Inter", sans-serif;
    color: #d3d3dd;
  }
  body.acx-page .acx-guest-t li::before {
    content: "";
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.4 2.6 2.6L14.2 7.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
      linear-gradient(135deg, #00c2ff, #b521e9);
  }
}
/* telefon, logat: nu mai e nimic de vândut — fără card, doar „Ieși din cont", discret */
@media (max-width: 1023.98px) {
  body.acx-page .acx-guest:not(:has(.acx-guest-alt)) {
    padding: 0;
    background: none;
    box-shadow: none;
  }
  body.acx-page .acx-guest:not(:has(.acx-guest-alt))::before {
    display: none;
  }
}
/* pânza valului de puncte stă mereu scoasă din flux (altfel, pe desktop, împinge logo-ul în jos) și
   există doar pentru meniul de telefon */
.acx-shell > .mn-waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .acx-shell > .mn-waves {
    display: none;
  }
}
/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP (≥1024px) — bara laterală veche (structura ei rămâne), mai vie, ca pe telefon (28 sept)
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body.acx-page {
    --pm-t: 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* ── 1. STRÂNGEREA / DESCHIDEREA, LINĂ ──
     Măsurat înainte (1376px): la strângere coloana chatului, bara de scriere și capul conversației săreau
     84px spre dreapta într-un cadru, apoi alunecau înapoi (688 → 772 → 688). Cauza: `margin-left`
     (= lățimea barei) se anima, dar `padding-right` (= simetria care ține coloana în centrul ecranului)
     se schimba instantaneu. Acum se animă amândouă, cu același ritm, deci centrul nu se mișcă deloc. */
  body.acx-page .acx {
    transition: width var(--pm-t);
  }
  body.acx-page .up5acc-content {
    transition:
      margin-left var(--pm-t),
      padding-right var(--pm-t);
  }
  body.acx-page .up5-chat > .messages,
  body.acx-page .up5-chat .chatroom-top > .grid-container {
    transition: padding-right var(--pm-t);
  }
  body.acx-page .up5-chat .search-bar-container {
    transition:
      left var(--pm-t),
      padding-right var(--pm-t),
      transform 0.42s var(--ease-emph),
      opacity var(--dur-slow);
  }
  body.acx-page .disclaimer-actions {
    transition:
      left var(--pm-t),
      padding-right var(--pm-t),
      transform 0.5s var(--ease-emph),
      opacity var(--dur-slow);
  }
  /* conținutul barei nu mai sare dintr-o așezare în alta: se stinge (0,1s, clasa `pm-out`, pusă de
     acx-meniu.js înainte să lase motorul să comute), bara își schimbă lățimea, apoi noul conținut
     apare treptat (`pm-in`). Logo-ul e tăiat mereu la marginea barei: motorul îi punea `overflow:
     visible` din JS după animație, așa că „Nutritie.ro" ieșea în afară cât timp bara se strângea. */
  body.acx-page .acx .acx-brand {
    overflow: hidden !important;
  }
  body.acx-page .acx .acx-shell > *,
  body.acx-page .acx .acx-mbtns {
    transition: opacity 0.1s ease;
  }
  body.acx-page .acx.pm-out .acx-shell > *,
  body.acx-page .acx.pm-out .acx-mbtns {
    opacity: 0;
  }
  body.acx-page .acx.pm-in .acx-shell > *,
  body.acx-page .acx.pm-in .acx-mbtns {
    animation: pmApare 0.28s ease 0.26s both;
  }
  @keyframes pmApare {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* ── 2. MAI VIE: sticla întunecată cu cele două lumini de jos, ca meniul de pe telefon ── */
  body.acx-page .acx-shell {
    background:
      radial-gradient(130% 30% at 0% 100%, rgba(0, 150, 255, 0.2), transparent 72%),
      radial-gradient(130% 30% at 100% 100%, rgba(181, 33, 233, 0.2), transparent 72%),
      radial-gradient(150% 30% at 50% 0%, rgba(124, 92, 252, 0.11), transparent 62%),
      rgba(8, 11, 18, 0.8);
    -webkit-backdrop-filter: blur(26px) saturate(1.3);
    backdrop-filter: blur(26px) saturate(1.3);
    border-right: 0.0625rem solid rgba(255, 255, 255, 0.07);
  }
  /* rândul activ: lumina în gradient a site-ului, în locul violetului plat */
  body.acx-page .acx .acx-item[data-active] {
    background: linear-gradient(90deg, rgba(0, 194, 255, 0.13), rgba(181, 33, 233, 0.13));
  }
  /* Andu: chipul lui (ca în capul conversației), în locul pictogramei de chat. Legat de rândul care are chipul
     (.pm-av), nu de „primul rând din card" — pe pagina de program, primul rând din cardul de unelte e „Unelte". */
  body.acx-page .acx .acx-card > .acx-item:has(> .pm-av) svg {
    display: none;
  }
  body.acx-page .acx .pm-av {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: 2.125rem;
    height: 2.125rem;
    margin: -0.25rem -0.4375rem -0.25rem -0.4375rem;
    padding: 0.125rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #00c2ff, #b521e9);
  }
  body.acx-page .acx .pm-av img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 0.125rem solid #0b0e15;
  }
  body.acx-page .acx .pm-av::after {
    content: "";
    position: absolute;
    right: -0.0625rem;
    bottom: -0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #01db69;
    border: 0.125rem solid #0b0e15;
  }
  body.acx-page .acx[data-minified] .acx-card > .acx-item:has(> .pm-av) {
    padding: 0.25rem;
  }
  body.acx-page .acx[data-minified] .pm-av {
    margin: 0;
  }
  /* descrierile scurte: „Ești aici", „Programe alimentare personalizate" */
  body.acx-page .acx:not([data-minified]) .pm-sub {
    display: block;
    margin-top: 0.125rem;
    font: 500 0.75rem/1.35 "Inter", sans-serif;
    color: var(--muted);
  }
  body.acx-page .acx .acx-item .acx-item-t {
    min-width: 0;
  }
  /* Mail / Feedback: aceeași sticlă și aceleași pictograme lavandă ca pe telefon */
  body.acx-page .acx .acx-pill {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.05);
  }
  body.acx-page .acx .acx-pill svg,
  body.acx-page .acx .acx-item svg {
    color: rgba(212, 197, 255, 0.82);
  }
  body.acx-page .acx[data-minified] .acx-pill {
    background: none;
    border-color: transparent;
    box-shadow: none;
  }
  /* fără dubluri la musafir: contul e o singură dată, în cardul de jos */
  body.acx-page .acx .acx-item--static,
  body.acx-page .acx .acx-sub {
    display: none;
  }
  /* ── 3. CARDUL DE CONT, ca pe telefon: „Cu un cont gratuit", cele 3 beneficii, „Intră în cont" | „Creează cont" ── */
  body.acx-page .acx:not([data-minified]) .acx-guest {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 1.125rem 1rem 1rem;
    border: 0;
    border-radius: 1.25rem;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(124, 92, 252, 0.16), transparent 62%),
      rgba(255, 255, 255, 0.035);
    box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(0, 0, 0, 0.7);
    overflow: visible;
    text-align: left;
  }
  body.acx-page .acx:not([data-minified]) .acx-guest::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.0625rem;
    background: linear-gradient(135deg, rgba(0, 194, 255, 0.6), rgba(124, 92, 252, 0.22) 45%, rgba(181, 33, 233, 0.6));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  body.acx-page .acx .acx-guest-badge {
    display: none;
  }
  body.acx-page .acx:not([data-minified]) .acx-guest-t {
    grid-column: 1 / -1;
    margin: 0 0 0.625rem;
    font: 500 0.875rem/1.4 "Inter", sans-serif;
    letter-spacing: 0;
    color: #d3d3dd;
  }
  body.acx-page .acx:not([data-minified]) .acx-guest-t b {
    display: block;
    margin-bottom: 0.75rem;
    font: 700 1.125rem/1.25 "Sora", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: #fff;
  }
  body.acx-page .acx:not([data-minified]) .acx-guest-t ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  body.acx-page .acx:not([data-minified]) .acx-guest-t li {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
  }
  body.acx-page .acx:not([data-minified]) .acx-guest-t li::before {
    content: "";
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.4 2.6 2.6L14.2 7.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
      linear-gradient(135deg, #00c2ff, #b521e9);
  }
  body.acx-page .acx:not([data-minified]) .acx-guest-alt,
  body.acx-page .acx:not([data-minified]) .acx-guest-cta {
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.5rem 0.375rem;
    border-radius: 62.4375rem;
    font: 700 0.875rem/1.2 "Inter", sans-serif;
    text-decoration: none;
    white-space: nowrap;
  }
  body.acx-page .acx:not([data-minified]) .acx-guest-alt {
    grid-column: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  }
  body.acx-page .acx:not([data-minified]) .acx-guest-alt:hover {
    background: rgba(255, 255, 255, 0.09);
  }
  body.acx-page .acx:not([data-minified]) .acx-guest-cta {
    grid-column: 2;
    color: #fff;
    background: linear-gradient(90deg, #2d9cff, #8b3cf0);
    box-shadow: 0 0.625rem 1.5rem -0.625rem rgba(124, 92, 252, 0.7);
  }
  body.acx-page .acx:not([data-minified]) .acx-guest-cta::before {
    display: none;
  }
  /* logat: doar „Ieși din cont", fără card */
  body.acx-page .acx:not([data-minified]) .acx-guest:not(:has(.acx-guest-alt)) {
    padding: 0;
    background: none;
    box-shadow: none;
  }
  body.acx-page .acx:not([data-minified]) .acx-guest:not(:has(.acx-guest-alt))::before {
    display: none;
  }
  body.acx-page .acx:not([data-minified]) .acx-guest:not(:has(.acx-guest-alt)) .acx-guest-cta {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.05);
    border: 0.0625rem solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }
}
/* SCARA: fonts.css pune tot site-ul la 75% între 1100 și 1535px (85% până la 1899) — laptopurile obișnuite și
   iPad-ul în landscape. Chatul rămâne la 100% (chat-v8.css); aici rămân la 100% și celelalte pagini cu bara .acx,
   altfel bara laterală și-ar schimba mărimea de la o pagină la alta. Landing-ul și onboarding-ul nu sunt atinse
   (nu au body.acx-page și nu încarcă fișierul ăsta). */
@media (min-width: 1100px) and (max-width: 1899.98px) {
  html:has(> body.acx-page) {
    font-size: 100% !important;
  }
}
/* mișcare redusă: fără urcări, doar apariția */
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  body.acx-page .acx .pm-u,
  body.acx-page .acx[data-minified] .pm-u {
    transform: none !important;
    transition: opacity 0.2s !important;
  }
}

/* ═══ Dennis Patch 5-10-26 · „Programul meu", prima intrare pentru cine are acum un program activ ═══
   (acx-chat-side.html.twig, `_prog`). Evidențiată ca pe landing: inel în gradientul mărcii, o lumină discretă,
   pictograma în culoarea accentului și un „● Activ" sub titlu. Pe telefon și pe desktop (și în bara strânsă). */
body.acx-page .acx .acx-item.acx-item--prog {
  background:
    linear-gradient(rgba(16, 19, 32, 0.78), rgba(16, 19, 32, 0.78)) padding-box,
    linear-gradient(90deg, #00c2ff, #7c5cfc, #b521e9) border-box;
  border: 0.09375rem solid transparent;
  box-shadow: 0 0.75rem 2rem -1rem rgba(124, 92, 252, 0.7);
}
body.acx-page .acx .acx-item.acx-item--prog svg {
  color: #8fd8ff;
}
body.acx-page .acx .acx-item.acx-item--prog::before {
  display: none;
}
/* liniile de despărțire (doar pe telefon, ::after): nici pe intrarea evidențiată, nici sub ea. Pe desktop ::after e eticheta
   barei strânse (data-tip) și rămâne neatinsă. */
@media (max-width: 1023.98px) {
  body.acx-page .acx .acx-item.acx-item--prog::after,
  body.acx-page .acx .acx-item.acx-item--prog + .acx-item::after {
    display: none;
  }
}
body.acx-page .acx .pm-sub--live::before {
  content: "";
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  margin: 0 0.375rem 0.0625rem 0;
  border-radius: 50%;
  background: #01db69;
  box-shadow: 0 0 0.5rem rgba(1, 219, 105, 0.6);
  vertical-align: middle;
}
@media (max-width: 1023.98px) {
  body.acx-page .acx .acx-item.acx-item--prog {
    margin-bottom: 0.5rem;
  }
}
@media (min-width: 1024px) {
  body.acx-page .acx .acx-item.acx-item--prog {
    margin-bottom: 0.25rem;
  }
}