/* =============================================================================
   onboarding-v8.css — stratul peste onboardingul clasic (onboarding.css + onboarding-patch2.css rămân, neatinse).
   Telefon întâi: titlul aliniat cu câmpurile, butonul principal mereu sub deget, variantele ca răspunsuri scurte,
   informarea cu textul deschis, rezumatul cu imaginea obiectivului.
   ============================================================================= */

/* ── bara de sus: pastila programului, cu miniatura obiectivului ales în landing ── */
.obar .eta { gap: 0.5rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; }
.oo-thumb { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #1a2030 center 28% / cover no-repeat; box-shadow: 0 0 0 1.5px rgba(var(--ok-rgb), 0.45); view-transition-name: obx-plan; }

/* ── bara de progres: „Înapoi" ca săgeată, lângă pas ── */
/* (Patch design mic, 5.11) bara de progres are aceeași înălțime de la prima randare: rândul, cât cu săgeata (altfel conținutul urca 2 px când dispărea);
   segmentele le pune onboarding.js, după prima randare, deci până atunci le desenăm cu fundal (7 pași, primul aprins) și le ținem locul (altfel totul cobora 4 px) */
.prog .meta { align-items: center; gap: 0.5rem; min-height: 1.25rem; }
.prog .segs { min-height: 0.25rem; }
.prog .segs:empty { background: linear-gradient(90deg, #00c2ff, #3c8cf8) 0 0 / calc((100% - 1.875rem) / 7) 100% no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 calc((100% - 1.875rem) / 7), transparent 0 calc((100% - 1.875rem) / 7 + 0.3125rem)); }
.prog .stepno { flex: 1; }
.prog .stepname { display: none; }
.oo-back { flex: none; width: 2rem; height: 2rem; margin: -0.375rem 0 -0.375rem -0.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--fg-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.oo-back[hidden] { display: none; }
.oo-back svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oo-back:active { background: rgba(255, 255, 255, 0.06); }

/* ── pașii: titlul și textul aliniate cu câmpurile; butonul principal fix jos ── */
.step { padding: 1.5rem 1rem calc(7rem + env(safe-area-inset-bottom)); }
.step h1 { font-size: 1.75rem; line-height: 1.15; text-align: left; margin-bottom: 0.25rem; }
.step .sub { text-align: left; margin: 0.375rem 0 0; max-width: none; font-size: 0.9375rem; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.step h1 + .glabel { margin-top: 1.5rem; }
.step h1 + .oo-sex, .step h1 + .oo-first { margin-top: 1.25rem; }
.step .sub + .fld, .step .sub + .oo-kit { margin-top: 1.25rem; }
.glabel { margin: 1.625rem 0 0.625rem; font-size: 0.71875rem; }
.oo-hint { margin-left: 0.375rem; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 0.8125rem; color: var(--dim); opacity: 0.85; }
/* (Patch design mic, 5.11) animația de intrare pornește din dreapta și ieșea din ecran: pe Android pagina se lățea cu 10 px cât dura, iar butonul fix sărea cu ea */
main { overflow-x: clip; }
/* pasul intră prin copiii lui, nu prin el însuși: o animație pe transform ar face din pas containerul butonului fix */
.step.on, .step.on.from-l { animation: none; }
.step.on > :not(.nav) { animation: stepInR 0.34s var(--ease-emph) both; }
.step.on.from-l > :not(.nav) { animation-name: stepInL; }
/* (Patch design mic, 5.11) primul ecran n-are intrare: pasul apare așezat; animația de mai sus e pentru trecerea de la un pas la altul (onboarding-v8.js scoate clasa la prima trecere).
   Mesajele care apar ulterior pe același ecran își păstrează o intrare: erorile, cea obișnuită, avertismentul de la greutate, una pe loc. */
html.oo-load .step.on > :not(.nav):not(.ferr) { animation: none; }
html.oo-load .step.on > .oo-ins.warn { animation: ooFade 0.22s ease-out; }
.step .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; padding: 1.5rem 1rem calc(0.875rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(8, 11, 18, 0) 0%, rgba(8, 11, 18, 0.92) 36%, #080b12 100%); }
.step .nav > * { max-width: var(--col); margin: 0 auto; }
.step .nav .btn-ghost { display: none; }
.step[data-step="8"] .nav { position: static; background: none; }
.btn { animation: none; background-size: 100% 100%; }
.ferr { text-align: left; }

/* contul (ultimul pas): un câmp pe rând, telefonul cu rostul lui, o singură parolă (cu ochi), regulile sub ea */
.step[data-step="1"] .fld { margin-bottom: 0.625rem; }
.step[data-step="1"] .rules { justify-content: flex-start; margin: -0.125rem 0 0.875rem; }
.step[data-step="1"] .consent { margin-top: 0.125rem; }
.step[data-step="1"] .rules + .fld.oo-hide + .consent { margin-top: 0.5rem; }
.oo-hide { display: none !important; }
.oo-fhint { margin: -0.25rem 0 0.875rem 0.125rem; font-size: 0.8125rem; line-height: 1.4; color: var(--dim); }
.fld.bad + .oo-fhint { display: none; }
.oo-pw input { padding-right: 3.25rem; }
.oo-eye { position: absolute; right: 0.375rem; top: 1.625rem; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--dim); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.oo-eye svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oo-eye .x { opacity: 1; transition: opacity var(--dur-fast); }
.oo-eye.on { color: var(--fg-2); }
.oo-eye.on .x { opacity: 0; }
#err1 a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }
/* contul în trei ecrane (data-pane pe secțiune, data-p pe elemente); „edit" = numele, telefonul și emailul, din rezumat */
.oo-acc-step[data-pane="1"] [data-p]:not([data-p~="1"]),
.oo-acc-step[data-pane="2"] [data-p]:not([data-p~="2"]),
.oo-acc-step[data-pane="3"] [data-p]:not([data-p~="3"]),
.oo-acc-step[data-pane="edit"] [data-p]:not([data-p~="edit"]) { display: none; }
.step h1 + .fld { margin-top: 1.25rem; }
.oo-acc-step[data-pane="edit"] .fld + .fld { margin-top: 0; }
/* contul există deja pentru adresa din câmp: fără parolă, reguli și acorduri (date deja), cu confirmarea în loc */
.oo-accok { display: none; }
html.oo-reg .oo-acc-step[data-pane="3"] .oo-pw, html.oo-reg .oo-acc-step[data-pane="3"] .rules, html.oo-reg .oo-acc-step[data-pane="3"] .consent, html.oo-reg .oo-acc-step[data-pane="3"] .sub { display: none; }
html.oo-reg .oo-acc-step[data-pane="3"] .oo-accok { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--ok-text); }
.oo-accok svg { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* răsplata de la începutul contului: „Gata cu întrebările" (pastilă verde, bifa se desenează) */
.oo-yay { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0 0 0.875rem; padding: 0.3125rem 0.75rem 0.3125rem 0.5625rem; border-radius: 999px; background: rgba(var(--ok-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--ok-rgb), 0.3); color: var(--ok-text); font-size: 0.8125rem; font-weight: 700; line-height: 1.2; }
.oo-yay svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.step.on .oo-yay svg { animation: ooDraw 0.5s 0.25s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes ooDraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
/* salutul, după ce ne-ai spus numele: cald, fără pastilă */
.oo-yay.oo-hi { display: block; padding: 0; background: none; box-shadow: none; color: var(--fg-2); font-size: 1rem; font-weight: 600; }
.btn:disabled { opacity: 0.75; cursor: progress; }

/* pasul 2: femeie / bărbat, două jumătăți egale; unitățile în câmp; fără săgețile câmpurilor numerice */
.oo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.oo-two .pill span, .oo-grid .pill span { display: flex; justify-content: center; width: 100%; min-height: 3.25rem; border-radius: var(--r-md); font-size: 0.96875rem; }
.frow { gap: 0.625rem; }
.frow .fld { margin-bottom: 0; }
.fld input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.fld input[type="number"]::-webkit-outer-spin-button, .fld input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.oo-u input { padding-right: 2.75rem; }
.oo-u::after { content: attr(data-u); position: absolute; right: 0.875rem; top: 1.625rem; transform: translateY(-50%); font-size: 0.875rem; font-weight: 600; color: var(--dim); pointer-events: none; }
.oo-ins { margin: 0.625rem 0 0; min-height: 0; font-size: 0.875rem; line-height: 1.45; color: var(--fg-2); }
.oo-ins:empty { display: none; }
.oo-ins.warn { padding: 0.625rem 0.75rem; border-radius: var(--r-sm); background: rgba(255, 184, 77, 0.08); border: 1px solid rgba(255, 184, 77, 0.35); color: #ffd79a; }

/* variantele (activitate, dietă, gătit): iconița în stânga, titlul-răspuns, exemplul dedesubt */
.oo-list { gap: 0.5rem; }
.oo-list .opt .box, .oo-meals .oo-rec .box { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; padding: 0.75rem 2.75rem 0.75rem 0.75rem; min-height: 3.75rem; }
.oo-list .opt .ic { grid-row: span 2; width: 2.375rem; height: 2.375rem; display: grid; place-items: center; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.05); font-size: 1.1875rem; line-height: 1; }
.oo-list .opt .t { font-size: 0.96875rem; text-wrap: balance; }
.oo-list .opt .d { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.oo-list .opt .box:not(:has(.d)) .t { grid-row: span 2; }
.oo-list .opt .ck, .oo-meals .ck { top: 50%; transform: translateY(-50%); }

/* mesele: recomandarea sus, apoi numărul dintr-un rând de trei */
.oo-meals .oo-rec .box { grid-template-columns: 1fr; padding-left: 1rem; }
.oo-meals .tag { justify-self: start; margin-bottom: 0.3125rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: rgba(var(--ok-rgb), 0.12); color: var(--ok-text); font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.oo-meals .oo-rec .t { font-size: 0.96875rem; }
.oo-meals .oo-rec .d { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.oo-or { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0.625rem; font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.oo-or::before, .oo-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.oo-n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.oo-n .opt .box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 4.5rem; padding: 0.625rem 0.5rem; text-align: center; }
.oo-n .opt .t { font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; }
.oo-n .opt .d { margin-top: 0.3125rem; font-size: 0.78125rem; color: var(--muted); }

/* jetoanele pentru ce nu mănânci / ce-ți place */
.oo-chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.oo-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0 0.9375rem; border-radius: 999px; border: 1px solid var(--card-bd); background: var(--bg-elev); color: var(--fg-2); font-family: inherit; font-size: 0.90625rem; font-weight: 600; line-height: 1; cursor: pointer; transition: transform var(--dur-fast) var(--ease-press), background var(--dur-base), border-color var(--dur-base), color var(--dur-base); }
.oo-chip:active { transform: scale(0.95); }
.oo-chip.on { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.7); color: #fff; }
.oo-chip.on::before { content: ""; width: 0.6875rem; height: 0.6875rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E") center/contain no-repeat; }
.oo-extra { margin: 0.5rem 0 0; }
.oo-extra input { min-height: 2.875rem; padding-top: 1.125rem; font-size: 0.9375rem; }
.oo-extra label { top: 1.4375rem; font-size: 0.875rem; }

/* magazinele: două coloane egale */
.oo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.oo-grid .pill span { min-height: 3rem; }

/* bucătăria: o grilă de plăci, cu bifa în colț */
.oo-kit { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.oo-kit + .oo-kit { margin-top: 0.5rem; }
.step .sub + .glabel { margin-top: 1.25rem; }
.oo-kit .opt .box { display: flex; align-items: center; gap: 0.625rem; min-height: 3.5rem; padding: 0.625rem 2.5rem 0.625rem 0.625rem; }
.oo-kit .opt .ic { flex: none; width: 2.125rem; height: 2.125rem; display: grid; place-items: center; border-radius: 0.625rem; background: rgba(255, 255, 255, 0.05); font-size: 1.0625rem; }
.oo-kit .opt .t { font-size: 0.9375rem; }
.oo-kit .opt .ck { top: 50%; transform: translateY(-50%); right: 0.625rem; border-radius: 0.375rem; }
.oo-kit.bad .opt .box { border-color: var(--danger); animation: shake 360ms ease-out; }
.oo-kit-base .opt .box { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.75rem; min-height: 6rem; padding: 0.875rem; }
.oo-kit-base .opt .ic { width: 2.625rem; height: 2.625rem; border-radius: 0.75rem; font-size: 1.3125rem; }
.oo-kit-base .opt .t { font-size: 1rem; font-weight: 700; }
.oo-kit-base .opt .ck { top: 0.875rem; right: 0.875rem; transform: none; }
.oo-kit-base .opt input:checked ~ .box .ck { animation: ooCkB 0.42s var(--ease-press); }
@keyframes ooCkB { 30% { transform: scale(0.82); } 62% { transform: scale(1.1); } 100% { transform: none; } }

/* bifele: pline (fără gradient), bifa se desenează */
.opt input:checked ~ .box .ck, .consent input:checked { background: #7c5cfc; border-color: #7c5cfc; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px -6px rgba(124, 92, 252, 0.95); }
.opt input:checked ~ .box .ck { animation: ooCk 0.42s var(--ease-press); }
@keyframes ooCk { 0% { transform: translateY(-50%) scale(1); } 30% { transform: translateY(-50%) scale(0.82); } 62% { transform: translateY(-50%) scale(1.1); } 100% { transform: translateY(-50%) scale(1); } }

.oo-sum .panel h2 { text-align: left; font-size: 1.375rem; margin-bottom: 0.875rem; }
.oo-errpay { margin: 0 0 0.5rem; text-align: center; }

/* ── informarea (foaia dintre cont și rezumat): textul deschis, derulabil, între titlu și butoane, care rămân pe loc (Patch design mic, 5.11) ── */
.sheet.oo-md .panel { display: flex; flex-direction: column; max-height: 92vh; max-height: 92svh; padding: 0; overflow: hidden; }
.oo-md-h { flex: none; padding: 0.75rem 1.25rem 0.625rem; }
.sheet.oo-md h2 { margin: 0; text-align: left; font-size: 1.3125rem; line-height: 1.22; letter-spacing: -0.022em; text-wrap: balance; }
/* cadrul ține șina pe loc; #mdBody rămâne elementul care derulează. Linia de sus apare numai după ce începe derularea, ca foaia să fie liniștită la deschidere */
.oo-md-bw { --pl: 1.25rem; --gut: 2.5rem; position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.oo-md-bw.fara-sina { --gut: var(--pl); }
.oo-md-bw::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 1.125rem; border-top: 1px solid var(--hairline); background: linear-gradient(180deg, var(--panel), transparent); pointer-events: none; opacity: 0; transition: opacity var(--dur-base); }
.oo-md-bw.derulat::before { opacity: 1; }
.oo-md-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.25rem var(--gut) 1.75rem var(--pl); color: var(--fg-body); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
.oo-md-b::-webkit-scrollbar { display: none; }
.oo-md-b:focus { outline: none; }
.oo-md-b:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: -2px; }
.oo-md-b p { margin: 0 0 0.875rem; }
.oo-md-b p:last-child { margin-bottom: 0; }
/* primul paragraf rămâne îngroșat (cerut de avocat), pe o suprafață discretă, cu textul pe aceeași verticală cu restul */
.oo-md-b > p:first-child { margin: 0 -0.625rem 1.25rem; padding: 0.75rem 0.625rem 0.8125rem; border-radius: var(--r-md); background: var(--card-fill); box-shadow: var(--inset-hi); }
.oo-md-b strong { color: var(--fg); font-weight: 700; }
/* „Atenționare…”: un capitol nou, nu o alarmă */
.oo-md-b h4 { margin: 2.25rem 0 0.5rem; font-family: var(--font-display); font-size: 0.96875rem; font-weight: 800; line-height: 1.35; letter-spacing: -0.01em; color: var(--accent-text); text-wrap: balance; }
/* șina de derulare: proprie, pentru că Safari pe iPhone ignoră ::-webkit-scrollbar și arată bara nativă numai în timpul derulării. Dimensiunile sunt în px: pe telefoanele mici, rădăcina paginii e sub 16 px */
.oo-md-rail { position: absolute; z-index: 2; top: 0.25rem; bottom: 0.5rem; right: 0; width: 44px; pointer-events: none; -webkit-user-select: none; user-select: none; }
.oo-md-bw.fara-sina .oo-md-rail { display: none; }
.oo-md-lane { position: absolute; top: 0; right: 0; left: 0; bottom: 40px; }
.oo-md-track { position: absolute; top: 0; bottom: 0; right: 16px; width: 1px; background: rgba(255, 255, 255, 0.18); }
.oo-md-thumb { position: absolute; top: 0; left: 0; right: 0; pointer-events: auto; touch-action: none; cursor: grab; will-change: transform; }
.oo-md-thumb::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }
.oo-md-thumb i { position: absolute; top: 0; bottom: 0; right: 14.5px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--grad-a), var(--grad-b)); transition: transform var(--dur-fast) var(--ease-out); }
.oo-md-thumb:active { cursor: grabbing; }
.oo-md-thumb:active i { transform: scaleX(1.5); }
.oo-md-more { position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 0 9.5px 0 0; border: 0; background: none; color: var(--accent-text); cursor: pointer; pointer-events: auto; touch-action: manipulation; transition: opacity var(--dur-base); }
.oo-md-more svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oo-md.end .oo-md-more { opacity: 0; pointer-events: none; }
/* pe telefon, cursorul prinde numai degetul pus pe el: în rest, marginea din dreapta derulează textul ca oriunde */
@media (pointer: coarse) { .oo-md-thumb { left: auto; width: 28px; } }
@media (hover: hover) and (pointer: fine) { .oo-md-thumb:hover i { transform: scaleX(1.5); } }
/* un singur semnal, la deschidere: cursorul coboară puțin și revine */
.sheet.oo-md.open .oo-md-thumb i { animation: ooMdSemn 0.44s var(--ease-out) 0.3s; }
@keyframes ooMdSemn { 45% { transform: translateY(0.5rem); } }
@media (prefers-reduced-motion: reduce) { .sheet.oo-md.open .oo-md-thumb i { animation: none; } }
.oo-md-f { position: relative; flex: none; padding: 0.75rem 1.125rem calc(0.875rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: var(--panel); }
.oo-md-f::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: 2.25rem; background: linear-gradient(180deg, transparent, var(--panel)); pointer-events: none; transition: opacity var(--dur-base); }
.oo-md.end .oo-md-f::before { opacity: 0; }
.oo-md-read { margin: 0 0 0.625rem; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); text-align: center; }
.sheet.oo-md .nav { margin: 0; }
/* pe telefoanele scunde și pe iPhone-ul cu barele Safari: butoanele pe un rând, ca textul să aibă loc */
@media (max-height: 700px) and (orientation: portrait) {
  .oo-md .grab { display: none; }
  .oo-md-h { padding-top: 0.875rem; }
  .oo-md-f { padding: 0.625rem 1.125rem calc(0.625rem + env(safe-area-inset-bottom)); }
  .oo-md-read { margin-bottom: 0.5rem; }
  .sheet.oo-md .nav { display: flex; flex-direction: row-reverse; gap: 0.25rem; }
  .oo-md .nav .btn { flex: 1 1 auto; width: auto; min-height: 3rem; }
  .oo-md .nav .btn-ghost { flex: none; width: auto; min-height: 3rem; padding: 0 0.875rem; }
}
.oo-x { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.oo-x svg { width: 1.125rem; height: 1.125rem; stroke: var(--fg); stroke-width: 2.2; fill: none; stroke-linecap: round; }

/* ── rezumatul ── */
.oo-sum .panel { position: relative; padding-top: 1rem; }
.oo-sum-x { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 2.25rem; height: 2.25rem; }
.oo-sum .panel h2 { padding-right: 2.5rem; }
.oo-sh { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 9rem; padding: 1rem 1.125rem; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(180deg, rgba(13, 17, 26, 0.05) 0%, rgba(13, 17, 26, 0.6) 55%, #0f141f 100%), var(--img) center 28% / cover no-repeat, #0f141f; border: 1px solid var(--card-bd); border-bottom: 0; }
.oo-sh .k { font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.oo-sh .v { margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.oo-sh .s { margin-top: 0.25rem; font-size: 0.9375rem; color: #dfe0ea; }
.oo-team { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.125rem; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--bg-elev); border: 1px solid var(--card-bd); border-top: 1px solid var(--hairline); }
.oo-team img { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(124, 92, 252, 0.6); }
.oo-team span { display: flex; flex-direction: column; font-size: 0.84375rem; line-height: 1.35; color: var(--ok-text); }
.oo-team b { color: var(--fg); font-size: 0.9375rem; font-weight: 700; }
.oo-price { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-top: 0.625rem; padding: 1rem 1.125rem; border-radius: var(--r-lg); background: var(--card-fill); border: 1px solid var(--card-bd); color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.oo-price b { font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin-right: 0.125rem; }
.oo-price .ok { color: var(--ok-text); font-weight: 700; }
.oo-sub-h { margin: 1.25rem 0 0.5rem; font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }
.oo-rows { border-radius: var(--r-lg); background: var(--card-fill); border: 1px solid var(--card-bd); overflow: hidden; }
.oo-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.8125rem 1rem; }
.oo-row + .oo-row { border-top: 1px solid var(--hairline); }
.oo-row .rk { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.375rem; }
.oo-row .rk svg { width: 1.1875rem; height: 1.1875rem; stroke: #cbbcff; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oo-row .rv { flex: 1; min-width: 0; }
.oo-row .rt { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.oo-row .rd { margin-top: 0.125rem; font-size: 0.90625rem; line-height: 1.45; color: var(--fg); overflow-wrap: anywhere; text-wrap: pretty; }
.oo-row .re { flex: none; align-self: center; min-height: 2.25rem; padding: 0.5rem 0.25rem 0.5rem 0.5rem; border: 0; background: transparent; color: var(--accent-text); font-family: inherit; font-size: 0.84375rem; font-weight: 700; cursor: pointer; }
.oo-sum .nav { position: sticky; bottom: calc(-1.25rem - env(safe-area-inset-bottom)); margin: 1rem -1.125rem 0; padding: 1rem 1.125rem calc(1.25rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(13, 17, 23, 0) 0%, var(--panel) 28%); }
.oo-secure { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--dim); }
.oo-secure svg { width: 0.9375rem; height: 0.9375rem; stroke: currentColor; stroke-width: 2; fill: none; }

/* în modul „Modifică": săgeata duce înapoi la rezumat, progresul se estompează */
html.oo-editing .prog .segs { opacity: 0.4; }

/* ── sosirea din landing: cartela aleasă zboară în pastila de sus (View Transition între pagini, pe compozitor),
   pagina apare peste ea, conținutul urcă scurt. Totul se termină în ~0,5 s după încărcare. ── */
::view-transition-group(obx-plan) { animation-duration: 0.46s; animation-timing-function: cubic-bezier(0.32, 0, 0.12, 1); }
::view-transition-old(obx-plan), ::view-transition-new(obx-plan) { height: 100%; object-fit: cover; overflow: hidden; animation-duration: 0.46s; animation-timing-function: cubic-bezier(0.32, 0, 0.12, 1); }
::view-transition-old(obx-plan) { animation-name: ooPlanOut; }
::view-transition-new(obx-plan) { animation-name: ooPlanIn; }
@keyframes ooPlanOut { 0% { border-radius: 18px; opacity: 1; } 55% { opacity: 1; } 100% { border-radius: 50%; opacity: 0; } }
@keyframes ooPlanIn { 0% { border-radius: 18px; opacity: 0; } 45% { opacity: 0; } 100% { border-radius: 50%; opacity: 1; } }
::view-transition-old(root) { animation: none; opacity: 0; }   /* vechea pagină era deja stinsă: nu o redesenăm */
::view-transition-new(root) { animation-duration: 0.26s; }
html.oo-arrive .step.on > :not(.nav) { animation: ooRise 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.oo-arrive .step.on > :nth-child(2) { animation-delay: 0.04s; }
html.oo-arrive .step.on > :nth-child(3) { animation-delay: 0.08s; }
html.oo-arrive .step.on > :nth-child(4) { animation-delay: 0.11s; }
html.oo-arrive .step.on > :nth-child(n+5) { animation-delay: 0.14s; }
html.oo-arrive .step.on > .nav, html.oo-arrive .prog { animation: ooFade 0.3s ease-out 0.06s both; }
@keyframes ooRise { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: none; } }
@keyframes ooFade { from { opacity: 0; } to { opacity: 1; } }

@media (hover: hover) and (pointer: fine) {
  .oo-chip:hover { border-color: rgba(var(--accent-rgb), 0.45); color: #fff; }
  .oo-back:hover, .oo-x:hover { background: rgba(255, 255, 255, 0.08); }
  .oo-row .re:hover { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  html.oo-arrive .step.on > *, html.oo-arrive .prog { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.001ms !important; }
}
@media (min-width: 720px) {
  .step h1 { font-size: 2rem; }
  /* informarea: centrată, cu rând de citit; butoanele unul lângă altul; bara de apucat n-are rost pe o fereastră centrată */
  .sheet.oo-md .panel { max-width: 38rem; max-height: min(86vh, 46rem); max-height: min(86svh, 46rem); }
  .oo-md .grab { display: none; }
  .oo-md-h { padding: 1.5rem 1.75rem 0.75rem; }
  .sheet.oo-md h2 { font-size: 1.5rem; }
  .oo-md-bw { --pl: 1.75rem; --gut: 3.25rem; }
  .oo-md-b { padding-bottom: 2rem; font-size: 1rem; line-height: 1.6875; }
  .oo-md-b p { margin-bottom: 1rem; }
  .oo-md-b > p:first-child { margin: 0 -0.75rem 1.5rem; padding: 0.875rem 0.75rem 0.9375rem; }
  .oo-md-b h4 { margin-top: 2.5rem; font-size: 1.0625rem; }
  .oo-md-f { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1.25rem 0.875rem 1.75rem; }
  .oo-md-read { flex: 1; min-width: 0; margin: 0; text-align: left; }
  .sheet.oo-md .nav { flex: none; display: flex; flex-direction: row-reverse; gap: 0.5rem; }
  .oo-md .nav .btn { width: auto; min-width: 11rem; }
  .oo-md .nav .btn-ghost { width: auto; padding: 0 1.125rem; }
}
/* informarea, pe telefon pus pe orizontală: antet și butoane strânse, ca textul să rămână de citit, iar „Înapoi” să nu iasă din foaie */
@media (max-height: 520px) and (orientation: landscape) {
  .sheet.oo-md .panel { max-width: 40rem; max-height: 96vh; max-height: 96svh; }
  .oo-md .grab { display: none; }
  .oo-md-h { padding: 0.625rem 1.25rem 0.375rem; }
  .sheet.oo-md h2 { font-size: 1.0625rem; }
  .oo-md-bw { --pl: 1.25rem; --gut: 2.5rem; }
  .oo-md-b { padding: 0.125rem var(--gut) 0.875rem var(--pl); font-size: 0.875rem; line-height: 1.5; }
  .oo-md-b p { margin-bottom: 0.625rem; }
  .oo-md-b > p:first-child { margin: 0 -0.625rem 0.75rem; padding: 0.5rem 0.625rem 0.5625rem; }
  .oo-md-b h4 { margin-top: 1.375rem; font-size: 0.9375rem; }
  .oo-md-rail { top: 0.125rem; }
  .oo-md-f { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom)) 1.25rem; }
  .oo-md-f::before { height: 1.25rem; }
  .oo-md-read { flex: 1; min-width: 0; margin: 0; font-size: 0.75rem; text-align: left; }
  .sheet.oo-md .nav { flex: none; display: flex; flex-direction: row-reverse; gap: 0.375rem; }
  .oo-md .nav .btn { width: auto; min-width: 9.5rem; min-height: 2.75rem; }
  .oo-md .nav .btn-ghost { width: auto; min-height: 2.75rem; padding: 0 0.75rem; }
}
/* coperta rezumatului, pe telefoanele foarte înguste: numele lung al programului rămâne pe un rând, ca eticheta să nu urce pe partea luminoasă a imaginii */
@media (max-width: 359.98px) { .oo-sh .v { font-size: 1.3125rem; } }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DESKTOP (≥1100px) — o singură axă, centrată: sigla și planul, progresul, întrebarea, butonul imediat sub ea.
   Nimic în lateral, nicio indicație în plus (Enter merge, tăcut). Text la mărime de citit. Telefonul rămâne cum e.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.oo-navprice { display: none; }
/* landing-ul micșorează tot site-ul la 75% pe laptop (1100–1535px) și 85% până la 1900px: pentru un formular, 9–11px nu se
   citesc — aici rămânem la 16px (peste 1900px, scara site-ului e deja 100% sau mai mare) */
@media (min-width: 1100px) and (max-width: 1899.98px) { html { font-size: 16px; } }
@media (min-width: 1100px) {
  :root { --col: 36rem; --hdr: 4.25rem; }
  /* antetul și progresul pe aceeași coloană cu întrebarea */
  .obar { padding-inline: max(1.5rem, calc((100vw - var(--col)) / 2)); }
  .obar .brand-logo { height: 2rem; }
  .prog { padding-inline: max(1.5rem, calc((100vw - var(--col)) / 2)); }
  .prog .inner { max-width: none; }
  .step { max-width: var(--col); margin: 0 auto; padding: 2.75rem 0 4rem; }
  .step h1 { font-size: 2.375rem; line-height: 1.1; letter-spacing: -0.02em; }
  .step .sub { font-size: 1.0625rem; margin-top: 0.5rem; }
  .glabel { margin: 2rem 0 0.75rem; font-size: 0.75rem; }
  .oo-hint { font-size: 0.8125rem; }
  .step h1 + .glabel, .step .sub + .glabel { margin-top: 1.75rem; }
  .step h1 + .oo-sex, .step h1 + .oo-first, .step h1 + .fld, .step .sub + .fld, .step .sub + .oo-kit { margin-top: 1.75rem; }

  /* butonul, imediat sub conținut (nu lipit de marginea ecranului) */
  .step .nav { position: static; margin: 2.25rem 0 0; padding: 0; background: none; }
  .step .nav > * { max-width: none; margin: 0; }
  .step .nav .btn { width: 100%; }

  /* grilele, pe lățimea coloanei: mai puțină derulare, totul dintr-o privire */
  .oo-list { gap: 0.625rem; }
  .oo-list .opt .box, .oo-meals .oo-rec .box { min-height: 4rem; padding: 0.8125rem 3rem 0.8125rem 0.875rem; }
  .oo-list .opt .t { font-size: 1.03125rem; }
  .oo-list .opt .d { font-size: 0.875rem; }
  .oo-first { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oo-first .opt .box { grid-template-columns: 1fr; align-content: start; row-gap: 0.25rem; min-height: 8.75rem; height: 100%; padding: 1rem 1rem 1.125rem; }
  .oo-first .opt .ic { grid-row: auto; margin-bottom: 0.625rem; }
  .oo-first .opt .ck { top: 1.125rem; right: 1rem; transform: none; }
  .oo-first .opt input:checked ~ .box .ck { animation: ooCkB 0.42s var(--ease-press); }
  .step[data-step="5"] .oo-list { display: grid; grid-template-columns: 1fr 1fr; }
  .step[data-step="5"] .oo-list .opt .box { height: 100%; }
  .oo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
  .oo-two { gap: 0.75rem; }
  .oo-two .pill span, .oo-grid .pill span { min-height: 3.5rem; font-size: 1rem; }
  .oo-kit { gap: 0.625rem; }
  .oo-kit:not(.oo-kit-base) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oo-kit-base .opt .box { min-height: 7rem; }
  .oo-n .opt .box { min-height: 5rem; }
  .oo-chip { min-height: 2.625rem; font-size: 0.9375rem; }

  /* fereastra rezumatului, mai lată: rândurile pe două coloane, încape fără derulare */
  #sumSheet .panel { height: auto; max-height: min(94vh, 64rem); }   /* cât conținutul (96vh fix din patch2 lăsa aici un gol mare) */
  .oo-sum .panel { max-width: 50rem; padding: 1.5rem 1.75rem 0; }
  .oo-sum .panel h2 { font-size: 1.75rem; margin-bottom: 1rem; }
  .oo-sum-x { top: 1.125rem; right: 1.25rem; }
  .oo-sh { min-height: 6.75rem; }   /* (Patch design mic, 5.11) textul copertei e mai scurt, iar rândul „Tu” poate lua o linie în plus: rezumatul încape în continuare fără derulare */
  .oo-rows { display: grid; grid-template-columns: 1fr 1fr; }
  .oo-row + .oo-row { border-top: 0; }
  .oo-row { border-top: 1px solid var(--hairline); }
  .oo-row:nth-child(-n+2) { border-top: 0; }
  .oo-row:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .oo-row:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  /* bara de plată: prețul în stânga, butonul în dreapta (prețul din listă nu se mai repetă) */
  #sumBody .oo-price { display: none; }
  .oo-sum .nav { margin-inline: -1.75rem; padding: 1rem 1.75rem 1.375rem; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1.25rem; row-gap: 0.125rem; }
  .oo-navprice { display: block; grid-column: 1; grid-row: 2; margin: 0; font-size: 0.9375rem; color: var(--muted); }
  .oo-navprice b { font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
  .oo-sum .nav .btn { grid-column: 2; grid-row: 2 / span 2; width: auto; min-width: 16rem; }
  .oo-sum .nav .oo-secure { grid-column: 1; grid-row: 3; justify-content: flex-start; margin: 0; }
  .oo-sum .nav .oo-errpay { grid-column: 1 / -1; grid-row: 1; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .step { padding-top: 2.25rem; }
  .oo-sh { min-height: 6.5rem; }
}

/* (Rafinări 1-11-26) „Ai deja un program activ" de la primul pas (A03): bannerul din magazin (magazin-v8.css, .m8-abonat),
   pe coloana întrebărilor, între progres și pas */
.oo-abonat { display: flex; align-items: center; gap: 0.625rem; width: calc(100% - 2rem); max-width: calc(var(--col) - 2rem); margin: 0.25rem auto 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; text-decoration: none; }
.oo-abonat b { color: #fff; }
.oo-abonat i { margin-left: auto; font-style: normal; font-weight: 700; white-space: nowrap; color: #5ee0a0; }
.oo-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); }
.oo-abonat:focus-visible { outline: 2px solid #5ee0a0; outline-offset: 2px; }
@media (min-width: 1100px) { .oo-abonat { width: var(--col); max-width: calc(100% - 3rem); margin-top: 0.75rem; } }

/* (Rafinări 1-11-26) „Alege o variantă." lângă Femeie/Bărbat, cu butoanele încadrate în roșu până la alegere (A08) */
.oo-sex-err { text-align: left; margin-top: 0.5rem; }
.oo-sex.bad .pill span { border-color: var(--danger); }
/* (Rafinări 1-11-26) pastila de sus: pe telefon (sub 480px: „Menținere Echilibrată" nu încape nici la 430px) numai „Gata pe 3 noiembrie", fără tăietura „…bit Rapid" (A12; textul
   îl împarte onboarding-v8.js) */
.eta .eta-scurt { display: none; }
@media (max-width: 479.98px) {
  .eta .eta-lung { display: none; }
  .eta .eta-scurt { display: inline; }
}
/* (Rafinări 1-11-26) jetonul ales în lista opusă („Nu mănânc deloc" / „Ce-ți place") se stinge (A09) */
.oo-chip:disabled { opacity: 0.35; cursor: default; }