/* =============================================================================
   magazin-v8.css — pagina de magazin (programele), „Continuare Arhitectura Noua Design Dennis".
   Markup: dashboard-shop.html.twig · logica: magazin-v8.js · se încarcă pe ruta magazinului, în locul
   magazin-program-lp.css / magazin-showcase-lp.css / magazin-detalii-lp.css / magazin-v7.css.
   Limba vizuală e cea a landing-ului S: negru adânc, lumini albastru → violet, titluri Sora, carduri-foto
   pentru obiective, telefonul cu aplicația reală, pânza de puncte care se mișcă la alegere.
   ========================================================================== */
/* desktop: lățimea coloanei paginii, pentru simetria cu bara laterală (chat-v7.css, `--acx-continut`) — aceeași
   ca la pagina de dinainte (980 + 2×20), ca pagina să rămână centrată pe tot ecranul, nu doar lângă bară */
@media (min-width: 1024px) {
  body.acx-page:has(.m8) {
    --acx-continut: 63.75rem;
  }
}
@media all {
  body.acx-page:has(.m8) {
    background: #070a11;
  }
  .m8 {
    --tx: #eef0f7;
    --mut: #9a9db2;
    --card: #0f131d;
    --line: rgba(255, 255, 255, 0.08);
    --gc: #38b6ff;
    --gcr: 56, 182, 255;
    position: relative;
    padding-bottom: 7rem;
    color: var(--tx);
    font-family: "Inter", sans-serif;
    text-align: center;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
  }
  .m8[data-g="mentinere"] {
    --gc: #b39bff;
    --gcr: 179, 155, 255;
  }
  .m8[data-g="masa"] {
    --gc: #ff8a6e;
    --gcr: 255, 138, 110;
  }
  :where(.m8) *,
  :where(.m8) *::before,
  :where(.m8) *::after {
    box-sizing: border-box;
  }
  :where(.m8) svg {
    display: block;
  }
  :where(.m8) :where(h1, h2, p, ul, ol) {
    margin: 0;
    padding: 0;
  }
  :where(.m8) :where(ul, ol) {
    list-style: none;
  }
  :where(.m8) a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  :where(.m8) button {
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  /* textul în gradient, ca pe landing */
  /* fără cuvinte rămase singure pe rând */
  .m8 :is(.m8-lede, .m8-promise, .m8-caps p, .m8-price-card p, .m8-who-card p, .m8-steps span, .m8-grid span, .m8-demo-note, .m8-end-sub) {
    text-wrap: balance;
  }
  .m8 :is(.m8-h1, .m8-h2) span,
  .m8-price-big span {
    background: linear-gradient(95deg, #1ab2ff 0%, #7c5cfc 55%, #c04bf0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* ── capul ── */
  .m8-top {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    height: 3.75rem;
    padding: 0 1rem;
    transition: background 0.35s ease, box-shadow 0.35s ease;
  }
  .m8-top.m8-scrolled {
    background: rgba(8, 11, 18, 0.78);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .m8-logo {
    display: flex;
    align-items: center;
  }
  .m8-logo-svg {
    width: auto;
    height: 1.625rem;
  }
  .m8-abonat {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.25rem 1rem 0;
    padding: 0.75rem 0.875rem;
    border-radius: 1rem;
    background: rgba(52, 211, 153, 0.08);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.28);
    font-size: 0.8125rem;
    line-height: 1.35;
    text-align: left;
    color: #cfeee0;
  }
  .m8-abonat b {
    color: #fff;
  }
  .m8-abonat i {
    margin-left: auto;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    color: #5ee0a0;
  }
  .m8-abonat-d {
    flex: 0 0 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
  }
  /* ════════ 1 · HERO ════════ */
  .m8-hero {
    position: relative;
    padding: 0.75rem 1rem 1.5rem;
    isolation: isolate;
  }
  .m8-dots {
    position: absolute;
    inset: -3.75rem 0 0;
    z-index: -1;
    width: 100%;
    height: calc(100% + 3.75rem);
    pointer-events: none;
  }
  .m8-glow {
    position: absolute;
    inset: -3.75rem 0 -8rem;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask: linear-gradient(180deg, #000 60%, transparent);
    mask: linear-gradient(180deg, #000 60%, transparent);
  }
  .m8-glow i {
    position: absolute;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.32;
    animation: m8Deriva 22s ease-in-out infinite alternate;
  }
  .m8-glow i:first-child {
    left: -14rem;
    top: 4rem;
    background: #0a7cff;
  }
  .m8-glow i:last-child {
    right: -15rem;
    top: 16rem;
    background: rgb(var(--gcr));
    opacity: 0.26;
    animation-delay: -11s;
    transition: background 0.8s ease;
  }
  @keyframes m8Deriva {
    to {
      transform: translate3d(3rem, -2rem, 0) scale(1.1);
    }
  }
  .m8-kick {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.875rem;
    border-radius: 62.4375rem;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    font: 600 0.75rem/1 "Inter", sans-serif;
    letter-spacing: 0.01em;
    color: #cfd3e6;
  }
  .m8-live {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: m8Puls 2.2s ease-out infinite;
  }
  @keyframes m8Puls {
    70%,
    100% {
      box-shadow: 0 0 0 0.5rem rgba(52, 211, 153, 0);
    }
  }
  .m8-h1 {
    margin: 1rem 0 0.75rem;
    font: 700 2.25rem/1.08 "Sora", "Inter", sans-serif;
    letter-spacing: -0.035em;
    color: #fff;
  }
  .m8-h1 em {
    font-style: normal;
    white-space: nowrap;
  }
  .m8-lede {
    max-width: 20.5rem;
    margin: 0 auto;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #aeb2c6;
  }
  .m8-lede b {
    color: #e8eaf3;
    font-weight: 600;
  }
  /* obiectivele: carduri-foto, ca pe landing */
  .m8-goals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    margin-top: 1.375rem;
  }
  .m8-goal {
    position: relative;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    border-radius: 1.25rem;
    background: #10141e;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.66;
    transform: scale(0.95);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.35s ease,
      box-shadow 0.35s ease;
  }
  .m8-goal:active {
    transform: scale(0.93);
  }
  .m8-goal-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    transform: scale(1.06);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .m8-goal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 10, 17, 0) 45%, rgba(7, 10, 17, 0.85));
  }
  .m8-goal-l {
    position: absolute;
    left: 0.625rem;
    right: 0.5rem;
    bottom: 0.625rem;
    z-index: 2;
    font: 700 0.8125rem/1.15 "Sora", "Inter", sans-serif;
    letter-spacing: -0.01em;
    text-align: left;
    color: #fff;
  }
  /* descrierea obiectivului: doar pe desktop, unde obiectivele sunt rânduri (ca pe landing) */
  .m8-goal-d {
    display: none;
  }
  .m8-goal-ck {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: rgba(7, 10, 17, 0.35);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
    transition: background 0.3s, box-shadow 0.3s, transform 0.4s cubic-bezier(0.34, 1.6, 0.64, 1);
  }
  .m8-goal-ck svg {
    width: 0.8125rem;
    height: 0.8125rem;
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    transition: stroke-dashoffset 0.35s ease 0.08s;
  }
  .m8-goal[aria-checked="true"] {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 0 0 2px var(--gc),
      0 1rem 2rem -0.875rem rgba(var(--gcr), 0.8);
  }
  .m8-goal[aria-checked="true"] .m8-goal-art {
    transform: scale(1);
  }
  .m8-goal[aria-checked="true"] .m8-goal-ck {
    background: var(--gc);
    box-shadow: none;
    transform: scale(1.08);
  }
  .m8-goal[aria-checked="true"] .m8-goal-ck svg {
    stroke-dashoffset: 0;
  }
  .m8-promise {
    min-height: 2.75rem;
    max-width: 20.5rem;
    margin: 1rem auto 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #dfe2ee;
  }
  .m8-promise span {
    display: inline-block;
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .m8-promise span.m8-iese {
    opacity: 0;
    transform: translateY(0.375rem);
  }
  .m8-buy {
    margin-top: 1.125rem;
  }
  /* butonul principal: pastila de pe landing, cu o lumină care trece peste ea din când în când */
  .m8-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 3.625rem;
    padding: 0 3.75rem;
    border-radius: 62.4375rem;
    background: linear-gradient(90deg, #149dff, #7c5cfc 55%, #b521e9);
    box-shadow:
      0 1rem 2.25rem -0.875rem rgba(124, 92, 252, 0.75),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
    font: 700 1rem/1 "Inter", sans-serif;
    color: #fff !important;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
  }
  .m8-cta:active {
    transform: scale(0.98);
  }
  .m8-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: m8Luciu 5s ease-in-out 1.6s infinite;
  }
  @keyframes m8Luciu {
    0%,
    62% {
      transform: translateX(-120%);
    }
    100% {
      transform: translateX(120%);
    }
  }
  .m8-cta i {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    display: grid;
    place-items: center;
    width: 2.875rem;
    height: 2.875rem;
    margin-top: -1.4375rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
  }
  .m8-cta i svg,
  .m8-bar-cta svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .m8-fine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--mut);
  }
  .m8-fine b {
    color: #fff;
  }
  .m8-sep {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: #4a4f63;
  }
  .m8-ok {
    color: #5ee0a0;
    font-weight: 600;
  }
  .m8-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1.25rem;
    font: 600 0.8125rem/1 "Inter", sans-serif;
    color: #aab0c6;
  }
  .m8-more svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: m8Sari 1.8s ease-in-out infinite;
  }
  @keyframes m8Sari {
    50% {
      transform: translateY(0.1875rem);
    }
  }
  /* intrarea hero-ului, în cascadă */
  .m8-in {
    animation: m8Urca 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--d, 0) * 1s + 0.05s);
  }
  @keyframes m8Urca {
    from {
      opacity: 0;
      transform: translateY(0.875rem);
    }
  }
  /* ════════ secțiunile ════════ */
  .m8-sec {
    padding: 4rem 1rem 0;
  }
  .m8-k {
    font: 700 0.6875rem/1 "Inter", sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8f94ad;
  }
  .m8-demo .m8-k span {
    color: var(--gc);
    transition: color 0.5s;
  }
  .m8-h2 {
    margin: 0.625rem 0 1.25rem;
    font: 700 1.875rem/1.12 "Sora", "Inter", sans-serif;
    letter-spacing: -0.03em;
    color: #fff;
  }
  /* apariția la derulare */
  .m8-rv {
    opacity: 0;
    transform: translateY(1.125rem);
    transition:
      opacity 0.7s ease,
      transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--d, 0) * 1s);
  }
  .m8-rv.in {
    opacity: 1;
    transform: none;
  }
  /* ════════ 2 · DEMO ════════ */
  .m8-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
    margin: 0 auto 0.75rem;
    max-width: 22rem;
  }
  .m8-tabs button {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    padding: 0.375rem 0 0.25rem;
    border: 0;
    background: none;
    font: 600 0.78125rem/1 "Inter", sans-serif;
    color: #7f8499;
    cursor: pointer;
    transition: color 0.3s;
  }
  .m8-tabs button[aria-selected="true"] {
    color: #fff;
  }
  .m8-tabs i {
    position: relative;
    display: block;
    height: 0.1875rem;
    border-radius: 0.1875rem;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
  }
  .m8-tabs s {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #1ab2ff, #b521e9);
    transform: scaleX(0);
    transform-origin: left;
  }
  .m8-tabs button.m8-gata s {
    transform: scaleX(1);
  }
  .m8-tabs button.m8-ruleaza s {
    animation: m8Bara var(--dur, 4.5s) linear forwards;
  }
  .m8-tabs button.m8-oprit s {
    animation-play-state: paused;
  }
  @keyframes m8Bara {
    to {
      transform: scaleX(1);
    }
  }
  .m8-caps {
    position: relative;
    min-height: 2.75rem;
    max-width: 21rem;
    margin: 0 auto;
  }
  .m8-caps p {
    position: absolute;
    inset: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #b4b8cb;
    opacity: 0;
    transform: translateY(0.25rem);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .m8-caps p.on {
    opacity: 1;
    transform: none;
  }
  .m8-caps b {
    color: #fff;
  }
  .m8-stage {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }
  .m8-phone {
    position: relative;
    z-index: 1;
    width: 17rem;
    /* Patch ultimate Dennis 6-10-26: telefonul păstrează forma unui telefon adevărat (17 × 35 rem, ca pe desktop), chiar
       dacă pe ecranele joase nu încape întreg sub file; scurtat, nu mai arăta a telefon */
    height: 35rem;
    padding: 0.5625rem;
    border-radius: 2.875rem;
    background: #05070c;
    box-shadow:
      0 0 0 1.5px #2b303e,
      0 0 0 5px #0c0f16,
      0 0 0 6px #262b38,
      0 2rem 4rem -1.5rem rgba(0, 0, 0, 0.95),
      0 0 6rem -1.5rem rgba(var(--gcr), 0.45);
    transition: box-shadow 0.8s ease;
    animation: m8Pluteste 7s ease-in-out infinite;
  }
  @keyframes m8Pluteste {
    50% {
      transform: translateY(-0.375rem);
    }
  }
  .m8-floor {
    position: absolute;
    bottom: -1.25rem;
    left: 50%;
    width: 13rem;
    height: 1.5rem;
    margin-left: -6.5rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--gcr), 0.35), transparent);
    filter: blur(6px);
  }
  .m8-island {
    position: absolute;
    top: 1.125rem;
    left: 50%;
    z-index: 5;
    width: 5.25rem;
    height: 1.5rem;
    margin-left: -2.625rem;
    border-radius: 1rem;
    background: #000;
  }
  /* Patch ultimate Dennis 6-10-26: fundalul aplicației noi (#07090d, ca landing-ul și programul), și sub bara de
     stare, cu o singură lumină violet foarte slabă sus */
  .m8-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 2.3125rem;
    background: radial-gradient(155% 27% at 50% -17%, rgba(139, 108, 255, 0.05), transparent 70%) no-repeat, #07090d;
    overflow: hidden;
  }
  /* sub o foaie (rețeta, lista, progresul) se întunecă și bara de stare, ca pe iPhone; textul ei rămâne deasupra */
  .m8-screen::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    background: rgba(3, 4, 8, 0.62);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .m8-screen:has(.ax-sh.on)::before {
    opacity: 1;
  }
  .m8-status {
    position: relative;
    z-index: 2;
    flex: 0 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1.375rem 0;
    font: 600 0.75rem/1 "Inter", sans-serif;
    color: #fff;
  }
  .m8-sig {
    display: flex;
    align-items: flex-end;
    gap: 2px;
  }
  .m8-sig i {
    width: 3px;
    border-radius: 1px;
    background: #fff;
  }
  .m8-sig i:nth-child(1) {
    height: 5px;
  }
  .m8-sig i:nth-child(2) {
    height: 7px;
  }
  .m8-sig i:nth-child(3) {
    height: 9px;
  }
  .m8-sig b {
    width: 1.25rem;
    height: 0.5625rem;
    margin-left: 5px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8), inset 0 0 0 3px #07090d, inset 0 0 0 9px #fff;
  }
  /* Patch ultimate Dennis 6-10-26: aplicația (magazin-v8.js o redă înăuntru) e containerul după care se măsoară
     „pixelul de telefon” (--u, mai jos): pe lățime și pe înălțime */
  .m8-app {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    text-align: left;
    container-type: size;
  }
  /* ═════════════════════════════════════════════════════════════════════════════
     2 · DEMO · aplicația — Patch ultimate Dennis 6-10-26: telefonul magazinului desenează aplicația nouă, aceeași
     componentă `.ax` ca landing-ul (home.css „P2 · demo” și „PU · joacă”, regulile `#ce-primesti .ax…` portate aici
     sub #m8App). O scenă pe filă: 0 Meniu (masa de acum, mesele zilei; foaia rețetei urcă peste el), 1 Modificări
     (Andu), 2 Cumpărături (foaia listei), 3 Progres (foaia „Progresul tău”, ca în program). Totul e desenat la 390
     de „pixeli de telefon": --u = lățimea ecranului / 390 (container query pe #m8App), deci arată la fel la orice
     mărime a telefonului. Stările finale sunt stilurile de bază: animațiile pornesc din clasele puse de
     magazin-v8.js („DEMO”), iar cu mișcare redusă scena apare direct gata.
     Paleta D, aceeași ca în program: culoarea are trei treburi și restul e neutru (~90%).
     Violet #8b6cff (text #d2c8ff) = unde ești și ce apeși: „Acum", conturul cardului de acum, inelul mesei de
     acum, pasul de acum, butonul principal (#7658f2 → #6346ea; textul alb ≥ 4,7:1 pe tot butonul). Verde #1fa673
     (deschis #4fd39b) = ce ai făcut: cercurile cu bifă albă (bifa ≥ 3:1), barele de progres; „Am mâncat" bifat e
     verdele adânc #15855c (text alb la AA). Fără magenta; cyan doar pe identitatea lui Andu (avatarul, bulele tale,
     câmpul lui). „Făcut" se vede și fără culoare: cerc plin cu bifă albă, față de inelul gol.
     ═════════════════════════════════════════════════════════════════════════════ */
  #m8App .ax {
    /* Patch 2.1 6-10-26: tokenurile paletei D */
    --ax-now: #8b6cff;
    --ax-now-rgb: 139, 108, 255;
    --ax-now-t: #d2c8ff;
    --ax-done: #1fa673;
    --ax-done-2: #4fd39b;
    --ax-done-deep: #15855c;
    --ax-wait: #a3a8bb;
    --ax-now-2: #9d85ff; /* linia violet din foaia rețetei (cartonașul de sus, pasul de acum), ca în program */
    --u: calc(15.875rem / 390); /* fără container query: ecranul telefonului are 15,875rem */
    position: absolute;
    inset: 0;
    overflow: hidden;
    font-family: "Inter", sans-serif;
    color: #ececf3;
    text-align: left;
    -webkit-font-smoothing: antialiased;
  }
  /* Patch ultimate Dennis 6-10-26: „pixelul de telefon” = lățimea ecranului / 390, ca pe landing (telefonul are acum
     forma fixă a unui telefon adevărat, 17 × 35 rem); înălțimea / 740 rămâne doar ca plasă de siguranță */
  @supports (width: 1cqw) {
    #m8App .ax {
      --u: min(calc(100cqw / 390), calc(100cqh / 740));
    }
  }
  /* resetul butoanelor din telefon: fără specificitate, ca stilurile componentelor să câștige mereu */
  :where(#m8App .ax) :where(button) {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #m8App .ax button:focus-visible {
    outline: 2px solid #b8a4ff;
    outline-offset: 2px;
  }
  #m8App .ax-i {
    display: block;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  #m8App :where(.ax) p {
    margin: 0;
  }

  /* ecranele: paginile (Meniu, Andu) stau sub comutator; foile (rețeta, lista) acoperă tot, peste meniu */
  #m8App .ap-s {
    position: absolute;
    inset: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  /* ecranul de acum se poate atinge */
  #m8App .ap-s.on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  #m8App .ap-s.off {
    transform: translateX(-14px);
  }
  /* conținutul intră din direcția mișcării: înainte din dreapta, înapoi din stânga */
  #m8App .ap-screens.back .ap-s {
    transform: translateX(-14px);
  }
  #m8App .ap-screens.back .ap-s.on {
    transform: none;
  }
  #m8App .ap-screens.back .ap-s.off {
    transform: translateX(14px);
  }
  #m8App .ax-pg {
    top: calc(58 * var(--u));
    z-index: 2;
  }
  #m8App .ax-pg.on:not(.ax-still) > * {
    animation: axIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  #m8App .ax-pg.on:not(.ax-still) > :nth-child(2) {
    animation-delay: 0.05s;
  }
  #m8App .ax-pg.on:not(.ax-still) > :nth-child(3) {
    animation-delay: 0.1s;
  }
  #m8App .ax-pg.on:not(.ax-still) > :nth-child(4) {
    animation-delay: 0.15s;
  }
  #m8App .ax-pg.on:not(.ax-still) > :nth-child(n + 5) {
    animation-delay: 0.2s;
  }
  @keyframes axIn {
    from {
      opacity: 0;
      transform: translateY(calc(10 * var(--u)));
    }
  }
  /* pagina care pleacă se stinge mai repede decât intră cea nouă (fără două texte suprapuse) */
  #m8App .ax-pg.off {
    transition-duration: 0.22s, 0.55s;
  }
  /* meniul rămâne dedesubt cât e deschisă o foaie */
  #m8App #m8S0.ax-un {
    opacity: 1;
    transform: none;
  }
  /* foaia (rețeta, lista, progresul): fundalul se întunecă, foaia (opacă) urcă de jos */
  #m8App .ap-s.ax-sh,
  #m8App .ap-screens.back .ap-s.ax-sh {
    z-index: 5;
    opacity: 1;
    transform: none;
  }
  #m8App .ax-sh::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(3, 4, 8, 0.62);
    opacity: 0;
    transition: opacity 0.45s ease;
  }
  #m8App .ax-sh.on::before {
    opacity: 1;
  }
  #m8App .ax-pn {
    position: absolute;
    inset: calc(30 * var(--u)) 0 0;
    padding: 0 calc(20 * var(--u));
    overflow: hidden;
    border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
    background: #10131b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 calc(-18 * var(--u)) calc(40 * var(--u)) calc(-12 * var(--u)) rgba(0, 0, 0, 0.6);
    transform: translateY(calc(100% + calc(64 * var(--u))));
    transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.24, 1);
  }
  #m8App .ax-sh.on .ax-pn {
    transform: none;
  }
  #m8App .ax-pn::after,
  #m8App .ax-s0::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(64 * var(--u));
    background: linear-gradient(rgba(16, 19, 27, 0), #10131b 82%);
    pointer-events: none;
  }
  #m8App .ax-s0::after {
    background: linear-gradient(rgba(7, 9, 13, 0), #07090d 82%); /* Patch 2.1 6-10-26: fundalul nou */
  }
  /* un ecran care pornește de la început: fără tranziții cât se întoarce la starea de start */
  #m8App .ax-rs * {
    transition: none !important;
  }

  /* sus: Andu / Meniu, ca în program; butonul alb alunecă spre ecranul ales */
  #m8App .ax-top {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(4 * var(--u)) calc(14 * var(--u)) 0;
  }
  #m8App .ax-seg {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: max(calc(50 * var(--u)), calc(26px + calc(6 * var(--u)))); /* Patch ultimate Dennis 6-10-26: minimul țintelor e 26 px */
    padding: calc(3 * var(--u));
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  #m8App .ax-thumb {
    position: absolute;
    top: calc(3 * var(--u));
    bottom: calc(3 * var(--u));
    left: calc(3 * var(--u));
    width: calc(50% - calc(3 * var(--u)));
    border-radius: 99px;
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.3, 1.2, 0.5, 1);
  }
  #m8App .ax-thumb::before,
  #m8App .ax-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: opacity 0.4s ease;
  }
  /* Patch 2.1 6-10-26: butonul alb al comutatorului, cu umbra neutră din program (fără lumină violet) */
  #m8App .ax-thumb::before {
    background: #f3f2fa;
    box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-10 * var(--u)) rgba(0, 0, 0, 0.7);
  }
  #m8App .ax-thumb::after {
    border: calc(1.5 * var(--u)) solid transparent;
    background: linear-gradient(#0d1019, #0d1019) padding-box, linear-gradient(90deg, #00c2ff, #b521e9) border-box;
    box-shadow: 0 0 calc(18 * var(--u)) calc(-4 * var(--u)) rgba(124, 92, 252, 0.6);
    opacity: 0;
  }
  #m8App .ax-top.ax-a .ax-thumb {
    transform: none;
  }
  #m8App .ax-top.ax-a .ax-thumb::before {
    opacity: 0;
  }
  #m8App .ax-top.ax-a .ax-thumb::after {
    opacity: 1;
  }
  #m8App .ax-sg {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(9 * var(--u));
    min-width: 0;
    min-height: 26px; /* Patch ultimate Dennis 6-10-26: minimul țintelor e 26 px */
    border-radius: 99px;
    font: 600 calc(16 * var(--u))/1 "Inter", sans-serif;
    color: #9b9bac;
    transition: color 0.4s ease;
  }
  /* Patch 2.1 6-10-26: avatarul lui Andu, cu inelul lui din program (identitatea lui: cyan → magenta, un fir subțire) */
  #m8App .ax-sg img {
    box-sizing: border-box;
    width: calc(31 * var(--u));
    height: calc(31 * var(--u));
    padding: calc(1.5 * var(--u));
    border: calc(1.3 * var(--u)) solid transparent;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(#0b0e15, #0b0e15) padding-box, linear-gradient(135deg, #00c2ff, #b521e9) border-box;
  }
  #m8App .ax-sg .ax-i {
    width: calc(19 * var(--u));
    height: calc(19 * var(--u));
  }
  #m8App .ax-sg-m[aria-current="true"] {
    color: #0c0e16;
  }
  #m8App .ax-sg-a[aria-current="true"] {
    color: #fff;
  }

  /* 0 · Meniu — săptămâna */
  #m8App .ax-wk {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: calc(4 * var(--u));
    padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  }
  #m8App .ax-d {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(4 * var(--u));
    padding: calc(9 * var(--u)) 0 calc(7 * var(--u));
    border-radius: calc(16 * var(--u));
  }
  #m8App .ax-d em {
    font: 600 calc(11.5 * var(--u))/1 "Inter", sans-serif;
    font-style: normal;
    letter-spacing: 0.04em;
    color: #9b9bac;
  }
  #m8App .ax-d b {
    font: 650 calc(19 * var(--u))/1.1 "Sora", "Inter", sans-serif;
    color: #d3d3dd;
  }
  #m8App .ax-d i {
    display: flex;
    gap: calc(2 * var(--u));
    height: calc(13 * var(--u));
    color: #84879e;
  }
  #m8App .ax-d .ax-i {
    display: none;
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
  }
  #m8App .ax-d.ck .ax-pot,
  #m8App .ax-d.sh .ax-cart {
    display: block;
  }
  /* Patch 2.1 6-10-26: ziua aleasă, albă, cu umbra violet strânsă din program */
  #m8App .ax-d.sel {
    background: #f3f2fa;
    box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-14 * var(--u)) rgba(var(--ax-now-rgb), 0.9);
  }
  #m8App .ax-d.sel em,
  #m8App .ax-d.sel i {
    color: #5c5f73;
  }
  #m8App .ax-d.sel b {
    color: #0c0e16;
  }

  /* masa de acum: prânzul, gătit azi. Patch 2.1 6-10-26: cardul neutru al programului, cu un contur violet subțire
     și o lumină violet foarte slabă sus (fără strălucirea magenta) */
  #m8App .ax-now {
    position: relative;
    margin: 0 calc(14 * var(--u));
    padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u));
    border-radius: calc(26 * var(--u));
    background: linear-gradient(180deg, rgba(var(--ax-now-rgb), 0.06), rgba(var(--ax-now-rgb), 0) 45%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), #0e1119;
    box-shadow: inset 0 0 0 1px rgba(var(--ax-now-rgb), 0.3), 0 calc(28 * var(--u)) calc(54 * var(--u)) calc(-34 * var(--u)) rgba(var(--ax-now-rgb), 0.6);
  }
  #m8App .ax-kick {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font: 700 calc(12.5 * var(--u))/1 "Inter", sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ax-now-t);
  }
  #m8App .ax-live {
    flex: none;
    width: calc(8 * var(--u));
    height: calc(8 * var(--u));
    border-radius: 50%;
    background: var(--ax-now);
    box-shadow: 0 0 0 calc(3 * var(--u)) rgba(var(--ax-now-rgb), 0.25);
    animation: axLive 2.4s ease-out infinite;
  }
  @keyframes axLive {
    0% {
      box-shadow: 0 0 0 0 rgba(var(--ax-now-rgb), 0.5);
    }
    70%, 100% {
      box-shadow: 0 0 0 calc(6 * var(--u)) rgba(var(--ax-now-rgb), 0);
    }
  }
  #m8App .ax-kick em {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
    font-style: normal;
  }
  #m8App .ax-kick em::before {
    content: "·";
    margin-right: calc(2 * var(--u));
    color: #84879e;
  }
  #m8App .ax-kick .ax-i {
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
  }
  #m8App .ax-nt {
    margin-top: calc(12 * var(--u));
    font: 650 calc(25 * var(--u))/1.16 "Sora", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
  }
  #m8App .ax-how {
    display: flex;
    align-items: center;
    gap: calc(7 * var(--u));
    margin-top: calc(9 * var(--u));
    font: 500 calc(14 * var(--u))/1.3 "Inter", sans-serif;
    color: #c8c8d4;
  }
  #m8App .ax-how .ax-i {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    color: #9b9bac;
  }
  #m8App .ax-acts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(10 * var(--u));
    margin-top: calc(16 * var(--u));
  }
  #m8App .ax-b {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(7 * var(--u));
    min-height: calc(50 * var(--u));
    padding: 0 calc(10 * var(--u));
    border-radius: calc(16 * var(--u));
    font: 650 calc(15.5 * var(--u))/1 "Inter", sans-serif;
    color: #fff;
    white-space: nowrap;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  }
  #m8App .ax-b:active,
  #m8App .ax-tl:active,
  #m8App .ax-skip:active {
    transform: scale(0.97);
  }
  /* Patch 2.1 6-10-26: butonul principal, violet plin (același ton, de sus în jos; fără magenta) */
  #m8App .ax-b-p {
    background: linear-gradient(180deg, #7658f2, #6346ea);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 calc(12 * var(--u)) calc(26 * var(--u)) calc(-14 * var(--u)) rgba(var(--ax-now-rgb), 0.9);
  }
  #m8App .ax-b-p .ax-i {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    opacity: 0.8;
  }
  /* Patch 2.1 6-10-26: „Am mâncat" e neutru (contur gri) până îl apeși; atunci se umple de verde (verdele adânc, ca
     textul alb să rămână la AA), cu bifa verde în cercul alb — „făcut" se vede și fără culoare */
  #m8App .ax-b-eat {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.16);
  }
  #m8App .ax-ec {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(22 * var(--u));
    height: calc(22 * var(--u));
    border-radius: 50%;
    box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.42);
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }
  #m8App .ax-ec .ax-i {
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
    stroke-width: 3;
    stroke-dasharray: 24;
    color: #c9ccd8;
    opacity: 0.4;
  }
  #m8App .ax-b-eat.is {
    background: var(--ax-done-deep);
    box-shadow: none;
    animation: axPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #m8App .ax-b-eat.is .ax-ec {
    background: #fff;
    box-shadow: none;
  }
  #m8App .ax-b-eat.is .ax-ec .ax-i {
    color: var(--ax-done-deep);
    opacity: 1;
    animation: axDraw 0.34s ease 0.05s both;
  }
  #m8App .ax-skip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(7 * var(--u));
    width: 100%;
    min-height: calc(48 * var(--u));
    border-radius: calc(14 * var(--u));
    font: 600 calc(14.5 * var(--u))/1 "Inter", sans-serif;
    color: #d3d3dd;
  }
  #m8App .ax-skip .ax-i {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    color: #d4c5ff;
  }
  #m8App .ax-tools {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: calc(8 * var(--u));
    margin: calc(12 * var(--u)) calc(14 * var(--u)) 0;
  }
  #m8App .ax-tl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(7 * var(--u));
    min-width: 0;
    min-height: calc(48 * var(--u));
    border-radius: calc(16 * var(--u));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    font: 650 calc(14 * var(--u))/1 "Inter", sans-serif;
    color: #ececf3;
    white-space: nowrap;
    transition: transform 0.2s ease;
  }
  #m8App .ax-tl .ax-i {
    width: calc(17 * var(--u));
    height: calc(17 * var(--u));
    color: #c8c8d4;
  }

  /* mesele de azi: bifa de la micul dejun, numărătoarea */
  #m8App .ax-lh {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: calc(20 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u));
  }
  #m8App .ax-lh > b {
    font: 650 calc(19 * var(--u))/1.1 "Sora", "Inter", sans-serif;
    letter-spacing: -0.015em;
    color: #fff;
  }
  #m8App .ax-lh > span {
    font: 500 calc(13.5 * var(--u))/1 "Inter", sans-serif;
    color: #9b9bac;
  }
  #m8App .ax-lh > span b {
    font-weight: 700;
    color: #fff;
  }
  #m8App .ax-ml {
    list-style: none;
    margin: 0 calc(14 * var(--u));
    padding: calc(4 * var(--u));
    border-radius: calc(24 * var(--u));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  #m8App .ax-r {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    min-height: calc(64 * var(--u));
    padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u));
    border-radius: calc(20 * var(--u));
    transition: background 0.4s ease;
  }
  #m8App .ax-r + .ax-r {
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07);
  }
  #m8App .ax-mk {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(38 * var(--u));
    height: calc(38 * var(--u));
    border-radius: 50%;
    box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.14); /* Patch 2.1 6-10-26: mesele care urmează, neutre */
    color: var(--ax-wait);
    transition: background 0.35s ease, box-shadow 0.35s ease;
  }
  #m8App .ax-mk .ax-i {
    width: calc(17 * var(--u));
    height: calc(17 * var(--u));
    stroke-width: 2.6;
    stroke-dasharray: 24;
    opacity: 0.32;
  }
  #m8App .ax-rb {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(3 * var(--u));
    min-height: 26px; /* Patch ultimate Dennis 6-10-26: minimul țintelor e 26 px */
    padding: calc(4 * var(--u)) 0;
    justify-content: center;
    text-align: left;
  }
  #m8App .ax-rb > b {
    font: 600 calc(15 * var(--u))/1.3 "Inter", sans-serif;
    color: #ececf3;
    text-wrap: balance;
    transition: color 0.4s ease;
  }
  #m8App .ax-rb > span {
    display: flex;
    align-items: center;
    gap: calc(5 * var(--u));
    font: 500 calc(12.5 * var(--u))/1.3 "Inter", sans-serif;
    color: #9b9bac;
    white-space: nowrap;
  }
  #m8App .ax-rb > span .ax-i {
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
    color: #84879e;
  }
  #m8App .ax-chv {
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
    color: #84879e;
  }
  #m8App .ax-sw {
    display: inline-grid;
    font-style: normal;
  }
  #m8App .ax-sw > em {
    grid-area: 1 / 1;
    font-style: normal;
    transition: opacity 0.3s ease;
  }
  #m8App .ax-sw > em:first-child {
    font-weight: 650;
    color: #c3c6d4; /* Patch 2.1 6-10-26: „Ai mâncat?", neutru */
  }
  #m8App .ax-r:not(.is) .ax-sw > em:last-child,
  #m8App .ax-r.is .ax-sw > em:first-child {
    opacity: 0;
  }
  /* Patch 2.1 6-10-26: masa care te așteaptă (micul dejun nebifat) e gri, ca în program; masa de acum are inelul
     violet; bifată = cerc verde plin, cu bifa albă */
  #m8App .ax-ask {
    background: rgba(142, 147, 168, 0.07);
  }
  #m8App .ax-ask .ax-mk .ax-i {
    opacity: 0.6;
  }
  #m8App .ax-cur {
    background: rgba(var(--ax-now-rgb), 0.08);
  }
  #m8App .ax-cur .ax-mk {
    box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(var(--ax-now-rgb), 0.85);
    color: var(--ax-now);
  }
  #m8App .ax-cur .ax-mk .ax-i {
    opacity: 0.55;
  }
  #m8App .ax-r.is {
    background: transparent;
  }
  #m8App .ax-r.is .ax-mk {
    background: var(--ax-done);
    box-shadow: none;
    color: #fff;
    animation: axPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #m8App .ax-r.is .ax-mk .ax-i {
    opacity: 1;
    animation: axDraw 0.34s ease 0.06s both;
  }
  #m8App .ax-r.is .ax-rb > b {
    color: #9b9bac;
  }
  @keyframes axPop {
    45% {
      transform: scale(1.14);
    }
  }
  @keyframes axDraw {
    from {
      stroke-dashoffset: 24;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  /* foile: rețeta (peste Meniu), 2 · Cumpărături, 3 · Progres */
  #m8App .ax-hd {
    display: block;
    width: calc(38 * var(--u));
    height: calc(5 * var(--u));
    margin: calc(9 * var(--u)) auto 0;
    border-radius: calc(3 * var(--u));
    background: rgba(255, 255, 255, 0.22);
  }
  #m8App .ax-x {
    position: absolute;
    z-index: 1;
    top: calc(12 * var(--u));
    right: calc(12 * var(--u));
    display: grid;
    place-items: center;
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
    border-radius: 50%;
    color: #d3d3dd;
  }
  #m8App .ax-x::before {
    content: "";
    position: absolute;
    inset: calc(6 * var(--u));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
  }
  #m8App .ax-x .ax-i {
    position: relative;
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
  }
  #m8App .ax-k {
    margin-top: calc(18 * var(--u));
    font: 700 calc(12 * var(--u))/1 "Inter", sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b8a4ff;
  }
  #m8App .ax-t {
    margin: calc(10 * var(--u)) calc(40 * var(--u)) 0 0;
    font: 650 calc(27 * var(--u))/1.12 "Sora", "Inter", sans-serif;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
  }
  #m8App .ax-t1 {
    margin-top: calc(22 * var(--u));
  }
  #m8App .ax-info {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
    margin-top: calc(18 * var(--u));
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    border-radius: calc(20 * var(--u));
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset calc(3 * var(--u)) 0 0 var(--ax-now-2); /* Patch 2.1 6-10-26 */
  }
  #m8App .ax-ii {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(42 * var(--u));
    height: calc(42 * var(--u));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #ececf3;
  }
  #m8App .ax-ii .ax-i {
    width: calc(19 * var(--u));
    height: calc(19 * var(--u));
  }
  #m8App .ax-info p {
    font: 500 calc(13.5 * var(--u))/1.4 "Inter", sans-serif;
    color: #c8c8d4;
    text-wrap: pretty;
  }
  #m8App .ax-info b {
    display: block;
    margin-bottom: calc(2 * var(--u));
    font: 650 calc(15.5 * var(--u))/1.3 "Inter", sans-serif;
    color: #fff;
  }
  #m8App .ax-info p span {
    display: block;
  }
  #m8App .ax-mac {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: calc(12 * var(--u));
    padding: calc(12 * var(--u)) calc(4 * var(--u));
    border-radius: calc(18 * var(--u));
    background: rgba(255, 255, 255, 0.04);
  }
  #m8App .ax-mac span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(4 * var(--u));
    font: 500 calc(11 * var(--u))/1.1 "Inter", sans-serif;
    color: #9b9bac;
  }
  #m8App .ax-mac b {
    font: 650 calc(16 * var(--u))/1.1 "Sora", "Inter", sans-serif;
    color: #fff;
  }
  #m8App .ax-acc {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: calc(10 * var(--u));
    margin-top: calc(12 * var(--u));
    padding: calc(13 * var(--u)) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  #m8App .ax-acc.ax-op {
    margin-top: 0;
  }
  #m8App .ax-acc p {
    display: flex;
    align-items: baseline;
    gap: calc(8 * var(--u));
  }
  #m8App .ax-acc p b {
    font: 650 calc(18 * var(--u))/1.2 "Sora", "Inter", sans-serif;
    letter-spacing: -0.015em;
    color: #fff;
  }
  #m8App .ax-acc p span {
    font: 600 calc(12.5 * var(--u))/1 "Inter", sans-serif;
    color: #9b9bac;
  }
  #m8App .ax-pv {
    grid-column: 1;
    margin-top: calc(5 * var(--u));
    font: 500 calc(13 * var(--u))/1.3 "Inter", sans-serif;
    color: #9b9bac;
  }
  #m8App .ax-pv i {
    margin-left: calc(8 * var(--u));
    font-style: normal;
    font-weight: 700;
    color: #ececf3;
  }
  #m8App .ax-acc .ax-i {
    grid-column: 2;
    grid-row: 1 / span 2;
    box-sizing: border-box;
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    padding: calc(8 * var(--u));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #d3d3dd;
  }
  /* pașii: cel de acum e luminat, cei făcuți se bifează și se sting */
  #m8App .ax-st {
    list-style: none;
    margin: 0 calc(-20 * var(--u));
    padding: 0;
  }
  #m8App .ax-st li {
    position: relative;
    display: flex;
    gap: calc(14 * var(--u));
    padding: calc(11 * var(--u)) calc(20 * var(--u));
    transition: background 0.4s ease;
  }
  #m8App .ax-st li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(3 * var(--u));
    background: var(--ax-now-2); /* Patch 2.1 6-10-26: pasul de acum, linia violet */
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  #m8App .ax-st li:first-child:not(.is),
  #m8App .ax-st li.is + li:not(.is) {
    background: rgba(255, 255, 255, 0.035);
  }
  #m8App .ax-st li:first-child:not(.is)::before,
  #m8App .ax-st li.is + li:not(.is)::before {
    opacity: 1;
  }
  #m8App .ax-st i {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    border-radius: 50%;
    box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.22);
    font-style: normal;
    transition: background 0.35s ease, box-shadow 0.35s ease;
  }
  #m8App .ax-st li:first-child:not(.is) i,
  #m8App .ax-st li.is + li:not(.is) i {
    box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.85);
  }
  #m8App .ax-st i b {
    font: 700 calc(13 * var(--u))/1 "Inter", sans-serif;
    color: #ececf3;
    transition: opacity 0.2s ease;
  }
  #m8App .ax-st i .ax-i,
  #m8App .ax-ls i .ax-i,
  #m8App .ax-do i .ax-i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
    margin: calc(-7 * var(--u)) 0 0 calc(-7 * var(--u));
    stroke-width: 3;
    stroke-dasharray: 24;
    color: #fff;
    opacity: 0;
  }
  #m8App .ax-st p {
    padding-top: calc(5 * var(--u));
    font: 500 calc(14.5 * var(--u))/1.45 "Inter", sans-serif;
    color: #d3d3dd;
    text-wrap: pretty;
    transition: color 0.4s ease;
  }
  #m8App .ax-st p b {
    font-weight: 700;
    color: #fff;
    transition: color 0.4s ease;
  }
  /* Patch 2.1 6-10-26: tot ce e făcut (pașii, lista, acțiunile lui Andu) = cerc verde plin, cu bifa albă */
  #m8App .ax-st li.is i,
  #m8App .ax-ls li.is i,
  #m8App .ax-do .is i {
    background: var(--ax-done);
    box-shadow: none;
    animation: axPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #m8App .ax-st li.is i b {
    opacity: 0;
  }
  #m8App .ax-st li.is i .ax-i,
  #m8App .ax-ls li.is i .ax-i,
  #m8App .ax-do .is i .ax-i {
    opacity: 1;
    animation: axDraw 0.34s ease 0.06s both;
  }
  #m8App .ax-st li.is p {
    color: #7d8095;
  }
  #m8App .ax-st li.is p b {
    color: #9b9bac;
  }

  /* lista de cumpărături */
  #m8App .ax-sub {
    margin-top: calc(8 * var(--u));
    font: 500 calc(14.5 * var(--u))/1.3 "Inter", sans-serif;
    color: #9b9bac;
  }
  #m8App .ax-per {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    height: calc(38 * var(--u));
    margin-top: calc(14 * var(--u));
    padding: 0 calc(16 * var(--u)) 0 calc(14 * var(--u));
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.07);
    font: 650 calc(13.5 * var(--u))/1 "Inter", sans-serif;
    color: #ececf3;
  }
  #m8App .ax-per .ax-i {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
  }
  #m8App .ax-pr {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    margin-top: calc(20 * var(--u));
    padding: 0 calc(4 * var(--u));
  }
  #m8App .ax-pr i {
    flex: 1;
    height: calc(6 * var(--u));
    border-radius: calc(3 * var(--u));
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
  }
  #m8App .ax-pr s {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ax-done), var(--ax-done-2)); /* Patch 2.1 6-10-26: progresul, verde */
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0.44));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #m8App .ax-pr span {
    font: 500 calc(14 * var(--u))/1 "Inter", sans-serif;
    color: #9b9bac;
    font-variant-numeric: tabular-nums;
  }
  #m8App .ax-pr span b {
    font-weight: 700;
    color: #fff;
  }
  #m8App .ax-cat {
    display: flex;
    justify-content: space-between;
    margin: calc(18 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u));
    font: 700 calc(11.5 * var(--u))/1 "Inter", sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #84879e;
  }
  #m8App .ax-ls {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #m8App .ax-ls li {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
    min-height: calc(44 * var(--u));
    padding: 0 calc(4 * var(--u));
    font: 500 calc(15 * var(--u))/1.25 "Inter", sans-serif;
    color: #ececf3;
  }
  #m8App .ax-ls i {
    position: relative;
    flex: none;
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
    border-radius: 50%;
    box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.28);
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }
  #m8App .ax-ls i .ax-i {
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
    margin: calc(-6.5 * var(--u)) 0 0 calc(-6.5 * var(--u));
  }
  #m8App .ax-ls span {
    background: linear-gradient(currentColor, currentColor) 0 56% / 0 calc(1.5 * var(--u)) no-repeat;
    transition: color 0.35s ease, background-size 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  }
  #m8App .ax-ls em {
    margin-left: auto;
    font: 500 calc(14 * var(--u))/1 "Inter", sans-serif;
    font-style: normal;
    color: #9b9bac;
    transition: color 0.35s ease;
  }
  #m8App .ax-ls li.is span {
    color: #7d8095;
    background-size: 100% calc(1.5 * var(--u));
  }
  #m8App .ax-ls li.is em {
    color: #666a7e;
  }

  /* 1 · Modificări (Andu) — conversația crește de jos în sus, ca în chat */
  #m8App .ax-chat {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(84 * var(--u));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 calc(18 * var(--u)));
    mask-image: linear-gradient(transparent, #000 calc(18 * var(--u)));
  }
  /* ca într-un chat adevărat: conversația începe sus; când nu mai încape, urcă (rămâne lipită de câmpul de jos) */
  #m8App .ax-cv {
    position: absolute;
    left: calc(16 * var(--u));
    right: calc(16 * var(--u));
    bottom: calc(4 * var(--u));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: calc(100% - calc(4 * var(--u)));
    padding-top: calc(6 * var(--u));
  }
  #m8App .ax-m {
    flex: none;
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease 0.08s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #m8App .ax-m > div {
    min-height: 0;
    overflow: hidden;
  }
  #m8App .ax-m > div > :first-child {
    margin-top: calc(14 * var(--u));
  }
  #m8App .ax-m:not(.is) {
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(calc(12 * var(--u)));
  }
  #m8App .ax-ai {
    max-width: calc(340 * var(--u));
    font: 400 calc(15 * var(--u))/1.5 "Inter", sans-serif;
    color: #ececf3;
    text-wrap: pretty;
  }
  #m8App .ax-me > div {
    display: flex;
    justify-content: flex-end;
  }
  #m8App .ax-me p {
    max-width: calc(270 * var(--u));
    padding: calc(11 * var(--u)) calc(16 * var(--u));
    border-radius: calc(22 * var(--u)) calc(22 * var(--u)) calc(6 * var(--u)) calc(22 * var(--u));
    font: 500 calc(15 * var(--u))/1.4 "Inter", sans-serif;
    color: #fff;
    /* Patch 2.1 6-10-26: bula ta, la fel ca în conversația cu Andu din program (culorile lui, foarte stinse) */
    background: linear-gradient(135deg, rgba(0, 194, 255, 0.24), rgba(124, 92, 252, 0.26) 55%, rgba(181, 33, 233, 0.24)), #0b0f18;
    box-shadow: inset 0 0 0 1px rgba(157, 124, 255, 0.38), 0 calc(12 * var(--u)) calc(28 * var(--u)) calc(-16 * var(--u)) rgba(124, 92, 252, 0.6);
  }
  #m8App .ax-dots {
    display: inline-flex;
    gap: calc(5 * var(--u));
    padding: calc(13 * var(--u)) calc(15 * var(--u));
    border-radius: calc(18 * var(--u));
    background: rgba(255, 255, 255, 0.06);
  }
  #m8App .ax-dots i {
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
    border-radius: 50%;
    background: #b8a4ff;
    animation: axDot 1s ease-in-out infinite;
  }
  #m8App .ax-dots i:nth-child(2) {
    animation-delay: 0.15s;
  }
  #m8App .ax-dots i:nth-child(3) {
    animation-delay: 0.3s;
  }
  @keyframes axDot {
    0%, 100% {
      opacity: 0.35;
      transform: none;
    }
    40% {
      opacity: 1;
      transform: translateY(calc(-3 * var(--u)));
    }
  }
  #m8App .ax-card {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    margin-top: calc(10 * var(--u));
    padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
    border-radius: calc(20 * var(--u));
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  #m8App .ax-ct {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    border-radius: calc(13 * var(--u));
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-size: calc(22 * var(--u));
    line-height: 1;
  }
  #m8App .ax-card > span:nth-child(2) {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
  }
  #m8App .ax-card b {
    font: 650 calc(14.5 * var(--u))/1.3 "Inter", sans-serif;
    color: #fff;
  }
  #m8App .ax-card > span:nth-child(2) > span {
    font: 500 calc(12.5 * var(--u))/1.3 "Inter", sans-serif;
    color: #9b9bac;
  }
  #m8App .ax-card .ax-i {
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
    color: #9b9bac;
  }
  #m8App .ax-qr {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 * var(--u));
    margin-top: calc(10 * var(--u));
  }
  #m8App .ax-q {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: calc(7 * var(--u));
    min-height: calc(38 * var(--u));
    padding: 0 calc(15 * var(--u)) 0 calc(12 * var(--u));
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    font: 600 calc(13.5 * var(--u))/1 "Inter", sans-serif;
    color: #ececf3;
    white-space: nowrap;
  }
  #m8App .ax-q::before {
    content: "\21B3";
    font-weight: 700;
    color: #8b6cff;
  }
  #m8App .ax-q1 {
    background: rgba(var(--ax-now-rgb), 0.14);
    box-shadow: inset 0 0 0 1px rgba(var(--ax-now-rgb), 0.6);
  }
  #m8App .ax-do {
    display: flex;
    flex-direction: column;
    gap: calc(9 * var(--u));
    padding: calc(13 * var(--u)) calc(14 * var(--u));
    border-radius: calc(18 * var(--u));
    /* Patch 2.1 6-10-26: cartonașul cu ce a făcut Andu e neutru (ca mesajele lui de sistem); bifele spun „gata" */
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  }
  #m8App .ax-do > span {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    font: 600 calc(13.5 * var(--u))/1.3 "Inter", sans-serif;
    color: #9b9bac;
    transition: color 0.3s ease;
  }
  #m8App .ax-do > span.is {
    color: #ececf3;
  }
  #m8App .ax-do i {
    position: relative;
    flex: none;
    width: calc(22 * var(--u));
    height: calc(22 * var(--u));
    border-radius: 50%;
    box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.14); /* Patch 2.1 6-10-26: „lucrează", neutru */
  }
  #m8App .ax-do i::before {
    content: "";
    position: absolute;
    inset: 0;
    border: calc(2 * var(--u)) solid transparent;
    border-top-color: #c9ccd8;
    border-radius: 50%;
    animation: axSpin 0.8s linear infinite;
  }
  #m8App .ax-do .is i::before {
    display: none;
  }
  #m8App .ax-do i .ax-i {
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
    margin: calc(-6 * var(--u)) 0 0 calc(-6 * var(--u));
  }
  @keyframes axSpin {
    to {
      transform: rotate(360deg);
    }
  }
  /* câmpul de jos: aplicația „scrie" mesajul, apoi îl trimite */
  #m8App .ax-cmp {
    position: absolute;
    left: calc(14 * var(--u));
    right: calc(14 * var(--u));
    bottom: calc(26 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(8 * var(--u));
    height: calc(54 * var(--u));
    padding: 0 calc(7 * var(--u)) 0 calc(20 * var(--u));
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(0, 194, 255, 0.07), rgba(181, 33, 233, 0.09)), #0d1019;
    box-shadow: inset 0 0 0 1px rgba(124, 92, 252, 0.4), 0 0 calc(26 * var(--u)) calc(-6 * var(--u)) rgba(124, 92, 252, 0.4);
    font: 400 calc(15 * var(--u))/1 "Inter", sans-serif;
  }
  #m8App .ax-in {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
  }
  #m8App .ax-cmp.on .ax-in::after {
    content: "";
    display: inline-block;
    width: calc(1.5 * var(--u));
    height: calc(17 * var(--u));
    margin-left: calc(2 * var(--u));
    vertical-align: calc(-3 * var(--u));
    background: #b8a4ff;
  }
  #m8App .ax-ph {
    color: #84879e;
    white-space: nowrap;
  }
  #m8App .ax-cmp.on .ax-ph {
    display: none;
  }
  #m8App .ax-send {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    margin-left: auto;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    color: #9b9bac;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
  #m8App .ax-cmp.on .ax-send {
    background: linear-gradient(135deg, #00c2ff, #7c5cfc 55%, #b521e9); /* Patch 2.1 6-10-26: ca butonul lui Andu */
    box-shadow: none;
    color: #fff;
  }
  #m8App .ax-send .ax-i {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
  }

  /* atingerea arătată: un deget invizibil apasă butonul spre care merge turul */
  #m8App .ax-b-p.tap,
  #m8App .ax-q.tap {
    animation: axPress 0.55s ease both;
  }
  #m8App .ax-b-p.tap::after,
  #m8App .ax-q.tap::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(46 * var(--u));
    height: calc(46 * var(--u));
    margin: calc(-23 * var(--u)) 0 0 calc(-23 * var(--u));
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18) 70%, transparent);
    pointer-events: none;
    animation: axTap 0.75s ease-out both;
  }
  @keyframes axPress {
    35% {
      transform: scale(0.95);
      filter: brightness(1.18);
    }
  }
  @keyframes axTap {
    from {
      opacity: 1;
      transform: scale(0.4);
    }
    to {
      opacity: 0;
      transform: scale(2.2);
    }
  }

  /* mișcare redusă: fiecare ecran apare direct în starea lui finală (magazin-v8.js pune toate bifele deodată) */
  @media (prefers-reduced-motion: reduce) {
    #m8App .ax,
    #m8App .ax *,
    #m8App .ax *::before,
    #m8App .ax *::after {
      animation: none !important;
      transition: none !important;
    }
  }

  /* ═════════════════════════════════════════════════════════════════════════════
     PU · joacă — Patch ultimate Dennis 6-10-26 · telefonul se poate juca, ca pe landing (magazin-v8.js „DEMO”)
     Bifezi mesele (cercul) și deschizi rețeta fiecărei mese (rândul); în rețetă, ingredientele se desfac, pașii se
     bifează; în listă, produsele se bifează; lui Andu îi poți scrie (răspunsuri scrise dinainte); în Progres adaugi
     cântărirea. Ce e doar în program primește un mesaj scurt, jos în telefon (.ax-toast, ca toast-ul aplicației).
     Sub telefon, o singură dată, „Încearcă-l” (.pt-hint), până îl atingi. Culorile rămân paleta D.
     ═════════════════════════════════════════════════════════════════════════════ */
  /* ce se poate atinge arată că se poate atinge */
  #m8App .ax-d,
  #m8App .ax [role="checkbox"] {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #m8App .ax-d {
    transition: transform 0.2s ease;
  }
  #m8App .ax-d:active,
  #m8App .ax-per:active,
  #m8App .ax-q:not([aria-disabled="true"]):active,
  #m8App .ax-card:active,
  #m8App .ax-mk:active {
    transform: scale(0.95);
  }
  #m8App .ax [role="checkbox"]:focus-visible {
    outline: 2px solid #b8a4ff;
    outline-offset: -2px;
    border-radius: calc(12 * var(--u));
  }
  /* ce se apasă are cel puțin 24 × 24 px și pe telefoanele mici (sub ~400 px, „pixelul de telefon" e mai mic). Minimul
     e 26 px, ca pe landing (acolo telefonul e înclinat în 3D, iar proiecția micșorează ținta cu până la ~5%) */
  #m8App button.ax-mk {
    width: max(calc(38 * var(--u)), 26px);
    height: max(calc(38 * var(--u)), 26px);
  }
  #m8App button.ax-q,
  #m8App button.ax-per {
    min-height: max(calc(38 * var(--u)), 26px);
  }
  #m8App button.ax-per {
    height: auto;
  }
  #m8App button.ax-send {
    width: max(calc(40 * var(--u)), 26px);
    height: max(calc(40 * var(--u)), 26px);
  }
  #m8App .ax-rb > b {
    text-align: left;
  }
  @media (hover: hover) and (pointer: fine) {
    #m8App .ax-r:hover:not(.is) .ax-mk {
      box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.34);
    }
    #m8App .ax-cur:hover:not(.is) .ax-mk {
      box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--ax-now);
    }
    #m8App .ax-r:has(.ax-rb:hover) {
      background: rgba(255, 255, 255, 0.04);
    }
    #m8App .ax-cur:has(.ax-rb:hover) {
      background: rgba(var(--ax-now-rgb), 0.12);
    }
    #m8App .ax-tl:hover,
    #m8App .ax-per:hover,
    #m8App .ax-q:not([aria-disabled="true"]):hover,
    #m8App .ax-card:hover,
    #m8App .ax-acc:hover .ax-i {
      filter: brightness(1.25);
    }
    #m8App .ax-ls li:hover:not(.is) i,
    #m8App .ax-st li:hover:not(.is) i {
      box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.55);
    }
    #m8App .ax-d:not(.sel):hover b {
      color: #fff;
    }
  }

  /* rețeta: ingredientele se desfac, pașii se strâng (una singură deschisă, ca să încapă totul în foaie) */
  #m8App button.ax-acc {
    width: 100%;
  }
  #m8App .ax-acc .ax-i {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #m8App .ax-acc[aria-expanded="true"] .ax-i {
    transform: rotate(180deg);
  }
  #m8App .ax-acc[aria-expanded="true"] .ax-pv {
    display: none;
  }
  #m8App .ax-ing[hidden],
  #m8App .ax-st[hidden] {
    display: none;
  }
  #m8App .ax-ing {
    list-style: none;
    margin: 0 0 calc(8 * var(--u));
    padding: 0;
    animation: axIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  #m8App .ax-ing li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12 * var(--u));
    min-height: calc(38 * var(--u));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
    font: 500 calc(14.5 * var(--u))/1.25 "Inter", sans-serif;
    color: #ececf3;
  }
  #m8App .ax-ing li:last-child {
    box-shadow: none;
  }
  #m8App .ax-ing em {
    flex: none;
    font: 500 calc(13.5 * var(--u))/1 "Inter", sans-serif;
    font-style: normal;
    color: #9b9bac;
  }
  #m8App .ax-ing + .ax-acc {
    margin-top: 0;
  }
  #m8App .ax-st:not([hidden]) {
    animation: axIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* uneltele și „Schimbă perioada" sunt butoane; cartonașul lui Andu la fel */
  #m8App button.ax-card {
    width: 100%;
    text-align: left;
  }

  /* Andu: mesajele care încă n-au venit nu se văd, deci nici nu se pot atinge sau primi focus (ascunderea așteaptă
     să se termine strângerea, ca „Andu scrie…" să se stingă frumos) */
  #m8App .ax-m {
    transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease 0.08s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }
  #m8App .ax-m:not(.is) {
    visibility: hidden;
    transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease 0.08s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.5s;
  }
  /* Andu: răspunsurile rapide se apasă o dată; „Începe cu …" duce la onboarding */
  #m8App [data-ax-u].ax-me p {
    overflow-wrap: anywhere;
  }
  #m8App .ax-q.used {
    opacity: 0.45;
  }
  #m8App .ax-q[aria-disabled="true"] {
    cursor: default;
  }
  #m8App .ax-q.ax-go::before {
    content: none;
  }
  #m8App .ax-q.ax-go::after {
    content: "\2192";
    font-weight: 700;
    color: var(--ax-now-t);
  }
  /* câmpul de jos e unul adevărat. Are 16px (sub 16px, iOS ar mări pagina când îl atingi), micșorat la mărimea
     textului din telefon cu --fk (magazin-v8.js: mărimea textului / 16) */
  #m8App .ax-fld {
    position: absolute;
    top: 50%;
    left: calc(20 * var(--u));
    width: calc((100% - 75 * var(--u)) / var(--fk, 0.6));
    height: calc(max(40 * var(--u), 26px) / var(--fk, 0.6));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    outline: none;
    box-shadow: none;
    font: 400 16px/1.2 "Inter", sans-serif;
    color: #fff;
    caret-color: #b8a4ff;
    transform: translateY(-50%) scale(var(--fk, 0.6));
    transform-origin: 0 50%;
    -webkit-appearance: none;
    appearance: none;
  }
  #m8App .ax-fld::placeholder {
    color: #84879e;
    opacity: 1;
  }
  #m8App .ax-cmp.on .ax-fld::placeholder {
    color: transparent;
  }
  #m8App .ax-cmp:focus-within {
    box-shadow: inset 0 0 0 1.5px rgba(157, 124, 255, 0.85), 0 0 calc(26 * var(--u)) calc(-6 * var(--u)) rgba(124, 92, 252, 0.55);
  }
  #m8App .ax-cmp:has(.ax-fld:not(:placeholder-shown)) .ax-send {
    background: linear-gradient(135deg, #00c2ff, #7c5cfc 55%, #b521e9);
    box-shadow: none;
    color: #fff;
  }
  #m8App .ax-send {
    position: relative;
    z-index: 1;
  }

  /* mesajul scurt din telefon (ca toast-ul din program), deasupra foilor */
  #m8App .ax-toast {
    position: absolute;
    left: 50%;
    bottom: calc(44 * var(--u));
    z-index: 9;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 36 * var(--u));
    padding: calc(11 * var(--u)) calc(16 * var(--u));
    border-radius: calc(18 * var(--u));
    background: rgba(30, 34, 46, 0.97);
    box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-10 * var(--u)) rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    font: 550 calc(13.5 * var(--u))/1.4 "Inter", sans-serif;
    color: #ececf3;
    text-align: center;
    text-wrap: balance;
    opacity: 0;
    transform: translate(-50%, calc(12 * var(--u))) scale(0.98);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    pointer-events: none;
  }
  #m8App .ax-toast.on {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  /* Patch ultimate Dennis 6-10-26: la Andu, mesajul scurt stă deasupra câmpului de scris, nu peste el */
  #m8App .ax[data-cur="1"] .ax-toast {
    bottom: calc(112 * var(--u));
  }
  #m8App .ax-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* „Încearcă-l": sub telefon, o dată, până îl atingi */
  .m8-stage .pt-hint {
    position: absolute;
    left: 50%;
    bottom: -18px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 15px 9px 11px;
    border-radius: 99px;
    background: rgba(16, 19, 27, 0.94);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 12px 30px -12px rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font: 600 13px/1.1 "Inter", sans-serif;
    color: #ececf3;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .m8-stage .pt-hint.on {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .m8-stage .pt-hint svg {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #b8a4ff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .m8-stage .pt-hint.on svg {
    animation: ptTap 1.8s ease-in-out 0.4s infinite;
  }
  @keyframes ptTap {
    0%, 60%, 100% {
      transform: none;
    }
    30% {
      transform: translateY(2px) scale(0.92);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .m8-stage .pt-hint,
    .m8-stage .pt-hint svg,
    #m8App .ax-toast {
      animation: none !important;
      transition: none !important;
    }
  }

  /* ═════════════════════════════════════════════════════════════════════════════
     PU · magazin — Patch ultimate Dennis 6-10-26 · ce are în plus telefonul magazinului față de cel de pe landing
     3 · Progres: foaia „Progresul tău” din program (upx.openSheet('progress')): greutatea mare, mesajul, bara verde
     spre țintă, trei plăci, mesele bifate în ultimele 7 zile (azi e ultima coloană) și butonul violet „Adaugă
     cântărirea”, care se face verde („Salvat ✓”) după prima apăsare.
     ═════════════════════════════════════════════════════════════════════════════ */
  /* Patch ultimate Dennis 6-10-26: în telefon nu se derulează nimic, ca pe landing. Un conținut derulabil ar prinde
     gestul cu care omul derulează PAGINA (iOS și Android leagă gestul de primul element derulabil de sub deget), iar
     pagina ar părea blocată. Ce nu încape (al patrulea rând din Meniu, ultimele produse) rămâne sub estomparea de jos,
     ca într-un telefon adevărat; rețetele au cel mult 6 ingrediente, ca să încapă desfăcute. */
  #m8App .ax-s0,
  #m8App .ax-sb {
    overflow: hidden;
  }
  /* tăiat, nu derulat: nici focusul de la tastatură nu mai poate derula scena (Chromium o face cu overflow:hidden) */
  @supports (overflow: clip) {
    #m8App .ap-s,
    #m8App .ax-s0,
    #m8App .ax-sb,
    #m8App .ax-pn,
    #m8App .ax-chat {
      overflow: clip;
    }
  }
  #m8App .ax-sb {
    position: absolute;
    inset: calc(14 * var(--u)) 0 0;
    padding: 0 calc(20 * var(--u));
  }
  /* Patch ultimate Dennis 6-10-26 · foaia rețetei, ca în programul de azi (plan-x-pap.css, „.xq”); același bloc ca pe landing (home.css, „PU · joacă”): secțiunile Ingrediente / Instrucțiuni / Păstrare se
     desfac fiecare; ingredientele au cantitatea în coloana ei și se taie la atingere; pașii bifați se strâng pe un rând;
     jos „Schimbă masa”, valorile pe porție și bara fixă „Am mâncat” */
  #m8App .ax-pn {
    padding-bottom: calc(96 * var(--u));
  }
  #m8App .ax-info + .ax-acc {
    margin-top: calc(18 * var(--u));
  }
  #m8App .ax-acc {
    margin-top: 0;
    padding: calc(15 * var(--u)) 0 calc(14 * var(--u));
  }
  #m8App .ax-acc p b {
    font-size: calc(19.5 * var(--u));
  }
  #m8App .ax-acc p span {
    font-size: calc(13 * var(--u));
  }
  #m8App .ax-acc .ax-i {
    transform: rotate(0deg);
  }
  #m8App .ax-ing li {
    display: grid;
    grid-template-columns: calc(78 * var(--u)) 1fr;
    align-items: baseline;
    gap: calc(12 * var(--u));
    justify-content: initial;
    min-height: 0;
    padding: calc(11 * var(--u)) 0;
    box-shadow: none;
    font: 500 calc(15 * var(--u))/1.4 "Inter", sans-serif;
    color: #c7c9d6;
    cursor: pointer;
    transition: opacity 0.25s ease;
  }
  #m8App .ax-ing li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  #m8App .ax-ing em {
    font: 650 calc(15 * var(--u))/1.4 "Inter", sans-serif;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    color: #fff;
  }
  #m8App .ax-ing li.is {
    opacity: 0.38;
  }
  #m8App .ax-ing li.is span {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.45);
  }
  #m8App .ax-st li.is {
    align-items: center;
    padding-top: calc(9 * var(--u));
    padding-bottom: calc(9 * var(--u));
  }
  #m8App .ax-st li.is p {
    min-width: 0;
    padding-top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: calc(13.5 * var(--u));
  }
  #m8App .ax-kp {
    padding-bottom: calc(10 * var(--u));
  }
  #m8App .ax-kp[hidden] {
    display: none;
  }
  #m8App .ax-kp p {
    margin: 0 0 calc(8 * var(--u));
    font: 400 calc(13.5 * var(--u))/1.6 "Inter", sans-serif;
    color: #9b9bac;
  }
  #m8App .ax-kp p:first-child {
    color: #c7c9d6;
  }
  #m8App .ax-ft {
    padding-top: calc(16 * var(--u));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  #m8App .ax-cm {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    min-height: max(calc(42 * var(--u)), 26px);
    padding: 0 calc(15 * var(--u));
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    font: 650 calc(14 * var(--u))/1 "Inter", sans-serif;
    color: #ececf3;
  }
  #m8App .ax-cm .ax-i {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    color: #b7a6ff;
  }
  #m8App .ax-ft .ax-mac {
    margin-top: calc(14 * var(--u));
  }
  #m8App .ax-macn {
    margin-top: calc(7 * var(--u));
    font: 500 calc(11.5 * var(--u))/1 "Inter", sans-serif;
    color: #84879e;
    text-align: center;
  }
  #m8App .ax-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u));
    background: linear-gradient(rgba(16, 19, 27, 0), #10131b 32%);
  }
  #m8App .ax-eatb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--u));
    width: 100%;
    min-height: max(calc(50 * var(--u)), 26px);
    border-radius: calc(16 * var(--u));
    background: linear-gradient(180deg, #7658f2, #6346ea);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-12 * var(--u)) rgba(var(--ax-now-rgb), 0.75);
    font: 650 calc(15 * var(--u))/1 "Inter", sans-serif;
    color: #fff;
    text-align: center;
  }
  #m8App .ax-eatb.on {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    color: #ececf3;
  }
  #m8App .ax-eatb .ax-i {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    stroke-width: 2.6;
    color: var(--ax-done-2);
  }
  /* tablou: legenda de sub zile și nota dată deja unei mese (fața din rând), ca în program */
  #m8App .ax-lg {
    display: flex;
    justify-content: center;
    gap: calc(16 * var(--u));
    margin: calc(-2 * var(--u)) 0 calc(8 * var(--u));
    font: 550 calc(11.5 * var(--u))/1 "Inter", sans-serif;
    color: #84879e;
  }
  #m8App .ax-lg span {
    display: inline-flex;
    align-items: center;
    gap: calc(5 * var(--u));
  }
  #m8App .ax-lg .ax-i {
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
  }
  #m8App .ax-fc {
    display: inline-grid;
    place-items: center;
    width: calc(17 * var(--u));
    height: calc(17 * var(--u));
    margin-left: calc(2 * var(--u));
  }
  #m8App .ax-fc svg {
    width: 100%;
    height: 100%;
  }
  #m8App .ax-fc.r5 { color: #01db69; }
  #m8App .ax-fc.r3 { color: #ffcc33; }
  #m8App .ax-kg {
    margin-top: calc(10 * var(--u));
    font: 650 calc(40 * var(--u))/1.05 "Sora", "Inter", sans-serif;
    letter-spacing: -0.03em;
    color: #fff;
  }
  #m8App .ax-pm {
    margin: calc(10 * var(--u)) calc(24 * var(--u)) 0 0;
    font: 400 calc(15 * var(--u))/1.45 "Inter", sans-serif;
    color: #b4b7c6;
    text-wrap: pretty;
  }
  /* bara spre țintă: se umple în poveste (.is), iar după cântărire se mișcă puțin (--p) */
  #m8App .ax-wb {
    margin-top: calc(20 * var(--u));
  }
  #m8App .ax-wb i {
    display: block;
    height: calc(8 * var(--u));
    border-radius: calc(4 * var(--u));
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
  }
  #m8App .ax-wb s {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ax-done), var(--ax-done-2));
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #m8App .ax-wb.is s {
    transform: scaleX(var(--p, 0.4));
  }
  #m8App .ax-we {
    display: flex;
    justify-content: space-between;
    gap: calc(12 * var(--u));
    margin-top: calc(10 * var(--u));
    font: 500 calc(13 * var(--u))/1.2 "Inter", sans-serif;
    color: #9b9bac;
  }
  #m8App .ax-pl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(8 * var(--u));
    margin-top: calc(20 * var(--u));
  }
  #m8App .ax-pl p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(5 * var(--u));
    min-width: 0;
    padding: calc(14 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u));
    border-radius: calc(18 * var(--u));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    text-align: center;
  }
  #m8App .ax-pl b {
    font: 650 calc(22 * var(--u))/1.1 "Sora", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: #fff;
    white-space: nowrap;
  }
  #m8App .ax-pl span {
    font: 500 calc(11.5 * var(--u))/1.3 "Inter", sans-serif;
    color: #9b9bac;
    text-wrap: balance;
  }
  #m8App .ax-s3 .ax-cat {
    margin: calc(22 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u));
  }
  /* mesele bifate: o coloană pe zi, verde cât ai bifat; cresc pe rând în poveste (.is) */
  #m8App .ax-cols {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: calc(8 * var(--u));
    padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
    border-radius: calc(20 * var(--u));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  }
  #m8App .ax-cols p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--u));
  }
  #m8App .ax-cols i {
    position: relative;
    display: block;
    width: 100%;
    max-width: calc(26 * var(--u));
    height: calc(70 * var(--u));
    border-radius: calc(8 * var(--u));
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
  }
  #m8App .ax-cols s {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-radius: inherit;
    background: var(--ax-done);
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #m8App .ax-cols p.is s {
    height: calc(var(--h, 1) * 100%);
  }
  #m8App .ax-cols span {
    font: 600 calc(12 * var(--u))/1 "Inter", sans-serif;
    color: #9b9bac;
  }
  #m8App .ax-cols p:last-child span {
    color: #fff;
  }
  #m8App .ax-add {
    width: 100%;
    margin-top: calc(18 * var(--u));
  }
  #m8App .ax-add .ax-i {
    width: calc(17 * var(--u));
    height: calc(17 * var(--u));
  }
  #m8App .ax-add.is {
    background: var(--ax-done-deep);
    box-shadow: none;
    animation: axPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  /* butonul de program din răspunsul lui Andu e un link: același contur de focus ca butoanele din telefon */
  #m8App .ax a:focus-visible {
    outline: 2px solid #b8a4ff;
    outline-offset: 2px;
  }
  /* ce se apasă are cel puțin 26 × 26 px (minimul de pe landing) și pe ecranele joase, unde „pixelul de telefon” scade
     sub 0,55 px (landing-ul face la fel pentru cercul mesei, butoanele rapide, „Schimbă perioada” și „Trimite”); aici
     și pentru X-ul foilor, unelte, „Schimbă masa”, butoanele mari, pașii, butonul de program din răspuns, produsele din
     listă și comutator */
  #m8App .ax-x {
    width: max(calc(48 * var(--u)), 26px);
    height: max(calc(48 * var(--u)), 26px);
  }
  #m8App .ax-tl,
  #m8App .ax-skip {
    min-height: max(calc(48 * var(--u)), 26px);
  }
  #m8App a.ax-q {
    min-height: max(calc(38 * var(--u)), 26px);
  }
  #m8App .ax-ls li {
    min-height: max(calc(44 * var(--u)), 26px);
  }
  #m8App .ax-b {
    min-height: max(calc(50 * var(--u)), 26px);
  }
  #m8App .ax-st li {
    min-height: max(calc(52 * var(--u)), 26px);
  }
  .m8-demo-buy {
    margin-top: 1.25rem;
  }
  /* „Vezi cum arată": secțiunea începe chiar sub cap, deci titlul, filele și telefonul intră pe ecran */
  .m8-demo {
    scroll-margin-top: 0.5rem;
  }
  .m8-demo-note {
    margin-top: 1.75rem;
    font-size: 0.75rem;
    color: #6f7489;
  }
  /* ════════ 3 · CE PRIMEȘTI ════════ */
  .m8-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    text-align: left;
  }
  .m8-grid li {
    padding: 0.9375rem 0.875rem 1rem;
    border-radius: 1.125rem;
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .m8-grid i {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.625rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    font-size: 1.0625rem;
    font-style: normal;
  }
  .m8-grid b {
    display: block;
    font: 700 0.875rem/1.25 "Sora", "Inter", sans-serif;
    letter-spacing: -0.01em;
    color: #fff;
  }
  .m8-grid span {
    display: block;
    margin-top: 0.3125rem;
    font-size: 0.78125rem;
    line-height: 1.4;
    color: var(--mut);
  }
  /* ════════ 4 · CUM ÎNCEPI ════════ */
  .m8-steps {
    position: relative;
    max-width: 22rem;
    margin: 0 auto;
    text-align: left;
    counter-reset: m8pas;
  }
  .m8-steps::before {
    content: "";
    position: absolute;
    left: 0.9375rem;
    top: 1rem;
    bottom: 1.5rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #1ab2ff, #7c5cfc 60%, rgba(181, 33, 233, 0.2));
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  }
  .m8-steps.in::before {
    transform: scaleY(1);
  }
  .m8-steps li {
    position: relative;
    padding: 0 0 1.375rem 3rem;
    counter-increment: m8pas;
  }
  .m8-steps li::before {
    content: counter(m8pas);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #121725;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
    font: 700 0.8125rem/1 "Sora", "Inter", sans-serif;
    color: #fff;
  }
  .m8-steps li.m8-steps-now::before {
    background: linear-gradient(135deg, #149dff, #b521e9);
    box-shadow: 0 0 0 5px rgba(124, 92, 252, 0.18);
  }
  .m8-steps em {
    display: block;
    font: 700 0.6875rem/1 "Inter", sans-serif;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8f94ad;
  }
  .m8-steps li.m8-steps-now em {
    color: #b9a8ff;
  }
  .m8-steps b {
    display: block;
    margin: 0.375rem 0 0.25rem;
    font: 700 0.9375rem/1.3 "Sora", "Inter", sans-serif;
    letter-spacing: -0.01em;
    color: #fff;
  }
  .m8-steps span {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mut);
  }
  /* ════════ 5 · PREȚUL ════════ */
  .m8-price-card {
    position: relative;
    margin-top: 0.875rem;
    padding: 1.75rem 1.25rem 1.375rem;
    border-radius: 1.5rem;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(124, 92, 252, 0.18), transparent 60%),
      var(--card);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
  }
  .m8-price-big {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    font: 800 3.5rem/1 "Sora", "Inter", sans-serif;
    letter-spacing: -0.04em;
  }
  .m8-price-big small {
    font: 600 1rem/1 "Inter", sans-serif;
    letter-spacing: 0;
    color: var(--mut);
  }
  .m8-price-card p {
    max-width: 19rem;
    margin: 0.875rem auto 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #b4b8cb;
  }
  .m8-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4375rem;
    margin-top: 1.125rem !important;
  }
  .m8-chips li {
    padding: 0.4375rem 0.75rem;
    border-radius: 62.4375rem;
    background: rgba(52, 211, 153, 0.08);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.25);
    font: 600 0.75rem/1 "Inter", sans-serif;
    color: #7fe8b8;
  }
  /* ════════ 6 · CINE E ÎN SPATE ════════ */
  .m8-who-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.75rem 1.25rem 1.5rem;
    border-radius: 1.5rem;
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .m8-who-av {
    width: 5.5rem;
    height: 5.5rem;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00c2ff, #b521e9);
  }
  .m8-who-av img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #0a0d15;
  }
  .m8-who-card small {
    margin-top: 0.875rem;
    font-size: 0.75rem;
    color: var(--mut);
  }
  .m8-who-card h2 {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font: 700 1.25rem/1.2 "Sora", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: #fff;
  }
  .m8-who-card h2 svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: #9a9db2;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .m8-who-cred {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
  }
  .m8-who-cred i {
    padding: 0.375rem 0.625rem;
    border-radius: 62.4375rem;
    background: rgba(255, 255, 255, 0.05);
    font: 600 0.71875rem/1.2 "Inter", sans-serif;
    font-style: normal;
    color: #cfd2e0;
  }
  .m8-who-card p {
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--mut);
  }
  /* ════════ 7 · ÎNTREBĂRI ════════ */
  .m8-qs {
    text-align: left;
  }
  .m8-q {
    border-bottom: 1px solid var(--line);
  }
  .m8-q button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.0625rem 0.125rem;
    border: 0;
    background: none;
    text-align: left;
    font: 600 0.9375rem/1.35 "Inter", sans-serif;
    color: #fff;
    cursor: pointer;
  }
  .m8-q button i {
    position: relative;
    flex: 0 0 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.3s;
  }
  .m8-q button i::before,
  .m8-q button i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.6875rem;
    height: 2px;
    margin: -1px 0 0 -0.34375rem;
    border-radius: 2px;
    background: #cfd2e0;
  }
  .m8-q button i::after {
    transform: rotate(90deg);
    transition: transform 0.35s;
  }
  .m8-q.open button i {
    transform: rotate(180deg);
    background: rgba(124, 92, 252, 0.2);
  }
  .m8-q.open button i::after {
    transform: rotate(0deg);
  }
  .m8-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .m8-q.open .m8-a {
    grid-template-rows: 1fr;
  }
  .m8-a p {
    overflow: hidden;
    padding: 0 2.5rem 0 0.125rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #b4b8cb;
  }
  .m8-q.open .m8-a p {
    padding-bottom: 1.0625rem;
  }
  .m8-a b {
    color: #fff;
  }
  .m8-ask {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: var(--mut);
  }
  .m8-ask a {
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(0, 194, 255, 0.55);
    text-underline-offset: 0.1875rem;
  }
  /* ════════ 8 · FINAL ════════ */
  .m8-end {
    padding-bottom: 1rem;
  }
  .m8-end-sub {
    margin-top: -0.5rem;
    font-size: 0.9375rem;
    color: #b4b8cb;
  }
  .m8-end-sub b {
    color: #fff;
  }
  .m8-seg {
    display: flex;
    gap: 0.25rem;
    margin: 1.375rem 0 1rem;
    padding: 0.25rem;
    border-radius: 62.4375rem;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .m8-seg button {
    flex: 1 1 0;
    height: 2.5rem;
    border: 0;
    border-radius: 62.4375rem;
    background: none;
    font: 600 0.8125rem/1 "Inter", sans-serif;
    color: #9a9db2;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
  }
  .m8-seg button[aria-checked="true"] {
    background: rgba(var(--gcr), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--gcr), 0.55);
    color: #fff;
  }
  /* ════════ bara de jos ════════ */
  .m8-bar {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem;
    border-radius: 1.375rem;
    background: rgba(14, 18, 28, 0.82);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      0 1rem 2.5rem -0.75rem rgba(0, 0, 0, 0.8);
    text-align: left;
    transform: translateY(calc(100% + 2rem));
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .m8-bar.show {
    transform: none;
  }
  .m8-bar-th {
    flex: 0 0 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    background-size: cover;
    background-position: center 30%;
    box-shadow: 0 0 0 1.5px var(--gc);
    transition: box-shadow 0.4s;
  }
  .m8-bar-t {
    min-width: 0;
  }
  .m8-bar-t b {
    display: block;
    font: 700 0.875rem/1.2 "Sora", "Inter", sans-serif;
    letter-spacing: -0.01em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m8-bar-t small {
    display: block;
    margin-top: 0.1875rem;
    font-size: 0.6875rem;
    color: var(--mut);
    white-space: nowrap;
  }
  .m8-bar-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    height: 2.875rem;
    margin-left: auto;
    padding: 0 1.125rem;
    border-radius: 62.4375rem;
    background: linear-gradient(90deg, #149dff, #8b3ff0);
    box-shadow: 0 0.625rem 1.5rem -0.625rem rgba(124, 92, 252, 0.8);
    font: 700 0.9375rem/1 "Inter", sans-serif;
    color: #fff !important;
  }
  .m8-bar-cta:active {
    transform: scale(0.97);
  }
}
/* mișcare redusă: fără derivă, fără luciu, fără plutire; demo-ul nu se mai joacă singur (JS) */
@media (prefers-reduced-motion: reduce) {
  .m8 *,
  .m8 *::before,
  .m8 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .m8-rv {
    opacity: 1;
    transform: none;
  }
}
/* ═══════════════════════════════ TABLETĂ ȘI DESKTOP ═══════════════════════════════
   Aceeași pagină, așezată după lățimea coloanei de conținut (containerul .m8-page):
   · sub 40rem — telefonul (baza de mai sus);
   · 40–58rem — tabletă / jumătate de desktop / desktop îngust cu bara laterală deschisă: coloana telefonului,
     lărgită și centrată;
   · de la 58rem — DESKTOP: sus, două coloane ca pe landing (în stânga alegi obiectivul și butonul, în dreapta
     vezi aplicația, care se joacă singură); dedesubt, secțiunile pe lățime, cu grile. */
.m8-page {
  container: m8 / inline-size;
}
/* pe ecranele mari, meniul e bara laterală (cu logo) — capul paginii nu mai are rost */
@media (min-width: 1024px) {
  .m8-top {
    display: none;
  }
  /* fără capul paginii, începutul are nevoie de aer propriu  */
  .m8-hero {
    padding-top: 3.5rem;
  }
}
/* bara de jos: centrată pe coloana de conținut (nu pe fereastră), cât un rând de citit */
@media (min-width: 720px) {
  .m8-bar {
    left: calc(var(--rail, 0px) + (100vw - var(--rail, 0px) - var(--acx-simetrie, 0px)) / 2);
    right: auto;
    bottom: 1.25rem;
    width: min(38rem, calc(100vw - var(--rail, 0px) - 3rem));
    transform: translate(-50%, calc(100% + 2.5rem));
    transition:
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      left 0.42s cubic-bezier(0.2, 0, 0, 1);
  }
  .m8-bar.show {
    transform: translate(-50%, 0);
  }
}
/* ── 40–58rem: coloana telefonului, lărgită ── */
@container m8 (min-width: 40rem) {
  .m8-abonat,
  .m8-hero,
  .m8-sec {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
  }
  .m8-hero,
  .m8-sec {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .m8-h1 {
    font-size: 2.75rem;
  }
  .m8-lede,
  .m8-promise {
    max-width: 26rem;
  }
  .m8-goals {
    gap: 0.875rem;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }
  .m8-goal {
    aspect-ratio: 1 / 1;
  }
  .m8-goal-l {
    font-size: 0.9375rem;
  }
  .m8-buy,
  .m8-demo-buy,
  .m8-end .m8-cta,
  .m8-seg {
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
  }
  .m8-h2 {
    font-size: 2.25rem;
  }
  .m8-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Dennis Patch 5-10-26: între 40 și 58rem (tabletă, 1/2 desktop) pânza de puncte și luminile eroului acopereau doar
   coloana de 44rem, iar marginile ei se vedeau ca o bandă mai închisă la culoare; acum acoperă toată lățimea paginii,
   ca pe telefon și pe desktop (pânza se redimensionează singură, magazin-v8.js · ResizeObserver). */
@container m8 (min-width: 40rem) and (max-width: 57.99rem) {
  .m8-hero .m8-dots,
  .m8-hero .m8-glow {
    left: calc((100% - 100cqi) / 2);
    right: auto;
    width: 100cqi;
  }
}
/* ── de la 58rem: DESKTOP ── */
@container m8 (min-width: 58rem) {
  .m8-abonat {
    max-width: 66rem;
    margin: 1.5rem auto 0;
  }
  /* sus: două coloane — stânga decizia, dreapta aplicația */
  .m8-fold {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21.5rem;
    column-gap: clamp(2.5rem, 6cqi, 5.5rem);
    align-items: center;
    max-width: 66rem;
    margin: 0 auto;
    padding: 3.25rem 2.5rem 1rem;
  }
  .m8-fold .m8-hero {
    position: static;
    isolation: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  /* pânza de puncte și luminile acoperă toată lățimea coloanei de conținut, în spatele ambelor coloane */
  .m8-fold .m8-dots,
  .m8-fold .m8-glow {
    left: calc((100% - 100cqi) / 2);
    right: auto;
    width: 100cqi;
    top: 0;
    bottom: 0;
    height: 100%;
  }
  /* luminile se sting spre jos și spre dreapta — coloana de conținut se termină acolo, fără margine tăiată */
  .m8-fold .m8-glow {
    -webkit-mask: linear-gradient(90deg, #000 62%, transparent 96%), linear-gradient(180deg, #000 50%, transparent);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, #000 62%, transparent 96%), linear-gradient(180deg, #000 50%, transparent);
    mask-composite: intersect;
  }
  .m8-fold .m8-glow i:first-child {
    left: -10rem;
    top: -8rem;
  }
  .m8-fold .m8-glow i:last-child {
    right: 8%;
    top: 6rem;
    width: 22rem;
    height: 22rem;
  }
  .m8-h1 {
    margin: 1.375rem 0 1rem;
    font-size: clamp(2.75rem, 4.3cqi, 3.75rem);
  }
  .m8-fold .m8-lede {
    max-width: 30rem;
    margin: 0;
    font-size: 1.0625rem;
  }
  /* obiectivele devin rânduri: poza mică, numele și descrierea, bifa în dreapta (limba landing-ului pe desktop) */
  .m8-fold .m8-goals {
    grid-template-columns: 1fr;
    gap: 0.625rem;
    max-width: 30rem;
    margin: 1.75rem 0 0;
  }
  .m8-fold .m8-goal {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    aspect-ratio: auto;
    height: 4.5rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border-radius: 1.125rem;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    opacity: 1;
    transform: none;
    text-align: left;
    transition:
      background 0.25s ease,
      box-shadow 0.3s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .m8-fold .m8-goal::after {
    display: none;
  }
  .m8-fold .m8-goal-art {
    position: relative;
    inset: auto;
    flex: 0 0 3.5rem;
    height: 3.5rem;
    border-radius: 0.8125rem;
    transform: none;
  }
  .m8-fold .m8-goal-l {
    position: static;
    flex: 1 1 auto;
    font-size: 1.0625rem;
    color: #fff;
  }
  .m8-fold .m8-goal-d {
    display: block;
    margin-top: 0.25rem;
    font: 500 0.8125rem/1.3 "Inter", sans-serif;
    letter-spacing: 0;
    color: var(--mut);
  }
  .m8-fold .m8-goal-ck {
    order: 3;
    position: static;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background: none;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
  }
  .m8-fold .m8-goal[aria-checked="true"] {
    background: rgba(var(--gcr), 0.09);
    box-shadow:
      inset 0 0 0 1.5px var(--gc),
      0 1rem 2rem -1.25rem rgba(var(--gcr), 0.7);
  }
  .m8-fold .m8-goal[aria-checked="true"] .m8-goal-ck {
    background: var(--gc);
    box-shadow: none;
    transform: none;
  }
  .m8-fold .m8-promise,
  .m8-fold .m8-more {
    display: none;
  }
  .m8-fold .m8-buy {
    max-width: 30rem;
    margin: 1.5rem 0 0;
  }
  .m8-fold .m8-fine {
    justify-content: flex-start;
    padding-left: 1.5rem;
  }
  /* dreapta: aplicația */
  .m8-fold .m8-demo {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .m8-fold .m8-demo .m8-h2,
  .m8-fold .m8-demo-buy {
    display: none;
  }
  .m8-fold .m8-demo .m8-k {
    margin-bottom: 0.875rem;
  }
  .m8-fold .m8-tabs {
    max-width: none;
  }
  .m8-fold .m8-caps {
    max-width: none;
    min-height: 2.75rem;
  }
  .m8-fold .m8-phone {
    height: 35rem;
  }
  .m8-fold .m8-demo-note {
    margin-top: 1.5rem;
  }
  /* secțiunile de dedesubt */
  .m8-sec {
    max-width: 66rem;
    padding: 6.5rem 2.5rem 0;
  }
  .m8-h2 {
    margin-bottom: 2.25rem;
    font-size: 2.75rem;
  }
  .m8-grid {
    gap: 1rem;
  }
  .m8-grid li {
    padding: 1.5rem 1.375rem 1.625rem;
    border-radius: 1.375rem;
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.35s ease,
      background 0.35s ease;
  }
  .m8-grid i {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: 0.875rem;
    font-size: 1.3125rem;
  }
  .m8-grid b {
    font-size: 1.0625rem;
  }
  .m8-grid span {
    margin-top: 0.4375rem;
    font-size: 0.9375rem;
  }
  /* cum începi: pașii pe orizontală, linia trece prin puncte */
  .m8-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: none;
  }
  .m8-steps::before {
    left: 1rem;
    right: calc((100% - 4.5rem) / 4 - 1rem);
    top: 0.9375rem;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, #1ab2ff, #7c5cfc 70%, rgba(181, 33, 233, 0.35));
    transform-origin: left;
    transform: scaleX(0);
  }
  .m8-steps.in::before {
    transform: scaleX(1);
  }
  .m8-steps li {
    padding: 3.25rem 0 0;
  }
  .m8-steps b {
    font-size: 1rem;
  }
  .m8-steps span {
    font-size: 0.875rem;
  }
  /* prețul și cine e în spate, alăturate, la aceeași înălțime */
  .m8-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 66rem;
    margin: 0 auto;
    padding: 6.5rem 2.5rem 0;
  }
  .m8-duo > .m8-sec {
    display: flex;
    flex-direction: column;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .m8-duo > .m8-who {
    padding-top: 1.5625rem;
  }
  .m8-duo .m8-price-card,
  .m8-duo .m8-who-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.25rem 2rem;
  }
  .m8-price-big {
    font-size: 4rem;
  }
  .m8-price-card p,
  .m8-who-card p {
    max-width: 24rem;
  }
  /* întrebări: titlul în stânga, lista în dreapta (ca pe landing) */
  .m8-faq {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 4.5rem;
    align-items: start;
    text-align: left;
  }
  .m8-faq .m8-h2 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  .m8-faq .m8-ask {
    grid-column: 1;
    grid-row: 2;
    margin-top: 1rem;
  }
  .m8-faq .m8-qs {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .m8-q button {
    padding: 1.1875rem 0.25rem;
    font-size: 1rem;
  }
  .m8-a p {
    font-size: 0.9375rem;
  }
  .m8-end {
    max-width: 34rem;
    padding-bottom: 3rem;
  }
  .m8-end .m8-h2 {
    margin-bottom: 1.25rem;
  }
}
/* mouse: tot ce e apăsabil răspunde (pe telefon răspunde atingerea) */
@media (hover: hover) and (pointer: fine) {
  .m8-goal {
    cursor: pointer;
  }
  .m8-goal:hover:not([aria-checked="true"]) {
    opacity: 0.9;
  }
  @container m8 (min-width: 58rem) {
    .m8-fold .m8-goal:hover:not([aria-checked="true"]) {
      background: rgba(255, 255, 255, 0.06);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
      transform: translateX(0.1875rem);
    }
    .m8-grid li:hover {
      transform: translateY(-0.25rem);
      background: #121725;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 1.25rem 2.5rem -1.5rem rgba(0, 0, 0, 0.9);
    }
  }
  .m8-cta:hover,
  .m8-bar-cta:hover {
    filter: brightness(1.1);
  }
  .m8-cta:hover i {
    transform: translateX(0.1875rem);
  }
  .m8-cta i {
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  }
  .m8-tabs button:hover {
    color: #d8dbe8;
  }
  .m8-q button:hover span {
    color: #d9dcff;
  }
  .m8-q button:hover i {
    background: rgba(255, 255, 255, 0.1);
  }
  .m8-who-card {
    transition: box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .m8-who-card:hover {
    transform: translateY(-0.1875rem);
    box-shadow: inset 0 0 0 1px rgba(157, 124, 255, 0.4);
  }
  .m8-seg button:not([aria-checked="true"]):hover {
    color: #e8eaf3;
    background: rgba(255, 255, 255, 0.05);
  }
  .m8-ask a:hover,
  .m8-more:hover {
    color: #fff;
  }
  .m8-phone {
    cursor: default;
  }
}
/* tastatura: contur clar pe ce e în focus (Tab), fără să apară la click */
.m8 :is(a, button):focus-visible {
  outline: 2px solid rgba(0, 194, 255, 0.85);
  outline-offset: 3px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   Patch ultimate Dennis 6-10-26 · telefonul, ca programul de azi (plan-x-s.js, plan-x-core.js, plan-x-pap.css); același
   bloc ca pe landing (home.css, la final):
   cardul de sus trece la masa următoare („Acum” → „Urmează” → „Gata pe azi”), rândul mesei notate are fața notei,
   rețeta are „Cantități pentru” și pașii frază cu frază
   ═════════════════════════════════════════════════════════════════════════════ */
/* sub zile și legendă, linia subțire a antetului din program */
#m8App .ax-lg {
  margin-bottom: 0;
  padding-bottom: calc(12 * var(--u));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}
#m8App .ax-lg + .ax-now {
  margin-top: calc(14 * var(--u));
}
/* „Urmează”: masa de după, fără punctul viu și fără marginea violet (ca .st-next din program) */
#m8App .ax-now.st-next {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 calc(28 * var(--u)) calc(54 * var(--u)) calc(-34 * var(--u)) rgba(0, 0, 0, 0.6);
}
#m8App .ax-now.st-next .ax-live {
  display: none;
}
#m8App .ax-now.st-next .ax-kick {
  color: #e6e7ee;
}
#m8App .ax-now.ax-hin > * {
  animation: axHin 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes axHin {
  from { opacity: 0; transform: translateY(calc(8 * var(--u))); }
}
/* „Gata pe azi”: bifa mare, verde, și zilele din ultima săptămână (plină = toate mesele bifate) */
#m8App .ax-now:not(.t-done) .ax-dn,
#m8App .ax-now.t-done > :not(.ax-dn) {
  display: none;
}
#m8App .ax-now.t-done {
  padding: calc(24 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u));
  background: linear-gradient(180deg, rgba(34, 176, 125, 0.07), transparent 50%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), #0e1119;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 calc(26 * var(--u)) calc(50 * var(--u)) calc(-34 * var(--u)) rgba(34, 176, 125, 0.45);
  text-align: center;
}
#m8App .ax-dn-ic {
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  margin: 0 auto;
  border-radius: 50%;
  background: var(--ax-done);
  box-shadow: 0 0 0 calc(8 * var(--u)) rgba(34, 176, 125, 0.14);
  color: #fff;
  animation: axDnPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes axDnPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
#m8App .ax-dn-ic .ax-i {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  stroke-width: 2.6;
}
#m8App .ax-dn-t {
  margin-top: calc(16 * var(--u));
  font: 650 calc(23 * var(--u))/1.15 "Sora", "Inter", sans-serif;
  letter-spacing: -0.02em;
  color: #fff;
}
#m8App .ax-dn-p {
  margin-top: calc(6 * var(--u));
  font: 400 calc(14 * var(--u))/1.45 "Inter", sans-serif;
  color: #c8c8d4;
}
#m8App .ax-wd {
  margin-top: calc(16 * var(--u));
}
#m8App .ax-wd p {
  display: flex;
  justify-content: center;
  gap: calc(8 * var(--u));
}
#m8App .ax-wd i {
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.14);
  font-style: normal;
}
#m8App .ax-wd i b {
  font: 700 calc(10.5 * var(--u))/1 "Inter", sans-serif;
  color: #84879e;
}
#m8App .ax-wd i.part {
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(34, 176, 125, 0.6);
}
#m8App .ax-wd i.part b {
  color: var(--ax-done-2);
}
#m8App .ax-wd i.full {
  background: var(--ax-done-deep);
  box-shadow: none;
}
#m8App .ax-wd i.full b {
  color: #fff;
}
#m8App .ax-wd i.now {
  outline: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.5);
  outline-offset: calc(2 * var(--u));
}
#m8App .ax-wd span {
  display: block;
  margin-top: calc(10 * var(--u));
  font: 500 calc(12.5 * var(--u))/1.2 "Inter", sans-serif;
  color: #84879e;
}
/* rândurile: „toate bifate” când sunt toate */
#m8App .ax-lh:not(.all) .ax-la,
#m8App .ax-lh.all .ax-lc {
  display: none;
}
/* fața notei e desenată din linie (ca .xf din program); doar ochii sunt plini. Regula generală a site-ului care umple
   cercurile din iconițele cu fill="none" nu ajunge la ea */
#m8App .ax-fc svg :is(path, circle) {
  fill: none;
}
#m8App .ax-fc svg circle.e {
  fill: currentColor;
  stroke: none;
}
#m8App .ax-fc.r2 { color: #ff5c6c; }
/* rețeta: „Cantități pentru − 2 porții +”, pașii frază cu frază */
#m8App .ax-ingw[hidden] {
  display: none;
}
#m8App .ax-por {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: 0 0 calc(4 * var(--u));
  font: 500 calc(14 * var(--u))/1.2 "Inter", sans-serif;
  color: #9b9bac;
}
#m8App .ax-por > span {
  margin-right: auto;
}
#m8App .ax-por b {
  min-width: calc(62 * var(--u));
  text-align: center;
  font-weight: 650;
  color: #fff;
}
#m8App .ax-pq {
  display: grid;
  place-items: center;
  width: max(calc(36 * var(--u)), 26px);
  height: max(calc(36 * var(--u)), 26px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #ececf3;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#m8App .ax-pq:not([aria-disabled="true"]):active {
  transform: scale(0.92);
}
#m8App .ax-pq[aria-disabled="true"] {
  opacity: 0.3;
  cursor: default;
}
#m8App .ax-pq .ax-i {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}
#m8App .ax-st .ax-l {
  display: block;
}
#m8App .ax-st .ax-l + .ax-l {
  margin-top: calc(6 * var(--u));
}
#m8App .ax-st li.is .ax-l {
  display: inline;
}
#m8App .ax-st li.is .ax-l + .ax-l {
  margin-left: 0.3em;
}
#m8App .ax-pq:focus-visible {
  outline: 2px solid #b8a4ff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #m8App .ax-dn-ic,
  #m8App .ax-now.ax-hin > * {
    animation: none !important;
    transition: none !important;
  }
}
/* Progres: rândul cântăririi de sub zile (plan-x-s.js progressNote) */
#m8App .ax-wn {
  margin: calc(16 * var(--u)) calc(2 * var(--u)) 0;
  font: 400 calc(13.5 * var(--u))/1.5 "Inter", sans-serif;
  color: #c8c8d4;
  text-wrap: pretty;
}
#m8App .ax-wn b {
  font-weight: 600;
  color: #fff;
}
#m8App .ax-wn + .ax-add {
  margin-top: calc(14 * var(--u));
}
/* povestea rețetei: degetul apasă și pe „Ingrediente” (pe săgeata din dreapta), ca pe landing */
#m8App .ax-acc.tap {
  position: relative;
}
#m8App .ax-acc.tap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-6 * var(--u));
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  margin-top: calc(-23 * var(--u));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18) 70%, transparent);
  pointer-events: none;
  animation: axTap 0.75s ease-out both;
}

/* Update fluiditate Dennis — o zonă din afara ecranului (magazin-v8.js îi pune atributul data-fl-off) își ține
   animațiile CSS pe loc */
#m8 [data-fl-off],
#m8 [data-fl-off] *,
#m8 [data-fl-off]::before,
#m8 [data-fl-off]::after,
#m8 [data-fl-off] *::before,
#m8 [data-fl-off] *::after {
  animation-play-state: paused !important;
}