/* Pofticoș — brandul nou (Grafit & Rodie), peste style.css. Tokenii vin din branding/tokeni.css.
   1. tokeni + legătura cu variabilele vechi  2. piese de bază  3. mișcare  4. începutul (ob-)  5. profil, casă, foi */

@font-face{font-family:'Bricolage Grotesque';font-weight:400 800;font-stretch:100%;font-display:swap;src:url(font/bricolage-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-weight:400 800;font-stretch:100%;font-display:swap;src:url(font/bricolage.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-weight:400 700;font-stretch:100%;font-display:swap;src:url(font/instrument-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-weight:400 700;font-stretch:100%;font-display:swap;src:url(font/instrument.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 1. tokeni ---------- */
:root{
  --pf-font-titlu:'Bricolage Grotesque',system-ui,sans-serif;--pf-font-text:'Instrument Sans',system-ui,sans-serif;
  --pf-fundal:#F3F3F1;--pf-card:#FFFFFF;--pf-card-ridicat:#FFFFFF;--pf-adancit:#E7E8EA;--pf-linie:#E7E8EA;--pf-linie-tare:#C6C8CD;
  --pf-linie-control:#80838A;--pf-text:#17181B;--pf-text-2:#5E6168;--pf-text-3:#6C6F76;--pf-dezactivat:#E7E8EA;--pf-text-dezactivat:#A0A3AA;
  --pf-rodie:#B3203A;--pf-rodie-peste:#9A152D;--pf-rodie-apasat:#810F24;--pf-rodie-text:#B3203A;--pf-rodie-usor:#FFF1F0;--pf-pe-rodie:#FFFFFF;
  --pf-logo-grafit:#17181B;--pf-logo-rodie:#B3203A;--pf-seg-ales:#FFFFFF;
  --pf-economie:#177245;--pf-economie-usor:#E6F4EB;--pf-peste-buget:#AE4900;--pf-peste-buget-usor:#FFEBE1;
  --pf-avertizare:#8B5F00;--pf-avertizare-usor:#FBF1DD;--pf-info:#1764A0;--pf-info-usor:#E5F2FE;
  --pf-focus:#17181B;--pf-voal:rgba(18,19,22,.48);
  --pf-umbra-1:0 1px 2px rgba(23,24,27,.05);--pf-umbra-2:0 1px 2px rgba(23,24,27,.05),0 12px 32px -16px rgba(23,24,27,.18);
  --pf-raza-s:8px;--pf-raza-m:12px;--pf-raza-l:20px;--pf-raza-pilula:999px;--pf-tinta:48px;
  --pf-durata:120ms;--pf-durata-2:240ms;--pf-curba:cubic-bezier(.2,.7,.2,1);--pf-arc:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
:root[data-tema="intunecat"]{
  --pf-fundal:#121316;--pf-card:#1C1D21;--pf-card-ridicat:#24262B;--pf-adancit:#24262B;--pf-linie:#2E3035;--pf-linie-tare:#3E4045;
  --pf-linie-control:#80838A;--pf-text:#F2F2F0;--pf-text-2:#A0A3AA;--pf-text-3:#8A8D95;--pf-dezactivat:#24262B;--pf-text-dezactivat:#5E6168;
  --pf-rodie:#D33850;--pf-rodie-peste:#B3203A;--pf-rodie-apasat:#9A152D;--pf-rodie-text:#EE6472;--pf-rodie-usor:#33181D;--pf-pe-rodie:#FFFFFF;
  --pf-logo-grafit:#F2F2F0;--pf-logo-rodie:#E0485F;--pf-seg-ales:#3A3D44;
  --pf-economie:#4CC488;--pf-economie-usor:#132D1E;--pf-peste-buget:#F69557;--pf-peste-buget-usor:#372012;
  --pf-avertizare:#F2C35E;--pf-avertizare-usor:#2F250E;--pf-info:#7CBBF0;--pf-info-usor:#1A2834;
  --pf-focus:#F2F2F0;--pf-voal:rgba(0,0,0,.64);--pf-umbra-1:0 0 0 1px #2E3035;--pf-umbra-2:0 0 0 1px #2E3035,0 16px 40px -16px rgba(0,0,0,.6);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-tema="luminos"]){
  --pf-fundal:#121316;--pf-card:#1C1D21;--pf-card-ridicat:#24262B;--pf-adancit:#24262B;--pf-linie:#2E3035;--pf-linie-tare:#3E4045;
  --pf-linie-control:#80838A;--pf-text:#F2F2F0;--pf-text-2:#A0A3AA;--pf-text-3:#8A8D95;--pf-dezactivat:#24262B;--pf-text-dezactivat:#5E6168;
  --pf-rodie:#D33850;--pf-rodie-peste:#B3203A;--pf-rodie-apasat:#9A152D;--pf-rodie-text:#EE6472;--pf-rodie-usor:#33181D;--pf-pe-rodie:#FFFFFF;
  --pf-logo-grafit:#F2F2F0;--pf-logo-rodie:#E0485F;--pf-seg-ales:#3A3D44;
  --pf-economie:#4CC488;--pf-economie-usor:#132D1E;--pf-peste-buget:#F69557;--pf-peste-buget-usor:#372012;
  --pf-avertizare:#F2C35E;--pf-avertizare-usor:#2F250E;--pf-info:#7CBBF0;--pf-info-usor:#1A2834;
  --pf-focus:#F2F2F0;--pf-voal:rgba(0,0,0,.64);--pf-umbra-1:0 0 0 1px #2E3035;--pf-umbra-2:0 0 0 1px #2E3035,0 16px 40px -16px rgba(0,0,0,.6);
  color-scheme:dark;
}}
/* variabilele vechi (style.css) primesc valorile noi: toate ecranele existente trec pe brand fără să le rescriem */
:root{
  --bg:var(--pf-fundal);--surface:var(--pf-card);--border:var(--pf-linie);--text:var(--pf-text);--text-2:var(--pf-text-2);
  --accent:var(--pf-rodie);--on-accent:var(--pf-pe-rodie);--discount:var(--pf-rodie);--on-discount:var(--pf-pe-rodie);--discount-ink:var(--pf-rodie-text);
  --in-budget:var(--pf-economie);--over-budget:var(--pf-peste-buget);--warning:var(--pf-avertizare);--placeholder:var(--pf-adancit);
  --font-titlu:var(--pf-font-titlu);--font-text:var(--pf-font-text);--raza-card:16px;--raza-buton:12px;--raza-eticheta:8px;--marime-text:16px;
}

/* ---------- 2. piese de bază ---------- */
html{scroll-behavior:auto}
body{font-feature-settings:'ss01';-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
h1,h2,.titlu{font-family:var(--pf-font-titlu);font-weight:750;letter-spacing:-.02em}
h1{font-size:28px;line-height:1.14}
h1.mare{font-size:32px;letter-spacing:-.03em}
h1.titlu-mic{font-size:22px;letter-spacing:-.015em}
h2{font-size:20px}
h2.mic-titlu,.supratitlu{font-family:var(--pf-font-text);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pf-text-2);margin-top:10px}
strong,b{font-weight:600}
.cifre,.pret{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--pf-focus);outline-offset:2px}
::selection{background:var(--pf-rodie);color:#fff}
a.legatura,.legatura{color:var(--pf-rodie-text);font-weight:600;text-decoration:none}
.card{border:0;box-shadow:var(--pf-umbra-1);border-radius:16px}
.rand{border-bottom-color:var(--pf-linie)}
.buton{font-weight:600;border-radius:12px;font-size:16px}
.buton.secundar{background:transparent;border:1.5px solid var(--pf-linie-control);color:var(--pf-text)}
.buton.text{color:var(--pf-rodie-text);text-decoration:none;font-weight:600}
.buton:disabled{background:var(--pf-dezactivat);color:var(--pf-text-dezactivat);border-color:var(--pf-dezactivat)}
.buton.punctat,.eticheta.punctat{color:var(--pf-rodie-text);border-color:var(--pf-linie-tare)}
.eticheta{border-radius:999px;border-color:var(--pf-linie-control);background:transparent;font-weight:500;padding:6px 14px}
.eticheta.ales{border-color:var(--pf-rodie);background:var(--pf-rodie-usor);font-weight:600}
.eticheta.plin{background:var(--pf-text);border-color:var(--pf-text);color:var(--pf-fundal);font-weight:600}
.segment{background:var(--pf-adancit);border:0;border-radius:12px;padding:4px}
.segment button{border-radius:9px;color:var(--pf-text-2);font-weight:500;transition:background var(--pf-durata-2) var(--pf-curba),color var(--pf-durata),box-shadow var(--pf-durata-2)}
.segment button.ales{background:var(--pf-seg-ales);color:var(--pf-text);font-weight:600;box-shadow:var(--pf-umbra-1)}
.comutator{background:var(--pf-linie-control);transition:background var(--pf-durata-2) var(--pf-curba)}
.comutator.da{background:var(--pf-text)}
.comutator span{background:#fff;transition:transform var(--pf-durata-2) var(--pf-arc)}
.comutator.da span{background:var(--pf-card)}
.camp,.camp-simplu,.camp-unitate{border-color:var(--pf-linie-control);border-radius:12px}
.camp:focus-within,.camp-simplu:focus,.camp-unitate:focus-within{border-color:var(--pf-text)}
.avatar{border:0;background:var(--pf-adancit);font-weight:750}
.insigna{border-radius:999px;font-weight:600}
.insigna.verde{background:var(--pf-economie-usor);color:var(--pf-economie)}
.insigna.rosu{background:var(--pf-peste-buget-usor);color:var(--pf-peste-buget)}
.pret-redus,.pret-galben{border-radius:6px}
.bara-progres{background:var(--pf-adancit)}
.schelet{background:var(--pf-adancit);animation:pf-pulse 1.4s ease-in-out infinite}
.gol > i{color:var(--pf-text-2)}
.sigla-p{display:inline-flex;align-items:center;gap:8px;font-family:var(--pf-font-titlu);font-weight:750;font-size:22px;letter-spacing:-.03em}
.sigla-p svg{height:26px;width:auto}
.p-sus{fill:var(--pf-logo-grafit)}.p-jos{fill:var(--pf-logo-rodie)}

/* bara de jos / laterală */
.bara{background:color-mix(in srgb,var(--pf-fundal) 88%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--pf-linie);grid-template-columns:repeat(5,minmax(0,1fr))}
.bara a{font-size:11px;font-weight:500;gap:3px;color:var(--pf-text-2);transition:color var(--pf-durata)}
.bara a .ic{padding:3px 14px;background:none!important;transition:transform var(--pf-durata-2) var(--pf-arc)}
.bara a i{font-size:23px}
.bara a.activ{color:var(--pf-rodie-text);font-weight:600}
.bara a.activ .ic{transform:translateY(-1px) scale(1.08)}
.bara a:active .ic{transform:scale(.88)}
.bara .insigna{background:var(--pf-rodie);color:#fff;border-radius:10px;right:4px}
@media (min-width:900px){
  .bara{backdrop-filter:none;background:var(--pf-fundal);border-right:1px solid var(--pf-linie)}
  .bara a{font-size:16px}
  .bara a.activ{background:var(--pf-rodie-usor)}
  .bara .sigla{display:flex;padding:0 12px 22px}
}

/* coperta rețetei: fără emoji; poza când există, altfel un bloc liniștit în nuanța rețetei */
.coperta{background:var(--pf-adancit)!important;border-radius:12px}
.coperta > span:first-child{display:none}
.coperta::after{background:none}
.coperta::before{content:'';position:absolute;inset:0;background:var(--nuanta,transparent);opacity:.22;pointer-events:none}
.coperta .inima{z-index:2}
.coperta .ic-coperta{position:relative;font-size:26px;color:var(--pf-text-2);opacity:.7}
.coperta.mare .ic-coperta{font-size:40px}
.coperta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.toast{background:var(--pf-text);color:var(--pf-fundal);border-radius:14px;box-shadow:var(--pf-umbra-2);font-weight:500}
.toast a,.toast button{color:#EE6472;font-weight:600}
:root[data-tema="intunecat"] .toast a,:root[data-tema="intunecat"] .toast button{color:#B3203A}
.fundal-foaie{background:var(--pf-voal);animation:pf-voal var(--pf-durata-2) both}
.foaie{background:var(--pf-card-ridicat);border-radius:28px 28px 0 0;animation:pf-foaie 320ms var(--pf-curba) both;touch-action:pan-y}
.maner{background:var(--pf-linie-tare)}

/* ---------- 3. mișcare ---------- */
@keyframes pf-pulse{50%{opacity:.5}}
@keyframes pf-voal{from{opacity:0}}
@keyframes pf-foaie{from{transform:translateY(100%)}}
@keyframes pf-urca{from{opacity:0;transform:translateY(12px)}}
@keyframes pf-apare{from{opacity:0}}
@keyframes pf-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes pf-bifa{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes pf-roteste{to{transform:rotate(360deg)}}
@keyframes pf-scutura{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes pf-clipeste{0%{background:var(--pf-rodie-usor)}100%{background:transparent}}
@keyframes pf-puls-rodie{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pf-rodie) 45%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@keyframes pf-unda{from{transform:scale(0);opacity:.28}to{transform:scale(2.6);opacity:0}}
@keyframes pf-din-dreapta{from{opacity:0;transform:translateX(28px)}}
@keyframes pf-coboara{from{transform:translateY(-120%)}}

/* apăsarea: tot ce se apasă se strânge puțin și revine cu arc */
button,a.card,.card.optiune,.eticheta,a.rand,button.rand,.bifabil,.reteta-card,.apasabil{transition:transform var(--pf-durata) var(--pf-curba),background-color var(--pf-durata),border-color var(--pf-durata),box-shadow var(--pf-durata-2),color var(--pf-durata),opacity var(--pf-durata)}
.buton:active:not(:disabled){transform:scale(.97);filter:none}
.buton:not(.secundar):not(.text):not(.punctat):not(:disabled):active{background:var(--pf-rodie-apasat)}
@media (hover:hover){.buton:not(.secundar):not(.text):not(.punctat):not(:disabled):hover{background:var(--pf-rodie-peste)}
  .buton.secundar:hover:not(:disabled){background:var(--pf-adancit)}
  a.card:hover,.reteta-card:hover{box-shadow:var(--pf-umbra-2);transform:translateY(-2px)}
  a.rand:hover,button.rand:hover{background:color-mix(in srgb,var(--pf-adancit) 50%,transparent)}}
a.card:active,.card.optiune:active,.reteta-card:active,.apasabil:active{transform:scale(.98)}
.eticheta:active,.segment button:active,.inapoi:active,.buton.icon:active{transform:scale(.94)}
a.rand:active,button.rand:active{background:var(--pf-adancit)}
/* unda de la deget (pusă de miscare.js) */
.cu-unda{position:relative;overflow:hidden}
.unda{position:absolute;border-radius:50%;background:currentColor;pointer-events:none;animation:pf-unda 520ms var(--pf-curba) forwards}
/* intrarea ecranelor: copiii lui <main> urcă pe rând */
.continut.intra > *:not(.ob):not(.fix){animation:pf-urca 360ms var(--pf-curba) backwards;animation-delay:calc(var(--i,0)*45ms)}
.continut.intra > *:nth-child(2){--i:1}.continut.intra > *:nth-child(3){--i:2}.continut.intra > *:nth-child(4){--i:3}.continut.intra > *:nth-child(5){--i:4}.continut.intra > *:nth-child(n+6){--i:5}
.cascada > *{animation:pf-urca 320ms var(--pf-curba) both;animation-delay:calc(var(--i,0)*35ms + var(--intarziere,0ms))}
.toast{animation:pf-toast 300ms var(--pf-arc) both}
@keyframes pf-toast{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.96)}}
.insigna-nav,.bara .insigna{animation:pf-pop 320ms var(--pf-arc) both}
/* trecerea între ecrane (View Transitions): înainte = intră din dreapta, înapoi = din stânga, file = fade */
::view-transition-old(root),::view-transition-new(root){animation-duration:260ms;animation-timing-function:var(--pf-curba)}
@keyframes pf-iese-st{to{opacity:0;transform:translateX(-24px)}}
@keyframes pf-intra-dr{from{opacity:0;transform:translateX(24px)}}
@keyframes pf-iese-dr{to{opacity:0;transform:translateX(24px)}}
@keyframes pf-intra-st{from{opacity:0;transform:translateX(-24px)}}
:root[data-mers="inainte"]::view-transition-old(root){animation-name:pf-iese-st}
:root[data-mers="inainte"]::view-transition-new(root){animation-name:pf-intra-dr}
:root[data-mers="inapoi"]::view-transition-old(root){animation-name:pf-iese-dr}
:root[data-mers="inapoi"]::view-transition-new(root){animation-name:pf-intra-st}
.bara{view-transition-name:bara}
::view-transition-group(bara){animation:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .bifa-c svg,.semn-ok svg path,.alege.ales .semn svg path,.aparat.ales svg path,.grafic-kg .linie{stroke-dashoffset:0!important;animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}}

/* ---------- 4. începutul (onboarding) ---------- */
.ecran-inceput,.ecran-intreaba,.ecran-invitatie{padding:0!important;max-width:none!important;gap:0!important}
.ob{min-height:100dvh;display:flex;flex-direction:column;max-width:560px;width:100%;margin:0 auto;position:relative}
.ob-sus{position:sticky;top:0;z-index:3;background:var(--pf-fundal);padding:calc(10px + env(safe-area-inset-top)) 20px 0;display:flex;flex-direction:column;gap:12px}
.ob-bara{display:flex;align-items:center;gap:12px;height:44px}
.ob-inapoi{width:44px;height:44px;flex:none;margin-left:-10px;border:0;border-radius:12px;background:transparent;color:var(--pf-text);display:flex;align-items:center;justify-content:center}
.ob-inapoi:active{background:var(--pf-adancit);transform:scale(.92)}
.ob-pasi{flex:1;display:flex;gap:3px}
.ob-pasi span{flex:1 1 0;height:4px;border-radius:2px;background:var(--pf-linie-tare);position:relative;overflow:hidden}
.ob-pasi span::after{content:'';position:absolute;inset:0;background:var(--pf-text);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--pf-curba)}
.ob-pasi span.plin::after{transform:none}
.ob-nr{font-size:13px;font-weight:600;color:var(--pf-text-2);font-variant-numeric:tabular-nums;min-width:40px;text-align:right}
.ob-sari{border:0;background:none;color:var(--pf-rodie-text);font-weight:600;font-size:15px;height:44px;padding:0 2px}
.ob-titlu-editare{flex:1;font-family:var(--pf-font-titlu);font-weight:750;font-size:18px;letter-spacing:-.015em}
.ob-buline{display:flex;gap:6px;overflow-x:auto;height:28px;scrollbar-width:none;margin:0 -20px;padding:0 20px;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
.ob-buline::-webkit-scrollbar{display:none}
.bulina{flex:none;height:28px;display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;border:1px solid var(--pf-adancit);background:var(--pf-adancit);color:var(--pf-text-2);font-size:13px;font-weight:600;white-space:nowrap;transition:background 600ms,color 600ms,border-color 600ms}
.bulina.noua{background:var(--pf-rodie-usor);color:var(--pf-rodie-text);border-color:var(--pf-rodie-text);animation:pf-din-dreapta 280ms var(--pf-curba) both,pf-puls-rodie 700ms ease-out 1}
.bulina.goala{background:transparent;border:1px dashed var(--pf-linie-tare);color:var(--pf-text-3);font-weight:500}
.ob-corp{flex:1;padding:24px 24px 190px;display:flex;flex-direction:column;gap:20px}
.ob-cap{display:flex;flex-direction:column;gap:10px}
.ob-cap h1{font-size:28px}
.ob-cap p{color:var(--pf-text-2);line-height:1.5}
.ob-ochi{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pf-text-2)}
.ob-jos{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;justify-content:center;pointer-events:none}
.ob-jos-in{position:relative;pointer-events:auto;width:100%;max-width:560px;padding:14px 20px calc(18px + env(safe-area-inset-bottom));background:var(--pf-fundal);border-top:1px solid var(--pf-linie);display:flex;flex-direction:column;gap:12px}
.mai-jos{position:absolute;left:0;right:0;margin:0 auto;width:max-content;top:-48px;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:0;background:var(--pf-text);color:var(--pf-fundal);font-size:13px;font-weight:600;box-shadow:var(--pf-umbra-2);white-space:nowrap;animation:pf-salt 1.6s ease-in-out infinite}
@keyframes pf-salt{0%,100%{translate:0 0}50%{translate:0 3px}}
@media (prefers-reduced-motion:reduce){.mai-jos{animation:none}}
.ob-reactie{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:var(--pf-card);box-shadow:var(--pf-umbra-1);font-size:15px;line-height:1.4;font-weight:500}
.ob-reactie svg{height:20px;width:auto;flex:none;margin-top:1px}
.ob-continua{height:52px;border:0;border-radius:12px;background:var(--pf-rodie);color:#fff;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.ob-continua:disabled{background:var(--pf-dezactivat);color:var(--pf-text-dezactivat)}
.ob-continua:not(:disabled):active{transform:scale(.97);background:var(--pf-rodie-apasat)}
.ob-continua.contur{background:transparent;border:1.5px solid var(--pf-linie-control);color:var(--pf-text)}
.ob-legatura{border:0;background:none;color:var(--pf-rodie-text);font-weight:600;font-size:15px;min-height:44px;padding:0;align-self:flex-start;display:inline-flex;align-items:center;gap:6px}
.ob-nota{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--pf-info-usor);color:var(--pf-info);font-size:15px;line-height:1.4;font-weight:500}
.ob-nota svg{flex:none;margin-top:1px}
.ob-nota.avertizare{background:var(--pf-avertizare-usor);color:var(--pf-avertizare)}
.ob-mic{font-size:14px;color:var(--pf-text-2);line-height:1.5}
.ob-eticheta{font-size:14px;font-weight:600}
/* tranzițiile între pași și ale reacției */
.pas-inainte-enter-active,.pas-inapoi-enter-active{transition:opacity 260ms var(--pf-curba),transform 260ms var(--pf-curba)}
.pas-inainte-leave-active,.pas-inapoi-leave-active{transition:opacity 120ms,transform 120ms;position:absolute;left:0;right:0}
.pas-inainte-enter-from{opacity:0;transform:translateX(32px)}.pas-inainte-leave-to{opacity:0;transform:translateX(-20px)}
.pas-inapoi-enter-from{opacity:0;transform:translateX(-32px)}.pas-inapoi-leave-to{opacity:0;transform:translateX(20px)}
.reactie-enter-active{transition:opacity 240ms var(--pf-curba),transform 240ms var(--pf-arc)}
.reactie-leave-active{transition:opacity 100ms}
.reactie-enter-from{opacity:0;transform:translateY(10px) scale(.98)}.reactie-leave-to{opacity:0}
.desface-enter-active,.desface-leave-active{transition:grid-template-rows 240ms var(--pf-curba),opacity 240ms}
.desface{display:grid;grid-template-rows:1fr}
.desface > *{overflow:hidden;min-height:0}
.desface-enter-from,.desface-leave-to{grid-template-rows:0fr;opacity:0}
.apare-enter-active,.apare-leave-active{transition:opacity 200ms}
.apare-enter-from,.apare-leave-to{opacity:0}
/* carduri de ales */
.ob-grila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ob-grila.trei{grid-template-columns:repeat(3,minmax(0,1fr))}
.ob-coloana{display:flex;flex-direction:column;gap:10px}
.alege{position:relative;text-align:left;border:1.5px solid transparent;border-radius:16px;background:var(--pf-card);box-shadow:var(--pf-umbra-1);color:var(--pf-text);padding:14px;display:flex;flex-direction:column;gap:8px;min-height:64px;font-size:16px;font-weight:600;line-height:1.25}
.alege.rand-o{flex-direction:row;align-items:center;gap:12px}
.alege small{font-size:13px;font-weight:500;color:var(--pf-text-2);line-height:1.35;display:block}
.alege.ales{background:var(--pf-rodie-usor);border-color:var(--pf-rodie);box-shadow:none}
.alege:active{transform:scale(.98)}
.alege .semn{width:40px;height:40px;flex:none;border-radius:12px;background:var(--pf-adancit);display:flex;align-items:center;justify-content:center;color:var(--pf-text);transition:background var(--pf-durata-2),color var(--pf-durata-2)}
.alege.ales .semn{background:var(--pf-card);color:var(--pf-rodie-text)}
.alege.ales .semn svg path{stroke-dasharray:120;animation:pf-trasare 480ms var(--pf-curba) both}
@keyframes pf-trasare{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
.bifa-c{width:22px;height:22px;flex:none;border-radius:50%;border:1.5px solid var(--pf-linie-control);display:flex;align-items:center;justify-content:center;transition:background var(--pf-durata),border-color var(--pf-durata),transform var(--pf-durata-2) var(--pf-arc);margin-left:auto}
.bifa-c.patrat{border-radius:6px}
.bifa-c svg{opacity:0;width:14px;height:14px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.ales > .bifa-c,.ales .bifa-c,.bifa-c.da{background:var(--pf-rodie);border-color:var(--pf-rodie);transform:scale(1.06)}
.ales .bifa-c svg,.bifa-c.da svg{opacity:1;animation:pf-bifa 160ms 60ms ease-out forwards}
.bifa-c.grafit.da,.ales .bifa-c.grafit{background:var(--pf-text);border-color:var(--pf-text)}
.bifa-c.grafit svg{stroke:var(--pf-card)}
.alege .bifa-c.colt{position:absolute;top:12px;right:12px;margin:0}
.ob-lista{border-radius:16px;background:var(--pf-card);box-shadow:var(--pf-umbra-1);overflow:hidden}
.ob-rand{width:100%;min-height:60px;padding:12px 16px;border:0;border-bottom:1px solid var(--pf-linie);background:transparent;color:var(--pf-text);text-align:left;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500}
.ob-rand:last-child{border-bottom:0}
.ob-rand.ales{font-weight:600}
.ob-rand:active{background:var(--pf-adancit)}
.pastila{min-height:40px;padding:0 14px;border:1.5px solid var(--pf-linie-control);border-radius:999px;background:transparent;color:var(--pf-text);font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.pastila.mare{min-height:48px;padding:0 18px;font-size:16px;background:var(--pf-card);border-color:transparent;box-shadow:var(--pf-umbra-1)}
.pastila.ales{background:var(--pf-rodie-usor);border-color:var(--pf-rodie);box-shadow:none}
@keyframes pf-umfla{50%{transform:scale(1.05)}}
.pastila.ales svg{color:var(--pf-rodie-text)}
.pastila.inclus{background:var(--pf-adancit);border-color:var(--pf-adancit);color:var(--pf-text-2)}
.pastila:active{transform:scale(.95)}
.pastile{display:flex;flex-wrap:wrap;gap:8px}
.zi-p{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--pf-linie-control);background:transparent;color:var(--pf-text);font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.zi-p.ales{background:var(--pf-text);border-color:var(--pf-text);color:var(--pf-fundal);animation:pf-umfla 240ms var(--pf-arc)}
.zi-p.rodie.ales{background:var(--pf-rodie-usor);border-color:var(--pf-rodie);color:var(--pf-text)}
.zile-p{display:flex;justify-content:space-between;gap:4px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--pf-adancit)}
.seg button{min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--pf-text-2);font-size:14px;font-weight:500;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.seg button.ales{background:var(--pf-seg-ales);color:var(--pf-text);font-weight:600;box-shadow:var(--pf-umbra-1)}
.ob-camp{display:flex;flex-direction:column;gap:8px}
.ob-camp > span:first-child{font-size:14px;font-weight:600}
.ob-intrare{height:52px;border:1.5px solid var(--pf-linie-control);border-radius:12px;background:var(--pf-card);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--pf-text-2);transition:border-color var(--pf-durata),box-shadow var(--pf-durata)}
.ob-intrare:focus-within{border-color:var(--pf-text);box-shadow:0 0 0 1px var(--pf-text)}
.ob-intrare.gresit{border-color:var(--pf-peste-buget);box-shadow:0 0 0 1px var(--pf-peste-buget);animation:pf-scutura 280ms}
.ob-intrare input{border:0;outline:0;background:transparent;font-size:16px;color:var(--pf-text);flex:1;min-width:0;height:100%}
.ob-intrare button{border:0;background:none;color:var(--pf-text-2);padding:8px;display:flex}
.ob-eroare{color:var(--pf-peste-buget);font-size:14px;font-weight:500}
.ob-ok{color:var(--pf-economie);font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px}
.rot{animation:pf-roteste 800ms linear infinite}
.linie-sau{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--pf-text-2)}
.linie-sau::before,.linie-sau::after{content:'';flex:1;height:1px;background:var(--pf-linie-tare)}
/* 1 · locația */
.loc-buton{height:68px;padding:0 14px;border:1.5px solid var(--pf-linie-control);border-radius:16px;background:var(--pf-card);color:var(--pf-text);display:flex;align-items:center;gap:14px;text-align:left;font-size:17px;font-weight:600;width:100%}
.loc-buton .semn,.loc-card .semn{width:40px;height:40px;flex:none;border-radius:12px;background:var(--pf-adancit);display:flex;align-items:center;justify-content:center}
.loc-card{padding:18px 16px;border-radius:16px;background:var(--pf-card);box-shadow:var(--pf-umbra-2);display:flex;align-items:center;gap:14px;animation:pf-urca 320ms var(--pf-curba) both}
.loc-card strong{font-family:var(--pf-font-titlu);font-weight:750;font-size:22px;letter-spacing:-.015em;line-height:1.2;display:block}
.loc-sugestii{border-radius:14px;background:var(--pf-card-ridicat);box-shadow:var(--pf-umbra-2);padding:4px 0;overflow:hidden}
.loc-sugestii button{width:100%;min-height:56px;padding:8px 16px;border:0;background:transparent;color:var(--pf-text);text-align:left;display:flex;flex-direction:column;gap:2px;font-size:16px;font-weight:500}
.loc-sugestii button small{font-size:13px;font-weight:600;color:var(--pf-text-2)}
.loc-sugestii button:active{background:var(--pf-adancit)}
.schelet-rand{height:14px;border-radius:7px;background:var(--pf-adancit);animation:pf-pulse 1.4s ease-in-out infinite}
/* 2 · magazine */
.magazin{padding:12px}
.magazin .sus{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;padding-right:26px}
.logo-lant{width:36px;height:36px;flex:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;overflow:hidden;background:var(--pf-adancit)}
.logo-lant img{width:100%;height:100%;object-fit:contain}
.logo-lant.mic{width:24px;height:24px;border-radius:7px;font-size:10px}
/* 5 · rigla */
.file-cifre{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.fila-c{border:1.5px solid var(--pf-linie-tare);border-radius:12px;background:transparent;color:var(--pf-text);padding:8px 10px;text-align:left;display:flex;flex-direction:column;gap:2px;font-size:12px;font-weight:600;min-height:56px}
.fila-c span{color:var(--pf-text-2)}
.fila-c b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.fila-c b small{font-size:11px;font-weight:600;color:var(--pf-text-2)}
.fila-c.ales{border:2px solid var(--pf-text);background:var(--pf-card);padding:7.5px 9.5px}
.cifra-mare{display:flex;align-items:baseline;justify-content:center;gap:6px;font-family:var(--pf-font-titlu);font-weight:750;font-size:56px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;border:0;background:none;color:var(--pf-text);width:100%;padding:6px 0}
.cifra-mare.neatins{color:var(--pf-text-3)}
.cifra-mare small{font-size:18px;font-weight:600;color:var(--pf-text-2);letter-spacing:0;font-family:var(--pf-font-text)}
.cifra-mare input{font:inherit;color:inherit;border:0;outline:0;background:transparent;width:4.2ch;text-align:center;border-bottom:2px solid var(--pf-rodie);letter-spacing:inherit}
.rigla{position:relative;height:84px;margin:0 -24px;user-select:none}
.rigla-pista{height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;touch-action:pan-x;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.rigla-pista{scroll-snap-type:x mandatory}
.rigla-pista.trage{scroll-snap-type:none}
.rigla-prag{position:absolute;top:0;width:2px;margin-left:-1px;height:1px;scroll-snap-align:center;pointer-events:none}
.rigla-pista::-webkit-scrollbar{display:none}
.rigla-pista:active{cursor:grabbing}
.rigla-banda{position:relative;height:100%}
.rigla-linii{position:absolute;top:0;height:40px;background-repeat:repeat-x;background-position:0 0}
.rigla-nr{position:absolute;top:48px;transform:translateX(-50%);font-size:12px;font-weight:600;color:var(--pf-text-2);font-variant-numeric:tabular-nums}
.rigla-ac{position:absolute;left:50%;top:-4px;width:3px;height:50px;margin-left:-1.5px;border-radius:2px;background:var(--pf-rodie);pointer-events:none}
/* 6 · activ */
.bare-activ{display:flex;align-items:flex-end;gap:3px;height:22px}
.bare-activ i{width:4px;border-radius:2px;background:var(--pf-linie-tare);transition:background 200ms,height 240ms var(--pf-arc)}
.bare-activ i.plin{background:var(--pf-text)}
.ales .bare-activ i.plin{background:var(--pf-rodie-text)}
.reactie-in{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--pf-card);box-shadow:var(--pf-umbra-1);font-size:15px;line-height:1.4;font-weight:500;margin-top:8px}
.reactie-in svg{height:20px;width:auto;flex:none}
/* 7 · ținta */
.inel{position:relative;width:200px;height:200px;margin:0 auto}
.inel svg{width:100%;height:100%;transform:rotate(-90deg)}
.inel circle{fill:none;stroke-width:14}
.inel .pista{stroke:var(--pf-adancit)}
.inel .plin{stroke:var(--pf-rodie);stroke-linecap:round;transition:stroke-dashoffset 1200ms cubic-bezier(.3,.6,.2,1)}
.inel .al2{stroke:var(--pf-text);stroke-width:8}
.inel-mij{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.inel-mij b{font-family:var(--pf-font-titlu);font-weight:750;font-size:44px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.inel-mij span{font-size:14px;font-weight:600;color:var(--pf-text-2)}
.inel.mic{width:92px;height:92px;margin:0;flex:none}
.inel.mic circle{stroke-width:9}.inel.mic .al2{stroke-width:6}
.inel.mic .inel-mij b{font-size:20px}.inel.mic .inel-mij span{font-size:11px}
.macro-ob{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.macro-ob div{display:flex;flex-direction:column;gap:8px}
.macro-ob .et{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:var(--pf-text-2)}
.macro-ob .et b{color:var(--pf-text);font-variant-numeric:tabular-nums}
.macro-ob .linie{height:4px;border-radius:2px;background:var(--pf-adancit);overflow:hidden}
.macro-ob .linie i{display:block;height:100%;border-radius:2px;background:var(--pf-text);width:0;transition:width 700ms var(--pf-curba)}
.pasi-calcul > div{display:grid;grid-template-columns:28px 1fr auto;gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--pf-linie);font-size:15px}
.pasi-calcul > div:last-child{border-bottom:0}
.pasi-calcul .n{width:28px;height:28px;border-radius:50%;background:var(--pf-adancit);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;grid-row:span 2}
.pasi-calcul b{font-variant-numeric:tabular-nums;white-space:nowrap}
.pasi-calcul small{grid-column:2 / 4;color:var(--pf-text-2);font-size:13px;line-height:1.45}
/* 8 · mese, comutatoare în listă */
.ob-rand-c{padding:14px 16px;border-bottom:1px solid var(--pf-linie);display:flex;flex-direction:column}
.ob-rand-c:last-child{border-bottom:0}
.ob-rand-c > .sus{display:flex;align-items:center;gap:12px;min-height:32px;font-weight:500;color:var(--pf-text-2)}
.ob-rand-c.da > .sus{font-weight:600;color:var(--pf-text)}
.ob-rand-c .seg{margin-top:12px}
/* 13 · iute */
.flacari{display:inline-flex;gap:1px}
/* 14 · aparate */
.aparat{align-items:center;text-align:center;padding:14px 6px 12px;font-size:13px;font-weight:600;gap:8px;min-height:96px;justify-content:center}
.aparat svg{color:var(--pf-text);transition:color var(--pf-durata-2)}
.aparat.ales svg{color:var(--pf-rodie-text)}
.aparat.ales svg path{stroke-dasharray:160;animation:pf-trasare-l 520ms var(--pf-curba) both}
@keyframes pf-trasare-l{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
/* 15 · zile */
.zi-rand{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:10px;min-height:48px;font-weight:600}
.zi-rand.stins{color:var(--pf-text-2);font-weight:500}
.zi-rand .seg button{min-height:36px;font-size:13px}
.cheat{border-radius:16px;background:var(--pf-card);box-shadow:var(--pf-umbra-1);padding:16px;display:flex;flex-direction:column}
.cheat .sus{display:flex;align-items:flex-start;gap:12px}
.cheat h3{margin:0;font-family:var(--pf-font-titlu);font-weight:750;font-size:18px;display:flex;align-items:center;gap:8px}
.optional{font-family:var(--pf-font-text);font-size:11px;font-weight:600;color:var(--pf-text-2);border:1px solid var(--pf-linie-tare);border-radius:999px;padding:1px 8px;letter-spacing:0}
.foto-loc{border-radius:12px;background:var(--pf-adancit);aspect-ratio:16/9;display:flex;align-items:flex-end;padding:10px;font-size:11px;font-weight:600;color:var(--pf-text-2);overflow:hidden;position:relative;animation:pf-foto 700ms var(--pf-curba) both}
.foto-loc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes pf-foto{from{opacity:0;transform:scale(1.03)}}
/* 16 · bugetul */
.buget-ob{border-radius:16px;background:var(--pf-card);box-shadow:var(--pf-umbra-2);padding:16px;display:flex;flex-direction:column;gap:6px}
.buget-ob .cifra-xl{font-family:var(--pf-font-titlu);font-weight:750;font-size:44px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.buget-ob .cifra-xl small,.buget-ob .cifra-l small{font-size:16px;font-weight:600;letter-spacing:0;margin-left:3px}
.buget-ob .cifra-l{font-family:var(--pf-font-titlu);font-weight:750;font-size:28px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.buget-ob hr{border:0;border-top:1px solid var(--pf-linie);margin:10px 0;width:100%}
.economie{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--pf-economie-usor);color:var(--pf-economie);font-weight:700;font-size:17px;margin-top:6px;transform-origin:left;animation:pf-deschide 420ms var(--pf-curba) both}
@keyframes pf-deschide{from{opacity:0;transform:scaleX(.6)}}
.glisor{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0}
.glisor::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--pf-text) var(--p,50%),var(--pf-linie-tare) var(--p,50%))}
.glisor::-moz-range-track{height:4px;border-radius:2px;background:var(--pf-linie-tare)}
.glisor::-moz-range-progress{height:4px;border-radius:2px;background:var(--pf-text)}
.glisor::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--pf-card);border:2px solid var(--pf-text);margin-top:-10px;box-shadow:var(--pf-umbra-2);transition:transform var(--pf-durata) var(--pf-arc)}
.glisor::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--pf-card);border:2px solid var(--pf-text)}
.glisor:active::-webkit-slider-thumb{transform:scale(1.2)}
.glisor-cu-semn{position:relative}
.glisor-cu-semn .semn-pl{position:absolute;top:13px;width:3px;height:18px;border-radius:2px;background:var(--pf-economie);pointer-events:none;margin-left:-1.5px}
.trepte > div{display:grid;grid-template-columns:76px 1fr;gap:10px;padding:10px 12px;border-radius:10px;font-size:14px;line-height:1.4;color:var(--pf-text-2);transition:background 200ms,color 200ms}
.trepte > div b{color:var(--pf-text);font-variant-numeric:tabular-nums}
.trepte > div.activ{background:var(--pf-adancit);color:var(--pf-text);font-weight:600}
/* 17 · schema săptămânii */
.schema{display:grid;grid-template-columns:40px repeat(7,minmax(0,28px));gap:5px;align-items:center;font-size:11px;font-weight:600;color:var(--pf-text-2);margin-top:6px}
.schema b{text-align:center;font-weight:600}
.schema i{height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;animation:pf-pop 260ms var(--pf-arc) both;animation-delay:calc(var(--i)*20ms + 120ms)}
.schema i.gat,.legenda-gatit i.gat{background:var(--pf-text);color:var(--pf-fundal)}
.schema i.rest,.legenda-gatit i.rest{background:var(--pf-adancit);color:var(--pf-text-2)}
.legenda-gatit{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--pf-text-2)}
.legenda-gatit span{display:inline-flex;align-items:center;gap:6px}
.legenda-gatit i{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center}
/* 19 · încărcarea */
.incarcare{position:fixed;inset:0;z-index:20;background:#121316;color:#F2F2F0;display:flex;flex-direction:column;align-items:center;padding:calc(90px + env(safe-area-inset-top)) 32px 40px;gap:36px;animation:pf-apare 300ms both}
.incarcare.pleaca{animation:pf-pleaca 520ms var(--pf-curba) forwards}
@keyframes pf-pleaca{to{opacity:0;transform:scale(1.06)}}
.p-mare{width:150px;height:auto;overflow:visible;animation:pf-respira 2.4s ease-in-out infinite}
.p-mare.gata{animation:none}
@keyframes pf-respira{50%{transform:scale(1.04)}}
.p-mare .sus{fill:#F2F2F0;transition:transform 900ms var(--pf-curba)}
.p-mare .jos{fill:#E0485F;transition:transform 900ms var(--pf-curba)}
.p-mare.gata .sus,.p-mare.gata .jos{transition:transform 520ms cubic-bezier(.2,1.6,.4,1)}
.incarcare h2{font-size:34px;letter-spacing:-.03em;animation:pf-pop 420ms var(--pf-arc) both;margin:-12px 0 0}
.inc-randuri{display:flex;flex-direction:column;gap:14px;width:100%;max-width:340px}
.inc-rand{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4;animation:pf-urca 240ms var(--pf-curba) both;transition:opacity 400ms;color:#F2F2F0}
.inc-rand.facut{opacity:.7;color:#A0A3AA}
.inc-rand b{font-weight:700;font-variant-numeric:tabular-nums;color:#F2F2F0}
.inc-rand svg{flex:none;margin-top:2px}
.inc-jos{margin-top:auto;font-size:13px;color:#A0A3AA}
/* 20 · planul + contul */
.zile-carduri{display:flex;gap:10px;overflow-x:auto;margin:0 -24px;padding:4px 24px 8px;scrollbar-width:none;scroll-snap-type:x proximity}
.zile-carduri::-webkit-scrollbar{display:none}
.zi-c{flex:none;width:150px;border-radius:16px;background:var(--pf-card);box-shadow:var(--pf-umbra-1);overflow:hidden;display:flex;flex-direction:column;scroll-snap-align:start;animation:pf-din-dreapta 360ms var(--pf-curba) both;animation-delay:calc(var(--i)*40ms)}
.zi-c .foto{height:78px;background:var(--pf-adancit);position:relative;overflow:hidden}
.zi-c .foto::before{content:'';position:absolute;inset:0;background:var(--nuanta,transparent);opacity:.25;pointer-events:none}
.zi-c .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zi-c .txt{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.zi-c .zi{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pf-text-2)}
.zi-c strong{font-size:14px;line-height:1.3;flex:1}
.zi-c small{font-size:12px;color:var(--pf-text-2);font-variant-numeric:tabular-nums}
.foaie-fixa{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;pointer-events:none}
.foaie-fixa > div{pointer-events:auto;width:100%;max-width:560px;background:var(--pf-card-ridicat);border-radius:28px 28px 0 0;box-shadow:0 -12px 40px -12px rgba(0,0,0,.25);padding:10px 24px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;animation:pf-foaie 420ms var(--pf-curba) 600ms both}
.foaie-fixa h2{font-size:22px;line-height:1.2}
.semn-ok{width:52px;height:52px;border-radius:16px;background:var(--pf-economie-usor);color:var(--pf-economie);display:flex;align-items:center;justify-content:center;animation:pf-pop 420ms var(--pf-arc) both}
.semn-ok svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:pf-bifa 260ms 260ms ease-out forwards}
.semn-rodie{width:52px;height:52px;border-radius:16px;background:var(--pf-rodie-usor);color:var(--pf-rodie-text);display:flex;align-items:center;justify-content:center}
/* calculator: coloana + panoul cu profilul care se adună */
.ob-panou{display:none}
@media (min-width:1100px){
  .ob{max-width:1000px;display:grid;grid-template-columns:560px 1fr;column-gap:56px;align-content:start}
  .ob-sus,.ob-corp{grid-column:1}
  .ob-corp{padding-bottom:200px}
  .ob-jos{justify-content:center}
  .ob-jos-in{max-width:1000px;padding-right:calc(1000px - 560px + 20px)}
  .ob-panou{display:flex;flex-direction:column;gap:12px;grid-column:2;grid-row:1 / 3;position:sticky;top:56px;align-self:start;margin-top:56px;padding:24px;border-radius:20px;background:var(--pf-card);box-shadow:var(--pf-umbra-2);min-height:320px}
  .ob-panou h3{margin:0;font-family:var(--pf-font-titlu);font-weight:750;font-size:20px}
  .ob-panou .pastile .bulina{height:32px;font-size:14px}
  .ob-buline{visibility:hidden;height:4px}
}

/* ---------- 5. profil, casă, săptămâna casei ---------- */
.cap-om{display:flex;align-items:center;gap:16px}
.initiala{width:56px;height:56px;flex:none;border-radius:50%;background:var(--pf-adancit);display:inline-flex;align-items:center;justify-content:center;font-family:var(--pf-font-titlu);font-weight:750;font-size:24px}
.initiala.m{width:44px;height:44px;font-size:18px}
.initiala.s{width:26px;height:26px;font-size:12px;box-shadow:0 0 0 2px var(--pf-fundal)}
.initiala.plin{background:var(--pf-text);color:var(--pf-fundal)}
.initiala.noua{animation:pf-pop 420ms var(--pf-arc) both}
.avatare{display:flex}.avatare .initiala{margin-left:-6px}
.card-azi{display:flex;gap:16px;align-items:center;padding:16px}
.card-azi .linii{flex:1;display:flex;flex-direction:column;gap:8px;font-size:14px}
.card-azi .linii div{display:flex;align-items:center;gap:8px}
.card-azi .linii b{margin-left:auto;font-variant-numeric:tabular-nums}
.punct-c{width:8px;height:8px;border-radius:50%;flex:none;background:var(--pf-rodie)}
.punct-c.g{background:var(--pf-text)}
.grafic-kg{width:100%;height:110px;overflow:visible}
.grafic-kg .linie{fill:none;stroke:var(--pf-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;animation:pf-traseaza 900ms var(--pf-curba) both}
@keyframes pf-traseaza{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.grafic-kg .l-tinta{stroke:var(--pf-text-2);stroke-dasharray:4 4;stroke-width:1}
.grafic-kg circle{fill:var(--pf-text)}
.grafic-kg circle.azi{fill:var(--pf-rodie);animation:pf-pop 320ms var(--pf-arc) 800ms both;transform-origin:center;transform-box:fill-box}
.randuri{border-radius:16px;background:var(--pf-card);box-shadow:var(--pf-umbra-1);overflow:hidden}
.randuri > a,.randuri > button,.randuri > div{display:flex;align-items:center;gap:12px;padding:13px 16px;min-height:60px;border:0;border-bottom:1px solid var(--pf-linie);background:transparent;color:var(--pf-text);width:100%;text-align:left;font-size:16px}
.randuri > *:last-child{border-bottom:0}
.randuri > a:active,.randuri > button:active{background:var(--pf-adancit)}
.randuri .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.randuri .txt strong{font-weight:600}
.randuri .txt small{font-size:13px;color:var(--pf-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.randuri .val{font-size:14px;color:var(--pf-text-2);max-width:50%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.randuri .sag{color:var(--pf-text-2);flex:none}
.randuri .clipit{animation:pf-clipeste 1200ms ease-out}
.randuri .pericol{color:var(--pf-rodie-text);font-weight:600}
.rol{font-size:11px;font-weight:600;color:var(--pf-text-2);border:1px solid var(--pf-linie-tare);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:2px}
.regula{display:flex;gap:12px;align-items:flex-start}
.regula .semn{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--pf-avertizare-usor);color:var(--pf-avertizare)}
.regula .semn.g{background:var(--pf-adancit);color:var(--pf-text)}
.regula strong{display:block;line-height:1.35}
.regula small{font-size:13px;color:var(--pf-text-2);line-height:1.45;display:block;margin-top:2px}
.cod-casa{display:flex;gap:6px}
.cod-casa b{flex:1;aspect-ratio:1/1.05;max-width:52px;border-radius:10px;background:var(--pf-adancit);display:flex;align-items:center;justify-content:center;font-family:var(--pf-font-titlu);font-weight:750;font-size:24px;animation:pf-pop 300ms var(--pf-arc) both;animation-delay:calc(var(--i)*30ms)}
.qr{width:112px;height:112px;border-radius:12px;border:1px solid var(--pf-linie);background:#fff;padding:6px;flex:none}
.banda-ok{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--pf-economie-usor);color:var(--pf-economie);font-weight:600;animation:pf-coboara 320ms var(--pf-curba) both}
.schimbare{border-radius:16px;background:var(--pf-card);box-shadow:var(--pf-umbra-2);padding:14px;display:flex;flex-direction:column;gap:12px;animation:pf-urca 320ms var(--pf-curba) both}
.schimbare .sus{display:flex;gap:12px;align-items:flex-start}
.schimbare .sus small{display:block;color:var(--pf-text-2);font-size:13px;margin-top:2px}
.schimbare .doua-butoane .buton{min-height:44px}
.notificare{position:fixed;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;z-index:30;max-width:520px;margin:0 auto;border-radius:18px;background:var(--pf-card-ridicat);box-shadow:var(--pf-umbra-2),0 0 0 1px var(--pf-linie);padding:12px 16px;display:flex;flex-direction:column;gap:2px;animation:pf-coboara 320ms var(--pf-arc) both;font-size:14px}
.notificare strong{font-size:15px}
.notificare span{color:var(--pf-text-2)}
.nota-om{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--pf-adancit);color:var(--pf-text-2);width:max-content}
.nota-om.rodie{background:var(--pf-rodie-usor);color:var(--pf-rodie-text)}
.pentru-om{display:flex;gap:12px;align-items:flex-start;padding:14px}
.pentru-om small{display:block;color:var(--pf-text-2);font-size:14px;line-height:1.45;margin-top:3px}
.portii-oameni{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.portii-oameni div{border-radius:12px;background:var(--pf-card);box-shadow:var(--pf-umbra-1);padding:8px 6px;text-align:center;font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:4px}
.portii-oameni div.altfel{background:var(--pf-rodie-usor);box-shadow:none}
.portii-oameni b{font-size:16px;font-variant-numeric:tabular-nums}
.pas-numar{display:flex;align-items:center;gap:14px}
.pas-numar button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--pf-linie-control);background:transparent;color:var(--pf-text);font-size:22px;display:flex;align-items:center;justify-content:center}
.pas-numar b{font-family:var(--pf-font-titlu);font-weight:750;font-size:28px;min-width:2.4ch;text-align:center;font-variant-numeric:tabular-nums}
.mancat{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--pf-linie-control);background:transparent;display:flex;align-items:center;justify-content:center;color:transparent;flex:none}
.mancat.da{background:var(--pf-economie);border-color:var(--pf-economie);color:#fff;animation:pf-pop 320ms var(--pf-arc)}
.mancat i{font-size:18px}
.cap-saptamana{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bun-venit-nou{min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;padding:calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto;width:100%}
.bun-venit-nou .bv-mijloc{display:flex;flex-direction:column;gap:18px;padding:40px 0}
.bun-venit-nou h1{font-size:40px;letter-spacing:-.035em;line-height:1.05}
.bun-venit-nou p{font-size:18px;line-height:1.5;color:var(--pf-text-2)}
.bun-venit-nou .p-intro{width:96px;height:auto;overflow:visible}
.bun-venit-nou .p-intro .p-sus{animation:pf-p-sus 1100ms var(--pf-curba) 300ms both}
.bun-venit-nou .p-intro .p-jos{animation:pf-p-jos 1100ms var(--pf-curba) 300ms both}
@keyframes pf-p-sus{from{transform:translate(31px,-14px);opacity:0}60%{opacity:1}to{transform:translate(9px,0)}}
@keyframes pf-p-jos{from{transform:translate(-22px,14px);opacity:0}60%{opacity:1}to{transform:none}}
.bun-venit-nou .bv-jos{display:flex;flex-direction:column;gap:12px}
/* rețeta: capul fără emoji */
.reteta-erou{background:var(--pf-adancit)!important}
.reteta-erou::before{content:'';position:absolute;inset:0;background:var(--nuanta,transparent);opacity:.25;pointer-events:none}
.reteta-erou::after{pointer-events:none}
.reteta-erou .buton-rotund{z-index:2}
.reteta-erou::after{background:none}
.reteta-erou .poza-erou{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reteta-erou .ic-erou{position:relative;font-size:56px;color:var(--pf-text-2);opacity:.55}
.buton-rotund{background:var(--pf-card);color:var(--pf-text);box-shadow:var(--pf-umbra-2)}
.ecran-bun-venit{padding:0!important;max-width:none!important}
/* lista: bifa sare, rândul bifat se stinge lin; bara de buget crește lin */
.bara-progres span{transition:width 700ms var(--pf-curba),background 300ms}
.schelet,.schelet-rand{background:linear-gradient(100deg,var(--pf-adancit) 40%,color-mix(in srgb,var(--pf-adancit) 55%,var(--pf-card)) 50%,var(--pf-adancit) 60%);background-size:200% 100%;animation:pf-luciu 1.3s linear infinite}
@keyframes pf-luciu{from{background-position:120% 0}to{background-position:-80% 0}}
input[type=checkbox]:checked{animation:pf-umfla 240ms var(--pf-arc)}
.stepper button:active,.pas-numar button:active{transform:scale(.88);background:var(--pf-adancit)}
.inima:active i,.buton-rotund:active i{animation:pf-pop 320ms var(--pf-arc)}
.plin-inima{color:var(--pf-rodie)!important;animation:pf-pop 360ms var(--pf-arc)}
.fundal-foaie{background:var(--pf-voal)!important}
img{transition:opacity 300ms}
/* foaia „Schimbă rețeta": rețetele scoase de cineva din casă, blocate, cu motivul */
.scoasa{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1.5px dashed var(--pf-linie-tare);border-radius:14px;color:var(--pf-text-2)}
.scoasa s{display:block;font-weight:600}
.scoasa small{display:block;font-size:13px;margin-top:2px}
.foaie{max-height:88dvh;overflow-y:auto}
/* textele lungi dintr-un rând (nume, liste) nu au voie să lățească pagina peste ecranul telefonului */
.doua{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.doua{grid-template-columns:repeat(2,minmax(0,1fr))}}
.doua > *,.lista,.randuri,.card-azi,.card-azi .linii,.cap-om > span:last-child,.schimbare .sus > span,.pentru-om > span{min-width:0}
.cap-om .titlu,.randuri .txt strong{overflow-wrap:anywhere}
.continut{overflow-x:clip}
.zile-p{gap:6px}
.zile-p > *{flex:1 1 0;min-width:0;display:flex;justify-content:center}
.zile-p .zi-p{width:100%;max-width:44px;height:auto;aspect-ratio:1/1}

/* modul de gătit: butoanele stau jos pe ecran (sub deget), conținutul are loc deasupra lor */
.gateste{display:flex;flex-direction:column;gap:14px;padding-bottom:84px}
.gateste .pas-mare{min-height:0}
.gateste-jos{position:fixed;left:0;right:0;bottom:0;z-index:5;max-width:640px;margin:0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--pf-fundal) 78%,transparent);display:flex;gap:10px}
.gateste-jos .buton.secundar{flex:0 0 auto;padding:0 18px}
.gateste-jos .buton.creste{flex:1}
.inc-det{display:block;font-size:13px;font-weight:500;opacity:.62;margin-top:2px;line-height:1.35}