.muDl{width:38px; height:38px; border-radius:50%; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0}
body.muOn .phone{padding-top:76px}
@keyframes grMedFade{0%{opacity:1; filter:blur(0); transform:scale(1)}100%{opacity:0; filter:blur(14px); transform:scale(.94)}}
@keyframes grMedApp{0%{opacity:0; filter:blur(10px); transform:translateY(8px)}100%{opacity:1; filter:blur(0); transform:none}}
.grMedOut{animation:grMedFade 1.2s cubic-bezier(.4,0,.6,1) forwards}
.grMedIn{animation:grMedApp .7s ease both}
.swCard{position:relative; margin:16px auto 0; max-width:340px; border-radius:26px; padding:2px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--catA) 75%, transparent), color-mix(in srgb, var(--catA) 35%, transparent) 35%, color-mix(in srgb, var(--catA) 30%, transparent) 65%, color-mix(in srgb, var(--catB) 70%, transparent));
  box-shadow:0 0 42px color-mix(in srgb, var(--catA) 28%, transparent)}
.swGlow{position:absolute; inset:-30px; border-radius:40px; background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--catA) 28%, transparent), rgba(11,10,32,0) 65%); pointer-events:none}
.swInner{position:relative; border-radius:24px; padding:26px 22px 22px; text-align:center;
  background:radial-gradient(ellipse at 50% 10%, rgba(28,18,46,.92), #0e0b16 62%), #0e0b16; overflow:hidden}
.swInner .sgMed{box-shadow:none !important;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 52%, rgba(0,0,0,.55) 72%, transparent 88%);
  mask-image:radial-gradient(circle at 50% 50%, #000 52%, rgba(0,0,0,.55) 72%, transparent 88%)}
.swInner .swTitle{margin-top:26px}
.swInner:before{content:''; position:absolute; inset:0;
  background-image:radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 72% 16%, rgba(255,255,255,.5), transparent), radial-gradient(1.4px 1.4px at 84% 62%, rgba(255,255,255,.45), transparent), radial-gradient(1px 1px at 26% 78%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,.35), transparent);
  pointer-events:none}
.swTitle{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:29px; color:#e0e7ff; margin-top:14px; line-height:1.2; text-wrap:balance; hyphens:none; text-shadow:0 0 26px color-mix(in srgb, var(--catA) 40%, transparent)}
.swP{font-size:14.5px; font-weight:300; line-height:1.72; color:rgba(240,240,250,.95); margin:14px 4px 0; text-wrap:pretty; hyphens:none}
.swSig{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px; color:var(--catB); margin-top:18px; opacity:.9}
.orCardBg{position:relative; width:min(100%,320px); aspect-ratio:2/3; margin:14px auto 0; background-size:cover; background-position:center; border-radius:18px; overflow:hidden; display:flex; align-items:center; justify-content:center}
.orCardTx{padding:20% 17%; text-align:center; text-shadow:0 2px 16px rgba(0,0,0,.85)}
#czOv{display:none; position:fixed; inset:0; z-index:72; background:rgba(6,5,16,.86); backdrop-filter:blur(8px); padding:30px 18px 90px; overflow-y:auto}
#czOv.on{display:flex; align-items:center; justify-content:center}
.czCard{width:min(92vw,340px); border-radius:24px; border:1px solid rgba(250,204,21,.38);
  background:radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--catA) 16%, transparent), rgba(11,10,32,0) 65%), linear-gradient(180deg, #141130 0%, #0b0a20 100%);
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 34px rgba(245,199,106,.10); padding:22px 20px 24px; text-align:center; position:relative}
.czHid{opacity:0; filter:blur(7px); transform:translateY(8px)}
.czRev{transition:opacity .8s cubic-bezier(.3,.65,.25,1), filter .8s cubic-bezier(.3,.65,.25,1), transform .8s cubic-bezier(.3,.65,.25,1)}
.czRev.on{opacity:1; filter:blur(0); transform:translateY(0)}
.czLvl{font-size:10.5px; letter-spacing:.22em; color:var(--catB); text-transform:uppercase}
.czName{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700; font-size:30px; color:#fde68a; margin:6px 0 2px; text-shadow:0 0 24px rgba(245,199,106,.35)}
.czPts{font-size:12px; color:rgba(255,255,255,.75); font-weight:300}
.czPts b{color:#fde68a; font-weight:600}
.czSky{margin:14px auto 6px; border-radius:18px; border:1px solid rgba(255,255,255,.10); overflow:hidden; background:radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--catA) 12%, transparent), rgba(7,6,19,0) 70%)}
.czSky svg{display:block; width:100%}
.czMsg{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:18.5px; line-height:1.55; color:rgba(240,240,250,.95); margin:20px 4px 4px}
.czMsg.czRev{transition-duration:1.2s}
.czX{margin-top:16px; background:none; border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.85); border-radius:999px; padding:9px 22px; font-family:'Sora'; font-size:11.5px; cursor:pointer; opacity:0; transition:opacity .8s ease}
.czX.on{opacity:1}
.czSt{opacity:0; transform-origin:center; transform:scale(.2)}
.czSt.on{opacity:1; transform:scale(1); transition:opacity .55s cubic-bezier(.3,.65,.25,1), transform .55s cubic-bezier(.3,.65,.25,1)}
.czSt.fl circle:first-child{animation:czHalo .9s ease-out}
@keyframes czHalo{0%{r:4}45%{r:16}100%{r:9}}
.czGrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px}
.czTile{aspect-ratio:2/3; position:relative; cursor:pointer}
.czTile.done{border-color:rgba(250,204,21,.45); background:radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--catA) 18%, transparent), rgba(11,10,32,0) 70%), linear-gradient(180deg,#141130,#0b0a20); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px}
.czTile.lock{background-size:cover; background-position:center}
.czTile.lock .lk{position:absolute; inset:0; background:rgba(7,6,19,.55); display:flex; align-items:flex-end; justify-content:center; padding:8px; font-size:9.5px; color:rgba(255,255,255,.85); text-align:center}
.czTile.lock:not(.gold){opacity:.7}
.czTile .tn{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700; font-size:17px; color:#fde68a}
@keyframes czIn{from{opacity:0; filter:blur(8px); transform:translateY(16px) scale(.96)} to{opacity:1; filter:blur(0); transform:translateY(0) scale(1)}}
.czCard{animation:czIn .65s cubic-bezier(.3,.65,.25,1)}
/* ---- bara de ordonare a toolurilor ---- */
.ordBan{display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.05); border:1px solid color-mix(in srgb, var(--catA) 32%, transparent); border-radius:16px; padding:11px 14px; cursor:pointer}
.ordBan b{font-size:12.5px; color:var(--catB); letter-spacing:.04em; flex-shrink:0}
.ordCur{flex:1; text-align:right; font-size:11.5px; font-weight:300; opacity:.75; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ordList{margin-top:7px; background:rgba(255,255,255,.04); border:1px solid color-mix(in srgb, var(--catA) 22%, transparent); border-radius:16px; padding:6px; animation:czIn .3s ease}
.ordOpt{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; background:transparent; border:0; color:inherit; font-family:inherit; font-size:12.8px; font-weight:300; padding:11px 12px; border-radius:11px; cursor:pointer}
.ordOpt.on{background:color-mix(in srgb, var(--catA) 16%, transparent); color:var(--catB); font-weight:500}
.ordTick{color:var(--catB); font-size:13px; flex-shrink:0}
.ordHint{font-size:14.5px; font-weight:400; opacity:.6; line-height:1.5; margin:2px 6px 7px; text-align:left}
/* ---- evidentierea numelui si a caii vietii, pe culoarea temei ---- */
:root{--hl:#c4b5fd}
body.tGreen{--hl:var(--catB)} body.tRed{--hl:#fda4af} body.tYel{--hl:#fde68a} body.tInd{--hl:var(--catB)}
body.tPnk{--hl:var(--catB)} body.tMag{--hl:var(--catA)} body.tOrg{--hl:var(--catB)} body.tCyn{--hl:var(--catB)}
.hl{color:var(--catA); font-weight:600; font-style:normal}
.endBack{margin:24px 0 10px}
.pmMoreB{display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--catA) 10%, transparent); border:1px solid color-mix(in srgb, var(--catA) 40%, transparent); color:var(--catB); border-radius:999px; padding:7px 13px; font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer; margin-top:2px}
.pmDeepB{margin-top:10px; padding:13px 14px; background:rgba(255,255,255,.045); border:1px solid color-mix(in srgb, var(--catA) 22%, transparent); border-radius:14px; animation:czIn .3s ease}
.pmDeepB p{margin:0; font-size:14.5px; line-height:1.75}
/* ---- Soaptele Sufletului: integrare + colectie ---- */
.swInt{position:relative; margin-top:18px; padding-top:20px}
.swInt::before{content:''; position:absolute; top:0; left:6%; right:6%; height:2px; border-radius:2px;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(222,228,255,1) 0%, color-mix(in srgb, var(--catB) 60%, transparent) 42%, color-mix(in srgb, var(--catB) 1%, transparent) 78%);
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--catA) 75%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--catA) 40%, transparent))}
.swInt b{display:block; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700; font-size:19px; color:var(--catB); margin-bottom:6px}
.swInt p{margin:0; font-size:14.5px; font-weight:400; line-height:1.7; opacity:.92}
.swGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.swMini{position:relative; aspect-ratio:2/3; border-radius:14px; overflow:hidden; cursor:pointer;
  background-image:var(--swb); background-size:cover; background-position:center;
  border:1px solid color-mix(in srgb, var(--catB) 28%, transparent); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .3s ease, border-color .3s ease}
.swMini:active{transform:scale(.96)}
.swMiniIco{opacity:.9}
.swMiniD{position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:9.5px; letter-spacing:.06em; opacity:.72}
.swDots{display:flex; justify-content:center; gap:7px; margin-top:12px}
.swDot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); cursor:pointer; transition:all .3s ease}
.swDot.on{background:var(--catB); width:18px; border-radius:99px}
.favBtn{position:absolute; top:8px; right:8px; z-index:3; width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(10,8,24,.42); backdrop-filter:blur(6px); color:rgba(255,255,255,.72);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:color .3s ease, transform .2s ease}
.favBtn.on{color:#fb7185}
.favBtn:active{transform:scale(.88)}
/* ---- sheet Pain Map: titlul coboara stanga-jos, textele incep mai jos ---- */
.zoShHero.pmS{height:46vh; -webkit-mask-image:none; mask-image:none}
.zoShHero.pmS::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,10,30,0) 48%, rgba(12,10,30,.5) 70%, rgba(12,10,30,.9) 90%, #0c0a1e 100%)}
.zoShHead.pmS{top:auto; bottom:4px; padding:0 22px; text-align:left; z-index:3}
.zoSheet .zoShHead.pmS h3{text-align:left; font-size:36px; line-height:1.1; margin:0 0 5px}
.zoSheet .zoShHead.pmS .val{text-align:left; font-size:13.5px; letter-spacing:.12em; margin-bottom:4px}
.zoShBody.pmS{padding-top:18px; padding-bottom:calc(128px + env(safe-area-inset-bottom))}
/* ---- Pain Map: text mai mare sub ilustratii ---- */
#s-painmap .zoTapHint{font-size:14.5px; opacity:.75; margin-top:12px; line-height:1.5}
#s-painmap .pmDisc{font-size:14.5px; opacity:.62; margin-top:12px}

/* CONSISTENTA TIPOGRAFICA: pana acum nu exista nicio regula globala pentru <p>,
   deci fiecare paragraf isi lua marimea fie din stilul inline, fie prin mostenire
   de la body. De aici cele 15 marimi diferite de la o unealta la alta.
   Regula asta da o singura baza; stilurile inline ramase (etichete si citate mari)
   o depasesc in continuare, ceea ce e intentionat. */
p{font-size:14.5px; font-weight:400; line-height:1.72; font-family:'Sora',sans-serif;
  text-wrap:pretty; hyphens:none; -webkit-hyphens:none}
/* aer intre paragrafele consecutive, ca ideile mari sa se citeasca separat */
.paraOut+.paraOut{margin-top:13px}

/* ===== PALETA DE CATEGORIE =====
   Fiecare unealta imprumuta culorile categoriei ei. --catA e accentul tare
   (butoane, borduri), --catB varianta deschisa pentru text pe fundal inchis,
   --catC tonul adanc pentru fundaluri si gradiente. Se schimba o data, in go(). */
body[data-cat="mind"]{--catA:#7dd3fc; --catB:#bae6fd; --catC:#164e63; --hl:#bae6fd;
  background:radial-gradient(ellipse 120% 70% at 50% -10%, #0e2a3a 0%, #0a1a24 45%, #06121a 100%); --green:var(--catA); --green-soft:var(--catB); --crown:var(--catA); --crown-soft:var(--catB)}
body[data-cat="body"]{--catA:#34d399; --catB:#6ee7b7; --catC:#14532d; --hl:#6ee7b7;
  background:radial-gradient(ellipse 120% 70% at 50% -10%, #12352a 0%, #0c2119 45%, #071410 100%); --green:var(--catA); --green-soft:var(--catB); --crown:var(--catA); --crown-soft:var(--catB)}
body[data-cat="soul"]{--catA:#8b5cf6; --catB:#c4b5fd; --catC:#2e1065; --hl:#c4b5fd;
  background:radial-gradient(ellipse 120% 70% at 50% -10%, #241a45 0%, #16102b 45%, #0c0918 100%); --green:var(--catA); --green-soft:var(--catB); --crown:var(--catA); --crown-soft:var(--catB)}
body:not([data-cat]),body[data-cat=""]{--catA:#c4b5fd; --catB:#ddd6fe; --catC:#3b0764; --green:var(--catA); --green-soft:var(--catB); --crown:var(--catA); --crown-soft:var(--catB)}
#s-medit .hero h1 em{ color:var(--catA); font-weight:600; font-style:italic; }

/* campurile de scris 369 */
.mfFRow{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.06)}
.mfFRow:last-child{border-bottom:none}
.mfFNum{flex:0 0 20px; font-size:11px; opacity:.45; text-align:right; font-variant-numeric:tabular-nums}
.mfFIn{flex:1; background:none; border:none; outline:none; color:inherit; font-family:inherit;
  font-size:14px; padding:4px 0; border-bottom:1px dashed rgba(255,255,255,.18)}
.mfFIn:focus{border-bottom-color:var(--catB)}
.mfFRow.done .mfFTxt{flex:1; font-size:14px; line-height:1.5; color:color-mix(in srgb, var(--catB) 72%, white)}
.mfFBar{height:5px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; margin-top:10px}
.mfFBar>div{height:100%; border-radius:99px; background:linear-gradient(90deg, var(--catA), var(--catB)); transition:width .45s ease}
.mfOthers{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px}
.mfMini{padding:11px 12px; display:flex; flex-direction:column; gap:4px; font-size:11.5px; opacity:.85}
.mfMini b{font-size:15px}
.mfMini.full{border-color:color-mix(in srgb, var(--catB) 45%, transparent)}
.mfMiniRem{padding:7px 0; font-size:10.5px; border-radius:10px; opacity:.6}
.mfMiniRem.on{opacity:1; color:var(--catB); border-color:color-mix(in srgb, var(--catB) 45%, transparent)}
.mfMasonry{columns:2; column-gap:8px}
.mfMasonry .mfCell{break-inside:avoid; margin-bottom:8px; aspect-ratio:auto}
.mfCell img{width:100%; display:block; filter:saturate(.92) contrast(.99)}
.mfVeil{position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(167,139,250,.22), rgba(76,29,149,.38));
  mix-blend-mode:soft-light}
.mfCell::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:rgba(139,92,246,.14)}
.mfBell{flex:0 0 46px; width:46px; height:46px; border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center; opacity:.6; align-self:center}
.mfBell.on{opacity:1; color:var(--catB); border-color:color-mix(in srgb, var(--catB) 45%, transparent)}
.mfLockDone{flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  background:none; border:1px solid color-mix(in srgb, var(--catB) 45%, transparent); color:var(--catB); cursor:default}
.mfGrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px}
.mfCell{position:relative; border-radius:14px; background-color:rgba(255,255,255,.05); overflow:hidden}
.mfCell::after{content:""; position:absolute; inset:0;
  background:color-mix(in srgb, var(--catA) 16%, transparent);
  mix-blend-mode:soft-light; pointer-events:none}
.mfCell .mfDel{position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:50%;
  border:none; background:rgba(8,7,18,.55); color:rgba(255,255,255,.8); font-size:11px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2}
.mfAdd{border-radius:14px; border:1.5px dashed rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; font-size:26px; color:rgba(255,255,255,.45); cursor:pointer}
.mfAddCell{aspect-ratio:1/1; break-inside:avoid; margin-bottom:8px}
.mfAddWide{width:100%; height:110px}
#s-revel h1 em{color:var(--catA); font-style:italic}
.anLogRow{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:11px 14px; margin-top:8px; cursor:pointer; text-align:left}
.anLogRow.open{border-color:color-mix(in srgb, var(--catA) 45%, transparent)}
.anLogHead{display:flex; align-items:center; gap:10px}
.anLogHead b{flex:1; font-size:15px; font-variant-numeric:tabular-nums}
.anLogHead span{font-size:12px}
.anLogBody{margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); animation:anLogIn .32s ease; cursor:default}
.anLogBody p{font-size:13.5px; line-height:1.7; margin:0 0 8px}
.anLogBody .anLogG{color:var(--crown-soft); margin-bottom:0}
@keyframes anLogIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.hsIntent{margin:0 0 12px}
.hsIntent textarea{width:100%; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:11px 14px; color:rgba(255,255,255,.55); font-family:inherit;
  font-size:13.5px; line-height:1.6; resize:none; outline:none; overflow:hidden; transition:border-color .25s ease}
.hsIntent textarea::placeholder{color:rgba(255,255,255,.38)}
.hsIntent textarea:focus{border-color:color-mix(in srgb, var(--catB) 45%, transparent)}
.hsIntent textarea.filled{font-family:Georgia,'Noto Serif','Times New Roman',serif; font-style:italic;
  font-size:15px; color:rgba(255,255,255,.92)}
/* ---- Componenta Carousel refolosibila ---- */
.hsCar{position:relative}
.hsCarTrack{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.hsCarTrack::-webkit-scrollbar{display:none}
.hsCarCard{flex:0 0 100%; min-width:100%; scroll-snap-align:center; box-sizing:border-box; padding:2px 3px}
.hsCarCard .psSec{margin:0; height:100%; box-sizing:border-box}
.hsCarNav{display:flex; align-items:center; justify-content:center; gap:13px; margin-top:11px}
.hsCarDots{display:flex; gap:6px}
.hsCarDots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.22); transition:all .25s ease}
.hsCarDots i.on{background:var(--catA,#a78bfa); transform:scale(1.3)}
.hsCarArrow{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:none; color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0}
.hsCarArrow:disabled{opacity:.28}
.hsCarCnt{font-size:11px; opacity:.55; font-variant-numeric:tabular-nums; min-width:34px; text-align:center}
/* ---- Streak cosmic pe home ---- */
#hsStreakRow{display:flex; align-items:center; gap:11px; margin:12px -6px 4px; padding:0; min-height:20px;
  background:none; border-radius:0; color:#1b1730;
  border-style:solid; border-color:transparent; border-width:24px 28px;
  border-image-source:var(--fvCard); border-image-slice:70 fill; border-image-repeat:stretch; border-image-width:1}
#hsStreakRow .fl{flex-shrink:0; display:flex}
#hsStreakRow .st{flex:1; min-width:0}
#hsStreakRow .st b{font-size:13px; display:block}
#hsStreakRow .st .bar{height:4px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; margin-top:6px}