body[data-cat="mind"]{--fvPr:url(../img/x-fv-pr-2.webp); --fvShop:url(../img/x-fv-shop-2.webp)}
body[data-cat="body"]{--fvPr:url(../img/x-fv-pr-3.webp); --fvShop:url(../img/x-fv-shop-3.webp)}
body[data-cat="soul"]{--fvPr:url(../img/x-fv-pr.webp); --fvShop:url(../img/x-fv-shop.webp)}

/* Bannere de fetru: obiectele stau in dreapta, textul in stanga are loc liber. */
/* Bannerele stau curate: fara voal intunecat, obiectele marite si impinse in dreapta,
   iar textul negru se aseaza pe fetrul liber din stanga. */
.prCard{position:relative; overflow:hidden;
  background-image:var(--fvPr) !important; background-size:cover !important;
  background-position:center !important; background-repeat:no-repeat;
  border-color:rgba(255,255,255,.20) !important; display:flex; flex-direction:column; justify-content:center;
  padding:14px 18px !important; min-height:102px}
.prCard>*{position:relative; max-width:50%}
.prCard b{color:#1b1730 !important; display:block; font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-size:23px; line-height:1.1; letter-spacing:0; text-shadow:none}
.prCard p{color:rgba(255,255,255,.90) !important; opacity:1 !important;
  font-size:13.5px; line-height:1.45; margin:6px 0 0 !important}
.shopCard{background-image:var(--fvShop) !important; background-size:cover !important;
  background-position:center !important; background-repeat:no-repeat; min-height:148px}
.shopCard .sOv{background:none !important}
.shopCard .sT{font-family:'Playfair Display',Georgia,serif !important; font-style:normal !important;
  font-weight:700 !important; color:#1b1730 !important; font-size:23px !important; line-height:1.1}
.shopCard .sS{color:rgba(255,255,255,.90) !important; max-width:48%; opacity:1 !important;
  font-size:13.5px; line-height:1.45; font-weight:400}
.shopCard .sIn{max-width:100%}
.shopCard .sB{color:#1b1730 !important; border-color:rgba(27,23,48,.42) !important;
  background:rgba(255,255,255,.32) !important}
/* separatorul Explore Deeper: alb, ca sa se citeasca pe orice fetru */
.deepSep b{color:#fff !important}
.deepSep i{background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent) !important}
/* piciorul paginii de start: invitatia catre site */
.siteFoot{margin:26px 2px 6px; text-align:center}
.siteFoot p{margin:0 0 7px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.62)}
.siteFoot a{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:14.5px;
  color:#fff; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--catA,#a78bfa) 62%, transparent);
  padding-bottom:2px; -webkit-tap-highlight-color:transparent}
.siteFoot a:active{opacity:.7}


/* soarele: cate unul pentru fiecare saptamana intreaga de streak */
.hsSunRow{display:inline-flex; align-items:center; gap:5px; vertical-align:middle}
.hsSun{display:inline-block; background-image:url(../img/css-hs-sun.webp); background-size:contain;
  background-repeat:no-repeat; background-position:center; flex:0 0 auto;
  transform:scale(.4); opacity:0; animation:hsSunIn .55s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes hsSunIn{to{transform:none; opacity:1}}
.hsSunMore{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:12px; color:rgba(27,23,48,.6)}
#hsPop .hpSuns{margin-top:14px; min-height:2px}
#hsPop .hpWhy{margin-top:14px; padding-top:13px; border-top:1px solid rgba(27,23,48,.14);
  font-size:11.5px; line-height:1.55; color:rgba(27,23,48,.62); text-align:left}
#hsPop .hpWhy b{color:#1b1730; font-weight:600}
/* ---- Popup zilnic de streak, varianta A ---- */
#hsPop{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  padding:22px; background:rgba(8,7,18,.64); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .32s ease}
#hsPop.on{display:flex}
#hsPop.show{opacity:1}
#hsPop .hpCard{width:100%; max-width:318px; text-align:center; color:#1b1730;
  border-style:solid; border-color:transparent; border-width:40px 40px;
  border-image-source:var(--fvCard); border-image-slice:70 fill; border-image-repeat:stretch; border-image-width:1;
  transform:translateY(22px) scale(.94); opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.25,1), opacity .4s ease}
#hsPop.show .hpCard{transform:none; opacity:1}
#hsPop .hpFl{width:74px; height:88px; margin:0 auto;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  transform:scale(.6); opacity:0; transition:transform .6s cubic-bezier(.2,1.5,.4,1), opacity .4s ease .1s}
#hsPop.show .hpFl{transform:none; opacity:1}
#hsPop .hpHi{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(27,23,48,.55); margin-top:12px}
#hsPop .hpNm{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:23px; margin-top:2px}
#hsPop .hpSub{font-size:13px; color:rgba(27,23,48,.72); margin-top:6px; line-height:1.45}
#hsPop .hpSeg{display:flex; gap:5px; margin:16px 2px 0}
#hsPop .hpSeg i{flex:1; height:13px; border-radius:4px; background:rgba(27,23,48,.15);
  transform:scaleX(.15); transform-origin:left center; opacity:.3;
  transition:transform .45s cubic-bezier(.22,.7,.3,1), background .45s ease, opacity .45s ease}
#hsPop.show .hpSeg i{transform:scaleX(1); opacity:1}
#hsPop.show .hpSeg i.on{background:var(--catA,#34d399)}
#hsPop .hpPts{font-size:15px; margin-top:13px; color:rgba(27,23,48,.72)}
#hsPop .hpPts b{font-family:'Playfair Display',Georgia,serif; font-size:19px; color:#1b1730}
#hsPop .hpBtn{margin:18px 0 0; width:100%; border:0; cursor:pointer;
  border-style:solid; border-color:transparent; border-width:22px 26px; min-height:16px; padding:0; background:none;
  border-image-source:var(--fvFill); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:17px; color:#1b1730;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent}
#hsPop .hpBtn:active{transform:scale(.98)}
#hsPop .hpSkip{margin-top:11px; font-size:12px; color:rgba(27,23,48,.5); background:none; border:0; cursor:pointer}
/* scanteia care zboara spre contorul din antet */
.hpFly{position:fixed; z-index:130; pointer-events:none; font-family:'Playfair Display',Georgia,serif;
  font-weight:900; font-size:22px; color:#f5c76a; text-shadow:0 2px 14px rgba(245,199,106,.65);
  transition:transform .85s cubic-bezier(.4,0,.2,1), opacity .85s ease}
.catGlow{display:none; position:fixed; top:0; left:0; right:0; height:330px; pointer-events:none; z-index:0; opacity:.15;
  background:radial-gradient(ellipse at 50% 0%, var(--cat), transparent 68%); transition:background .5s ease}

.tgSwitch{display:flex; align-items:center; justify-content:space-between; padding:11px 2px}
.tgSwitch:not(:last-child){border-bottom:1px solid rgba(255,255,255,.07)}
.tgSwitch b{font-size:14.5px; font-weight:600}
.tgSwitch button{width:46px; height:26px; border-radius:99px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08); position:relative; cursor:pointer; transition:all .25s}
.tgSwitch button i{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#cbd5e1; transition:all .25s}
.tgSwitch button.on{background:color-mix(in srgb, var(--tc) 45%, transparent); border-color:var(--tc)}
.tgSwitch button.on i{left:22px; background:var(--tc)}
.hubSec .hsN{font-size:12px; opacity:.5; font-weight:300; flex:0 0 auto}
.hubSec svg{opacity:.55; transition:transform .25s; flex:0 0 auto}
.hubSec.shut svg{transform:rotate(-90deg)}
.shopCard{position:relative; margin:14px 0 6px; border-radius:22px; overflow:hidden; min-height:148px;
  border:1px solid color-mix(in srgb, var(--catB) 38%, transparent); background-size:cover; background-position:center;
  display:flex; align-items:flex-end}
/* acelasi voal ca la cardul de ritual, ca textul alb sa stea pe intuneric */
.shopCard .sOv{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,24,.05) 0%, rgba(10,9,24,.8) 88%)}
.shopCard .sIn{position:relative; padding:16px 17px; width:100%}
.shopCard .sT{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700; font-size:24px; line-height:1.1; color:#e9d5ff}
.shopCard .sS{font-size:13.5px; font-weight:400; opacity:1; margin-top:5px; line-height:1.45}
.shopCard .sB{display:inline-block; margin-top:11px; background:color-mix(in srgb, var(--catB) 16%, transparent); border:1px solid color-mix(in srgb, var(--catB) 45%, transparent);
  color:#e9d5ff; border-radius:999px; padding:7px 15px; font-size:12.5px; font-weight:600}
.tool{border-radius:14px; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .18s ease; will-change:transform;
  background-color:#FBF8F1; display:flex; flex-direction:column;
  /* muchie de fetru: o linie fina de lumina sus, o umbra portanta jos */
  box-shadow:0 1px 0 rgba(255,255,255,.16), 0 12px 26px -12px rgba(0,0,0,.85),
             0 2px 5px -2px rgba(0,0,0,.45)}
.tool .fvArt{position:relative; width:100%; aspect-ratio:1/.86; overflow:hidden;
  background-image:inherit; background-size:cover; background-position:inherit}
.tool .fvCap{background:#FBF8F1; padding:9px 11px 11px; flex:1 1 auto;
  border-top:1px solid rgba(20,15,40,.07)}
.tool .fvCap .tn{font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:15px; line-height:1.16; color:#1b1730; white-space:nowrap; overflow:hidden}
.tool .fvCap .ckName{font-size:11px; color:rgba(27,23,48,.55); font-style:italic; margin-top:2px}
.tool .fvCap .fvWith{font-size:11px; color:rgba(27,23,48,.55); font-style:italic; margin-top:2px}
.tool:active{transform:translateY(-3px)}
.tool.locked{filter:saturate(.45)}
.tool{touch-action:pan-y}
/* Transformarea o conduce JS-ul (urmareste degetul si scaleaza), deci NU o mai
   fixam aici cu !important, altfel placuta nu s-ar putea misca. */

/* Brain Dump: cardurile trebuie sa se simta ca ganduri separate, deci separare
   clara si nimic de tip tabel de proiect. */

/* Chipsurile din Brain Dump erau pe rand orizontal, fiecare cat textul lui, deci
   ieseau 12 butoane de latimi diferite in capul listei. Grila cu fractiuni le da
   latime IDENTICA prin definitie; flexul nu poate, fiindca padding si font diferit
   dau latimi diferite (lectia din 211-213). */

/* Rezumatul: patru celule egale, cifra mare cu acelasi font ca la cronometre.
   Rand pe rand de text mic nu se citea dintr-o privire. */

/* Doua butoane de text pe latimi egale, plus stergerea ca iconita. Coloana
   `auto` a treia, deci textul celor doua nu se mai inghesuie. */
.bdActs{display:grid; grid-template-columns:1fr 1fr auto; gap:9px; margin-top:12px; align-items:stretch}
.bdActs .ghost{width:100%; white-space:nowrap}
.bdDel{width:46px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:12px; border:1px solid rgba(248,113,113,.4); background:rgba(248,113,113,.1);
  color:#f87171; font-family:inherit; transition:all .18s}
.bdDel:active{background:rgba(248,113,113,.2)}

/* Cardul "Decide tu pentru mine": pliabil ca restul sertarelor, plus inchidere. */
.bdDecBody{max-height:0; overflow:hidden; transition:max-height .35s ease}
.bdDecBody.open{max-height:1200px}
.bdDecChev{flex:0 0 auto; color:var(--catA); opacity:.7; display:flex; align-items:center; transition:transform .3s}
.bigCard.bdDecOn .bdDecChev{transform:rotate(180deg)}

/* Obicei: scopul mereu sus, o saptamana de puncte, o bara cu praguri. */

/* Ghidul de pe hub: card discret, cele trei feluri pliate. */
.hgBox{margin:12px 0 4px; padding:16px; border-radius:20px; border:1px solid rgba(255,255,255,.12);
  background:var(--card); backdrop-filter:blur(8px)}


/* Dialogul de confirmare al aplicatiei. Inlocuieste confirm() nativ, care
   arata a browser, scrie numele domeniului deasupra si ignora complet tema. */
.askOv{position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  padding:26px; background:rgba(6,5,16,.72); backdrop-filter:blur(7px);
  opacity:0; pointer-events:none; transition:opacity .22s ease}
.askOv.on{opacity:1; pointer-events:auto}

/* Foaia "Despre": text de citit, deci lasa loc de derulare pe ecrane mici. */

/* iconita de informare de langa un mesaj scris dinainte */
.offI{display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px;
  margin-left:5px; vertical-align:-2px; border-radius:50%; cursor:pointer; flex-shrink:0;
  border:1px solid rgba(255,255,255,.3); background:transparent; color:var(--white); opacity:.55;
  font-family:'Fraunces',serif; font-size:11px; line-height:1; padding:0}
.offI:active{opacity:1; border-color:var(--catA); color:var(--catB)}
.abBox{width:100%; max-width:400px; max-height:80vh; overflow:auto;
  background:var(--card); border:1px solid rgba(255,255,255,.14); border-radius:22px;
  backdrop-filter:blur(14px); box-shadow:0 26px 70px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.97); transition:transform .26s cubic-bezier(.2,.9,.3,1)}
.askOv.on .abBox{transform:none}
.abIn{padding:24px 22px}
.abT{font-family:'Fraunces','Cormorant Garamond',serif; font-size:21px; line-height:1.3;
  color:var(--catB); margin:0 0 14px}
.abSign{margin:16px 0 0; font-family:'Fraunces','Cormorant Garamond',serif; font-size:16px;
  color:var(--catB); opacity:.9}
.askBox{width:100%; max-width:340px; background:var(--card); border:1px solid rgba(255,255,255,.14);
  border-radius:22px; padding:22px; backdrop-filter:blur(14px); text-align:center;
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.97); transition:transform .26s cubic-bezier(.2,.9,.3,1)}
.askOv.on .askBox{transform:none}
.askBox .askT{font-family:'Fraunces','Cormorant Garamond',serif; font-size:19px; line-height:1.35;
  color:var(--catB); margin:0 0 6px}
.askBox p{margin:0; font-size:14.5px; opacity:.86}
.askBox .actions{margin-top:20px}
.hgBox{position:relative; overflow:hidden; background-size:cover; background-position:center;
  border:1px solid rgba(255,255,255,.14)}
.hgOv{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,24,.55) 0%, rgba(10,9,24,.9) 62%)}
.hgBox:not(.open) .hgOv{background:linear-gradient(180deg, rgba(10,9,24,.4) 0%, rgba(10,9,24,.78) 100%)}
.hgInner{position:relative; z-index:1}
.hgTop{display:flex; align-items:center; gap:11px; cursor:pointer}
.hgTopChev{flex:0 0 auto; color:var(--catB); display:flex; align-items:center; justify-content:flex-end;
  width:40px; height:34px; margin:-6px -6px -6px 0; transition:transform .3s}
.hgBox.open .hgTopChev{transform:rotate(180deg)}
.hgAll{max-height:0; overflow:hidden; transition:max-height .4s ease}
.hgAll.open{max-height:2600px}
.hgWay{border:1px solid rgba(255,255,255,.1); border-radius:14px; margin-bottom:8px; overflow:hidden;
  background:rgba(255,255,255,.03); transition:border-color .25s}
.hgWay.open{border-color:var(--catA)}
.hgHead{display:flex; align-items:center; gap:11px; padding:12px 13px; cursor:pointer}
.hgNum{width:23px; height:23px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; background:color-mix(in srgb, var(--catA) 26%, transparent);
  color:var(--catB)}
.hgTtl{flex:1; font-size:13.5px; font-weight:500; line-height:1.35}
.hgChev{flex:0 0 auto; color:var(--catA); opacity:.7; display:flex; align-items:center; transition:transform .3s}
.hgWay.open .hgChev{transform:rotate(180deg)}
.hgDraw{max-height:0; overflow:hidden; transition:max-height .35s ease}
.hgDraw.open{max-height:700px}
.hgIn{padding:0 13px 13px; opacity:.82; font-size:13.5px; line-height:1.6}

/* Butoanele de navigare din ghid: latimi egale prin grila, ca peste tot. */
/* `align-items:stretch` egalizeaza inaltimile pe rand: cand o eticheta se rupe
   pe doua randuri, vecina ei creste odata cu ea in loc sa ramana scunda. */
.hgGoRow{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:12px; align-items:stretch}
.hgGoRow .hgGo:only-child{grid-column:1/-1}
.hgGo{display:flex; align-items:center; justify-content:space-between; gap:9px; width:100%;
  height:100%; min-height:46px; padding:10px 14px; border-radius:14px; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:500; line-height:1.25; text-align:left;
  border:1px solid color-mix(in srgb, var(--bc) 42%, transparent);
  background:color-mix(in srgb, var(--bc) 11%, transparent);
  color:var(--bc);
  transition:background .18s, border-color .18s, transform .12s}
.hgGo svg{opacity:.75}
.hgGo:active{background:color-mix(in srgb, var(--bc) 24%, transparent); transform:scale(.985)}
.hgGo span{min-width:0; overflow:hidden; text-overflow:ellipsis}
.hgLast{margin:12px 0 0; padding:11px 13px; border-radius:13px; font-size:13px; line-height:1.55;
  border:1px solid color-mix(in srgb, var(--catA) 35%, transparent);
  background:color-mix(in srgb, var(--catA) 10%, transparent)}

/* Fiecare obicei are cardul lui. Trei incap pe ecran fiindca detaliile stau
   in sertar, iar la vedere raman doar numele, unde e si gestul zilei. */

/* Limbajul iubirii */
.llCard{padding:16px; border-radius:20px; margin-bottom:12px; border:1px solid rgba(255,255,255,.12);
  background:var(--card); backdrop-filter:blur(8px); transition:border-color .25s}
.llCard.open{border-color:var(--catA)}
.llHead{display:flex; align-items:center; gap:11px; cursor:pointer}
.llChev{flex:0 0 auto; color:var(--catA); opacity:.7; display:flex; align-items:center;
  justify-content:flex-end; width:40px; height:34px; margin:-6px -6px -6px 0; transition:transform .3s}
.llCard.open .llChev{transform:rotate(180deg)}
.llDraw{max-height:0; overflow:hidden; transition:max-height .4s ease}
.llDraw.open{max-height:5200px}
.llSecW{margin-top:10px}
.llSecB{display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 35%, transparent); border-radius:16px; backdrop-filter:blur(8px); font-family:'Sora'; font-size:13.5px; font-weight:600; color:var(--white); text-align:left; cursor:pointer; transition:all .2s}
.llSecW.open .llSecB{border-radius:16px 16px 0 0}
.llSecC{transition:transform .25s; opacity:.6; flex-shrink:0}
.llSecW.open .llSecC{transform:rotate(180deg)}
.llSecD{padding:13px 16px 15px; background:rgba(255,255,255,.03); border:1px solid color-mix(in srgb, var(--catA) 35%, transparent); border-top:none; border-radius:0 0 16px 16px}
.moodChip.on{border-color:var(--mc); background:color-mix(in srgb, var(--mc) 15%, transparent)}
.llMoreB{margin-top:8px; font-size:12.5px; color:var(--catB); background:none; padding:4px 0}
.llQuote{margin:10px 0 0; padding:10px 12px; border-left:2px solid var(--catA); background:rgba(255,255,255,.04); border-radius:0 10px 10px 0; font-style:italic}
.llBadgeMe{display:inline-block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--catB); border:1px solid var(--catB); border-radius:99px; padding:2px 8px; margin-left:8px; vertical-align:2px}
.llRels{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.llWof{opacity:.65; font-size:12.5px; margin:0 0 8px}
.llOpt{display:block; width:100%; text-align:left; margin-bottom:9px; padding:13px 16px; border-radius:15px; cursor:pointer;
  background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 30%, transparent); color:var(--white); font-family:'Sora'; font-weight:300; font-size:13.5px; line-height:1.5; backdrop-filter:blur(8px); transition:all .2s}
.llOpt:active{border-color:var(--catA); background:color-mix(in srgb, var(--catA) 16%, transparent)}
.llProg{height:5px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.llProg i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--catA),var(--catB)); transition:width .3s}
.llTop{text-align:center; padding:6px 0 16px}
.llKick{margin:0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--catB); opacity:.8}