:root{
  --heroFade:.5;
  --night:#0b0a16; --deep:#12102a; --card:rgba(255,255,255,.05);
  --lav:#ddd7f2; --white:#f9f7ff;
  --gold:#f5c76a; --gold-soft:#f8dda0;
  --green:#34d399; --green-soft:#b8f7dc;
  --crown:#a78bfa; --crown-soft:#ddd2ff;
  --third:#6366f1; --throat:#38bdf8; --solar:#facc15; --sacral:#fb923c; --root:#ef4444;
  /* FELT: o singura culoare plata plus o textura fina de fibra, in loc de cerul mare */
  --felt:#262437;
  --feltTex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)' opacity='0.16'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:'Sora',sans-serif; color:var(--lav);
  background:#0a0912;
  min-height:100vh; display:flex; justify-content:center; transition:background 1s;
}
body.tGreen{--felt:#2e4f39} body.tRed{--felt:#4a2724} body.tYel{--felt:#4a3f1f}
body.tInd{--felt:#2e3450} body.tPnk{--felt:#4a2440} body.tMag{--felt:#442e4f}
body.tOrg{--felt:#4a2c18} body.tCyn{--felt:#1e3a4a}
.phone{width:100%; max-width:430px; min-height:100vh; padding:22px 22px calc(168px + env(safe-area-inset-bottom, 0px));
  position:relative; z-index:1; overflow-x:clip;
  background-color:var(--felt); background-image:var(--feltTex); background-repeat:repeat;
  transition:background-color .6s ease}
@media (min-width:470px){.phone{box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 30px 80px -30px #000}}
.stars{display:none}
.starsOld{position:fixed; inset:0; pointer-events:none; z-index:1}
.star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.34; animation:tw 4s ease-in-out infinite}
.star.dim{opacity:.13; width:1.5px; height:1.5px; animation:none}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.6}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
/* Fundalul mare cosmic, scos in 364. Ramane doar culoarea de fetru pe container. */
.heroBg{display:none; position:fixed; top:0; left:50%; transform:translateX(-50%) scale(var(--hz,1)); transform-origin:center 30%; width:min(100vw,430px); height:64vh; z-index:0; pointer-events:none;
  background-size:cover; background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,var(--heroFade)) 0%, rgba(0,0,0,calc(var(--heroFade)*.6)) 45%, transparent 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,var(--heroFade)) 0%, rgba(0,0,0,calc(var(--heroFade)*.6)) 45%, transparent 100%)}
.screen{display:none; animation:reveal 1.2s cubic-bezier(.22,.7,.3,1) both; position:relative; z-index:2}
/* ===== TRANZITIA UNICA A APLICATIEI =====
   Orice schimbare de continut (ecran, tab, listă) trece prin acelasi blur scurt.
   `fxSwap(fn)` estompeaza, ruleaza schimbarea la mijloc, apoi limpezeste. */
.fxBlur{transition:opacity .2s cubic-bezier(.4,0,1,1), filter .2s cubic-bezier(.4,0,1,1)}
.fxBlur.out{opacity:0; filter:blur(10px)}
/* intrarea foloseste EXACT animatia `reveal` a ecranelor, ca senzatia sa fie aceeasi
   indiferent daca schimbi ecranul sau doar tabul */
.fxIn{animation:reveal 1.2s cubic-bezier(.22,.7,.3,1) both}
.screen.on{display:block}
/* [stated] fara efect de zoom la intrare: raman doar estomparea si urcarea */
@keyframes reveal{from{opacity:0; filter:blur(10px); transform:translateY(6px)}to{opacity:1; filter:blur(0); transform:none}}
header{display:flex; justify-content:space-between; align-items:center; gap:10px; position:sticky; top:var(--muH,0px); z-index:60;
  margin:-22px -22px 0; padding:14px 22px 16px;
  background:linear-gradient(180deg, rgba(11,10,32,.5) 0%, rgba(11,10,32,.34) 45%, rgba(11,10,32,.12) 78%, rgba(11,10,32,0) 100%);
  backdrop-filter:blur(11px); -webkit-backdrop-filter:blur(11px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%)}
.brand{font-family:'Cormorant Garamond',serif; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--white); opacity:.96; white-space:nowrap; text-shadow:0 1px 10px rgba(0,0,0,.5)}
.langSw{display:flex; gap:6px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:5px; width:fit-content; margin:10px auto 0}
.langSw button{background:none; border:none; color:var(--lav); font-family:'Sora'; font-weight:600; font-size:13px; padding:9px 22px; border-radius:999px; cursor:pointer; transition:background .25s}
.langSw button.on{background:var(--catA); color:#1c1204}
.prLabel{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); text-align:center; margin-top:26px}
.statNum{position:relative; font-family:'Cormorant Garamond',serif; font-size:32px; color:#fff; padding-right:18px; text-shadow:0 0 14px rgba(0,0,0,.6)}
.lvlPill{display:inline-block; border:1px solid currentColor; border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:600; letter-spacing:.04em}
.lvlBar{height:8px; border-radius:999px; background:rgba(255,255,255,.14); margin-top:9px; overflow:hidden}
.lvlFill{height:100%; border-radius:999px; background:currentColor; transition:width .6s ease}
.stCat{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); margin:24px 0 10px; text-align:center}
.dIcon{padding:12px 14px; display:flex; align-items:center}
h1{font-family:Georgia,'Noto Serif','Times New Roman',serif; font-weight:600; font-size:32px; color:var(--white); line-height:1.2}
h1,h2,h3,.greet,.greetHub,.blessing,.numTitle,.lpName,.sub,.verse{text-wrap:balance; hyphens:none; -webkit-hyphens:none}
h1 em{font-style:italic}
.sub{font-size:14.5px; font-weight:400; margin-top:11px; line-height:1.72; opacity:.96; font-family:'Sora',sans-serif}
.hero{text-align:center; margin-top:5vh; padding:0 4px}
.hero h1{font-size:27px; line-height:1.15; margin:0}
.hero .sub{font-size:14.5px; margin-top:7px; line-height:1.5}
.cta{width:100%; margin-top:16px; padding:16px; border:none; border-radius:999px; cursor:pointer;
  color:#1c1204; font-family:'Sora'; font-weight:600; font-size:15px; transition:transform .2s}
.cta:active{transform:scale(.97)}
.ghost{background:rgba(10,8,22,.3); border:1px solid rgba(255,255,255,.35); color:var(--white); border-radius:999px; padding:13px 18px; font-family:'Sora'; font-size:13.5px; cursor:pointer}
/* themes */
.tG .cta{background:linear-gradient(135deg,var(--catA),var(--catA)); box-shadow:0 0 24px color-mix(in srgb, var(--catA) 35%, transparent)}
.tG h1 em{color:var(--catA)}
.tK .cta{background:linear-gradient(135deg,var(--catA),var(--catA)); color:#160e2e; box-shadow:0 0 24px color-mix(in srgb, var(--catA) 40%, transparent)}
.tK h1 em{color:var(--catA)}
.tV .cta{background:linear-gradient(135deg,var(--catA),var(--catA)); color:#04140c; box-shadow:0 0 24px color-mix(in srgb, var(--catA) 30%, transparent)}
.tV h1 em{color:var(--catA)}
.tR .cta{background:linear-gradient(135deg,#ef6a5a,#c0392b); color:#2a0a06; box-shadow:0 0 24px rgba(239,68,68,.35)}
.tR h1 em{color:var(--catA)}
/* letter materialize */
.vch{opacity:0; filter:blur(7px); display:inline-block; animation:mat .9s ease forwards}
.vw{display:inline-block; white-space:nowrap}
@keyframes mat{to{opacity:1; filter:blur(0)}}
/* fields */
.field{margin-bottom:13px; text-align:left}
.field label{display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.96; margin-bottom:6px; color:var(--gold-soft)}
.field input{width:100%; background:var(--card); border:1px solid rgba(255,255,255,.2); border-radius:15px;
  color:var(--white); font-family:'Sora'; font-weight:500; font-size:16px; text-align:center; padding:13px 15px; outline:none;
  backdrop-filter:blur(8px); color-scheme:dark; transition:border .3s}
.field input:focus{border-color:var(--gold)}
.field input::placeholder{color:rgba(221,215,242,.4); transition:opacity .2s}
.field input:focus::placeholder{opacity:0}
.hint{font-size:14.5px; opacity:.7; margin-top:5px; font-weight:400}
body, .screen, .bigCard, .ladder, .allItem, .tool, p, b, span, div{overflow-wrap:break-word; hyphens:none}
.deBal, #deBody p, #deBody b, .yOpt{text-wrap:balance}
.screen{box-sizing:border-box}
.cityWrap{position:relative}
.cityDrop{position:absolute; left:0; right:0; top:100%; margin-top:6px; z-index:30; background:rgba(14,12,30,.97); border:1px solid rgba(255,255,255,.16); border-radius:14px; overflow:hidden; backdrop-filter:blur(10px); box-shadow:0 12px 34px rgba(0,0,0,.5); display:none}
.cityDrop.on{display:block}
.cityDrop div{padding:10px 13px; font-size:12.5px; font-weight:300; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.07)}
.cityDrop div:last-child{border-bottom:none}
.cityDrop div:active{background:rgba(255,255,255,.08)}
.cityDrop b{font-weight:600}
.cityOk{color:var(--catB); opacity:.95}
@keyframes lpBeat{0%,86%,100%{transform:scale(1); box-shadow:0 0 0 rgba(245,199,106,0)}90%{transform:scale(1.045); box-shadow:0 0 16px rgba(245,199,106,.34)}94%{transform:scale(1.012); box-shadow:0 0 7px rgba(245,199,106,.14)}}
.lpChip{animation:lpBeat 5s ease-in-out infinite}
.lpChip:active{transform:scale(.95)}
.lpChip::after{content:'';width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:.8;margin-left:1px}
/* HUB */
.greetHub{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:26px; color:var(--white); text-align:center; margin-top:5vh; text-shadow:0 1px 12px rgba(0,0,0,.55)}
.gname{color:var(--gold); font-weight:600; font-style:normal}
.lpChip{display:flex; align-items:center; gap:7px; width:fit-content; margin:16px auto 0; font-size:14px; font-weight:600; letter-spacing:.06em; border:1.5px solid var(--catA); color:var(--catB); border-radius:999px; padding:9px 18px; cursor:pointer; user-select:none; background:color-mix(in srgb, var(--catA) 12%, transparent); box-shadow:0 0 18px -6px var(--catA); transition:transform .18s ease, background .25s ease}
.verse{margin:16px auto 0; max-width:330px; text-align:center; font-size:13.5px; font-weight:300; line-height:1.75; color:var(--white); text-shadow:0 1px 8px rgba(0,0,0,.5)}
.verse .vTitle{font-family:'Fraunces','Cormorant Garamond',serif; font-size:21px; font-weight:600; color:#fde68a; letter-spacing:.4px; margin-bottom:6px; text-shadow:0 0 20px rgba(250,204,21,.28)}
.verse{padding-bottom:22px !important; margin-bottom:0 !important}
.vMark{color:var(--gold); font-family:'Cormorant Garamond',serif; font-size:20px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; margin-top:22px}
.hubSec{grid-column:1/-1; margin:16px 0 -2px; display:flex; align-items:center; gap:10px; cursor:pointer;
  user-select:none; -webkit-tap-highlight-color:transparent}
.hubSec:first-child{margin-top:2px}
.hubSec b{font-family:'Fraunces','Cormorant Garamond',serif; font-size:21px; font-weight:600; color:#fde68a;
  letter-spacing:.4px; text-shadow:0 0 20px rgba(250,204,21,.28)}
.hubSec i{flex:1; height:1px; background:linear-gradient(90deg, rgba(253,230,138,.32), rgba(253,230,138,0))}
.catBar{display:flex; gap:8px; margin:2px 0 4px}
/* Carusel: fereastra fixa, banda care gliseaza, slide-uri de latimea ferestrei.
   Banda NU primeste width; slide-urile cu min-width:100% ies in afara, iar
   translateX in pixeli cade exact pe fiecare. */
/* Fereastra ocupa toata latimea, ca vecinii sa se vada la margini. Slide-ul e
   cardul plus spatiul dintre carduri, iar centrarea o face JS-ul cu un decalaj,
   nu CSS-ul, fiindca banda se deplaseaza cu PASUL slide-ului, nu cu latimea ferestrei. */
.csView{--cw:min(297px,79%); --gap:10px; position:relative; width:100%; margin:8px auto 0;
  overflow:hidden; touch-action:pan-y; cursor:grab}
.csView:active{cursor:grabbing}
.csTrack{display:flex; will-change:transform}
/* padding pe slide, nu margine pe card: latimea slide-ului ramane exact cat
   fereastra, deci pasul glisarii nu se schimba, iar intre carduri raman 10px */
.csSlide{min-width:calc(var(--cw) + var(--gap)); padding:0 calc(var(--gap)/2); display:flex}
/* doar cardul din fata poarta text; vecinii se vad ca simple carduri */
.csSlide .csQ, .csSlide .csHint{transition:opacity .28s ease}
.csSlide:not(.on) .csQ, .csSlide:not(.on) .csHint{opacity:0}
.csSlide .csCard.play{position:relative; inset:auto; width:100%; aspect-ratio:5/7; margin:0; min-height:0;
  padding:66px 26px 58px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background-size:cover; background-position:center;
  border:1px solid color-mix(in srgb, var(--cc, var(--catA)) 50%, transparent);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7)}
.csSlide .csCard.play::before{content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--cc, var(--catA)) 20%, #17132c) 0%,
    color-mix(in srgb, var(--cc, var(--catA)) 8%, #100d20) 100%);
  opacity:.86}
.csSlide .csCard.play>*{position:relative; z-index:1}
.csCard.play>.csIco,.csCard.play>.csCatN,.csCard.play>.csHint{position:absolute; z-index:1}
.csCard.play .csQ{font-size:21px; line-height:1.5}
.csCard.play .csIco{position:absolute; top:24px; left:0; right:0; display:flex; justify-content:center; color:var(--cc, var(--catA)); opacity:.92}
.csCard.play .csCatN{position:absolute; bottom:22px; left:20px; right:20px; text-align:center; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--cc, var(--catA)) 75%, #fff); opacity:.8}
.csHint{position:absolute; left:0; right:0; bottom:46px; display:flex; flex-direction:column; align-items:center;
  gap:7px; pointer-events:none; transition:opacity .6s ease}
.csHint.gone{opacity:0}
.csHint i{font-style:normal; font-size:11.5px; opacity:.55; letter-spacing:.04em}
.csFinger{width:19px; height:26px; border:1.6px solid var(--catA); border-radius:11px 11px 9px 9px;
  position:relative; opacity:.85; animation:csSwipeHand 2.4s ease-in-out infinite}
.csFinger::before{content:''; position:absolute; top:-9px; left:50%; margin-left:-1px; width:2px; height:9px;
  background:var(--catA); border-radius:2px}
@keyframes csSwipeHand{
  0%,12%{transform:translateX(34px); opacity:0}
  22%{opacity:.9}
  62%{transform:translateX(-34px); opacity:.9}
  76%,100%{transform:translateX(-34px); opacity:0}
}
/* titluri clar mai mari decat paragrafele si pe culoarea categoriei; inainte
   erau la 12px, adica MAI MICI decat cele 14.5px ale textului */
/* Verde curat, literal, nu `var(--green)`: acela e redirectat pe culoarea
   categoriei si ar iesi verde-inchis pe Corp, unde traieste Harta Durerii. */
.pmMinBtn{background:linear-gradient(135deg,#34d399,#10b981); color:#04231a; font-weight:700;
  border:none; box-shadow:0 0 22px -4px rgba(52,211,153,.55)}
.pmMinBtn:active{transform:scale(.985)}
.rfSecH{display:block; font-size:17px; font-weight:600; color:var(--catB); line-height:1.3}
.rfCardT{display:block; font-size:17px; font-weight:600; color:var(--catB)}
.rfSecT{font-family:'Fraunces','Cormorant Garamond',serif; font-size:19px; font-weight:600;
  color:var(--catB); margin:26px 0 10px}










.rfSitBtn{width:100%; margin-top:14px; font-size:13px;
  border-color:color-mix(in srgb, var(--catA) 50%, transparent); color:var(--catB)}
.rfSit{margin-top:14px; text-align:center; padding:20px 17px}
/* acelasi font ca restul paragrafelor: serifa italica se citea greu pe blocuri lungi */
.rfSitM{font-family:'Sora',sans-serif; font-style:normal; font-weight:400; font-size:16px;
  color:var(--catB); margin:0; line-height:1.65; text-wrap:pretty}
.rfSit .qbsBar{margin-top:16px}
.rfSitT{font-size:12.5px; opacity:.6; margin:10px 0 0; letter-spacing:.05em}
/* buton de actiune, deci pe toata latimea ca restul */
.rfSitStop{width:100%; margin-top:16px}
.rfSitDone{font-size:30px; line-height:1; margin-bottom:8px; color:var(--catB)}
/* SABLONUL DE ISTORIC, o singura data pentru toata aplicatia */
/* meniul de card: trei puncte in coltul din dreapta sus, peste continut */
.dpSec, .dpMsg{position:relative}
.cmWrap{position:absolute; top:8px; right:8px; z-index:6}
.cmBtn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:32px; height:32px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(12,10,26,.5); backdrop-filter:blur(6px);
  color:var(--catB); -webkit-tap-highlight-color:transparent}
.cmBtn i{width:3px; height:3px; border-radius:50%; background:currentColor; display:block}
.cmBtn:active{background:color-mix(in srgb, var(--catA) 22%, transparent)}
.cmMenu{position:absolute; top:38px; right:0; min-width:172px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); background:rgba(16,13,32,.97); backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(0,0,0,.5); display:none; z-index:7}
.cmMenu.on{display:block}
.cmMenu button{display:block; width:100%; padding:12px 14px; background:none; border:0;
  border-bottom:1px solid rgba(255,255,255,.07); color:var(--catB); font-family:inherit;
  font-size:13.5px; text-align:left; cursor:pointer}
.cmMenu button:last-child{border-bottom:0}
.cmMenu button:active{background:color-mix(in srgb, var(--catA) 16%, transparent)}
/* titlul sectiunii lasa loc butonului */
.dpSec>b, .dpMsg>b{padding-right:40px}
.dpHead{text-align:center; margin-bottom:20px}
.dpNums{font-size:12px; letter-spacing:.22em; opacity:.5}
.dpArch{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700;
  font-size:30px; line-height:1.1; color:var(--catB); margin-top:5px}
.dpStat{margin:9px 0 0; opacity:.85}
.dpSec{background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 22%, transparent);
  border-radius:18px; padding:16px 17px; margin-bottom:11px}
.dpSec>b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--catA); margin-bottom:9px}
.dpSec p{margin:0}
.dpSec p+p{margin-top:9px}
#cmWhyBody p{margin:0}
#cmWhyBody p+p{margin-top:11px}
.dpLine{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700;
  font-size:19px; color:var(--catB); margin-top:11px}
.dpRow{display:flex; gap:10px; padding:8px 0; align-items:baseline}
.dpRow+.dpRow{border-top:1px solid rgba(255,255,255,.07)}
.dpRow b{flex:0 0 33%; font-size:13.5px; color:var(--catB); font-weight:600}
.dpRow span{flex:1; line-height:1.6}
.dpFlip{display:flex; align-items:center; gap:9px; padding:7px 0; font-size:14.5px}
.dpFlip+.dpFlip{border-top:1px solid rgba(255,255,255,.07)}
.dpFlip span{flex:1; color:var(--catB)}
.dpFlip i{opacity:.45; font-style:normal}
.dpFlip em{flex:1; font-style:normal; opacity:.78; text-align:right}
.dpTick{position:relative; padding:6px 0 6px 22px; font-size:14.5px; line-height:1.5}
.dpTick::before{content:'\2022'; position:absolute; left:4px; top:5px; color:rgba(255,255,255,.35); font-size:16px}
.dpTick.on::before{content:'\2713'; color:var(--catA); font-size:13px; top:7px}
.dpStage{padding:9px 0}
.dpStage+.dpStage{border-top:1px solid rgba(255,255,255,.07)}
.dpStage b{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--catA)}
.dpStage span{display:block; margin-top:4px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:17px; line-height:1.35}
.dpQ{display:flex; gap:11px; padding:9px 0; align-items:baseline}
.dpQ+.dpQ{border-top:1px solid rgba(255,255,255,.07)}
.dpQ i{font-style:normal; font-size:12px; color:var(--catA); flex:0 0 14px}
.dpQ span{flex:1; line-height:1.6}
.dpMsg{border-radius:18px; padding:16px 17px; margin-top:14px;
  border:1px solid color-mix(in srgb, var(--catA) 45%, transparent);
  background:color-mix(in srgb, var(--catA) 10%, transparent)}
.dpMsg>b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--catA); margin-bottom:9px}
.dpMsg p{margin:0}
.histT{font-family:'Fraunces','Cormorant Garamond',serif; font-size:19px; font-weight:600;
  color:var(--catB); margin:26px 0 10px}
.histDay{display:flex; align-items:baseline; gap:9px; margin:18px 0 7px}
.histDay b{font-family:'Fraunces','Cormorant Garamond',serif; font-size:16px; color:var(--catB)}
.histDay i{font-style:normal; font-size:11.5px; opacity:.5}
.histItem{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); border-radius:14px;
  padding:12px 14px; margin-bottom:8px; cursor:pointer; transition:border-color .25s, background .25s}
.histItem.on{border-color:color-mix(in srgb, var(--catA) 45%, transparent);
  background:color-mix(in srgb, var(--catA) 7%, transparent)}
.histHead{display:flex; align-items:center; gap:9px}
.histHead span{flex:1; min-width:0; font-size:14.5px; line-height:1.45;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.histHead i{font-style:normal; font-size:11.5px; opacity:.5; flex:0 0 auto; white-space:nowrap}
.histHead svg{opacity:.5; flex:0 0 auto; transition:transform .25s}
.histItem.on .histHead svg{transform:rotate(180deg)}
.histBody{margin-top:11px; padding-top:11px; border-top:1px solid rgba(255,255,255,.09)}
.histBody b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--catA); margin-bottom:5px}
.histBody p{margin:0; line-height:1.65}

.dciRow{padding:9px 0}
.dciRow+.dciRow{border-top:1px solid rgba(255,255,255,.06)}
.dciTop{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px}
.dciTop span{font-size:14.5px; font-weight:400}
.dciTop b{font-size:17px; color:var(--catB); font-variant-numeric:tabular-nums; min-width:22px; text-align:right}
.dciSl,.mtDciSl{-webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:99px; outline:none;
  background:linear-gradient(90deg, color-mix(in srgb, var(--catA) 45%, transparent), rgba(255,255,255,.12))}
.dciSl::-webkit-slider-thumb,.mtDciSl::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--catA); border:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--catA) 22%, transparent); cursor:pointer}
.dciSl::-moz-range-thumb,.mtDciSl::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--catA);
  border:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--catA) 22%, transparent); cursor:pointer}
.dciSlW{position:relative; margin:12px 0 26px}
.dciSlW input{display:block}
.dciBub{position:absolute; top:13px; left:8px; transform:translateX(-50%); font-size:11.5px; color:var(--catB); font-variant-numeric:tabular-nums; pointer-events:none}
.dciHead{display:flex; align-items:center; gap:8px; margin:14px 0 4px; opacity:.55; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase}
.dciHead span{flex:1}
.dciHead b,.dciHead i{min-width:52px; text-align:right; font-style:normal; font-weight:400; white-space:nowrap}
.dciLine{display:flex; align-items:center; gap:8px; padding:7px 0; font-size:14.5px}
.dciLine+.dciLine{border-top:1px solid rgba(255,255,255,.06)}
.dciLine span{flex:1}
.dciLine b{width:52px; text-align:right; color:var(--catB); font-variant-numeric:tabular-nums}
.dciLine i{width:52px; text-align:right; font-style:normal; opacity:.6; font-variant-numeric:tabular-nums}
.dciIdea{margin-top:10px; padding:11px 13px; border-radius:14px;
  background:color-mix(in srgb, var(--catA) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--catA) 32%, transparent)}
.dciIdea b{display:block; color:var(--catB); font-size:13.5px; margin-bottom:3px}
.dciIdea span{font-size:14.5px}
/* ---- meniul cu trei puncte din coltul fiecarei unelte ---- */
.tmHost{position:absolute; top:0; right:0; z-index:5}
.tool .tmBtn{top:8px; right:8px; width:30px; height:30px; background:rgba(10,9,22,.42)}
.tool .tmMenu{top:42px; right:8px; min-width:158px}
.tmBtn{position:absolute; top:12px; right:12px; z-index:60; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); background:rgba(12,10,26,.55); backdrop-filter:blur(7px);
  color:var(--catB); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:3px;
  padding:0; -webkit-tap-highlight-color:transparent}
.tmBtn i{width:3px; height:3px; border-radius:50%; background:currentColor; display:block}
.tmMenu{position:absolute; top:52px; right:12px; z-index:61; min-width:172px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); background:rgba(16,13,32,.96); backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
.tmMenu button{display:flex; align-items:center; gap:9px; width:100%; padding:12px 14px; background:none;
  border:0; border-bottom:1px solid rgba(255,255,255,.07); color:inherit; font-family:inherit; font-size:14px;
  text-align:left; cursor:pointer}
.tmMenu button:last-child{border-bottom:0}
/* optiunile din randul prins sus, in flux, nu ca dropdown */
.tmInline{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.tmInline button{flex:1 1 auto; min-width:104px; padding:9px 12px; border-radius:11px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--catA) 45%, transparent);
  background:color-mix(in srgb, var(--catA) 14%, transparent); color:inherit; font-family:inherit; text-align:center}
.tmInline button b{color:var(--catB); font-weight:600; font-size:13.5px}
.tmMenu button b{color:var(--catB); font-weight:600; font-size:14px}
/* ---- foaia de Info, pe tot ecranul ---- */
.tiOv{position:fixed; inset:0; z-index:400; background:rgba(8,7,18,.72); backdrop-filter:blur(6px);
  display:none; opacity:0; transition:opacity .22s ease}
.tiOv.on{display:block; opacity:1}
.tiSheet{position:absolute; inset:auto 0 0 0; margin:0 auto; width:calc(100% - 44px); max-width:386px; max-height:92vh; overflow-y:auto; border-radius:26px 26px 0 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--catC) 92%, transparent), #0b0a16 60%);
  border-top:1px solid color-mix(in srgb, var(--catA) 45%, transparent); padding:20px 20px 34px;
  transform:translateY(22px); transition:transform .3s cubic-bezier(.22,.7,.3,1)}
.tiOv.on .tiSheet{transform:translateY(0)}
.tiGrip{width:42px; height:4px; border-radius:99px; background:rgba(255,255,255,.22); margin:0 auto 16px}
.tiH{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700; font-size:27px;
  line-height:1.15; color:var(--catB)}
.tiLbl{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--catA);
  font-weight:600; margin:22px 0 8px}
.tiSheet ul{list-style:none; padding:0; margin:0}
.tiSheet li{position:relative; padding-left:18px; margin-bottom:9px; font-size:14.5px; line-height:1.6}
.tiSheet li:before{content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%;
  background:var(--catA)}
.tiClose{width:100%; margin-top:26px; padding:13px; border-radius:99px; font-family:inherit; font-size:14px;
  font-weight:600; cursor:pointer; color:#0b0a16; border:0;
  background:linear-gradient(135deg, var(--catB), var(--catA))}
/* ---- unealta prinsa in capul paginii ---- */
.pinRow{position:relative; margin:12px 0 4px; border-radius:18px; overflow:hidden; cursor:pointer;
  min-height:76px; display:flex; align-items:stretch; background-size:cover; background-position:center 30%;
  border:1px solid color-mix(in srgb, var(--catA) 40%, transparent)}
.pinRow .pOv{position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,9,22,.88) 40%, rgba(10,9,22,.35))}
.pinRow .pIn{position:relative; padding:14px 16px; width:100%; align-self:center}
.pinRow .pT{font-size:15.5px; font-weight:600; color:var(--catB)}
.pinRow .pS{font-size:13px; opacity:.8; margin-top:2px}
.deepSep{display:flex; align-items:center; gap:12px; margin:30px 0 4px}
#pinSep,#pinSep+#pinBox+.deepSep{margin:22px 0 8px}
.deepSep i{flex:1; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--cat) 45%, transparent), transparent)}
.deepSep b{font-family:'Playfair Display','Fraunces',serif; font-size:16px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  text-transform:uppercase; color:var(--cat); white-space:nowrap; transition:color .45s ease}
/* cardul de resurse printabile urmeaza culoarea categoriei alese */
.prCard{margin-top:16px; border-radius:18px; padding:16px 17px; cursor:pointer;
  background:color-mix(in srgb, var(--cat) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--cat) 42%, transparent);
  transition:background .45s ease, border-color .45s ease}
.prCard b{font-size:15px; color:var(--cat); transition:color .45s ease}
.cTab{flex:1; padding:10px 6px; border-radius:999px;
  font-family:'Playfair Display',Georgia,serif; font-size:15px; font-weight:600;
  color:rgba(240,236,255,.62); background:rgba(255,255,255,.05);
  border:1px solid rgba(240,236,255,.20);
  cursor:pointer; transition:all .28s ease; -webkit-tap-highlight-color:transparent}
.cTab.on{background:#F4EFE2; border-color:transparent; color:#171327;
  box-shadow:0 0 22px -4px rgba(226,192,121,.7)}
#fvSky{display:none; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
  background-size:cover; background-position:top center;
  transition:opacity .5s ease, background-image .3s ease}
#fvSky.on{opacity:.55}
/* Tot blocul hero urca cu 20% din inaltimea lui, iar marginea de jos negativa
   trage dupa el si restul paginii, ca sa nu ramana gol. */
#fvHero{position:relative; z-index:0; width:calc(100% + 96px); margin:-14px -48px -17.2% -48px;
  transform:translateY(-10%);
  aspect-ratio:4/5.45; background-size:auto 120%; background-position:center bottom;
  /* singura masca ramasa: doar baza, ca imaginea sa intre in fetru fara linie */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 84%,rgba(0,0,0,.62) 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 84%,rgba(0,0,0,.62) 92%,transparent 100%);
  transition:background-image .3s ease}
#fvHero.off{display:none}
/* Nicio masca si niciun val peste hero. Imaginea se vede curata, intreaga. */
#fvHero .fvHeroTxt{position:absolute; left:0; right:0; top:0; z-index:2;
  padding:0 40px; text-align:center}
#fvHero .verse .vLine{display:block; white-space:nowrap}
/* Mesajul zilei se asaza cuvant cu cuvant: fiecare cuvant iese din ceata,
   urca un pic si se limpezeste. Decalajul mic le leaga intr-o singura respiratie. */
#fvHero .verse .vch{animation:none; opacity:1; filter:none}
@keyframes vsWord{
  0%{opacity:0; filter:blur(12px); transform:translateY(9px) scale(.985); letter-spacing:.06em}
  60%{opacity:1; filter:blur(1.5px)}
  100%{opacity:1; filter:blur(0); transform:none; letter-spacing:0}
}
#fvHero .verse .vw2{display:inline-block; opacity:0; will-change:filter,transform;
  animation:vsWord 2.2s cubic-bezier(.17,.66,.22,1) both}
#fvHero .fvHeroTxt .greetHub{margin:0}
#fvHero .fvHeroTxt .verse{margin:0; padding:0 !important; font-family:'Playfair Display',serif;
  font-weight:700; color:#fff; font-size:var(--vSize,23px); line-height:1.36;
  letter-spacing:0; max-width:none}

/* ===== SALUTUL DE LA INTRARE =====
   Apare o singura data pe sesiune: 2s intra din blur, 3s sta, 2s iese in blur,
   apoi la secunda 7 apare mesajul zilei. La orice revenire pe home in aceeasi
   sesiune, salutul nu mai apare deloc si mesajul zilei e acolo din prima. */
@keyframes fvBlurIn{from{opacity:0; filter:blur(16px)} to{opacity:1; filter:blur(0)}}
@keyframes fvBlurOut{from{opacity:1; filter:blur(0)} to{opacity:0; filter:blur(16px)}}
#fvHero:not(.wlc) .greetHub, #fvHero.wlcDone .greetHub{display:none}
#fvHero.wlc .greetHub{animation:fvBlurIn 2s ease both, fvBlurOut 2s ease 5s both}
#fvHero.wlc:not(.wlcDone) .verse{display:none}
#fvHero.wlcDone .verse{opacity:1}
/* Cat timp popupul zilnic e pe ecran, mesajul zilei asteapta. Apare abia dupa Collect. */
#fvHero.hpHold .verse{display:none}
#s-hub .lpChip{width:100%; justify-content:center; margin:12px 0 0; padding:14px 18px; border-radius:18px}

/* ===== FELT UI: doua bannere din setul de fetru cusut =====
   Amandoua sunt puse ca border-image cu 9 felii, deci colturile si tivul auriu
   raman la marimea lor reala oricat s-ar intinde banda pe latime. */
:root{
  --fvCard:url(img/fv-card.webp);
  --fvFillMind:url(img/fv-fill-mind.webp);
  --fvFillBody:url(img/fv-fill-body.webp);
  --fvFillSoul:url(img/fv-fill-soul.webp);
  --fvPr:url(img/x-fv-pr.webp);
  --fvShop:url(img/x-fv-shop.webp);
  --fvCream:url(img/fv-cream.webp);
  --fvOut:url(img/fv-out.webp);
  --fvFill:var(--fvFillSoul);
  --fvFlame:url(img/fv-flame.webp);
  --fvPill:url(img/fv-pill.webp);
}
#hsStreakRow{display:none !important}
#hsStreakRow, #hsStreakRow *{color:#1b1730}
#hsStreakRow .st b{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:13.5px}
#hsStreakRow .nx{color:rgba(27,23,48,.58) !important; opacity:1}
#hsStreakRow .nx *{color:#1b1730 !important; font-weight:700}
#hsStreakRow .st .bar{background:rgba(27,23,48,.14)}
#hsStreakRow .fl svg{stroke:#1b1730; color:#1b1730}
/* Life Path, varianta D: pastila mica in culoarea zonei, centrata pe rand,
   ca sa nu mai aiba aceeasi greutate ca banda de streak de deasupra. */
#s-hub .lpChip{background:none !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important; margin:16px 0 0 !important;
  width:100% !important; min-height:20px; align-items:center; justify-content:center;
  color:#1b1730 !important;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:18px; letter-spacing:0;
  border-style:solid !important; border-color:transparent !important; border-width:22px 30px !important;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1}
#s-hub .lpChip::after{display:none}
#s-hub .lpChip{animation:none !important}
#s-hub .lpChip, #s-hub .lpChip *{color:#1b1730 !important; text-shadow:none}

/* pastila de fetru pe categorie, aleasa din data-cat de pe body */
body[data-cat="mind"]{--catFelt:#c3dcef; --fvFill:var(--fvFillMind)}
body[data-cat="body"]{--catFelt:#c8e2d4; --fvFill:var(--fvFillBody)}
body[data-cat="soul"]{--catFelt:#d5cef0; --fvFill:var(--fvFillSoul)}
.fvBtn, #s-hub .lpChip{white-space:nowrap}
.fvBtn{border-style:solid !important; border-color:transparent !important;
  border-width:22px 34px !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important; padding:0 !important;
  border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  font-family:'Playfair Display',Georgia,serif; font-weight:700;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:20px; cursor:pointer; -webkit-tap-highlight-color:transparent}
.fvBtn.fill{border-image-source:var(--fvFill); color:#1b1730}
.fvBtn.out{border-image-source:var(--fvOut); color:#efe9dc}
/* cele trei taburi Minte / Corp / Suflet */
.cTab{flex:1; border:0; background:none; padding:0; min-width:0}
.cTab, .cTab.on{border-style:solid !important; border-color:transparent !important;
  border-radius:0 !important; background:none !important; box-shadow:none !important; padding:0 !important;
  border-image-repeat:stretch; border-image-width:1;
  font-family:'Playfair Display',Georgia,serif; font-size:18px; font-weight:700;
  display:flex; align-items:center; justify-content:center; min-height:14px}
/* neselectat: cardul crem plin, aceeasi greutate ca activul, doar fara culoare */
.cTab{border-width:16px 21px !important; border-image-source:var(--fvCream); border-image-slice:64 fill;
  color:rgba(27,23,48,.55)}
.cTab.on{border-width:16px 21px !important; border-image-source:var(--fvFill); border-image-slice:64 fill;
  color:#1b1730}
/* butonul de ritual, sub imaginea hero */
/* Buton mic de fetru pentru a trimite mesajul zilei ca imagine */
/* Randul de sub mesaj: ritualul, mai ingust, si cele trei puncte alaturi. */
.ritRow{display:flex; align-items:center; gap:8px; margin:-10px 0 14px}
.ritRow #ritBtn{flex:1 1 auto; min-width:0; margin:0 !important}
/* Disc de fetru desenat special pentru butonul rotund, nu o pastila intinsa. */
.fvDots{flex:0 0 auto; width:72px; height:72px; align-self:center;
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:0; border:0; border-radius:50%; cursor:pointer;
  background-image:url(img/css-fv-dots.webp); background-size:100% 100%;
  background-repeat:no-repeat; background-position:center; background-color:transparent;
  -webkit-tap-highlight-color:transparent}
.fvDots span{width:6px; height:6px; border-radius:50%; background:rgba(27,23,48,.7); flex:0 0 auto}
.fvDots:active{transform:scale(.96)}
/* Foaia cu optiuni, din aceeasi lume de fetru */
#fvMore{position:fixed; inset:0; z-index:120; display:none; align-items:flex-end; justify-content:center;
  padding:18px; background:rgba(8,7,18,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s ease}
#fvMore.on{display:flex}
#fvMore.show{opacity:1}
#fvMore .fmCard{width:100%; max-width:390px; padding:4px 2px 2px; color:#1b1730;
  border-style:solid; border-color:transparent; border-width:36px 36px;
  border-image-source:var(--fvCard); border-image-slice:70 fill; border-image-repeat:stretch; border-image-width:1;
  transform:translateY(26px); opacity:0;
  transition:transform .45s cubic-bezier(.2,.8,.25,1), opacity .35s ease}
#fvMore.show .fmCard{transform:none; opacity:1}
#fvMore .fmRow{display:flex; align-items:center; justify-content:center; width:100%; cursor:pointer; white-space:nowrap;
  padding:0; background:none; border-style:solid; border-color:transparent; border-radius:0;
  border-width:19px 20px; min-height:16px; margin-bottom:9px;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:15px; color:#1b1730; text-align:center;
  -webkit-tap-highlight-color:transparent}
#fvMore .fmRow span{display:block; width:100%; text-align:center}
#fvMore .fmRow:active{transform:scale(.985)}

#fvMore .fmRow.busy{opacity:.55; pointer-events:none}
#fvMore .fmClose{display:block; margin:2px auto 0; padding:8px 10px; background:none; border:0; cursor:pointer;
  font-size:12.5px; color:rgba(27,23,48,.55)}
#ritBtn{width:100%; margin:-10px 0 14px; font-size:25px; line-height:1;
  border-width:26px 30px !important; min-height:14px; align-items:center}
/* ---- Streak varianta C: flacara de fetru + traseu segmentat pe saptamana ---- */
#hsStreakRow .fl{width:30px; height:34px; flex:0 0 auto;
  background-size:contain; background-repeat:no-repeat; background-position:center}
#hsStreakRow .fl.dim{filter:saturate(.15) opacity(.45)}
#hsStreakRow .st{flex:1; min-width:0}
#hsStreakRow .st b{display:block; font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:13px; margin-bottom:6px}
#hsStreakRow .seg{display:flex; gap:5px; min-width:0}
#hsStreakRow .seg i{flex:1; height:13px; border-radius:4px; background:rgba(27,23,48,.13);
  transform:scaleX(.2); transform-origin:left center; opacity:.35;
  transition:transform .42s cubic-bezier(.22,.7,.3,1), background .42s ease, opacity .42s ease}
#hsStreakRow.go .seg i{transform:scaleX(1); opacity:1}
#hsStreakRow.go .seg i.on{background:var(--catA,#34d399)}
#hsStreakRow .pts{font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:16px;
  color:#1b1730; flex:0 0 auto; opacity:0; transform:translateY(6px) scale(.9);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.7,.3,1)}
#hsStreakRow .hsX{flex:0 0 auto; width:26px; height:26px; margin-left:2px; border:0; padding:0;
  background:none; cursor:pointer; color:rgba(27,23,48,.5); display:none;
  align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent}
#hsStreakRow.go .hsX{display:flex}
#hsStreakRow .hsX:active{transform:scale(.9)}
#hsStreakRow.go .pts{opacity:1; transform:none}
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}
.llBig{display:block; margin-top:6px; font-family:'Fraunces','Cormorant Garamond',serif; font-size:30px; line-height:1.1; color:var(--catB)}
.llBars{display:flex; flex-direction:column; gap:9px}
.llBarH{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:4px; opacity:.8}
.llBar.top .llBarH{opacity:1; color:var(--catB)}
.llTrack{height:7px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden}
.llTrack i{display:block; height:100%; border-radius:99px; background:rgba(255,255,255,.28); transition:width .5s}
.llBar.top .llTrack i{background:linear-gradient(90deg,var(--catA),var(--catB))}
.llLh{margin:18px 0 8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--catB); opacity:.85}
.llUl{margin:0; padding:0; list-style:none}
.llUl li{position:relative; padding:0 0 0 16px; margin-bottom:7px; font-size:13.5px; line-height:1.55; opacity:.88}
.llUl li:before{content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--catA)}
.llShadow{margin:12px 0 0; padding:11px 13px; border-radius:13px; font-size:13px; line-height:1.55;
  border:1px solid rgba(251,146,60,.3); background:rgba(251,146,60,.08); color:#fdba74}
.llCmp{margin-top:12px; padding:15px; border-radius:16px; border:1px solid color-mix(in srgb, var(--catA) 40%, transparent);
  background:color-mix(in srgb, var(--catA) 8%, transparent)}
.llNote{margin:12px 0 0; font-size:12px; line-height:1.55; opacity:.62}
.htCard{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}
.htCard.open{border-color:var(--catA)}
.htCard.fin{border-color:rgba(250,204,21,.45)}
.htHead{display:flex; align-items:flex-start; gap:11px; cursor:pointer; margin-bottom:14px}
.htChev{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}
.htCard.open .htChev{transform:rotate(180deg)}
.htDraw{max-height:0; overflow:hidden; transition:max-height .38s ease}
.htDraw.open{max-height:1100px}
.htTop{padding:16px}
.htEditB{width:34px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  color:var(--catB); cursor:pointer; flex-shrink:0; font-family:inherit}
.htSlide{position:relative; margin-top:14px; height:60px; border-radius:16px; overflow:hidden;
  border:1px solid var(--catA); background:rgba(255,255,255,.04); display:flex; align-items:center;
  touch-action:pan-y; --p:0}
.htSlide::before{content:''; position:absolute; inset:0; width:calc(var(--p)*100%);
  background:color-mix(in srgb, var(--catA) 30%, transparent); transition:none}
.htSlideT{position:absolute; left:0; right:0; text-align:center; font-size:13.5px; opacity:.7; pointer-events:none}
.htKnob{position:relative; z-index:2; margin-left:4px; width:52px; height:52px; border-radius:13px;
  background:var(--catA); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:grab; touch-action:none; box-shadow:0 6px 18px rgba(0,0,0,.35)}
.htSlide.act .htKnob{cursor:grabbing}
.htDoneBox{display:flex; align-items:center; gap:12px; margin-top:14px; padding:14px 15px; border-radius:16px;
  border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.1)}
.htTickBig{width:34px; height:34px; border-radius:50%; background:#34d399; color:#0a0918;
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0}
.htDoneBox>div{flex:1}
.htUndoB{background:none; border:none; color:var(--white); opacity:.55; font-family:inherit;
  font-size:12.5px; cursor:pointer; text-decoration:underline; flex-shrink:0}
.htYest{width:100%; margin-top:10px; font-size:13px}
.htWarn{margin:10px 0 0; padding:10px 12px; border-radius:12px; font-size:12.5px;
  border:1px solid rgba(251,146,60,.35); background:rgba(251,146,60,.1); color:#fdba74}
.htWeek{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:14px}
.htDot{height:11px; border-radius:99px; background:rgba(255,255,255,.1); transition:all .3s}
.htDot.on{background:var(--catA)}
.htDot.now{background:rgba(255,255,255,.22); box-shadow:0 0 0 2px color-mix(in srgb, var(--catA) 45%, transparent)}
.htBar{position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.09); overflow:visible}
.htFill{position:absolute; left:0; top:0; bottom:0; border-radius:99px;
  background:linear-gradient(90deg, var(--catA), var(--catB)); transition:width .5s ease}
.htMark{position:absolute; top:-4px; width:2px; height:16px; border-radius:2px;
  background:rgba(255,255,255,.3); transform:translateX(-1px)}
.htMark.hit{background:var(--catB); box-shadow:0 0 8px var(--catB)}
.htBarL{display:flex; justify-content:space-between; margin-top:9px; font-size:12.5px; opacity:.7}
.bdStats{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px}
.bdStat{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:66px; padding:10px 8px; border-radius:14px; cursor:pointer; font-family:inherit;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  color:var(--white); transition:all .18s}
.bdStat.on{border-color:var(--catA); background:color-mix(in srgb, var(--catA) 18%, transparent)}
.bdStatN{font-family:'Fraunces','Cormorant Garamond',serif; font-variant-numeric:tabular-nums;
  font-size:26px; line-height:1; color:var(--catB)}
.bdStat.on .bdStatN{color:var(--catB)}
.bdStatL{font-size:11.5px; opacity:.7; text-align:center; line-height:1.25}
.bdGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.bdPill{width:100%; min-height:44px; display:flex; align-items:center; justify-content:center;
  text-align:center; border-radius:12px; padding:9px 10px; font-size:12px; font-family:inherit;
  line-height:1.3; cursor:pointer; transition:all .18s;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--white)}
.bdPill.on{border-color:var(--catA); background:color-mix(in srgb, var(--catA) 20%, transparent); color:var(--catB)}
.bdCard{background:var(--card); border:1px solid rgba(255,255,255,.1); border-radius:15px;
  padding:13px 14px; margin-bottom:9px; backdrop-filter:blur(8px); cursor:pointer;
  transition:transform .2s, opacity .25s, border-color .2s; touch-action:pan-y}
.bdCard:active{transform:scale(.99)}
.bdCard.bdDone{opacity:.5}
.bdCard.bdDone .bdTick{background:#34d399; border-color:#34d399; color:#0a0918}
.bdTick{width:22px; height:22px; border-radius:50%; border:1.5px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
  font-size:12px; cursor:pointer; transition:all .2s}
/* Sageata, aceeasi ca la restul sertarelor din app. Am inlocuit manerul de
   tragere: dragul se face oricum prin tinut apasat pe tot cardul, iar sageata
   spune ce face TAPUL, care e actiunea de zi cu zi. */
.bdChev{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; cursor:pointer;
  transition:transform .3s}
.bdCard.bdOpen .bdChev{transform:rotate(180deg)}
.bdDraw{max-height:0; overflow:hidden; transition:max-height .35s ease}
.bdDraw.open{max-height:900px}
.bdLift{z-index:6; box-shadow:0 18px 46px rgba(0,0,0,.62); opacity:.96; filter:brightness(1.06)}
.dragLift{z-index:6; box-shadow:0 18px 46px rgba(0,0,0,.62); opacity:.96;
  filter:brightness(1.06); cursor:grabbing}
.dragSlot{opacity:.5}
.tool.locked .ckName{color:rgba(255,255,255,.85); font-style:italic; text-transform:none; letter-spacing:.02em}
.tool .ov{position:absolute; inset:0; pointer-events:none; z-index:2;
  /* bizou subtil de fetru: lumina pe muchia de sus, umbra pe cea de jos */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(10,8,20,.28),
             inset 1px 0 0 rgba(255,255,255,.10), inset -1px 0 0 rgba(10,8,20,.14),
             inset 0 7px 12px -8px rgba(255,255,255,.20), inset 0 -9px 14px -10px rgba(10,8,20,.34)}
.tool.locked .fvArt{filter:saturate(.45); opacity:.7}
.tool .txt{position:relative; padding:13px 14px; width:100%}
.tool .tn{font-size:16px; color:#fff; line-height:1.25; font-weight:600; text-wrap:balance}
.tool .fvCap .tn{color:#1b1730; text-shadow:none}
.tool .ckName{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; margin-top:4px; color:rgba(255,255,255,1)}
.empty{text-align:center; font-size:13.5px; font-weight:300; opacity:.8; line-height:1.7; padding:10px}
/* onboarding / LP */
.lpNum{font-family:'Cormorant Garamond',serif; font-size:104px; color:var(--gold); line-height:1; text-shadow:0 0 30px rgba(245,199,106,.5); animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{text-shadow:0 0 22px rgba(245,199,106,.35)}50%{text-shadow:0 0 44px rgba(245,199,106,.6)}}
.lpName{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:24px; color:var(--white); margin-top:8px}
.bigCard{margin-top:18px; background:var(--card); border:1px solid rgba(255,255,255,.1); border-radius:22px;
  padding:22px; backdrop-filter:blur(10px); font-size:14px; line-height:1.75; font-weight:300; text-align:left; color:var(--white)}
.greet{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color:var(--gold-soft); text-align:center}
/* ANGEL */
.numInput{width:100%; height:96px; background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 30%, transparent); border-radius:20px;
  color:var(--crown-soft); font-family:'Cormorant Garamond',serif; font-size:50px; text-align:center;
  padding:0 16px 19px; outline:none; letter-spacing:.06em; text-indent:.06em; backdrop-filter:blur(8px)}
.numInput:focus{border-color:var(--crown); box-shadow:0 0 24px color-mix(in srgb, var(--catA) 35%, transparent)}
.numInput::placeholder{color:rgba(221,215,242,.35); font-size:44px; transition:opacity .2s}
.numInput:focus::placeholder{opacity:0}
.numpad{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px}
.numpad button{padding:15px 0; border-radius:16px; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:26px; line-height:1;
  background:color-mix(in srgb, var(--catA) 10%, transparent); border:1px solid color-mix(in srgb, var(--catA) 35%, transparent); color:var(--crown-soft);
  backdrop-filter:blur(6px); transition:background .15s, transform .1s}
.numpad button:active{background:color-mix(in srgb, var(--catA) 30%, transparent); transform:scale(.95)}
.numpad .npx{font-family:'Sora'; font-size:16px; color:var(--lav); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2)}
.quick{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.chip{background:rgba(10,8,22,.3); border:1px solid rgba(221,215,242,.3); color:var(--lav); border-radius:999px; padding:7px 14px; font-size:13px; cursor:pointer}
.bigNum{font-family:'Cormorant Garamond',serif; font-size:90px; color:var(--crown); line-height:1; text-align:center;
  text-shadow:0 0 30px color-mix(in srgb, var(--catA) 55%, transparent); animation:breathe 5s ease-in-out infinite}
.bigNum .dg{display:inline-block; opacity:0; filter:blur(14px); animation:mat 1s ease forwards}
.numTitle{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:21px; color:var(--white); text-align:center; margin-top:8px}
.forYou{margin-top:14px; padding:14px 16px; border-radius:16px; background:color-mix(in srgb, var(--catA) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--catA) 30%, transparent); font-size:14px; line-height:1.7; color:var(--white)}
.forYou b{color:var(--crown-soft)}
.guide{margin-top:14px; padding-top:14px; border-top:1px solid color-mix(in srgb, var(--catA) 22%, transparent); color:var(--crown-soft); font-size:13.5px; line-height:1.7}
.anMain{width:100%; margin-top:26px; padding:16px 20px; font-size:14px; border-color:color-mix(in srgb, var(--catA) 55%, transparent); color:var(--green-soft); box-shadow:0 0 22px color-mix(in srgb, var(--catA) 10%, transparent)}
@keyframes anLoadSlide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.anLoad{height:4px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin:14px 0 4px}
.anLoad i{display:block; height:100%; width:30%; border-radius:99px; background:linear-gradient(90deg,color-mix(in srgb, var(--catA) 1%, transparent),var(--catB),color-mix(in srgb, var(--catA) 1%, transparent)); animation:anLoadSlide 1.15s ease-in-out infinite}
.anIcons{display:flex; justify-content:center; gap:46px; margin-top:26px}
.anIcons button{background:none; border:none; padding:0; cursor:pointer; font-family:'Sora'; display:flex; flex-direction:column; align-items:center; gap:7px; color:rgba(255,255,255,.85)}
.anIcons .ic{width:55px; height:55px; border-radius:50%; border:1px solid color-mix(in srgb, var(--catA) 32%, transparent); background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--catA) 14%, transparent), rgba(255,255,255,.04)); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:background .35s ease, border-color .35s ease, box-shadow .35s ease}
.anIcons .ic img{width:60%; height:60%; object-fit:contain; display:block}
.anIcons button:active .ic{background:color-mix(in srgb, var(--catA) 24%, transparent); border-color:color-mix(in srgb, var(--catA) 60%, transparent); box-shadow:0 0 22px color-mix(in srgb, var(--catA) 32%, transparent)}
.anIcons .lb{font-size:11px; font-weight:300; opacity:.75; letter-spacing:.02em; line-height:1.3; text-align:center}
/* GRILA, nu flex: cu `flex:1 1 0` cele doua butoane tot ieseau 180 si 186, fiindca
   au padding, bordura si marime de font diferite. Coloanele de 1fr sunt egale
   prin definitie, indiferent de continut si de cate butoane sunt pe rand. */
.actions{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; margin-top:18px}
/* baza 0, nu auto: cu `flex:1` simplu fiecare buton pleaca de la latimea
   textului sau, deci "Inca o sesiune" iesea mai lat decat "Acasa". */
.actions .cta, .actions .ghost{margin-top:0; width:100%; min-width:0; text-align:center}
.progress{margin-top:34px; font-size:12.5px; opacity:.65; text-align:center; font-weight:300}
.progress b{font-weight:600}
/* FEAR */
.fInput{width:100%; background:var(--card); border:1px solid rgba(239,68,68,.35); border-radius:16px; color:var(--white);
  font-family:'Sora'; font-weight:500; font-size:15.5px; text-align:center; padding:15px; outline:none; backdrop-filter:blur(8px)}
.fInput:focus{border-color:#ef4444; box-shadow:0 0 22px rgba(239,68,68,.3)}
.fInput::placeholder{color:rgba(255,255,255,.35); transition:opacity .2s}
.fInput:focus::placeholder{opacity:0}
.fOpt{display:block; width:100%; text-align:left; margin-bottom:11px; padding:15px 17px; border-radius:16px; cursor:pointer;
  background:var(--card); border:1px solid rgba(239,68,68,.3); color:var(--white); font-family:'Sora'; font-weight:300; font-size:14px; line-height:1.55;
  backdrop-filter:blur(8px); transition:border .2s, background .2s}
.fOpt:active{background:rgba(239,68,68,.18); border-color:#ef4444}
.fOpt b{color:#fca5a5; font-weight:600; margin-right:8px}
.rateRow{display:flex; gap:9px; justify-content:center; margin-top:18px}
.rateBtn{width:52px; height:52px; border-radius:50%; cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:24px; line-height:1;
  background:var(--card); border:1px solid rgba(239,68,68,.4); color:#fecaca; transition:transform .15s, background .2s}
.rateBtn:active{transform:scale(.92); background:rgba(239,68,68,.3)}
.fProg{display:flex; gap:6px; justify-content:center; margin-top:16px}
.fProg span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22)}
.fProg span.done{background:#ef4444}
.fearCard{background:var(--card); border:1px solid rgba(239,68,68,.35); border-radius:20px; padding:19px 18px; margin-bottom:12px; backdrop-filter:blur(8px); text-align:left}
.fearCard h3{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:20px; color:var(--white)}
.fearCard .syn{font-size:13px; font-weight:300; line-height:1.7; margin-top:10px; white-space:pre-line; color:var(--white)}
.fearCard .syn b{color:#fca5a5; font-weight:600}
.fearMeta{display:flex; justify-content:space-between; align-items:center; margin-top:13px; font-size:11.5px; opacity:.96}
.weightPill{display:inline-block; margin-top:11px; border:1px solid rgba(239,68,68,.45); border-radius:999px; padding:5px 13px; font-size:12px; color:#fecaca}
.dslv{width:100%; margin-top:13px; padding:13px; border:none; border-radius:999px; cursor:pointer; font-family:'Sora'; font-weight:600; font-size:13.5px;
  background:linear-gradient(135deg,#ef6a5a,#c0392b); color:#2a0a06; box-shadow:0 0 18px rgba(239,68,68,.3)}
.dslv:disabled{opacity:.55; cursor:default; box-shadow:none}
/* DREAM JOURNAL (Gat, cyan) */
.tC .cta{background:linear-gradient(135deg,var(--catB),var(--catA)); color:#fff; box-shadow:0 0 24px color-mix(in srgb, var(--catA) 40%, transparent)}
.tC h1 em{color:var(--catA)}
.drSec{background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 35%, transparent); border-radius:18px; padding:15px 16px; margin-bottom:10px; backdrop-filter:blur(8px); text-align:left}
.drSec b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--catB); font-weight:600; margin-bottom:6px}
.drSec p{margin:0 0 12px; font-size:14.5px; font-weight:400; line-height:1.72; font-family:'Sora',sans-serif}
.drSec p:last-child{margin-bottom:0}
.drSym{display:flex; flex-wrap:wrap; gap:7px}
.drSym .chip{border-color:color-mix(in srgb, var(--catA) 50%, transparent)}
/* EDIT/DELETE generice pe carduri */
.xdRow{display:flex; gap:8px; justify-content:flex-end; margin-top:12px}
.xdB{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.7); border-radius:10px; padding:7px 13px; font-size:11.5px; cursor:pointer; transition:all .25s; font-family:'Sora'}
.xdB:active{background:rgba(255,255,255,.14)}
.xdB.arm{background:rgba(252,165,165,.18); border-color:rgba(252,165,165,.55); color:#fca5a5}
.vbEdit{position:absolute; top:8px; right:36px; background:rgba(0,0,0,.35); border:none; color:rgba(255,255,255,.8); width:24px; height:24px; border-radius:50%; font-size:11px; cursor:pointer; z-index:2}
/* ZODIAC SHEET (popup explicatii) */
.zoShOver{position:fixed; inset:0; z-index:64; opacity:0; pointer-events:none; transition:opacity .35s ease}
.zoShOver.on{opacity:1; pointer-events:auto}
.zoSheet{position:fixed; inset:0; left:50%; transform:translate(-50%,16px); opacity:0; filter:blur(8px); width:min(100vw,430px); height:100%; overflow-y:auto;
  background:#0c0a1e; z-index:65; transition:all .55s cubic-bezier(.22,.7,.3,1); padding:0}
.zoShOver.on .zoSheet{transform:translate(-50%,0); opacity:1; filter:blur(0)}
.zoShHero{position:relative; width:100%; height:42vh; background-size:cover; background-position:center 30%;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.zoShHero.noimg{background:radial-gradient(ellipse 120% 90% at 50% 0%, var(--catC) 0%, #14122e 60%, #0c0a1e 100%); height:24vh}
.zoShHero.form{height:12vh}
.zoShHead.form{padding-top:10px}
.zoSheet .zoShHead.form h3{font-size:24px}
.zoShBody.form .field{margin-bottom:13px}
.zoShBody.form .cityDrop{z-index:5}
.zoShHead{position:relative; padding:10px 24px 0; z-index:2; text-align:left}
.zoSheet .zoShHead h3{font-size:29px; text-align:left; margin:0 0 4px; text-shadow:none; line-height:1.2}
.zoSheet .zoShHead .val{text-align:left; font-size:12.5px; letter-spacing:.13em; margin-bottom:14px; text-shadow:none; opacity:.8}
.zoSheet h3{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700; font-size:46px; line-height:1.15; margin:0 0 10px; text-align:center; text-wrap:balance; text-shadow:0 3px 26px rgba(0,0,0,.85)}
.zoSheet .val{text-align:center; font-size:19px; font-weight:600; color:var(--catB); letter-spacing:.16em; text-transform:uppercase; margin-bottom:22px; text-shadow:0 2px 18px rgba(0,0,0,.8)}
.zoShBody{padding:0 24px calc(34px + env(safe-area-inset-bottom))}
.zoSheet p{font-size:14.5px; font-weight:400; line-height:1.75; margin:0 0 17px; text-wrap:pretty}
.zoSheet .dd{background:color-mix(in srgb, var(--catA) 8%, transparent); border:1px solid color-mix(in srgb, var(--catA) 30%, transparent); border-radius:16px; padding:14px 16px; margin-bottom:12px}
.zoSheet .dd b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:6px}
.zoSheet .dd p{margin:0; font-size:14.5px}
.zoShTop{position:sticky; top:0; z-index:3; height:0}
.zoShX{position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px; background:rgba(10,9,24,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); color:#fff; width:36px; height:36px; border-radius:50%; font-size:14px; cursor:pointer}
.zoCdBan{margin-top:16px; padding:13px 16px; background:color-mix(in srgb, var(--catA) 7%, transparent); border:1px solid color-mix(in srgb, var(--catA) 25%, transparent); border-radius:14px; text-align:center; font-size:12px; opacity:.9; display:flex; gap:6px; justify-content:center; flex-wrap:wrap}
.zoLucky .m{cursor:pointer; transition:all .25s}
.zoLucky .m:active{background:color-mix(in srgb, var(--catA) 16%, transparent)}
.zoMeta .m, .skyRow .m{cursor:pointer; transition:all .25s}
.zoMeta .m:active, .skyRow .m:active{background:color-mix(in srgb, var(--catA) 16%, transparent)}
.zoTapHint{text-align:center; font-size:14.5px; opacity:.5; margin-top:8px}
h1,.zoSign{text-wrap:balance}
.zoSec p,.pmCard p,.psSec p{text-wrap:pretty}
.zoSec p+p{margin-top:9px}
/* DATE PICKER custom (onboarding) */
.dpRow{display:flex; gap:9px; justify-content:center}
.dpSeg{flex:1; background:var(--card); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:13px 6px; text-align:center;
  font-family:'Sora'; font-size:19px; font-weight:500; letter-spacing:.12em; color:var(--white); cursor:pointer; transition:all .25s; backdrop-filter:blur(8px)}
.dpSeg .lb{display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.5; font-weight:400; margin-bottom:3px}
.dpSeg.on{border-color:var(--catA); box-shadow:0 0 18px color-mix(in srgb, var(--catA) 28%, transparent); background:color-mix(in srgb, var(--catA) 6%, transparent)}
.dpSeg .ph{opacity:.28}
.dpSeg .cur{border-right:2px solid var(--catA); animation:softPulse 1.1s ease-in-out infinite; margin-left:1px}
.numpad{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px}
.npBtn{background:var(--card); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:13px 0; color:var(--white);
  font-family:'Sora'; font-size:17.5px; font-weight:400; cursor:pointer; backdrop-filter:blur(8px); transition:all .15s; -webkit-tap-highlight-color:transparent}
.npBtn:active{transform:scale(.94); background:rgba(245,213,118,.12); border-color:rgba(245,213,118,.5)}
.npBtn.fn{font-size:15px; color:rgba(255,255,255,.75)}
/* SONG (Gat, cyan) + PODCAST (Sacral) */
.tCy .cta{background:linear-gradient(135deg,var(--catB),var(--catA)); color:#fff; box-shadow:0 0 24px color-mix(in srgb, var(--catA) 40%, transparent)}
.tCy h1 em{color:var(--catA)}
.lyr{font-family:'Cormorant Garamond',serif; font-size:16.5px; font-style:italic; line-height:1.7; color:var(--white); white-space:pre-line}
.lyr .sec{display:block; font-family:'Sora'; font-style:normal; font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--catB); margin:14px 0 4px}
.pcMsg{display:flex; gap:9px; margin-bottom:11px; align-items:flex-start}
.pcMsg .av{width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#fff}
.pcMsg .bub{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:4px 14px 14px 14px; padding:10px 13px; font-size:13px; font-weight:300; line-height:1.6; text-align:left}
.pcMsg.b{flex-direction:row-reverse}
.pcMsg.b .bub{border-radius:14px 4px 14px 14px}
/* VISION BOARD (Al Treilea Ochi, indigo) */
.vbGrid{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:16px}
.vbCard{position:relative; border-radius:18px; padding:16px 14px; min-height:128px; display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid color-mix(in srgb, var(--catA) 40%, transparent); backdrop-filter:blur(8px); overflow:hidden; text-align:left; cursor:pointer}
.vbCard .dr{font-family:'Sora'; font-weight:600; font-size:13px; line-height:1.4; position:relative}
.vbCard .af{font-family:'Sora',sans-serif; font-style:italic; font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.85); margin-top:6px; position:relative}
.vbCard .imgTag{position:absolute; top:9px; right:10px; font-size:9.5px; letter-spacing:.06em; background:rgba(0,0,0,.35); padding:3px 8px; border-radius:99px; color:var(--catB); backdrop-filter:blur(4px)}
.vbDel{position:absolute; top:7px; left:9px; background:none; border:none; color:rgba(255,255,255,.5); font-size:13px; cursor:pointer; padding:3px}
.vbFull{position:fixed; inset:0; z-index:70; background:#0a0918; display:none; align-items:center; justify-content:center; text-align:center; padding:30px}
.vbFull.on{display:flex}
.vbFull .inner{max-width:340px; opacity:0; filter:blur(10px); transition:opacity 1.6s ease, filter 1.6s ease}
.vbFull .inner.show{opacity:1; filter:blur(0)}
.vbFull .dr{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:30px; line-height:1.35; color:#fff}
.vbFull .af{font-size:15px; font-weight:300; color:var(--catB); margin-top:18px; line-height:1.6}
.vbFull .x{position:absolute; top:20px; right:20px; background:rgba(255,255,255,.08); border:none; color:#fff; width:34px; height:34px; border-radius:50%; font-size:15px; cursor:pointer}
/* BIG GOALS (Sacral, portocaliu) */
.tO .cta{background:linear-gradient(135deg,var(--catB),var(--catA)); color:#fff; box-shadow:0 0 24px color-mix(in srgb, var(--catA) 40%, transparent)}
.tO h1 em{color:var(--catA)}
.oInput{width:100%; background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 35%, transparent); border-radius:16px; color:var(--white);
  font-family:'Sora'; font-weight:300; font-size:14.5px; padding:14px 15px; outline:none; backdrop-filter:blur(8px); resize:none; line-height:1.6}
.oInput:focus{border-color:var(--catA); box-shadow:0 0 20px color-mix(in srgb, var(--catA) 30%, transparent)}
.goalCard{background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 40%, transparent); border-radius:20px; padding:17px; margin-bottom:12px; backdrop-filter:blur(8px); text-align:left}
.goalCard .vis{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16.5px; line-height:1.55; color:var(--catB)}
.gStep{display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.07); cursor:pointer}
.gStep:last-of-type{border-bottom:none}
.gChk{width:21px; height:21px; border-radius:7px; border:1.6px solid color-mix(in srgb, var(--catA) 60%, transparent); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; transition:all .25s; margin-top:1px}
.gStep.done .gChk{background:linear-gradient(135deg,var(--catB),var(--catA)); border-color:var(--catA); box-shadow:0 0 10px color-mix(in srgb, var(--catA) 60%, transparent)}
.gStep .tx{flex:1; font-size:13px; font-weight:300; line-height:1.5}
.gStep.done .tx{opacity:.55; text-decoration:line-through}
.gMantra{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px; color:var(--catB); text-align:center; margin-top:12px}
/* PATTERN SEEKER (Spectru, magenta) */
.tM .cta{background:linear-gradient(135deg,var(--catA),var(--catA)); color:#fff; box-shadow:0 0 24px rgba(217,70,239,.4)}
.tM h1 em{color:var(--catA)}
.psSec{background:var(--card); border:1px solid rgba(217,70,239,.35); border-radius:18px; padding:16px 17px; margin-bottom:11px; backdrop-filter:blur(8px); text-align:left}
/* latime plina PE INTERIORUL cardului: `.psSec` are deja 17px padding lateral,
   adica 4.5% din latimea cardului, exact aerul cerut. Un 90% peste el ar fi dat
   9% de fiecare parte. */
.psDeep{display:block; width:100%; margin:18px 0 2px; padding:12px; border-radius:12px;
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--catB); background:color-mix(in srgb, var(--catA) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--catA) 42%, transparent); transition:background .25s}
.psDeep:active{background:color-mix(in srgb, var(--catA) 22%, transparent)}
.psDeepOut:empty{display:none}
.psDeepMsg{text-align:center; font-size:13px; opacity:.7; margin:12px 0 0}
.psDeepCard{margin-top:13px; padding-top:13px; border-top:1px solid rgba(255,255,255,.1)}
.psDeepCard b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--catA); margin:11px 0 4px}
.psDeepCard b:first-child{margin-top:0}
.psDeepCard p{margin:0; font-size:14.5px; line-height:1.65}
.psSec b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--catA); font-weight:600; margin-bottom:6px}
.psSec p{margin:0; font-size:14.5px; font-weight:400; line-height:1.65}
.psSec .pT{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--white); margin-bottom:5px; display:block}
/* PAIN MAP v2 (corp cosmic cu puncte) */
.pmSeg{position:relative; margin:16px auto 0; width:min(84vw,300px); border-radius:22px; overflow:hidden}
.pmSeg img{width:100%; display:block; border-radius:22px}
.pmSeg::after{content:''; position:absolute; inset:0; border-radius:22px; border:1px solid color-mix(in srgb, var(--catA) 30%, transparent); pointer-events:none}
.pmDot{position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle, color-mix(in srgb, var(--catB) 95%, transparent) 0%, color-mix(in srgb, var(--catA) 55%, transparent) 45%, color-mix(in srgb, var(--catA) 1%, transparent) 70%);
  animation:pmPulse 2.2s ease-in-out infinite}
.pmDot::after{content:''; position:absolute; inset:7px; border-radius:50%; background:#fff; box-shadow:0 0 10px color-mix(in srgb, var(--catB) 90%, transparent)}
@keyframes pmPulse{0%,100%{transform:scale(1); opacity:.85}50%{transform:scale(1.45); opacity:1}}
.pmMantra{background:color-mix(in srgb, var(--catA) 10%, transparent); border:1px solid color-mix(in srgb, var(--catA) 45%, transparent); border-radius:18px; padding:18px 16px; margin:6px 0 16px; text-align:center}
.pmMantra b{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--catB); font-weight:600; margin-bottom:8px}
.pmMantra p{font-family:'Cormorant Garamond',serif !important; font-style:italic; font-size:20px !important; line-height:1.5 !important; margin:0 !important; color:#fff}
/* PAIN MAP (Spectru, roz-magenta) */
.tP .cta{background:linear-gradient(135deg,var(--catB),#db2777); color:#fff; box-shadow:0 0 24px color-mix(in srgb, var(--catA) 40%, transparent)}
.tP h1 em{color:var(--catA)}
.pmBody{position:relative; margin:14px auto 0; width:min(78vw,270px)}
.pmBody svg{width:100%; display:block; filter:drop-shadow(0 0 26px color-mix(in srgb, var(--catA) 25%, transparent))}
.pmZone{fill:color-mix(in srgb, var(--catA) 7%, transparent); stroke:color-mix(in srgb, var(--catA) 35%, transparent); stroke-width:1.1; cursor:pointer; transition:all .25s}
.pmZone:hover{fill:color-mix(in srgb, var(--catA) 20%, transparent)}
.pmZone.on{fill:color-mix(in srgb, var(--catA) 42%, transparent); stroke:var(--catB); filter:drop-shadow(0 0 10px color-mix(in srgb, var(--catA) 80%, transparent))}
.pmSil{fill:rgba(255,255,255,.045); stroke:rgba(255,255,255,.14); stroke-width:1}
.pmChk{fill:var(--catA); opacity:.5}
.pmCard{background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 40%, transparent); border-radius:20px; padding:17px; margin-top:14px; backdrop-filter:blur(8px); text-align:left}
.pmCard b.lbl{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--catB); font-weight:600; margin-bottom:6px}
.pmCard p{margin:0 0 12px; font-size:14.5px; font-weight:400; line-height:1.65}
.pmZName{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:24px; text-align:center}
.pmDisc{font-size:14.5px; opacity:.55; text-align:center; line-height:1.5; margin-top:14px}
.pRate{background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 45%, transparent); color:#fbcfe8}
/* ZODIAC (Al Treilea Ochi, indigo) */
.tI .cta{background:linear-gradient(135deg,var(--catA),var(--catA)); color:#fff; box-shadow:0 0 24px color-mix(in srgb, var(--catA) 40%, transparent)}
.tI h1 em{color:var(--catA)}
.zoCard{background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 40%, transparent); border-radius:22px; padding:22px 18px; text-align:center; backdrop-filter:blur(8px); margin-top:20px}
.zoGlyph{font-size:56px; line-height:1; color:var(--catB); text-shadow:0 0 30px color-mix(in srgb, var(--catA) 80%, transparent)}
.zoSign{font-family:'Cormorant Garamond',serif; font-size:30px; font-style:italic; color:var(--white); margin-top:8px}
.zoRange{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-top:3px}
.zoMeta{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px}
.zoMeta .m{background:rgba(255,255,255,.05); border:1px solid color-mix(in srgb, var(--catA) 28%, transparent); border-radius:13px; padding:9px 6px}
.zoMeta .m b{display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--catB); font-weight:600; margin-bottom:3px}
.zoMeta .m span{font-size:13px}
.zoSec{background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 32%, transparent); border-radius:18px; padding:16px 17px; margin-bottom:11px; backdrop-filter:blur(8px); text-align:left}
.zoSec b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--catB); font-weight:600; margin-bottom:6px}
.zoSec p{margin:0; font-size:14.5px; font-weight:400; line-height:1.65}
.zoLucky{display:flex; gap:9px}
.zoLucky .m{flex:1; text-align:center; background:rgba(255,255,255,.05); border:1px solid color-mix(in srgb, var(--catA) 28%, transparent); border-radius:13px; padding:10px 4px}

/* pastila culorii norocoase poarta chiar culoarea recomandata */
.zoSw{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px;
  vertical-align:baseline; box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 9px currentColor}
.zoLucky .m b{display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--catB); margin-bottom:3px}
.zoLucky .m span{font-size:15px; font-weight:600; color:var(--white)}
.jrDay{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:20px 4px 9px; font-weight:600}
.jrRow{display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid rgba(255,255,255,.1); border-radius:15px; padding:12px 14px; margin-bottom:8px; backdrop-filter:blur(8px)}
.jrDot{width:9px; height:9px; border-radius:50%; margin-top:5px; flex:0 0 auto; box-shadow:0 0 10px currentColor}
.jrTxt{flex:1; font-size:13px; font-weight:300; line-height:1.5}
.jrTime{font-size:10.5px; opacity:.5; white-space:nowrap; margin-top:2px}
.zoHead{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 35%, transparent); border-radius:16px; padding:14px 16px; cursor:pointer; backdrop-filter:blur(8px); margin-top:10px}
.zoHead .ttl{flex:1; font-family:'Sora'; font-weight:600; font-size:13.5px; color:var(--white)}
.zoHead .hint{font-size:14.5px; color:var(--catB); white-space:nowrap}
.zoHead svg{flex:0 0 auto; color:var(--catA); transition:transform .3s}
.zoWrap.open>.zoHead{border-radius:16px 16px 0 0}
.zoWrap.open>.zoHead svg{transform:rotate(180deg)}
.zoDrawer{max-height:0; overflow:hidden; transition:max-height .45s ease}
.zoDrawer.open{max-height:1400px}
/* ===== ECRANUL AUDIO PE DOUA ZONE =====
   Sus playerul, jos lista cu derulare PROPRIE. Pagina in sine nu se mai
   deruleaza, deci playerul nu mai poate fi schimbat din greseala cu degetul,
   iar lista nu mai trece pe sub el. */
body.muPage .phone{min-height:0; height:100vh; padding-bottom:12px; overflow:hidden; display:flex; flex-direction:column}
body.muPage #s-music{flex:1; min-height:0; display:flex; flex-direction:column}
body.muPage #s-music .hero{flex:0 0 auto; transition:margin .3s ease}
body.muSmall #s-music .hero h1{font-size:22px}
body.muSmall #s-music .hero .sub{display:none}
body.muSmall #s-music .hero{margin-bottom:-6px}
#muBody.muSplit{flex:1; min-height:0; display:flex; flex-direction:column; margin-top:10px !important}
#muTop2{flex:0 0 auto}
#muScroll{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 30px);
  mask-image:linear-gradient(180deg, transparent 0, #000 30px);
  padding:2px 2px calc(120px + env(safe-area-inset-bottom, 0px)); margin:0 -2px;
  scrollbar-width:none}
.muColRow{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 10px; margin-top:12px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.muColRow::-webkit-scrollbar{display:none}
.muColTile{flex:0 0 44%; aspect-ratio:1; border-radius:18px; overflow:hidden; position:relative; scroll-snap-align:start; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--cat, var(--catA)) 35%, transparent); box-shadow:0 8px 22px -10px rgba(0,0,0,.6)}
.muColTile img{width:100%; height:100%; object-fit:cover; display:block}
.muColTile .mcOv{position:absolute; inset:0; border-radius:inherit; background:linear-gradient(to top, color-mix(in srgb, var(--cat, var(--catA)) 45%, rgba(0,0,0,.72)) 0%, transparent 62%)}
#muInfoOv{position:fixed; inset:0; z-index:360}
#muInfoOv .miBack{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px)}
#muInfoOv .miCard{position:absolute; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); background:#141126; border:1px solid color-mix(in srgb, var(--cat, var(--catA)) 30%, transparent); border-radius:22px; padding:18px 18px 14px; animation:reveal .4s cubic-bezier(.22,.7,.3,1) both}
.muColTile span{position:absolute; left:12px; right:10px; bottom:11px; text-align:left; font-size:16px; line-height:1.25; font-weight:600; color:#fff; text-shadow:none; text-wrap:balance}
#muColOv{position:fixed; inset:0; z-index:340; background:#0c0a1e; overflow-y:auto; padding:18px 18px calc(40px + env(safe-area-inset-bottom,0px)); -webkit-overflow-scrolling:touch}
#muColOv .mcHero{width:64%; max-width:250px; aspect-ratio:1; border-radius:22px; overflow:hidden; margin:8px auto 0; border:1px solid color-mix(in srgb, var(--cat, var(--catA)) 40%, transparent); box-shadow:0 14px 40px -12px rgba(0,0,0,.75)}
#muColOv .mcHero img{width:100%; height:100%; object-fit:cover; display:block}
#muColOv h2{font-family:Georgia,'Noto Serif',serif; font-weight:600; font-size:26px; text-align:center; margin:16px 0 4px; color:var(--white)}
#muColOv .mcSub{text-align:center; font-size:12px; opacity:.6; margin:0 0 8px}
#muH1x{max-height:110px}
#muSubx{max-height:70px}
#muH1x,#muSubx{overflow:hidden; transition:max-height .35s ease, opacity .25s ease, margin .35s ease}
body.muHeroGone #muH1x, body.muHeroGone #muSubx{max-height:0; opacity:0; margin:0}
body.muHeroGone #s-music .hero{margin-top:0; margin-bottom:0}
#muBody{transition:margin .3s ease}
body.muHeroGone #muBody{margin-top:10px !important}
#muScroll::-webkit-scrollbar{display:none}
/* sageata din coltul cardului: singurul lucru care schimba marimea */
.muChevB{position:absolute; right:10px; bottom:8px; width:40px; height:40px; border-radius:50%;
  border:none; background:none; color:rgba(255,255,255,.55); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center}
.muChevB:active{color:var(--catB)}
#muPlayer{position:relative}
/* titlul zonei: acelasi font ca "Mesajul Zilei", dar culoarea urmeaza tema */
.muTitle{font-family:'Fraunces','Cormorant Garamond',serif !important; font-weight:600; letter-spacing:.4px;
  color:var(--catB) !important; text-shadow:0 0 20px color-mix(in srgb, var(--catB) 26%, transparent) !important;
  text-align:center; font-size:23px; margin-bottom:2px}
/* cele trei zone stau ACUM sub player */
#muTop2 .catBar{margin:30px 0 2px !important}
/* cele trei puncte, sus in card */
.muDots{position:absolute; right:6px; top:6px; width:38px; height:38px; border-radius:50%;
  border:none; background:none; color:rgba(255,255,255,.5); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; z-index:3}
.muDots:active{color:var(--catB)}
.muDots.on{color:var(--catB)}
#muMenuOv{position:fixed; inset:0; z-index:340; background:rgba(6,5,16,.78); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:26px}
.muMenuBox{width:100%; max-width:340px; background:#12101f; border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:18px 17px}
/* PLAYERUL NU ARE NICIO ANIMATIE. Blurul de la schimbarea zonei atinge doar
   lista de dedesubt, nu si cardul. */
#muTop2, #muTop2 *{animation:none !important; transition:none !important}
#muScroll.muFade{animation:reveal .55s cubic-bezier(.22,.7,.3,1) both}
#muPlWrap{position:relative}
#muPlayer.muShrink .muCtl{position:relative}
#muPlayer.muShrink .muCtl::after{content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%)}
#muPlayer.muShrink .muArt, #muPlayer.muShrink .muMeta>b{cursor:pointer}
/* bara de progres: firul ramane subtire, dar degetul are 22px de prins */
#muBarBg{padding:8px 0; margin-top:8px !important; box-sizing:content-box}
/* cat timp e deschisa o fereastra, mini player-ul se da la o parte: gazda lui
   sta in body si ar acoperi orice, indiferent de z-index */
body.muOvr #muMiniHost, body.muOvr #muMiniMask{display:none}
.muSlpWrap{margin-top:14px}
.muSlpB{width:100%; padding:10px 12px; border-radius:13px; cursor:pointer; font-family:inherit;
  font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; gap:8px; transition:all .3s ease}
.muSlpB.on{color:var(--catB); border-color:rgba(250,204,21,.4); background:rgba(250,204,21,.1)}
.muSlpB.on b{font-variant-numeric:tabular-nums; font-size:13px}
.muSlpB.on i{font-style:normal; opacity:.55; font-size:11px; margin-left:auto}
.muSlpB.on span{margin-right:auto; opacity:.8}
.muSlpRow{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.muSlpM{padding:9px 0; border-radius:11px; cursor:pointer; font-family:inherit; font-size:13px;
  color:rgba(255,255,255,.85); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; align-items:center; line-height:1.15}
.muSlpM span{font-size:9px; opacity:.5}
.muSlpM.muSlpX{color:rgba(255,255,255,.45); font-size:15px; justify-content:center}
/* in playerul strans randul timerului nu incape, iar timpul ramas se vede
   oricum cand urci inapoi la player */
#muPlayer.muShrink .muSlpWrap{display:none}
#muPlayer.muShrink .muChevB{bottom:4px; right:4px; width:34px; height:34px}
#muPlayer.muShrink .muMeta>div:last-child{padding-right:34px !important}
#muPlayer{text-align:center}
#muPlayer .muArt>*{transition:width .42s cubic-bezier(.22,.7,.3,1), height .42s cubic-bezier(.22,.7,.3,1), border-radius .42s ease}
#muMiniHost{position:relative; z-index:60}
#muPlayer{transition:padding .42s cubic-bezier(.22,.7,.3,1), gap .42s ease}
/* acelasi card ca cel mare: fundal, bordura aurie si colturi neatinse,
   doar continutul trece pe orizontala. Sta SUB header (46px) cu aer deasupra */
#muPlayer.muShrink{
  background:#12101f !important; backdrop-filter:none !important;
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px;
  height:25vh; max-height:210px; min-height:132px; box-sizing:border-box; width:100%;
  padding:14px 14px !important; text-align:left;
  box-shadow:0 14px 34px rgba(0,0,0,.38)}
#muMiniMask{
  position:fixed; top:0; left:0; right:0; height:0; z-index:50;
  pointer-events:none; opacity:0; transition:opacity .32s ease;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(10,9,24,.92) 0%, rgba(10,9,24,.72) var(--mkSolid,70%), rgba(10,9,24,.3) 88%, rgba(10,9,24,0) 100%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 var(--mkSolid,70%), transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 var(--mkSolid,70%), transparent 100%)}
#muMiniMask.on{opacity:1}
#muPlayer.muShrink .muArt{margin:0; align-self:center}
#muPlayer.muShrink .muArt>*{width:76px !important; height:76px !important; border-radius:15px !important}
#muPlayer.muShrink .muMeta b{font-size:14.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
#muPlayer.muShrink .muMeta p{font-size:11.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#muPlayer.muShrink #muBarBg{margin-top:8px !important; height:14px !important}
#muPlayer.muShrink #muKnob{width:11px; height:11px; margin-left:-5.5px; margin-top:-5.5px}
/* toate cele cinci butoane raman si in randul strans: 10% mai mici decat in
   playerul mare (44->40, 56->50), perfect rotunde prin latime=inaltime fixa si
   aspect-ratio, egal spatiate prin space-between pe toata latimea */
#muPlayer.muShrink .muCtl{width:34px !important; height:34px !important; min-width:34px !important; flex:0 0 34px !important; aspect-ratio:1/1; border-radius:50%; padding:0}
#muPlayer.muShrink .muCtl.muMain{width:42px !important; height:42px !important; min-width:42px !important; flex:0 0 42px !important}
#muPlayer.muShrink .muCtl svg{width:15px; height:15px}
#muPlayer.muShrink .muCtl.muMain svg{width:19px; height:19px}
/* aer in jurul randului de butoane, iar paddingul cardului nu se mai
   negociaza cu continutul */
#muPlayer.muShrink .muMeta>div:last-child{display:flex !important; justify-content:space-between !important;
  align-items:center; gap:0 !important; width:100% !important; box-sizing:border-box;
  margin-top:12px !important; padding:0 8px !important}
#muPlayer.muShrink .muMeta{min-width:0; overflow:hidden}
#muPlayer.muShrink .muMeta>div:nth-last-child(2){font-size:10px !important; margin-top:1px !important}
@media (max-height:640px){ #muPlayer.muShrink{height:30vh} }
.raLock{margin-top:10px; padding:13px 15px; border-radius:15px; text-align:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1)}
.raLock>b{display:block; font-size:13px; color:var(--catB); margin-bottom:4px}
.raLock>span{display:block; font-size:12.5px; opacity:.85}
.raLock>i{display:block; font-style:normal; font-size:11.5px; opacity:.55; margin-top:6px; line-height:1.5}
.raQ{margin-top:14px; padding:13px 14px; border-radius:14px;
  background:color-mix(in srgb, var(--catA) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--catB) 35%, transparent)}
.raQ>b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--catB); margin-bottom:7px}
.raQ p{margin:0 0 9px; line-height:1.65}
.raQ textarea{width:100%; box-sizing:border-box; background:rgba(0,0,0,.25); color:var(--white);
  border:1px solid rgba(255,255,255,.14); border-radius:11px; padding:10px 11px; font-family:inherit; font-size:14px; resize:none}
.raAnsSaved{opacity:.75; font-style:italic; margin:0 !important}
.zoHead .hint{font-size:11.5px}
.anMan{margin-top:10px; padding:14px 16px; border-radius:16px; text-align:center;
  background:color-mix(in srgb, var(--catA) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--catB) 40%, transparent)}
.anMan>b{display:block; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--catB); margin-bottom:8px}
.anMan p{margin:0; font-family:"Playfair Display",serif; font-weight:700; font-size:19px; line-height:1.45; color:#fff}
.anManTag{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--catB); margin-bottom:10px}
.rfSitM.anManBig{font-family:"Playfair Display",serif; font-weight:700; font-size:24px; line-height:1.4; color:#fff}
.anManHint{margin:10px 0 0; font-size:12.5px; opacity:.65}
@keyframes anManIn{0%{opacity:.18} 40%{opacity:1; transform:scale(1)} 100%{opacity:1}}
.anManIn{animation:anManIn 2.6s ease}
.anW{display:inline-block; transition:opacity 1.2s ease, filter 1.2s ease}
.anW.out{opacity:0; filter:blur(7px)}
.zwDay{padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07)}
.zwDay:first-child{padding-top:0}
.zwDay:last-of-type{border-bottom:none}
.zwDay>b{display:block; font-size:10.5px; letter-spacing:.14em; color:var(--catB); margin-bottom:5px}
.zwDay p{margin:0; line-height:1.65}
.ziFoot{display:flex; gap:9px; align-items:stretch; margin-top:16px}
.ziFoot .cta{flex:1; margin-top:0}
.ziFoot .ziX{flex:0 0 auto; width:52px; padding:0; margin-top:0; display:flex; align-items:center; justify-content:center}
.ziGen{margin:0 0 14px; padding:11px 13px; border-radius:13px; font-size:12.5px; line-height:1.6;
  background:rgba(250,204,21,.09); border:1px solid rgba(250,204,21,.32); color:#f5d576}
.zoRf{display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:11.5px; color:var(--catB);
  background:color-mix(in srgb, var(--catB) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--catB) 32%, transparent)}
.zoRf:active{background:color-mix(in srgb, var(--catB) 28%, transparent)}
.ziSec{margin-bottom:17px}
.ziSec>b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--catB); margin-bottom:7px}
.ziSec p{margin:0}
ul.ziEx{list-style:none; margin:0; padding:0}
ul.ziEx li{position:relative; padding-left:16px; margin-bottom:8px; line-height:1.6}
ul.ziEx li:last-child{margin-bottom:0}
ul.ziEx li:before{content:''; position:absolute; left:0; top:9px; width:5px; height:5px;
  border-radius:50%; background:var(--catB); opacity:.8}
.ziRel{position:relative; padding-right:34px !important}
.tmBtn.ziB{top:5px; right:5px; width:24px; height:24px; z-index:4}
.tmBtn.ziB i{width:2.5px; height:2.5px}
.tmMenu.ziM{top:32px; right:4px; min-width:150px; z-index:30}
.tmMenu.ziM button{padding:11px 13px; font-size:13.5px}
.zpList{display:flex; flex-direction:column; gap:8px}
.zpRow{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:14px; cursor:pointer;
  background:var(--card); border:1px solid rgba(255,255,255,.09)}
.zpRow.on{border-color:color-mix(in srgb, var(--catB) 55%, transparent); background:color-mix(in srgb, var(--catB) 10%, transparent)}
.zpRow i{display:flex; flex:0 0 auto; color:var(--catB)}
.zpRow span{flex:1; display:flex; flex-direction:column; gap:2px}
.zpRow b{font-size:14px; font-weight:600}
.zpRow em{font-style:normal; font-size:11.5px; opacity:.6}
.zpRow u{text-decoration:none; font-size:11.5px; color:var(--catB); opacity:.85; padding:6px 8px}
.zpChart{border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.09)}
.zpCr{display:flex; align-items:center; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.06)}
.zpCr:last-child{border-bottom:none}
.zpCr span{flex:1; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.6}
.zpCr b{width:88px; flex:0 0 auto; font-size:13.5px; font-weight:600; color:var(--catB); text-align:right}
.zpCr.head{background:rgba(255,255,255,.04)}
.zpCr.head b{font-size:12px; color:var(--white); opacity:.85}
.zoCd{margin-top:10px}
.zoCd .zoHead{border-color:color-mix(in srgb, var(--zc, var(--catA)) 35%, transparent)}
.zoCd .zoHead .ttl{color:var(--white)}
.zoShB{display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 auto;
  border-radius:50%; color:var(--catB); background:color-mix(in srgb, var(--catB) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--catB) 30%, transparent)}
.zoShB:active{background:color-mix(in srgb, var(--catB) 30%, transparent)}
.zoCdIn{padding:2px 17px 15px}
.zoCdIn p{margin:0; line-height:1.7}
.zoCdIn p+p{margin-top:11px}
.zoMi{margin:0 0 11px; opacity:.9}
.zoMr{display:flex; align-items:baseline; gap:10px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.06)}
.zoMr span{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; opacity:.6; width:104px; flex:0 0 auto}
.zoMr b{font-size:13.5px; color:var(--catB); font-weight:600; flex:1}
.zoMt{margin:13px 0 7px; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; opacity:.6}
.zoMa{display:flex; align-items:baseline; gap:8px; font-size:13px; padding:4px 0}
.zoMa i{margin-left:auto; font-style:normal; font-size:11.5px; opacity:.55; white-space:nowrap}
.zoMn{margin:12px 0 0; font-size:12px; opacity:.6; line-height:1.6}
.zoAct{border-radius:14px; padding:11px 13px; margin-bottom:9px}
.zoAct:last-child{margin-bottom:0}
.zoAct b{display:block; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:5px}
.zoAct p{margin:0; line-height:1.65}
.zoAct.do{background:color-mix(in srgb, var(--catB) 9%, transparent); border:1px solid color-mix(in srgb, var(--catB) 32%, transparent)}
.zoAct.do b{color:var(--catB)}
.zoAct.dont{background:rgba(252,165,165,.09); border:1px solid rgba(252,165,165,.32)}
.zoAct.dont b{color:#fca5a5}
.zoDrawer .inner{background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 35%, transparent); border-top:none; border-radius:0 0 16px 16px; padding:15px 16px; backdrop-filter:blur(8px)}

/* Cele 12 zodii: grila 3x4 cu celule EGALE, nu chipsuri care curg pe randuri
   inegale (3-3-2-2-2). Grila cu fractiuni da latimi identice prin definitie. */

.zoSignB i svg{display:block}
.zoGlyph svg{display:block; margin:0 auto}
.zoSignGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:stretch}
.zoSignB{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:100%; height:100%; min-height:62px; padding:9px 5px; border-radius:14px;
  font-size:12.5px; line-height:1.2; text-align:center; white-space:normal}
.zoSignB i{font-style:normal; font-size:15px; line-height:1; opacity:.95}
.zoSignB span{display:block; width:100%; overflow-wrap:anywhere}
.zoSignB.on{border-color:var(--catA); background:color-mix(in srgb, var(--catA) 18%, transparent); color:var(--catB)}
.zoChips{display:flex; flex-wrap:wrap; gap:7px; justify-content:center}
.zoChips .chip.on{background:color-mix(in srgb, var(--catA) 28%, transparent); border-color:var(--catA)}
.skyRow{display:flex; gap:9px; margin-top:10px}
.skyRow .m{flex:1; background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 30%, transparent); border-radius:14px; padding:10px 8px; text-align:center; backdrop-filter:blur(8px)}
.skyRow .m b{display:block; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--catB); margin-bottom:4px; font-weight:600}
.skyRow .m span{font-size:12px; line-height:1.35; display:block}
/* PLANS / PLUS (auriu premium) */
.plCard{position:relative; background:var(--card); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:20px 18px; margin-bottom:13px; backdrop-filter:blur(10px); cursor:pointer; transition:all .25s; text-align:left}
.plCard.sel{border-color:#f5d576; box-shadow:0 0 26px rgba(245,213,118,.25)}
.plCard .pTop{display:flex; align-items:baseline; justify-content:space-between}
.plCard .pName{font-family:'Sora'; font-weight:600; font-size:15px}
.plCard .pPrice{font-family:'Cormorant Garamond',serif; font-size:27px; font-style:italic; color:#f5d576}
.plCard .pPer{font-size:11px; opacity:.6}
.plCard .pSave{position:absolute; top:-10px; right:14px; background:linear-gradient(135deg,#f5d576,#d4a437); color:#241a02; font-size:10.5px; font-weight:700; padding:4px 11px; border-radius:99px; letter-spacing:.04em}
.plFeat{margin-top:14px; font-size:12.8px; font-weight:300; line-height:2}
.plFeat b{color:#f5d576; font-weight:600; margin-right:7px}
.plGold .cta{background:linear-gradient(135deg,#f5d576,#d4a437); color:#241a02; box-shadow:0 0 26px rgba(245,213,118,.35)}
.payField{margin-bottom:11px}
.payField label{display:block; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:#f5d576; margin-bottom:6px; font-weight:600}
.payField input{width:100%; background:var(--card); border:1px solid rgba(245,213,118,.35); border-radius:14px; color:var(--white); font-family:'Sora'; font-size:15px; padding:13px 15px; outline:none; letter-spacing:.06em}
.payField input:focus{border-color:#f5d576; box-shadow:0 0 18px rgba(245,213,118,.25)}
.payRow{display:flex; gap:10px}
.payRow .payField{flex:1}
.plusBadge{display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#f5d576,#d4a437); color:#241a02; font-size:11px; font-weight:700; padding:5px 13px; border-radius:99px; letter-spacing:.05em}
.subCard{background:var(--card); border:1px solid rgba(245,213,118,.4); border-radius:18px; padding:16px 17px; margin-top:10px; backdrop-filter:blur(8px); display:flex; align-items:center; gap:12px}
.subCard .info{flex:1}
.subCard .info b{font-size:13.5px; display:block}
.subCard .info span{font-size:11.5px; opacity:.65}
.pwOver{position:fixed; inset:0; background:rgba(5,4,12,.66); backdrop-filter:blur(6px); z-index:60; opacity:0; pointer-events:none; transition:opacity .4s}
.pwOver.on{opacity:1; pointer-events:auto}
.pwSheet{position:fixed; left:50%; top:50%; transform:translate(-50%,calc(-50% + 16px)); opacity:0; filter:blur(8px); width:min(92vw,400px); background:linear-gradient(180deg,#221c33,#12101d); border-radius:26px; border:1px solid rgba(245,213,118,.3); padding:26px 22px 24px; z-index:61; transition:all .55s cubic-bezier(.22,.7,.3,1)}
.pwOver.on .pwSheet{transform:translate(-50%,-50%); opacity:1; filter:blur(0)}
.pwX{position:absolute; top:14px; right:16px; background:rgba(255,255,255,.08); border:none; color:var(--white); width:30px; height:30px; border-radius:50%; font-size:15px; cursor:pointer}
.pwT{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:25px; text-align:center; line-height:1.3}
.pwT em{font-style:italic; color:#f5d576}
/* BELIEF (Solar Plexus, galben) */
.tY .cta{background:linear-gradient(135deg,var(--catB),var(--catA)); color:#241a02; box-shadow:0 0 24px color-mix(in srgb, var(--catA) 35%, transparent)}
.tY h1 em{color:var(--catA)}
.yInput{width:100%; background:var(--card); border:1px solid rgba(250,204,21,.35); border-radius:16px; color:var(--white);
  font-family:'Sora'; font-weight:500; font-size:15.5px; text-align:center; padding:15px; outline:none; backdrop-filter:blur(8px)}
.yInput:focus{border-color:#facc15; box-shadow:0 0 22px rgba(250,204,21,.3)}
.yInput::placeholder{color:rgba(255,255,255,.35); transition:opacity .2s}
.yInput:focus::placeholder{opacity:0}
.yOpt{display:block; width:100%; text-align:left; margin-bottom:11px; padding:15px 17px; border-radius:16px; cursor:pointer;
  background:var(--card); border:1px solid rgba(250,204,21,.32); color:var(--white); font-family:'Sora'; font-weight:300; font-size:14px; line-height:1.55; backdrop-filter:blur(8px); transition:all .2s}
.yOpt:active{background:rgba(250,204,21,.16); border-color:#facc15}
.yOpt b{color:#facc15; font-weight:600; margin-right:8px}
.yRate{background:var(--card); border:1px solid rgba(250,204,21,.45); color:#fde68a}
.oldBelief{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:23px; color:var(--white); text-align:center; line-height:1.4}
.oldBelief .dch{display:inline-block; transition:all 1.4s ease}
.oldBelief.dissolving .dch{opacity:0; filter:blur(9px); transform:translateY(-16px) rotate(6deg)}
.newBelief{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:25px; color:#fde047; text-align:center; line-height:1.4; text-shadow:0 0 22px rgba(250,204,21,.45)}
.beliefCard{background:var(--card); border:1px solid rgba(250,204,21,.35); border-radius:20px; padding:19px 18px; margin-bottom:12px; backdrop-filter:blur(8px); text-align:left}
.beliefCard .old{font-size:13.5px; opacity:.55; text-decoration:line-through; font-style:italic}
.nbHead{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid rgba(250,204,21,.35); border-radius:16px; padding:14px 16px; cursor:pointer; backdrop-filter:blur(8px)}
.nbHead .ttl{flex:1; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:17px; color:var(--white); line-height:1.35}
.nbHead .cdMini{font-size:11px; color:#fde68a; white-space:nowrap; letter-spacing:.03em}
.nbHead svg{flex:0 0 auto; color:#facc15; transition:transform .3s}
.allWrap.open .nbHead{border-radius:16px 16px 0 0}
.allWrap.open .nbHead svg{transform:rotate(180deg)}
.nbDrawer{max-height:0; overflow:hidden; transition:max-height .45s ease}
.nbDrawer.open{max-height:900px}
.nbDrawer .beliefCard{border-radius:0 0 16px 16px; border-top:none; margin-bottom:0}
.beliefCard .nw{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:#fde047; margin-top:8px}
.beliefCard .ladder{font-size:12.5px; font-weight:300; line-height:1.7; margin-top:10px; color:var(--white)}
.beliefCard .ladder b{color:#fde68a; font-weight:600}
.reinf{width:100%; margin-top:13px; padding:13px; border:none; border-radius:999px; cursor:pointer; font-family:'Sora'; font-weight:600; font-size:13.5px;
  background:linear-gradient(135deg,var(--catB),var(--catA)); color:#241a02; box-shadow:0 0 18px color-mix(in srgb, var(--catA) 30%, transparent)}
.reinf:disabled{opacity:.55; cursor:default; box-shadow:none}
/* BREATHWORK */
#bwDurSl{width:100%; height:32px; cursor:pointer; -webkit-appearance:none; appearance:none; background:transparent}
#bwDurSl::-webkit-slider-runnable-track{height:3px; border-radius:99px; background:color-mix(in srgb, var(--catA) 35%, transparent); border:none}
#bwDurSl::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--green); border:none; margin-top:-6.5px; box-shadow:0 0 12px color-mix(in srgb, var(--catA) 60%, transparent)}
#bwDurSl::-moz-range-track{height:3px; border-radius:99px; background:color-mix(in srgb, var(--catA) 35%, transparent); border:none}
#bwDurSl::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--green); border:none; box-shadow:0 0 12px color-mix(in srgb, var(--catA) 60%, transparent)}
.bChip{background:rgba(255,255,255,.07); border:1px solid color-mix(in srgb, var(--catA) 40%, transparent); color:var(--green-soft); border-radius:999px; padding:9px 16px; font-family:'Sora'; font-size:13px; cursor:pointer; transition:all .2s}
.bChip.on{background:var(--green); border-color:var(--green); color:#04140c; font-weight:600}
.bOpt{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}
.bOpt.on{border-color:var(--green); background:color-mix(in srgb, var(--catA) 16%, transparent)}
.bOpt b{color:var(--green-soft); font-weight:600}
#bwShape{width:240px; height:240px; margin:28px auto 0; display:flex; align-items:center; justify-content:center}
#bwShape svg{width:100%; height:100%; overflow:visible}
/* stroke pus in CSS, nu ca atribut: `stroke="var(--catA)"` e INVALID pe un atribut
   de prezentare, deci linia iesea nedesenata. `currentColor` citeste `color` din
   style, unde var() functioneaza. */
.bwPlay{display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; flex:0 0 auto; margin-right:2px; color:var(--catA);
  background:color-mix(in srgb, var(--catA) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--catA) 45%, transparent); transition:background .2s}
.bwPlay:active{background:color-mix(in srgb, var(--catA) 32%, transparent)}
.bwGhost{fill:none; stroke:currentColor; stroke-width:3; opacity:.16; stroke-linecap:round; stroke-linejoin:round}
.bwTrace{fill:none; stroke:currentColor; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 7px currentColor)}
/* acelasi font ca la cronometrul din Partenerul de Post: Fraunces, drept, mai gros.
   Italicul subtire se citea greu in miscare. Ridicata mai aproape de forma. */
#fbBrLabel{font-family:'Fraunces','Cormorant Garamond',serif; font-style:normal; font-weight:600}
#bwPhaseBox{height:96px; width:100%; margin:14px auto 0; padding:0 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px}
#bwPhase{font-family:'Fraunces','Cormorant Garamond',serif; font-style:normal; font-weight:600;
  font-size:26px; line-height:1.15; text-align:center; margin:0; color:var(--green-soft);
  white-space:nowrap; text-shadow:0 2px 14px rgba(0,0,0,.6); transition:color .15s ease}
#bwTime{font-size:14px; text-align:center; margin:0; opacity:.85; letter-spacing:.06em}
.bwChips{display:flex; flex-wrap:wrap}
.bwChips.g2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.bwChips.g2 .bwChip{margin:0; justify-content:center}
.bwP{margin:0 0 10px; line-height:1.65; opacity:.9}
.bwP:last-child{margin-bottom:0}
.bwSafe{font-size:12.5px; opacity:.62}
.bwChip{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  font-size:12.5px; font-weight:600; margin:0 6px 7px 0;
  background:color-mix(in srgb, var(--pc) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--pc) 45%, transparent); color:var(--pc)}
.bLabel{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-soft); margin:20px 0 8px}
/* GRATITUDE */
.dateLine{font-size:13px; margin-top:8px; opacity:.96; font-weight:300; text-align:center; color:var(--white)}
.streak{display:none; align-items:center; gap:7px; margin:14px auto 0; width:fit-content; border:1px solid color-mix(in srgb, var(--catA) 45%, transparent);
  border-radius:999px; padding:7px 16px; font-size:13px; color:var(--green-soft); background:rgba(10,20,16,.4); backdrop-filter:blur(6px)}
.gRow{display:flex; gap:12px; align-items:flex-start; margin-bottom:13px}
.gNum{flex:0 0 40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-size:22px; line-height:1; padding-bottom:3px; color:var(--green);
  border:1px solid color-mix(in srgb, var(--catA) 45%, transparent); margin-top:4px}
.gRow textarea{flex:1; background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 25%, transparent); border-radius:16px;
  color:var(--white); font-family:'Sora'; font-weight:500; font-size:15px; text-align:center; padding:13px 15px; outline:none;
  backdrop-filter:blur(8px); resize:none; overflow:hidden; min-height:52px; line-height:1.5}
.gRow textarea:focus{border-color:var(--green); box-shadow:0 0 24px color-mix(in srgb, var(--catA) 25%, transparent)}
.gRow textarea::placeholder{color:rgba(200,230,218,.4); transition:opacity .2s}
.gRow textarea:focus::placeholder{opacity:0}
.stampLine{font-size:11.5px; letter-spacing:.08em; color:var(--green-soft); opacity:1; margin-bottom:13px; text-transform:uppercase}
.savedCard{background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 30%, transparent); border-radius:22px; padding:22px; backdrop-filter:blur(10px); text-align:left}
.savedCard .item, .dayBody .item{display:flex; gap:11px; font-size:14px; font-weight:300; line-height:1.6; margin-bottom:10px; color:var(--white)}
.savedCard .item:last-child{margin-bottom:0}
.savedCard .h, .dayBody .h{color:var(--green)}
.cdWrap{margin-top:16px; padding-top:15px; border-top:1px solid color-mix(in srgb, var(--catA) 30%, transparent); text-align:center}
.cdLabel{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-soft)}
.cd{font-family:'Cormorant Garamond',serif; font-size:40px; color:var(--green); margin-top:6px; text-shadow:0 0 18px color-mix(in srgb, var(--catA) 40%, transparent)}
.cdSub{font-size:14.5px; font-weight:400; opacity:.96; margin-top:5px}
.blessing{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color:var(--green-soft); margin-top:16px; line-height:1.5; text-align:center}
.histTitle{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-soft); opacity:1; margin:30px 0 12px; text-align:center}
.day{background:var(--card); border:1px solid rgba(255,255,255,.1); border-radius:18px; margin-bottom:10px; overflow:hidden}
.dayHead{display:flex; justify-content:space-between; align-items:center; padding:13px 17px; cursor:pointer}
.dayDate{font-size:13px; color:var(--white)}
.dayArrow{color:var(--green); transition:transform .3s}
.day.open .dayArrow{transform:rotate(90deg)}
.dayBody{max-height:0; overflow:hidden; transition:max-height .4s ease; padding:0 17px}
.day.open .dayBody{max-height:340px; padding:0 17px 15px}
/* overlays */
.overlay{display:none; position:fixed; inset:0; z-index:8; background:rgba(6,8,14,.9); backdrop-filter:blur(6px);
  padding:40px 22px; overflow-y:auto}
.overlay.on{display:flex; justify-content:center; align-items:flex-start}
.recap{width:100%; max-width:386px; background:#0f2019; border:1px solid color-mix(in srgb, var(--catA) 35%, transparent); border-radius:24px; padding:26px 22px; animation:reveal .6s ease both}
.recap h2{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:24px; color:var(--green-soft); text-align:center}
.recap .rSub{font-size:13px; font-weight:300; opacity:.96; text-align:center; margin-top:8px; line-height:1.6; color:var(--white)}
.recap .rDay{margin-top:16px}
.recap .rDate{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:6px}
.recap .rItem{font-size:13.5px; font-weight:300; line-height:1.6; padding-left:14px; position:relative; margin-bottom:4px; color:var(--white)}
.recap .rItem:before{content:'·'; position:absolute; left:2px; color:var(--green)}
/* all tools management */
.fGroup{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); margin:12px 2px 5px}
.fRow{display:flex; flex-wrap:wrap; gap:7px; padding:2px}
.fltBtn{display:flex; align-items:center; gap:8px; margin:14px auto 0; background:rgba(255,255,255,.07); border:1px solid color-mix(in srgb, var(--catA) 45%, transparent); color:var(--catB); border-radius:999px; padding:10px 20px; font-family:'Sora'; font-size:12.5px; font-weight:600; cursor:pointer}
.fltBtn svg{transition:transform .3s}
.fltBtn.open svg{transform:rotate(180deg)}
#fltPanel{display:none}
#fltPanel.open{display:block; animation:reveal .7s ease both}
.fChip{flex:0 0 auto; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.25); color:var(--lav); border-radius:999px; padding:7px 14px; font-family:'Sora'; font-size:12px; cursor:pointer; white-space:nowrap; transition:all .2s}
.fChip.on{background:var(--gold); border-color:var(--gold); color:#1c1204; font-weight:600}
.allWrap{margin-bottom:10px}
.allItem.offed{opacity:.6}
.allItem.offed .aTxt{filter:saturate(.7)}
.tgSec{margin:22px 0 4px}
.tgHead{cursor:pointer}
.tgSec+.allWrap{margin-top:44px}
#allList{padding-bottom:30px}
.tgSec:first-child{margin-top:6px}
.tgHead{display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:inherit; font-family:inherit; cursor:pointer; text-align:left}
.tgHead b{font-size:14.5px; font-weight:500; letter-spacing:.02em}
.tgHead .tgN{margin-left:auto; font-size:12px; opacity:.55; font-weight:300}
.tgHead .tgC{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.tgHead svg{transition:transform .25s; opacity:.5}
.tgSec.shut .tgHead svg{transform:rotate(-90deg)}
.tgSub{font-size:11.5px; opacity:.55; font-weight:300; margin:7px 2px 10px; line-height:1.5}
.tgBody{overflow:hidden}
.tgSec.shut .tgBody, .tgSec.shut .tgSub{display:none}
.allItem{position:relative; border-radius:16px; overflow:hidden; cursor:pointer; min-height:64px; display:flex; align-items:center; background-size:cover; background-position:center 30%}
.allItem .ov{position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(to right, var(--oc) 0%, transparent 100%)}
.allItem .aTxt{position:relative; padding:12px 16px; display:flex; flex-direction:column; gap:2px; flex:1}
.allItem .aTxt b{color:#fff; font-size:14px; font-weight:600}
.allItem .aTxt span{color:rgba(255,255,255,.95); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase}
.allItem.locked{filter:saturate(.4); opacity:.85}
.aCtrl{position:relative; display:flex; align-items:center; gap:10px; padding-right:12px}
.pvBtn{background:rgba(0,0,0,.4); border:1px solid currentColor; border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
.pvBtn svg{transition:transform .3s}
.allWrap.open .pvBtn svg{transform:rotate(180deg)}
.sw{position:relative; width:46px; height:26px; display:inline-block}
.sw input{opacity:0; width:0; height:0}
.sw span{position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.35); transition:background .25s; cursor:pointer}
.sw span:before{content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:2px; left:2px; transition:left .25s}
.sw input:checked + span{background:var(--swc,var(--gold))}
.sw input:checked + span:before{left:22px}
.drawer{max-height:0; overflow:hidden; transition:max-height .4s ease; background:var(--card); border-radius:0 0 16px 16px; margin:0 6px}
/* 260px taia descrierile lungi, mai ales de cand paragrafele se despart singure.
   O limita generoasa lasa tranzitia sa functioneze fara sa mascheze text. */
.drawer.open{max-height:1400px; border:1px solid rgba(255,255,255,.12); border-top:none}
.drawer p{font-size:14.5px; font-weight:400; line-height:1.7; padding:13px 15px 0; color:var(--white)}
.drawer p:last-child{padding-bottom:15px}
/* Sertarul se LIPESTE de buton, nu trece pe sub el: butonul are fundal translucid
   si blur, deci orice ii trece pe dedesubt se vede PRIN el. Cand sertarul e
   deschis, butonul isi pierde colturile de jos si bordura de jos, iar sertarul
   continua exact de acolo. */
.bwDrawer{margin:0 0 9px}
.bOpt.dOpen{border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent}
.bwDrawer.open{border-radius:0 0 15px 15px}
.bigCard p+p{margin-top:14px}
.syn{white-space:pre-line!important}
.drawer .onNote{color:var(--gold-soft); padding-bottom:14px; font-size:14.5px}
/* dock */
.dock{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:75; display:flex; gap:10px; align-items:center;
  background:rgba(14,12,28,.92); border:1px solid rgba(250,204,21,.3); border-radius:999px; padding:8px;
  backdrop-filter:blur(12px); box-shadow:0 8px 30px rgba(0,0,0,.35), 0 0 18px rgba(245,199,106,.12); transition:gap .85s cubic-bezier(.3,.65,.25,1), padding .85s cubic-bezier(.3,.65,.25,1), border-color .85s ease, background .85s ease, box-shadow .85s ease}
.dockBtn{display:flex; align-items:center; gap:8px; border:none; border-radius:999px; padding:12px 20px;
  font-family:'Sora'; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  max-width:230px; overflow:hidden; transition:all .85s cubic-bezier(.3,.65,.25,1)}
/* Dock deschis in stil fetru. Starea inchisa, cercul cu liniute, ramane neatinsa. */
.dock:not(.dMini){background:none !important; border:0 !important; box-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:0 !important; gap:8px}
/* placa incetosata din spatele dockului deschis, ca butoanele sa aiba pe ce sta */
.dock::before{content:''; position:absolute; left:-16px; right:-16px; top:-12px; bottom:-12px; z-index:-1;
  border-radius:999px; background:rgba(10,8,22,.42);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 10px 34px -12px rgba(0,0,0,.7);
  opacity:1; transform:scale(1); transition:opacity .55s ease, transform .85s cubic-bezier(.3,.65,.25,1)}
.dock.dMini::before{opacity:0; transform:scale(.55)}
.dock:not(.dMini) .dockBtn{border-style:solid; border-color:transparent; border-radius:0;
  border-width:19px 24px; padding:0 !important; min-height:16px; max-width:none;
  border-image-repeat:stretch; border-image-width:1; border-image-slice:64 fill;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:15px;
  background:none; box-shadow:none; animation:none}
.dock:not(.dMini) .dHome{border-image-source:var(--fvCream); color:rgba(27,23,48,.72)}
.dock:not(.dMini) .dIcon{border-image-source:var(--fvCream); color:rgba(27,23,48,.72); border-width:19px 17px}
.dock:not(.dMini) .dNext{border-image-source:var(--fvFill); color:#1b1730}
.dock:not(.dMini) .dockBtn svg{width:17px; height:17px}
.dock:not(.dMini) .dIcon svg{width:21px; height:21px}
.dHome{background:rgba(255,255,255,.12); color:var(--white)}
.dNext{background:linear-gradient(135deg,#f5c76a,#e9a94c); color:#141020; animation:dockGlow 4s ease-in-out infinite}
@keyframes dockGlow{0%,100%{box-shadow:0 0 10px rgba(255,255,255,.15)}50%{box-shadow:0 0 22px rgba(245,199,106,.7)}}
body::after{content:''; position:fixed; left:0; right:0; bottom:0; height:10vh; pointer-events:none; z-index:4;
  background:linear-gradient(to top, rgba(245,199,106,.13), rgba(245,199,106,0))}
.dockBg{display:none; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; backdrop-filter:blur(10px); box-shadow:0 6px 20px rgba(0,0,0,.35)}
.dock.dMini{gap:0; padding:0; border-color:transparent; background:transparent; box-shadow:none; backdrop-filter:none;
  transition:gap .85s cubic-bezier(.3,.65,.25,1), padding .85s cubic-bezier(.3,.65,.25,1), border-color .5s ease, background .5s ease, box-shadow .5s ease}
.dock.dMini .dockBtn{transition:all .85s cubic-bezier(.3,.65,.25,1)}
.dock.dMini .dockBg{display:flex}
.dock.dMini .dockBtn{max-width:0; padding:12px 0; margin:0; opacity:0; filter:blur(5px); transform:translateX(var(--dx,0)); pointer-events:none}
/* particles + toast */
.cta,.dslv,.dNext{background-size:200% 100%; animation:gradMove 7s ease-in-out infinite alternate, softPulse 3.4s ease-in-out infinite}
@keyframes gradMove{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes softPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.09)}}
.beat{animation:beatK .7s cubic-bezier(.22,.7,.3,1)!important}
@keyframes beatK{from{opacity:.35; filter:blur(7px); transform:translateY(7px)}to{opacity:1; filter:blur(0); transform:translateY(0)}}
.toast{pointer-events:none; position:fixed; left:50%; bottom:92px; transform:translateX(-50%) translateY(14px); opacity:0; filter:blur(7px); z-index:9;
  background:rgba(16,14,32,.95); border:1px solid rgba(255,255,255,.35); border-radius:999px;
  padding:12px 22px; font-size:13.5px; color:var(--white); backdrop-filter:blur(8px);
  transition:all .55s cubic-bezier(.22,.7,.3,1); white-space:normal; text-align:center; line-height:1.45;
  max-width:min(86vw,360px); box-sizing:border-box; overflow-wrap:break-word; hyphens:none; text-wrap:balance}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1; filter:blur(0)}
#sparkBox{display:none; position:absolute; right:14px; top:50%; transform:translateY(-50%); align-items:center; gap:5px; background:rgba(250,204,21,.1); border:1px solid rgba(250,204,21,.35); color:#fde68a; border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:box-shadow .6s ease, background .6s ease}
#sparkBox.sparkGlow{background:rgba(250,204,21,.22); box-shadow:0 0 24px rgba(250,204,21,.45)}
.sparkFloat{position:fixed; z-index:80; box-sizing:border-box; display:flex; align-items:center; gap:7px;
  background:rgba(250,204,21,.12); border:1px solid rgba(250,204,21,.35); border-radius:999px; padding:0 12px;
  backdrop-filter:blur(10px); box-shadow:0 6px 20px rgba(0,0,0,.32); white-space:nowrap; overflow:hidden;
  max-width:min(62vw,270px); pointer-events:none; opacity:0; filter:blur(6px); transform:translateX(12px);
  transition:opacity .5s cubic-bezier(.3,.65,.25,1), filter .5s cubic-bezier(.3,.65,.25,1), transform .5s cubic-bezier(.3,.65,.25,1)}
.sparkFloat b{color:#fde68a; font-size:12.5px; font-weight:600; flex-shrink:0}
.sparkFloat span{color:rgba(255,255,255,.9); font-size:11.5px; font-weight:300; overflow:hidden; text-overflow:ellipsis}
.sparkFloat.on{opacity:1; filter:blur(0); transform:translateX(0)}
.sparkFloat.off{opacity:0; filter:blur(5px); transform:translateX(12px)}
.ritCard{position:relative; margin:18px 0 6px; border-radius:22px; overflow:hidden; border:1px solid rgba(250,204,21,.35); background-size:cover; background-position:center; min-height:148px; cursor:pointer; display:flex; align-items:flex-end}
.ritCard .rOv{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,24,.05) 0%, rgba(10,9,24,.82) 88%)}
/* Ritual terminat: cardul se umple de verde. Verdele e literal, nu `var(--green)`,
   fiindca acela e redirectat pe culoarea categoriei si ar iesi albastru sau violet.
   Terminarea e acelasi semnal in toata aplicatia, deci merita o culoare proprie. */
.ritCard.done{border-color:rgba(52,211,153,.6)}
.ritCard.done .rOv{background:linear-gradient(180deg, rgba(6,40,29,.55) 0%, rgba(5,30,22,.9) 88%)}
.ritCard.done .rB{background:rgba(52,211,153,.22); border-color:rgba(52,211,153,.65); color:#a7f3d0}
.ritCard.done .rT{color:#d1fae5}
.ritCard.done .rChk{display:inline-flex; align-items:center; gap:6px; margin-top:9px; color:#6ee7b7;
  font-size:12.5px; font-weight:600}
.ritCard.done .rChk i{width:17px; height:17px; border-radius:50%; background:#34d399; color:#04231a;
  display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:11px}
.ritCard .rIn{position:relative; padding:16px 17px; width:100%}
.ritCard .rT{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700; font-size:24px; line-height:1.1}
.ritCard .rS{font-size:12px; font-weight:300; opacity:.9; margin-top:4px}
.ritCard .rB{display:inline-block; margin-top:11px; background:rgba(250,204,21,.16); border:1px solid rgba(250,204,21,.45); color:#fde68a; border-radius:999px; padding:7px 15px; font-size:12.5px; font-weight:600}
.moodGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.moodChip{border-radius:16px; padding:14px 12px; font-size:14px; font-weight:600; text-align:center; cursor:pointer; background:rgba(255,255,255,.05); border:1px solid var(--mc); color:#fff; transition:background .4s ease}
.moodChip:active{background:rgba(255,255,255,.14)}
.moodChip .md{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--mc); margin-right:7px}
.ritCircle{width:150px; height:150px; border-radius:50%; margin:26px auto 14px; border:2px solid rgba(250,204,21,.55); background:radial-gradient(circle, rgba(250,204,21,.18) 0%, rgba(250,204,21,.03) 70%); transform:scale(1); transition:transform 4s ease-in-out}
.ritCircle.in{transform:scale(1.28); transition-duration:4s}
.ritCircle.out{transform:scale(1); transition-duration:6s}
.qbsWrap{position:relative}
/* pozele se schimba prin blur si opacitate, nu prin glisare */
.qbsStage{position:relative; width:min(80%,258px); margin:0 auto; aspect-ratio:3/4}
.qbsSlide{position:absolute; inset:0; opacity:0; filter:blur(16px); transform:scale(1.04);
  transition:opacity .85s ease, filter .85s ease, transform .85s ease; pointer-events:none}
.qbsSlide.on{opacity:1; filter:blur(0); transform:scale(1)}
.qbsView{position:relative; width:100%; height:100%; border-radius:20px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, #2a1030, #0d0510); border:1px solid rgba(255,255,255,.09)}
.qbsView img{width:100%; height:100%; object-fit:cover; display:block; opacity:.9}
/* punctele unei zone: toate se vad palid, cele active pulseaza impreuna */
.qbsDot{position:absolute; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%);
  background:rgba(253,230,138,.26); border:1px solid rgba(253,230,138,.4); transition:all .5s ease; pointer-events:none}
.qbsDot.on{width:19px; height:19px; background:#fde68a; border-color:#fff;
  box-shadow:0 0 18px 6px rgba(250,204,21,.75); animation:qbsPulse 1.5s ease-in-out infinite}
.qbsDot.on::after{content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(253,230,138,.7); animation:qbsRing 1.9s ease-out infinite}
.qbsDot.done{background:rgba(253,230,138,.5); border-color:rgba(253,230,138,.65)}
.qbsMus{display:flex; align-items:center; justify-content:center; gap:7px; margin:14px auto 0; padding:8px 15px;
  border-radius:99px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05);
  color:inherit; font-family:inherit; font-size:12px; cursor:pointer; width:auto}
.qbsMus.on{border-color:color-mix(in srgb, var(--catA) 50%, transparent); color:var(--catB); background:color-mix(in srgb, var(--catA) 10%, transparent)}
@keyframes qbsPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.18)}}
@keyframes qbsRing{0%{transform:scale(.7); opacity:.9}70%{transform:scale(2.1); opacity:0}100%{opacity:0}}}}
.qbsFig .lim{fill:rgba(255,255,255,.10)}
.qbsFig .on{fill:#facc15; filter:drop-shadow(0 0 9px rgba(250,204,21,.75))}
.qbsMsg{font-size:16.5px; margin:16px 0 0; min-height:24px; color:#fde68a; transition:opacity .3s ease}
.qbsBar{height:5px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; margin:16px auto 0; max-width:230px}
.qbsBar i{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#facc15,#fde68a)}
.qbsBar i.go{animation:qbsFill 7s linear forwards}
/* Bara de un minut: `go` are animatie de 7s, iar o ANIMATIE bate o tranzitie,
   deci bara se umplea in 7 secunde desi ceream 60 prin `transition`. */
.qbsBar i.min60{animation:qbsFill 60s linear forwards}
@keyframes qbsFill{from{width:0}to{width:100%}}
.qbsMode{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.qbsMode button{width:100%; text-align:left; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:inherit; font-family:inherit; cursor:pointer}
.qbsMode button b{display:block; font-size:15px; color:var(--catB)}
.qbsMode button span{display:block; font-size:12px; opacity:.7; margin-top:3px; font-weight:300}
.csSeg{display:flex; gap:6px; background:rgba(255,255,255,.06); border-radius:14px; padding:4px; margin-top:12px}
.csSeg button{flex:1; padding:9px 4px; border-radius:11px; border:0; background:transparent; color:inherit; font-family:inherit; font-size:12.5px; cursor:pointer; opacity:.6}
.csSeg button.on{background:rgba(255,255,255,.13); opacity:1; color:var(--catB)}
.csThemes{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.csThemes button{width:100%; text-align:left; padding:15px 16px; border-radius:17px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:inherit; font-family:inherit; cursor:pointer}
.csThemes button b{display:block; font-size:15.5px; color:var(--catB)}
.csThemes button span{display:block; font-size:12px; opacity:.7; margin-top:3px; font-weight:300}
.csCard{position:relative; min-height:216px; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:26px 20px; border-radius:22px; border:1px solid rgba(255,255,255,.15); background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); margin-top:14px}
.csCard.flip{animation:csIn .4s ease}
@keyframes csIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.csQ{font-size:19px; line-height:1.45; margin:0}
.csWhy{font-size:11.5px; line-height:1.5; opacity:.78; margin:14px 0 0; color:#fde68a}
.csCount{font-size:11px; opacity:.5; margin-top:12px; text-align:center}
.csFjWhy{font-size:11px; opacity:.75; color:var(--catB); margin:0 0 8px; font-weight:300}
.csBig{display:flex; flex-direction:column; gap:12px; margin-top:18px}
.csBig button{width:100%; text-align:left; padding:18px 18px; border-radius:20px; border:1px solid rgba(255,255,255,.15); background:linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); color:inherit; font-family:inherit; cursor:pointer}
.csBig button b{display:block; font-size:17px; color:var(--catB)}
.csBig button span{display:block; font-size:12.5px; opacity:.72; margin-top:4px; font-weight:300}
.csDob{margin-top:16px}
.csDob label{display:block; font-size:12px; opacity:.7; margin:0 0 6px; font-weight:300}
.csDob input{width:100%; box-sizing:border-box; padding:13px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:inherit; font-family:inherit; font-size:15px}
.csCalc{font-size:12px; color:#fde68a; margin:8px 0 0; min-height:18px; font-weight:300}
.csRow{display:flex; gap:8px; margin-top:10px}
.csRow button{flex:1; padding:13px 4px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:inherit; font-family:inherit; font-size:13.5px; cursor:pointer}
.csRow button.on{background:color-mix(in srgb, var(--catA) 16%, transparent); border-color:color-mix(in srgb, var(--catA) 50%, transparent); color:var(--catB)}
.csDots{display:flex; gap:5px; justify-content:center; margin-top:14px}
.csDots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2)}
.csDots i.on{background:#facc15}
.csDots i.now{background:#fde68a; transform:scale(1.5)}
.csLoad{text-align:center; padding:44px 20px}
.csLoad b{display:block; font-size:16px; color:#fde68a; margin-bottom:8px}
.csCats{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.csCats button{padding:10px 13px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:inherit; font-family:inherit; font-size:13px; cursor:pointer; line-height:1.3}
.csCats button.on{background:color-mix(in srgb, var(--catA) 16%, transparent); border-color:color-mix(in srgb, var(--catA) 55%, transparent); color:var(--catB)}
.csCats button.off{opacity:.34}
.csCount2{font-size:12px; opacity:.7; margin:14px 0 0; font-weight:300; text-align:center}
.csGrp{margin-top:18px}
.csGrp>b{display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; opacity:.45; font-weight:400; margin:0 0 8px 2px}
.csCatCol{display:flex; flex-direction:column; gap:8px}
.csCatCol button{display:block; width:100%; box-sizing:border-box; text-align:center; padding:13px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:inherit; font-family:inherit; font-size:14px; cursor:pointer; transition:background .15s, border-color .15s}
.csCatCol button.on{background:color-mix(in srgb, var(--catA) 16%, transparent); border-color:color-mix(in srgb, var(--catA) 55%, transparent); color:var(--catB)}
.csCatCol button.off{opacity:.32}
.csCard{min-height:216px}
.csCard.play{min-height:390px; padding:38px 26px}
.csSlide .csCard.play .csQ{font-size:17px; line-height:1.5}
.csCard.play .csQ{font-size:21px; line-height:1.5}
.csPlWrap{margin-top:16px}
.csPlWrap>b{display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; opacity:.5; font-weight:400; margin:0 0 7px 2px}
.csPlWrap.on>b{color:#fde68a; opacity:.9}
.csRelRow{display:flex; flex-wrap:wrap; gap:7px; margin-top:8px}
.csRelRow button{padding:9px 13px; border-radius:99px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:inherit; font-family:inherit; font-size:12.5px; cursor:pointer}
.csRelRow button.on{background:color-mix(in srgb, var(--catA) 16%, transparent); border-color:color-mix(in srgb, var(--catA) 55%, transparent); color:var(--catB)}
.anWait{opacity:.55; animation:anPulse 1.5s ease-in-out infinite}
@keyframes anPulse{0%,100%{opacity:.4}50%{opacity:.8}}
.ritDots{display:flex; gap:7px; justify-content:center; margin:14px 0 14px}
.ritDots i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18)}
.ritDots i.on{background:#fde68a}
.rHist{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.rHist .hd{width:26px; text-align:center; font-size:9.5px; opacity:.75}
.rHist .hd b{display:block; width:14px; height:14px; border-radius:50%; margin:0 auto 4px; background:rgba(255,255,255,.12)}
.ritOptL{color:#fde68a; font-weight:700; margin-right:8px}
.ritBWrap{position:relative; width:176px; height:176px; margin:24px auto 12px}
.deBWrap{position:relative; width:114px; height:114px; margin:20px auto 10px}
.deBWrap .ritRing{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(250,204,21,.4)}
.deBWrap .ritCircle{position:absolute; inset:9px; width:auto; height:auto; margin:0}
.ritRing{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(250,204,21,.4)}
.ritBWrap .ritCircle{position:absolute; inset:12px; width:auto; height:auto; margin:0}
.muRow{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:12px 13px; margin-bottom:9px; transition:border-color .3s ease, background .3s ease}
.muRow.on{border-color:rgba(250,204,21,.5); background:rgba(250,204,21,.07)}
.muPlay{width:42px; height:42px; flex-shrink:0; border-radius:50%; border:1px solid rgba(250,204,21,.45); background:rgba(250,204,21,.12); color:#fde68a; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center}
.muInfo{flex:1; min-width:0; cursor:pointer}
.muInfo b{display:block; font-size:13.5px; font-weight:600; line-height:1.3}
.muInfo span{display:block; font-size:11px; opacity:.65; margin-top:2px}
.muDl{width:34px; height:34px; flex-shrink:0; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); color:rgba(255,255,255,.8); font-size:14px; cursor:pointer}
.muDl.on{border-color:color-mix(in srgb, var(--catA) 50%, transparent); color:var(--catB); background:color-mix(in srgb, var(--catA) 12%, transparent)}
.muNow{margin:-4px 0 12px; padding:0 4px}
.muBarBg{height:7px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; cursor:pointer}
.muBarFill{height:100%; width:0%; background:linear-gradient(90deg,#f5c76a,#fde68a)}
.muMini{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom, 0px)); z-index:74; width:min(92vw,400px); background:rgba(14,12,28,.95); border:1px solid rgba(250,204,21,.32); border-radius:18px; padding:9px 12px 10px; backdrop-filter:blur(12px); box-shadow:0 10px 30px rgba(0,0,0,.45)}
.muMiniBarBg{height:4px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden}
.muMiniBar{height:100%; width:0%; background:linear-gradient(90deg,#f5c76a,#fde68a)}
.muMiniRow{display:flex; align-items:center; gap:9px; margin-top:8px}
.muMiniT{flex:1; min-width:0; font-size:12.5px; font-weight:300; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
.muMiniBtn{width:32px; height:32px; flex-shrink:0; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fde68a; font-size:11px; cursor:pointer}
/* Postul, in aceeasi lume de fetru: o bucata de fetru galben cusuta,
   cu progresul ca o fasie de fetru verde. */
.fbPin{width:100%; box-sizing:border-box; border-radius:22px; padding:16px 18px 15px; margin:14px 0 0; cursor:pointer;
  background-image:url(img/css-fb-pin.webp); background-size:cover; background-position:center; background-color:#f0d7a4;
  border:0; color:#4a3a12;
  box-shadow:inset 0 0 0 1px rgba(74,58,18,.10), 0 1px 1px rgba(22,18,31,.10), 0 12px 26px -14px rgba(22,18,31,.55);
  position:relative; overflow:hidden}
.fbPin::before{content:''; position:absolute; inset:7px; border-radius:16px; pointer-events:none;
  border:1.5px dashed rgba(74,58,18,.28)}
.fbPin > *{position:relative}
.fbPinTop{display:flex; align-items:center; gap:10px}
.fbPinT{font-family:'Playfair Display',Georgia,serif; font-size:14px; font-weight:700; color:#3c2f0d;
  flex:1; min-width:0; line-height:1.35}
.fbPinTime{font-family:'Playfair Display',Georgia,serif; font-variant-numeric:tabular-nums;
  font-weight:700; font-size:20px; color:#3c2f0d; line-height:1.2}
.fbPinBarBg{height:14px; border-radius:99px; background:rgba(74,58,18,.13); overflow:hidden; margin-top:12px;
  box-shadow:inset 0 1px 3px rgba(74,58,18,.22), inset 0 0 0 1px rgba(74,58,18,.10)}
.fbPinBar{height:100%; border-radius:99px; transition:width .8s ease;
  box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.42), inset 0 0 0 2.6px rgba(20,60,40,.18);
  background-image:url(img/css-fb-pin-bar.webp); background-size:auto 100%; background-position:left center;
  background-color:#5fb98c; box-shadow:inset 0 0 0 1px rgba(20,60,40,.16)}
.fbPinTip{font-size:12.5px; font-weight:400; line-height:1.5; color:rgba(60,47,13,.78); margin:10px 0 0;
  text-wrap:balance; hyphens:none}
.fbPinHit{cursor:pointer; -webkit-tap-highlight-color:transparent}
.fbPinChev{flex:0 0 auto; display:flex; align-items:center; color:rgba(60,47,13,.55);
  transition:transform .34s cubic-bezier(.3,.7,.3,1)}
.fbPinChev svg{width:17px; height:17px}
.fbPin.isOpen .fbPinChev{transform:rotate(180deg)}
.fbPinMore{overflow:hidden; max-height:0; opacity:0;
  transition:max-height .42s cubic-bezier(.3,.7,.3,1), opacity .3s ease, margin-top .42s ease}
.fbPin.isOpen .fbPinMore{max-height:260px; opacity:1; margin-top:4px}
.fbPinPh{font-family:'Playfair Display',Georgia,serif; font-size:14px; color:rgba(60,47,13,.85); margin-top:10px}
.fbPinGo{width:100%; box-sizing:border-box; margin-top:12px; border:0; cursor:pointer; padding:11px 12px;
  border-radius:999px; background:rgba(60,47,13,.10); color:#3c2f0d;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:14px;
  -webkit-tap-highlight-color:transparent}
.fbPinGo:active{transform:scale(.985)}
#muTop{position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; z-index:80}
.muTopIn{background:rgba(14,12,28,.94); backdrop-filter:blur(14px); border-bottom:1px solid rgba(250,204,21,.22); box-shadow:0 6px 22px rgba(0,0,0,.35)}
.muTb{width:32px; height:32px; min-width:32px; flex:0 0 32px; border-radius:50%; border:none; background:none; color:rgba(255,255,255,.85); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0}
.muTbMain{background:rgba(250,204,21,.16); border:1px solid rgba(250,204,21,.45); color:#fde68a}
.muTbX{width:29px; height:29px; min-width:29px; flex:0 0 29px; opacity:.5; margin-left:2px}
.muCtl{position:relative; width:40px; height:40px; min-width:40px; flex:0 0 40px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:rgba(255,255,255,.8); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:all .3s ease}
.muCtl.on{border-color:rgba(250,204,21,.6); color:#fde68a; background:rgba(250,204,21,.14)}
.muCtl.muMain{width:56px; height:56px; min-width:56px; flex:0 0 56px; background:rgba(250,204,21,.16); border-color:rgba(250,204,21,.5); color:#fde68a; box-shadow:0 0 22px rgba(250,204,21,.2)}
.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}
#hsStreakRow .st .bar>i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--catA,#a78bfa), var(--catB,#c4b5fd)); transition:width .5s ease}
#hsStreakRow .nx{font-size:10.5px; opacity:.55; flex-shrink:0; text-align:right}
/* ---- Ritualul ca overlay peste tot, nu alt ecran ---- */






/* Cardul de dezvaluire: acelasi pătrat de fetru, dar cu titlu si text lung. */
.hsRev{text-align:left}
.hsRev{min-height:0}
.hsRev .hsIn{justify-content:center; gap:11px; text-align:left; padding:24px 22px}
.hsRevN{font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:64px; line-height:.9;
  color:#141022; align-self:center}
.hsRevT{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:20px; color:#141022; align-self:center;
  text-align:center}
.hsRevEy{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(20,16,34,.55); align-self:center}
.hsRevP{background:rgba(255,255,255,.86); border-radius:16px; padding:14px 15px; width:100%; box-sizing:border-box;
  font-size:14px; line-height:1.6; color:#1b1730}
.anBigN{font-size:46px; letter-spacing:.02em}
#anCards .hsSq{min-height:0}
#anCards .hsIn{padding:26px 22px; gap:12px}
.anBigN .dg{display:inline-block}
#anCards .guide{font-style:italic; color:rgba(20,16,34,.7); font-size:13px}
#anCards .forYou{font-size:13.5px}
#anCards #anMoreWrap{margin-top:12px}

.hsRevRow{display:block; text-align:left; background:rgba(255,255,255,.86);
  border-radius:13px; padding:10px 13px; margin-top:8px}
.hsRevRow b{display:block; margin-bottom:3px; font-family:'Playfair Display',Georgia,serif; font-size:14px; color:#141022}
.hsRevRow span{display:block; font-size:13px; line-height:1.5; color:rgba(20,16,34,.78)}
.hsRevFlip{display:flex; align-items:center; gap:8px; text-align:left; background:rgba(255,255,255,.86);
  border-radius:13px; padding:10px 13px; margin-top:8px; font-size:13px; line-height:1.45}
.hsRevFlip i{opacity:.5; font-style:normal; flex:0 0 auto}
.hsRevFlip em{font-style:normal; font-weight:600}
.hsRevTick{text-align:left; background:rgba(255,255,255,.7); border-radius:12px; padding:9px 12px; margin-top:7px;
  font-size:13px; line-height:1.45; color:rgba(20,16,34,.8)}
.hsRevTick.on{background:rgba(255,255,255,.9)}
.hsRev .hsRevP{width:100%}
/* ============================================================
   KIT FETRU, componentele comune tuturor uneltelor.
   Orice unealta noua se scrie in clasele astea, nu in altele.
   hsCar   carusel cu prindere pe slide
   hsSq    patrat de fetru, cadrul unui pas
   hsQ     placa alba cu intrebarea
   hsOpt   pastila de raspuns
   hsBtn   butonul, 52px, ca peste tot
   hsPlate placa alba de scris
   hsGrid  grila de zile din istoric
   ============================================================ */
.hsCar{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; margin:0 -18px}
.hsCar::-webkit-scrollbar{display:none}
.hsCar > .hsSlide{flex:0 0 100%; scroll-snap-align:center; padding:0 18px; box-sizing:border-box}
.hsSq{position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:22px;
  background-image:var(--fvPlain); background-size:cover; background-position:center;
  background-blend-mode:multiply; background-color:var(--catFelt,#cfd8e6);
  box-shadow:0 14px 34px -20px rgba(10,8,22,.75)}
.hsSq.tall{aspect-ratio:3/4}
.hsSq.flow{aspect-ratio:auto; min-height:340px}
.hsSq.flow.hsRev{min-height:300px}
.hsIn{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 20px; text-align:center; gap:14px; overflow-y:auto}
.hsIn::-webkit-scrollbar{display:none}
.hsSq.flow .hsIn{position:relative; inset:auto; height:auto; overflow:visible; justify-content:flex-start}
.hsIn > *{max-width:100%; flex:0 0 auto}
.hsStep{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(20,16,34,.5)}
.hsQ{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:20px; line-height:1.32; color:#141022;
  background:rgba(255,255,255,.82); border-radius:16px; padding:13px 16px; width:100%; max-width:300px; box-sizing:border-box}
.hsBig{display:flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:24px; color:#141022}
.hsLine{font-size:13px; line-height:1.45; color:rgba(20,16,34,.72); max-width:290px}
.hsOpts{display:flex; flex-direction:column; gap:9px; align-items:center; width:100%}
.hsOptRow{display:flex; gap:9px; justify-content:center; flex-wrap:nowrap}
.hsOpt{border-style:solid; border-color:transparent; border-radius:0; cursor:pointer; padding:0;
  border-width:16px 17px; min-height:13px; background:none;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:13.5px; color:rgba(27,23,48,.82);
  display:inline-flex; align-items:center; -webkit-tap-highlight-color:transparent}
.hsOpt.on{border-image-source:var(--fvFill); color:#1b1730}
.hsOpt:active{transform:scale(.97)}
.hsPlate{width:100%; max-width:300px; box-sizing:border-box; background:rgba(255,255,255,.92); border-radius:18px;
  padding:14px; display:flex; flex-direction:column; gap:11px}
.hsPlate textarea, .hsPlate input{width:100%; box-sizing:border-box; border:0; background:none; outline:none;
  color:#1b1730; font-family:'Montserrat',system-ui,sans-serif; font-size:14.5px; line-height:1.6; resize:none}
.hsBtn{width:100%; box-sizing:border-box; border:0; cursor:pointer; color:#1b1730; padding:0; background:none;
  border-style:solid; border-color:transparent; border-width:17px 18px; min-height:52px;
  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:16px;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent}
.hsBtn.ghostB{border-image-source:var(--fvCream); color:rgba(27,23,48,.72); font-size:14.5px}
.hsBtn:active{transform:scale(.985)}
.hsDots{display:flex; gap:6px; justify-content:center; padding:14px 0 2px}
.hsDots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.24)}
.hsDots i.on{background:var(--catA,#a78bfa)}
.hsRound{flex:0 0 auto; width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer; padding:0; color:rgba(27,23,48,.75);
  background-image:var(--fvRound); background-size:100% 100%; background-repeat:no-repeat;
  -webkit-tap-highlight-color:transparent}
.hsRound svg{width:19px; height:19px}
.hsEndRow{display:flex; align-items:center; gap:10px; width:100%; max-width:300px}
.hsEndRow .hsBtn{flex:1 1 auto; min-width:0; font-size:13.5px}
.hsGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.hsDay{position:relative; aspect-ratio:1/1; border-radius:18px; overflow:hidden; cursor:pointer; border:0; padding:14px 12px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; text-align:left;
  background-image:var(--fvSq); background-size:100% 100%; background-repeat:no-repeat; background-blend-mode:multiply;
  -webkit-tap-highlight-color:transparent; box-shadow:0 10px 24px -18px rgba(10,8,22,.9)}
.hsDay:active{transform:scale(.975)}
.hsDay .n{font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:34px; line-height:.95; color:#141022}
.hsDay .m{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(20,16,34,.6); margin-top:2px}
.hsDay .t{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:14px; color:#141022; margin-top:7px}
/* ================= Jurnal liber, in limbajul de fetru =================
   Cartonasul cu intrebarea zilei sta pe fetru, hartia de scris e o foaie alba
   cu cusatura, iar butoanele sunt aceleasi pastile ca in restul aplicatiei. */
.fjWrap{margin-top:2px}
.fjCard{position:relative; border-radius:22px; overflow:hidden; padding:22px 20px 20px; text-align:center;
  background-image:var(--fvPlain); background-size:cover; background-position:center;
  background-blend-mode:multiply; background-color:var(--catFelt,#cfd8e6);
  box-shadow:0 14px 34px -22px rgba(10,8,22,.8)}
.fjEyebrow{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(20,16,34,.55)}
.fjQ{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:19px; line-height:1.36; color:#141022;
  background:rgba(255,255,255,.82); border-radius:16px; padding:14px 16px; margin:11px auto 0; max-width:300px;
  box-sizing:border-box}
.fjWhy{font-size:12px; line-height:1.5; color:rgba(20,16,34,.66); margin:10px auto 0; max-width:290px}
.fjBtn{width:100%; box-sizing:border-box; margin-top:14px; border:0; cursor:pointer; padding:0; background:none;
  border-style:solid; border-color:transparent; border-width:17px 18px; min-height:52px;
  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:16px; color:#1b1730;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent}
.fjBtn.ghostB{border-image-source:var(--fvCream); color:rgba(27,23,48,.72); font-size:14.5px}
.fjBtn:active{transform:scale(.985)}
/* foaia de scris */
.fjPaper{position:relative; margin-top:16px; border-radius:20px; padding:18px 17px;
  background-image:var(--fvPlain); background-size:cover; background-position:center;
  background-color:#f6f3ec; background-blend-mode:multiply;
  box-shadow:0 12px 30px -22px rgba(10,8,22,.8)}
.fjPaper::after{content:''; position:absolute; inset:8px; border-radius:14px; pointer-events:none;
  border:1.6px dashed rgba(20,16,34,.16)}
.fjPaper textarea{position:relative; width:100%; box-sizing:border-box; min-height:170px; resize:none;
  border:0; background:none; outline:none; color:#1b1730;
  font-family:'Montserrat',system-ui,sans-serif; font-size:14.5px; font-weight:400; line-height:1.7}
.fjPaper textarea::placeholder{color:rgba(20,16,34,.42)}
.fjHistT{font-family:'Playfair Display',Georgia,serif; font-size:16px; margin:26px 0 10px; color:#fff}
/* ================= Mood Tracker ca un carusel de postari =================
   O singura notare pe zi, in patru intrebari, cu analiza pe ultimul slide. */
.mtCar{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; margin:0 -18px}
.mtCar::-webkit-scrollbar{display:none}
.mtCar > .mtSlide{flex:0 0 100%; scroll-snap-align:center; padding:0 18px; box-sizing:border-box}
.mtCard{position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:22px;
  background-size:cover; background-position:center; box-shadow:0 14px 34px -20px rgba(10,8,22,.75)}
.mtCard.mtFlow{aspect-ratio:auto; min-height:340px}
.mtIn{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:26px 22px; text-align:center; gap:16px; overflow-y:auto}
.mtIn::-webkit-scrollbar{display:none}
.mtFlow .mtIn{position:relative; inset:auto; height:auto; overflow:visible; justify-content:flex-start}
.mtIn > *{max-width:100%; flex:0 0 auto}
.mtStepN{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(20,16,34,.5)}
.mtQ{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:21px; line-height:1.3; color:#141022;
  background:rgba(255,255,255,.74); border-radius:16px; padding:12px 16px; width:100%; max-width:300px; box-sizing:border-box}
.mtOpts{display:flex; flex-direction:column; gap:9px; align-items:center; width:100%}
.mtOptRow{display:flex; gap:9px; justify-content:center; flex-wrap:nowrap}
.mtOpt{border-style:solid; border-color:transparent; border-radius:0; cursor:pointer; padding:0;
  border-width:16px 17px; min-height:13px; background:none;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:13.5px; color:rgba(27,23,48,.82);
  display:inline-flex; align-items:center; -webkit-tap-highlight-color:transparent}
.mtOpt.on{border-image-source:var(--fvFill); color:#1b1730}
.mtOpt:active{transform:scale(.97)}
.mtOpt .mtSw{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:1px}
.mtPlate{width:100%; max-width:300px; box-sizing:border-box; background:rgba(255,255,255,.92); border-radius:18px;
  padding:16px; display:flex; flex-direction:column; gap:13px; box-shadow:0 10px 30px -18px rgba(20,16,34,.5)}
.mtPlate input{width:100%; box-sizing:border-box; border:1px solid rgba(20,16,34,.16); border-radius:12px;
  padding:12px 13px; font-family:'Montserrat',system-ui,sans-serif; font-size:14.5px; color:#141022; background:#fff; outline:none}
.mtBtn{width:100%; box-sizing:border-box; border:0; cursor:pointer; color:#1b1730; padding:0; background:none;
  border-style:solid; border-color:transparent; border-width:17px 18px; min-height:14px;
  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:16px;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent}
.mtBtn.ghostB{border-image-source:var(--fvCream); color:rgba(27,23,48,.7); font-size:14px}
.mtDots{display:flex; gap:6px; justify-content:center; padding:14px 0 2px}
.mtDots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.24)}
.mtDots i.on{background:var(--catA,#a78bfa)}
/* Slide-ul de analiza: totul strans, ca sa incapa in acelasi patrat */
.mtAn .mtIn{gap:9px; padding:20px 20px}
.mtBig{display:flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:25px; color:#141022}
.mtBig .mtSw{width:14px; height:14px; margin:0; border-radius:50%; flex:0 0 auto}
.mtLine{font-size:13px; line-height:1.45; color:rgba(20,16,34,.72); max-width:290px}
.mtNote{font-size:12.5px; padding:9px 12px}
.mtAn .mtWeek span{width:16px; height:16px}
.mtAn .mtEndRow{margin-top:2px}
.mtAn .mtRedoB{font-size:12.5px; border-width:14px 15px; min-height:12px}
.mtAn .mtBackR{width:46px; height:46px}
.mtAnRow{display:flex; align-items:center; gap:9px; width:100%; max-width:300px; text-align:left;
  background:rgba(255,255,255,.86); border-radius:14px; padding:11px 13px; box-sizing:border-box;
  font-size:13px; line-height:1.5; color:#141022}
.mtAnRow b{font-family:'Playfair Display',Georgia,serif}
.mtAnRow .mtSw{border-radius:50%; margin:0}
.mtWeek{display:flex; gap:6px; justify-content:center; margin-top:2px}
.mtWeek span{width:15px; height:15px; border-radius:50%; background:rgba(20,16,34,.12)}
/* Randul de la finalul analizei: schimbarea notarii si intoarcerea acasa */
.mtEndRow{display:flex; align-items:center; gap:10px; width:100%; max-width:300px}
.mtEndRow .mtRedoB{flex:1 1 auto; min-width:0; font-size:13.5px}
.mtBackR{flex:0 0 auto; width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer; padding:0; color:rgba(27,23,48,.75);
  background-image:url(img/css-fv-dots.webp); background-size:100% 100%; background-repeat:no-repeat; background-position:center;
  -webkit-tap-highlight-color:transparent}
.mtBackR svg{width:19px; height:19px}
.mtBackR:active{transform:scale(.96)}
/* Zilele trecute, ca un feed de patrate colorate dupa stare */
.mtHist{margin-top:20px}
.mtHistT{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 4px 10px}
.mtGridD{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
/* Fibra de fetru, in tonuri de gri, se amesteca peste orice culoare de stare. */
:root{--fvSq:url(img/fv-sq.webp);
  --fvRound:url(img/css-fv-dots.webp);
  --fvPlain:url(img/fv-plain.webp);
  --fvTex:url(img/fv-tex.webp)}
.mtDay{position:relative; aspect-ratio:1/1; border-radius:18px; overflow:hidden; cursor:pointer; border:0; padding:14px 12px;
  background-image:url(img/fv-sq.webp); background-size:100% 100%; background-repeat:no-repeat; background-position:center;
  background-blend-mode:multiply;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; text-align:left;
  -webkit-tap-highlight-color:transparent; box-shadow:0 10px 24px -18px rgba(10,8,22,.9)}

.mtDay:active{transform:scale(.975)}
.mtDay .dNum{font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:34px; line-height:.95; color:#141022}
.mtDay .dMon{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(20,16,34,.6); margin-top:2px}
.mtDay .dMood{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:14px; color:#141022; margin-top:7px}

/* Foaia cu ziua deschisa */
#mtDayOv{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:14px;
  background:rgba(8,7,18,.64); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s ease}
#mtDayOv.on{display:flex} #mtDayOv.show{opacity:1}
#mtDayOv .mdCard{width:100%; max-width:354px; aspect-ratio:1/1; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; padding:28px 26px; text-align:left; color:#141022;
  border-radius:26px; overflow:hidden;
  background-image:url(img/fv-plain.webp); background-size:cover; background-position:center; background-blend-mode:multiply;
  box-shadow:0 22px 50px -26px rgba(10,8,22,.85);
  transform:translateY(20px) scale(.96); opacity:0; transition:transform .45s cubic-bezier(.2,.8,.25,1), opacity .35s ease}
#mtDayOv.show .mdCard{transform:none; opacity:1}
#mtDayOv .mdCard{position:relative}

/* Peticul colorat al zilei, marit, in capul foii */
#mtDayOv .mdTile{display:block; margin:0 0 4px}
#mtDayOv .mdNum{display:block; font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:57px; line-height:.92; color:#141022}
#mtDayOv .mdMon{display:block; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:rgba(20,16,34,.62); margin-top:4px}
#mtDayOv .mdMood{display:block; font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:21px; color:#141022; margin-top:8px}
#mtDayOv .mdRow{background:rgba(255,255,255,.86); border-radius:14px; padding:11px 14px; margin-top:9px;
  font-size:14px; line-height:1.45; text-align:left; color:#1b1730}
#mtDayOv .mdRow b{font-family:'Playfair Display',Georgia,serif}
#mtDayOv .mdX{width:100%; box-sizing:border-box; margin-top:14px; border:0; cursor:pointer; padding:0; background:none;
  border-style:solid; border-color:transparent; border-width:17px 18px; min-height:52px;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  color:rgba(27,23,48,.78); font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center}
/* ================= Ritualul ca feed alb =================
   Fiecare pas e o postare: antet cu personajul, patrat 1:1 cu tot ce e de
   citit, scris sau apasat inauntru, si puncte de carusel cand are mai multi pasi. */
#ritOv.ig{background:#fff; padding:0 0 calc(60px + env(safe-area-inset-bottom,0px))}
#ritOv.ig .roHead{position:sticky; top:0; z-index:5; margin:0; padding:12px 16px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(20,16,34,.08)}
#ritOv.ig .roHead h2{color:#141022; font-size:20px}
#ritOv.ig .roX{border-color:rgba(20,16,34,.16); background:rgba(20,16,34,.04); color:#141022}
#ritOv.ig #ritBody{padding:0}
.igFeed{background:#fff; color:#141022}
.igSwitch{display:flex; gap:10px; padding:16px 16px 14px; background:#fff}
.igSw{flex:1; border:0; cursor:pointer; padding:0; color:rgba(27,23,48,.6); background:none;
  border-style:solid; border-color:transparent; border-width:15px 16px; min-height:14px;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center}
.igSw.on{border-image-source:var(--fvFill); color:#1b1730}
.igPost{border-bottom:1px solid rgba(20,16,34,.07); padding-bottom:22px; margin-bottom:22px}
/* Pasii care urmeaza sunt deja in feed, doar mai linistiti. */
.igSoon{opacity:.5}
.igSoon .igSq{pointer-events:none}
.igPost:last-child{border-bottom:0}
.igTop{display:flex; align-items:center; gap:11px; padding:6px 15px 14px}
.igAv{width:38px; height:38px; border-radius:50%; flex:0 0 auto; background-size:cover; background-position:center;
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--catA,#a78bfa)}
.igWho{flex:1; min-width:0; line-height:1.25}
.igWho b{display:block; font-family:'Playfair Display',Georgia,serif; font-size:14.5px; color:#141022}
.igWho span{display:block; font-size:11.5px; color:rgba(20,16,34,.5)}
.igDone{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--catA,#a78bfa); color:#141022}
.igDone svg{width:13px; height:13px}
/* patratul */
.igSq{position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#efeae1}
/* Cadrul inalt: uneltele intregi, respiratia si scanarea, au loc sa respire. */
.igSq.igTall{aspect-ratio:3/4}
/* Uneltele cu multe randuri, ca bilantul, curg pe verticala in interiorul cadrului. */
.igSq.igFlow{aspect-ratio:auto; min-height:420px}
.igFlow .igIn{position:relative; inset:auto; height:auto; overflow:visible;
  padding:26px 18px 24px; justify-content:flex-start; gap:16px}
.igFlow .bigCard{width:100%; box-sizing:border-box; background:rgba(255,255,255,.92);
  border:0; border-radius:18px; box-shadow:0 10px 30px -18px rgba(20,16,34,.5)}
.igFlow .sub{margin:0 !important}
.igTall .igIn{justify-content:flex-start; padding:18px 16px 20px; gap:12px}
.igTall .igIn > *:last-child{margin-bottom:2px}
/* controalele uneltelor primesc acelasi limbaj rotunjit, dar mai compacte */
.igTall .ghost, .igTall .cta{font-size:13px; padding:9px 12px}
.igTall .igHostWrap{max-width:100%}
.igTall #bwShape{max-width:172px; margin:0 auto}
.igTall #bwShape svg{width:100%; height:auto; display:block}
.igTall #ritBwHost{width:100%}
.igTall .bwCtl, .igTall .bwBtns{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.igTall .igPlate{margin-top:2px}
.igSq .igBg{position:absolute; inset:0; background-size:cover; background-position:center}
.igSq .igBg::after{content:''; position:absolute; inset:0;
  background:none}
.igIn{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:26px 22px; text-align:center; gap:18px; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch}
.igIn::-webkit-scrollbar{display:none}
.igIn > *{max-width:100%; flex:0 0 auto}
.igQ{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:20px; line-height:1.3; color:#141022}
.igSub{font-size:12.5px; line-height:1.5; color:rgba(20,16,34,.7)}
.igAns{font-family:'Playfair Display',Georgia,serif; font-size:20px; line-height:1.4; color:#141022;
  background:rgba(255,255,255,.88); border-radius:20px; padding:20px 20px; width:100%; max-width:300px;
  box-sizing:border-box; box-shadow:0 10px 30px -18px rgba(20,16,34,.5)}
.igQ, .igSub{background:rgba(255,255,255,.72); border-radius:18px; padding:15px 17px; width:100%; max-width:300px;
  box-sizing:border-box}
.igPlate{width:100%; max-width:300px; box-sizing:border-box; background:rgba(255,255,255,.9);
  border-radius:20px; padding:16px 15px; box-shadow:0 10px 30px -16px rgba(20,16,34,.45);
  display:flex; flex-direction:column; gap:13px}
.igPlate input{width:100%; box-sizing:border-box; border:1px solid rgba(20,16,34,.16); border-radius:12px;
  padding:12px 13px; font-family:'Montserrat',system-ui,sans-serif; font-size:14.5px; color:#141022; background:#fff;
  outline:none; -webkit-appearance:none}
.igPlate input:focus{border-color:var(--catA,#a78bfa)}
.igBtn{width:100%; box-sizing:border-box; border:0; cursor:pointer; color:#1b1730; padding:0;
  border-style:solid; border-color:transparent; border-width:17px 18px; min-height:14px; 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:16px;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent}
.igBtn.ghostB{border-image-source:var(--fvCream); color:rgba(27,23,48,.7); font-size:14px}
.igBtn:active{transform:scale(.985)}
.igChips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:2px 0}
.igChip{border-style:solid; border-color:transparent; border-radius:0; cursor:pointer; padding:0;
  border-width:16px 17px; min-height:13px; background:none;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:13.5px; color:rgba(27,23,48,.82);
  display:inline-flex; align-items:center}
.igChip:active{transform:scale(.96)}
/* carusel orizontal */
.igCar{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.igCar::-webkit-scrollbar{display:none}
.igCar > .igSlide{flex:0 0 100%; scroll-snap-align:center; position:relative}
.igDotsRow{display:flex; gap:6px; justify-content:center; padding:14px 0 2px}
.igDotsRow i{width:6px; height:6px; border-radius:50%; background:rgba(20,16,34,.18)}
.igDotsRow i.on{background:var(--catA,#a78bfa)}
.igEyebrow{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(20,16,34,.5)}
.igCount{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(20,16,34,.5)}
.igWhyTxt{font-family:'Playfair Display',Georgia,serif; font-size:18px; line-height:1.58; color:#141022;
  background:rgba(255,255,255,.88); border-radius:20px; padding:21px 20px; width:100%; max-width:300px;
  box-sizing:border-box}
.igCap{padding:8px 15px 0; font-size:13px; line-height:1.5; color:rgba(20,16,34,.68)}
.igCap b{color:#141022; font-weight:600}
.igHostWrap{width:100%; max-width:300px; box-sizing:border-box}
#ritOv.ig .bigCard{background:#fff; border:1px solid rgba(20,16,34,.1); color:#141022}
#ritOv.ig .sub, #ritOv.ig p{color:rgba(20,16,34,.72)}
#ritOv.ig .ghost{background:rgba(20,16,34,.05); border:1px solid rgba(20,16,34,.12); color:#141022}
#ritOv.ig .cta{color:#1b1730}
#ritOv.ig .igTail{padding:14px 16px 26px}
.igEnd{padding:34px 18px 18px; text-align:center}
.igEnd b{font-family:'Playfair Display',Georgia,serif; font-size:22px; display:block; color:#141022}
.igEnd p{margin:8px 0 0; font-size:14px; line-height:1.55; color:rgba(20,16,34,.72)}
#ritOv{position:fixed; inset:0; z-index:380; background:#0c0a1e; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 18px calc(44px + env(safe-area-inset-bottom,0px)); display:none}
#ritOv.on{display:block; animation:reveal .35s cubic-bezier(.22,.7,.3,1) both}
#ritOv .roHead{display:flex; align-items:center; gap:10px; margin-bottom:10px}
#ritOv .roHead h2{font-family:Georgia,'Noto Serif','Times New Roman',serif; font-weight:600; font-size:24px; margin:0; flex:1; color:var(--white)}
#ritOv .roX{width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0}
.mfAdd:active{border-color:var(--catB); color:var(--catB)}

/* ============================================================
   FETRU PENTRU TOATE BUTOANELE
   Un singur bloc, pus la finalul stilurilor, care imbraca butoanele
   vechi in aceleasi materiale ca restul aplicatiei. Nu schimba
   comportamentul, doar aspectul.
   ============================================================ */
.cta, .reinf{
  box-sizing:border-box; border:0; background:none !important; box-shadow:none !important;
  border-style:solid; border-color:transparent; border-width:17px 18px; min-height:52px;
  border-image-source:var(--fvFill); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  border-radius:0; padding:0; color:#1b1730 !important;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  -webkit-tap-highlight-color:transparent}
.ghost{
  box-sizing:border-box; border:0; background:none !important; box-shadow:none !important;
  border-style:solid; border-color:transparent; border-width:17px 18px; min-height:52px;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  border-radius:0; padding:0; color:rgba(27,23,48,.78) !important;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:14.5px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  -webkit-tap-highlight-color:transparent}
.cta:active, .reinf:active, .ghost:active{transform:scale(.985)}
/* pastilele mici */
.bChip, .chip{
  box-sizing:border-box; border:0; background:none !important; box-shadow:none !important;
  border-style:solid; border-color:transparent; border-width:15px 16px; min-height:44px;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  border-radius:0; padding:0; color:rgba(27,23,48,.8) !important;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent}
.bChip.on, .chip.on{border-image-source:var(--fvFill); color:#1b1730 !important}
.bChip:active, .chip:active{transform:scale(.97)}
/* optiunile lungi din Limbajul iubirii */
.llOpt{
  box-sizing:border-box; border:0; background:none !important; box-shadow:none !important;
  border-style:solid; border-color:transparent; border-width:16px 17px; min-height:52px;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  border-radius:0; padding:0; margin-bottom:9px; width:100%;
  color:rgba(27,23,48,.82) !important; font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.35}
/* butoanele rotunde */
.rateBtn, .anIcons .ic, #backBtn{
  border:0 !important; background:none !important; box-shadow:none !important; backdrop-filter:none !important;
  background-image:var(--fvRound) !important; background-size:100% 100% !important;
  background-repeat:no-repeat !important; background-position:center !important;
  color:rgba(27,23,48,.8) !important; -webkit-tap-highlight-color:transparent}
.rateBtn{width:54px; height:54px; font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:20px}
.anIcons .ic{width:56px; height:56px; display:flex; align-items:center; justify-content:center}
.anIcons .ic img{width:24px; height:24px; filter:brightness(0) saturate(100%) opacity(.72)}
#backBtn{width:40px; height:40px; color:#1b1730 !important; opacity:.94}
#backBtn svg{stroke:#1b1730}
.rateBtn:active, .anIcons .ic:active, #backBtn:active{transform:scale(.95)}
/* tastatura numerica */
.numpad button{
  box-sizing:border-box; border:0; background:none !important; box-shadow:none !important;
  border-style:solid; border-color:transparent; border-width:15px 16px; min-height:50px;
  border-image-source:var(--fvCream); border-image-slice:64 fill; border-image-repeat:stretch; border-image-width:1;
  border-radius:0; padding:0; color:#1b1730 !important;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:21px;
  display:flex; align-items:center; justify-content:center}
/* toate tastele sunt crem: singurul buton colorat ramane Dezvaluie mesajul.
   Cifrele si semnele sunt Playfair bold, centrate optic in taste. */
.numpad button, .numpad .npx{
  border-image-source:var(--fvCream) !important;
  font-family:'Playfair Display',Georgia,serif !important; font-weight:700 !important;
  color:#1b1730 !important; line-height:1 !important}
.numpad button{font-size:21px !important}
.numpad .npx{font-size:19px !important}
/* Playfair aseaza cifrele putin sub mijlocul optic, deci le ridicam un pic */
.numpad button{padding-bottom:2px !important}
/* Spatiu are text lung, deci sta mai mic si cu spatiere */
.numpad .npx[data-i="npSpace"]{font-size:15px !important; letter-spacing:.08em; padding-bottom:0 !important}
/* doua puncte stau prea jos in Playfair; il ridicam din pozitie, nu din padding,
   ca sa nu creasca inaltimea tastei */
.numpad .npx[onclick*="':'"]{font-size:24px !important; padding-bottom:2px !important;
  align-items:flex-start !important; padding-top:0 !important}
.numpad .npx[onclick*="':'"]{position:relative; top:-4px}
/* toate tastele au exact aceeasi inaltime */
.numpad button{height:52px !important; min-height:52px !important}
/* sageata de stergere nu exista in Playfair, deci ramane pe fontul de sistem */
.numpad .npx[onclick*="npDel"]{font-family:system-ui,sans-serif !important;
  font-size:18px !important; padding-bottom:0 !important}
.numpad button:active{transform:scale(.96)}

/* butoanele lungi de optiune: respiratie, poduri, mementouri */
.bOpt, .yOpt{
  box-sizing:border-box; background:none !important; box-shadow:none !important;
  border-style:solid !important; border-color:transparent !important; border-width:16px 17px !important; min-height:52px;
  border-image-source:var(--fvCream) !important; border-image-slice:64 fill !important;
  border-image-repeat:stretch !important; border-image-width:1 !important;
  border-radius:0 !important; padding:0 !important; width:100%; margin-bottom:9px;
  color:rgba(27,23,48,.82) !important; font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.35;
  -webkit-tap-highlight-color:transparent}
.bOpt.on, .yOpt.on{border-image-source:var(--fvFill) !important; color:#1b1730 !important}
.bOpt b, .yOpt b{color:rgba(27,23,48,.6) !important}
.bOpt:active, .yOpt:active{transform:scale(.985)}
/* butonasele rotunde din coltul cardurilor */
.tmBtn, .ziB{
  border:0 !important; background:none !important;
  background-image:var(--fvRound) !important; background-size:100% 100% !important;
  background-repeat:no-repeat !important; background-position:center !important;
  color:rgba(27,23,48,.8) !important}
.tmBtn svg, .ziB svg{stroke:#1b1730}

/* ultimele butoane: alegerea modului la Carduri si sagetile din Statistici */
.csBig button{
  box-sizing:border-box; background:none !important; box-shadow:none !important;
  border-style:solid !important; border-color:transparent !important; border-width:16px 17px !important; min-height:56px;
  border-image-source:var(--fvCream) !important; border-image-slice:64 fill !important;
  border-image-repeat:stretch !important; border-image-width:1 !important;
  border-radius:0 !important; padding:0 !important; width:100%; margin-bottom:9px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:rgba(27,23,48,.82) !important; -webkit-tap-highlight-color:transparent}
.csBig button b{font-family:'Playfair Display',Georgia,serif; font-size:15px; color:#1b1730 !important}
.csBig button span{font-size:12.5px; line-height:1.4; color:rgba(27,23,48,.66) !important}
.csBig button:active{transform:scale(.985)}
.pvBtn{
  border:0 !important; background:none !important;
  background-image:var(--fvRound) !important; background-size:100% 100% !important;
  background-repeat:no-repeat !important; background-position:center !important;
  width:36px; height:36px; color:rgba(27,23,48,.8) !important}
.pvBtn svg{stroke:#1b1730}

.hsOpt.deNum{min-width:52px; font-size:17px}

.bwDoneSq{min-height:0 !important; aspect-ratio:auto}
.bwDoneSq .hsIn{padding:28px 22px; gap:8px; justify-content:center}


/* Audio: butonul rotund din rand, in fetru */
.muDl{border:0 !important; background:none !important;
  background-image:var(--fvRound) !important; background-size:100% 100% !important;
  background-repeat:no-repeat !important; background-position:center !important;
  width:36px; height:36px; color:rgba(27,23,48,.8) !important}
.muDl svg{stroke:#1b1730}

.zoRevSq .hsIn{padding:24px 20px; gap:10px}
.zoRevSq .hsRevP p{margin:0 0 9px; font-size:14px; line-height:1.62}
.zoRevSq .hsRevP p:last-child{margin-bottom:0}
.zoRevSq .zoShOne{margin-top:auto; align-self:stretch}
.zoRevSq .zoMr{display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:13.5px}
.zoRevSq .zoAct{margin-top:8px}
.zoRevSq .zoAct b{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.6}
.zoRevSq .zoLucky{display:flex; flex-direction:column; gap:8px}
.zoRevSq .zoLucky .m{display:flex; justify-content:space-between; gap:10px; background:rgba(255,255,255,.8);
  border-radius:12px; padding:9px 12px; font-size:13.5px}

.ntCar .hsSlide{align-items:stretch}
.ntCar .bigCard{margin-top:0 !important; width:100%}

.hsIn2{width:100%; border:0; outline:none; background:none; font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-size:16px; color:#141022; text-align:center}
.hsIn2::placeholder{color:rgba(20,16,34,.42); font-weight:400}

.vbTopSq{min-height:0 !important; aspect-ratio:auto}
.vbTopSq .hsIn{padding:24px 20px; gap:12px; justify-content:center}

.hsTa2{width:100%; min-height:150px; border:0; outline:none; background:none; resize:none;
  font-family:'Montserrat',system-ui,sans-serif; font-size:14.5px; line-height:1.62; color:#141022}
.hsTa2::placeholder{color:rgba(20,16,34,.4)}

.rfRevSq{min-height:0 !important; aspect-ratio:auto}
.rfRevSq .hsIn{padding:26px 22px; gap:10px; justify-content:center}

/* Cartile de conversatie: alegerile pe pastile de fetru */
.csRow button, .csCatCol button{
  box-sizing:border-box; background:none !important; box-shadow:none !important;
  border-style:solid !important; border-color:transparent !important;
  border-width:15px 16px !important; border-radius:0 !important; min-height:48px;
  border-image-source:var(--fvCream) !important; border-image-slice:64 fill !important;
  border-image-repeat:stretch !important; border-image-width:1 !important;
  padding:0 !important; color:rgba(27,23,48,.8) !important;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.3;
  -webkit-tap-highlight-color:transparent}
.csRow button.on, .csCatCol button.on{border-image-source:var(--fvFill) !important; color:#1b1730 !important}
.csCatCol button{margin-bottom:8px; width:100%}
.csRow button:active, .csCatCol button:active{transform:scale(.97)}

/* butoanele de navigare din ghidul de pe Acasa */
.hgGo{
  box-sizing:border-box; background:none !important; box-shadow:none !important;
  border-style:solid !important; border-color:transparent !important;
  border-width:14px 15px !important; border-radius:0 !important; min-height:48px;
  border-image-source:var(--fvCream) !important; border-image-slice:64 fill !important;
  border-image-repeat:stretch !important; border-image-width:1 !important;
  padding:0 !important; color:rgba(27,23,48,.82) !important;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:13px;
  -webkit-tap-highlight-color:transparent}
.hgGo span{color:rgba(27,23,48,.82)}
.hgGo svg{stroke:rgba(27,23,48,.6)}
.hgGo:active{transform:scale(.98)}
/* buton rotund mic, de fetru */
.hsRoundSm{
  border:0 !important; background:none !important;
  background-image:var(--fvRound) !important; background-size:100% 100% !important;
  background-repeat:no-repeat !important; background-position:center !important;
  width:46px; height:46px; color:#1b1730 !important;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:22px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.hsRoundSm:active{transform:scale(.95)}

/* ---- POSTAREA ---- */
.hsPost{margin-top:4px}
.hsPostTop{padding:2px 4px 10px; text-align:left}
.hsPostTop .igWho{text-align:left}
.hsPostTop .igWho b{color:rgba(255,255,255,.92)}
.hsPostTop .igWho span{color:rgba(255,255,255,.5)}
.hsPostBody{position:relative}
.hsPostBar{display:flex; align-items:center; gap:14px; padding:10px 6px 2px}
.hsPostSp{flex:1}
.hsPostAct{width:34px; height:34px; border:0; background:none; padding:0; cursor:pointer;
  color:rgba(255,255,255,.72); display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; transition:transform .18s ease, color .25s ease}
.hsPostAct svg{width:25px; height:25px}
.hsPostAct:active{transform:scale(.86)}
.hsPostAct.on{color:#fb7185}
.hsPostAct.on svg{fill:currentColor}
.hsPostAct[data-ps].on{color:var(--catA,#a78bfa)}
.hsBoom{position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) scale(.2); width:96px; height:96px;
  color:#fff; opacity:0; pointer-events:none; z-index:5; animation:hsBoomA .85s ease forwards}
.hsBoom svg{width:100%; height:100%; filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
@keyframes hsBoomA{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.2)}
  22%{opacity:.95; transform:translate(-50%,-50%) scale(1.12)}
  42%{transform:translate(-50%,-50%) scale(.95)}
  70%{opacity:.9; transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.05)}
}

/* postarea patrata, in stilul feed */
.hsPost .hsCar{scroll-snap-type:x mandatory}
.hsPost .hsCar{margin-left:0; margin-right:0; padding:0}
.hsPost .hsSlide{padding:0; scroll-snap-align:center}
.hsPost .hsSq{aspect-ratio:1/1 !important; min-height:0 !important; border-radius:6px;
  border:0 !important; padding:0; overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat}
.hsPost .hsSq .hsIn{padding:30px 26px; gap:11px; justify-content:center; height:100%; box-sizing:border-box;
  overflow-y:auto; -webkit-overflow-scrolling:touch}
.hsPost .hsSq .hsIn::-webkit-scrollbar{width:0}
.hsPost .hsRevList .hsIn{justify-content:flex-start}
.hsPost .hsSq .hsRevP{font-size:13.5px; line-height:1.58}
.hsPost .hsSq .hsRevRow{padding:8px 11px; margin-top:6px}
.hsPost .hsSq .hsRevRow b{font-size:13px}
.hsPost .hsSq .hsRevRow span{font-size:12.5px; line-height:1.45}
.hsPost .hsSq .hsRevTick{padding:7px 10px; margin-top:6px; font-size:12.5px}
/* text alb pe fundalul personajului */
.hsPost .hsSq, .hsPost .hsSq *{color:#fff}
.hsPost .hsRevN{color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hsPost .hsRevT{color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.3)}
.hsPost .hsRevEy{color:rgba(255,255,255,.72)}
.hsPost .hsRevP{color:rgba(255,255,255,.94); background:none; text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hsPost .hsQ{background:none; box-shadow:none; color:#fff; padding:0}
.hsPost .hsRevRow{background:rgba(255,255,255,.14); color:#fff}
.hsPost .hsRevRow b, .hsPost .hsRevRow span{color:#fff}
.hsPost .hsRevTick{background:rgba(255,255,255,.14); color:#fff}
.hsPost .hsRevFlip{background:rgba(255,255,255,.14); color:#fff}
/* bara de reactii pe cardul alb de sub poza */
.hsPost .hsDots{margin:9px 0 0}
.hsPostBar{display:flex; align-items:center; gap:14px; margin-top:9px; padding:8px 14px;
  background:#fbf8f1; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.hsPostAct{color:rgba(20,16,34,.62)}
.hsPostAct.on{color:#e0526a}
.hsPostAct[data-ps].on{color:#141022}
.hsPostDots{margin-top:10px}

/* ---- CARDUL DE INSTAGRAM ---- */
.hsPost{margin-top:4px; background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.22)}
.hsPostTop{padding:11px 13px 10px; text-align:left}
.hsPostTop .igWho b{color:#141022}
.hsPostTop .igWho span{color:rgba(20,16,34,.5)}
.hsPost .hsCar{margin:0; padding:0}
.hsPost .hsSlide{padding:0; scroll-snap-align:center}
.hsPost .hsSq{aspect-ratio:3/4 !important; min-height:0 !important; border-radius:0;
  border:0 !important; padding:0; overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat}
.hsPost .hsSq .hsIn{padding:52px 50px; gap:16px; justify-content:center; height:100%; box-sizing:border-box;
  overflow-y:auto; -webkit-overflow-scrolling:touch}
.hsPost .hsSq .hsIn::-webkit-scrollbar{width:0}
.hsPost .hsRevList .hsIn{justify-content:flex-start}
/* tipografia din skillul de postari */
.hsPost .hsSq, .hsPost .hsSq *{color:#f5efe4}
.hsPost .hsRevN{font-family:'Playfair Display',Georgia,serif; font-weight:900; color:#fff; font-size:66px; line-height:1; text-shadow:none}
.hsPost .hsRevT{font-family:'Playfair Display',Georgia,serif; font-weight:700; color:#d9b45b; font-size:26px; text-shadow:none}
.hsPost .hsRevEy{font-family:'Playfair Display',Georgia,serif; font-weight:700; color:#d9b45b;
  font-size:21px; line-height:1.3; letter-spacing:0; text-transform:none}
.hsPost .hsRevP{font-family:'Montserrat',system-ui,sans-serif; font-weight:600; color:#f5efe4;
  font-size:15px; line-height:1.6; background:none; text-shadow:none; max-width:none}
.hsPost .hsQ{background:none; box-shadow:none; color:#f5efe4; padding:0}
.hsPost .hsRevRow{background:rgba(255,255,255,.09)}
.hsPost .hsRevRow b{color:#d9b45b; font-family:'Montserrat',system-ui,sans-serif; font-weight:700; font-size:13px}
.hsPost .hsRevRow span{color:#f5efe4; font-size:13px}
.hsPost .hsRevTick, .hsPost .hsRevFlip{background:rgba(255,255,255,.09); color:#f5efe4}
/* bulinele si bara, lipite de poza, in interiorul cardului alb */
.hsPost .hsDots{margin:0; padding:11px 0 3px; background:#fff}
.hsPost .hsDots i{background:rgba(20,16,34,.18)}
.hsPost .hsDots i.on{background:#141022}
.hsPostBar{display:flex; align-items:center; gap:16px; margin:0; padding:4px 13px 13px;
  background:#fff; border-radius:0; box-shadow:none}
.hsPostAct{color:#141022; width:30px; height:30px}
.hsPostAct svg{width:26px; height:26px}
.hsPostAct.on{color:#ed4956}
.hsPostAct[data-ps].on{color:#141022}
/* sageti de paginatie, pentru mouse */
.hsPostNav{position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:30px; height:30px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.28); color:#fff; opacity:.55;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);
  transition:opacity .2s ease}
.hsPostNav:hover{opacity:1; background:rgba(255,255,255,.5)}
.hsPostNav svg{width:16px; height:16px}
.hsPostNav.prev{left:6px}
.hsPostNav.next{right:6px}
.hsPostNav[hidden]{display:none}

/* feedul de caruseluri: spatiu intre postari */
#dpBody .hsPost{margin-bottom:20px}

/* ---- feedul citirii ---- */
#dpBody .hsPost{margin-bottom:20px}
.dpRmBtn{width:100%; margin:0 0 18px}
/* titlul in prima patrime a imaginii, textul dedesubt */
.hsPost .hsSq .hsIn{justify-content:flex-start; padding:0 46px}
.hsPost .hsSq .hsIn{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:52px 46px}
.hsPost .hsSq .hsRevEy{margin:0; text-align:center; width:100%}
.hsPost .hsSq .hsRevP{margin:0; width:100%; text-align:center}
.hsPost .hsSq.dpBig .hsIn{display:flex; justify-content:center; padding-top:0}
.hsPost .hsSq.dpBig .hsRevEy{margin-top:0}
.hsPost .hsSq.dpBig .hsRevP{margin-bottom:0; padding-bottom:0}
.dpPair{text-align:center; margin-bottom:20px}
.dpPair:last-child{margin-bottom:0}
.dpPair b{display:block; font-family:'Montserrat',system-ui,sans-serif; font-weight:800;
  font-size:14px; color:#d9b45b; letter-spacing:.01em; margin-bottom:4px}
.dpPair span{display:block; font-family:'Montserrat',system-ui,sans-serif; font-weight:400;
  font-size:14px; line-height:1.55; color:#f5efe4}
.dpLi{display:flex; gap:8px; text-align:left; margin-bottom:10px; align-items:flex-start;
  justify-content:center}
.hsPost .hsSq .hsIn .dpLi span{font-size:13.5px; line-height:1.5}
.dpLi:last-child{margin-bottom:0}
.dpLi i{flex:0 0 auto; font-style:normal; color:#d9b45b; font-size:13px; line-height:1.6}
.dpLi span{font-family:'Montserrat',system-ui,sans-serif; font-weight:500; font-size:14px;
  line-height:1.55; color:#f5efe4}
/* bara lipita de imagine */
.hsPost .hsDots{margin:0; padding:8px 0 2px; background:#fff}
.hsPostBar{padding:2px 13px 10px}
/* fereastra Citeste-ma */
.dpRmOv{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  background:rgba(8,7,18,.72); backdrop-filter:blur(6px); padding:26px}
.dpRmOv.on{display:flex}
.dpRmBox{background:#fbf8f1; border-radius:16px; padding:24px 22px; max-width:340px; width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.4)}
.dpRmBox b{display:block; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:21px; color:#141022; margin-bottom:12px}
.dpRmBox p{font-family:'Montserrat',system-ui,sans-serif; font-size:14px; line-height:1.6;
  color:rgba(20,16,34,.82); margin:0 0 11px}
.dpRmBox .hsBtn{margin-top:6px}

.hsPost .hsSq .dpP{margin:0 0 18px; text-align:center}
.hsPost .hsSq .dpP:last-child{margin-bottom:0}

.dpRmBox .dpRmNote{font-size:12.5px; color:rgba(20,16,34,.6); border-top:1px solid rgba(20,16,34,.12);
  padding-top:12px; margin-top:14px}

.dpFnBox{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:16px 15px; margin-bottom:12px}
.dpFnBox b{display:block; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:17px; color:var(--white,#fff); margin-bottom:6px}
.dpFnBox p{font-size:12.5px; line-height:1.55; opacity:.78; margin:0 0 11px}
.dpFnRow{display:flex; gap:8px; align-items:stretch}
.dpFnRow input{flex:1; min-width:0; border-radius:12px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07); color:inherit; font-family:inherit; font-size:14px;
  padding:12px 13px; outline:none}
.dpFnRow input::placeholder{color:rgba(255,255,255,.4)}
.dpFnBtn{flex:0 0 auto; width:auto !important; padding:0 6px !important; margin:0 !important}
.dpFnBox .dpFnNote{font-size:11.5px; opacity:.55; margin:10px 0 0}

/* bulinele centrate intre butoane, ca pe Instagram */
.hsPostBar{display:flex; align-items:center; gap:14px; margin:0; padding:9px 13px 11px;
  background:#fff; border-radius:0; box-shadow:none}
.hsPostSp{flex:1; display:flex; align-items:center; justify-content:center}
.hsPostSp .hsDots{margin:0; padding:0; background:none}
/* cardul de final cu Moss */
/* Moss de final: umple latimea containerului de telefon, cu fade sus si jos */
.dpOutro{position:relative; width:calc(100% + 44px); margin:26px -22px 0;
  aspect-ratio:5/7; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; overflow:hidden; padding-bottom:74px; box-sizing:content-box}
.dpOutroImg{position:absolute; left:0; right:0; top:0; bottom:74px; z-index:0; background-size:cover;
  background-position:center bottom; background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 99%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 99%)}
.dpOutro p{position:relative; z-index:1; margin:0; padding:11% 22px 0; text-align:center;
  max-width:86%; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:24px; line-height:1.36; color:#f5efe4; text-shadow:none}
.dpOutroBtn{position:absolute; z-index:2; left:22px; right:22px; bottom:6px; width:auto !important;
  margin:0 !important}

/* linia de identitate pe fiecare slide */
.hsPost .dpWho{font-family:'Montserrat',system-ui,sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(245,239,228,.45); text-align:center;
  width:100%; margin:0 0 -4px}
.hsPost .hsSq .hsIn{gap:14px}
.dpPair{margin-bottom:17px}
/* coperta de carusel */
.hsPost .hsSq.dpCov .hsIn{justify-content:center; gap:20px}
.dpCovT{font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:38px;
  line-height:1.14; color:#fff; text-align:center; width:100%}
/* cardul de nume, pliabil */
.dpFnBox{padding:0; overflow:hidden}
.dpFnHead{display:flex; align-items:center; gap:12px; width:100%; border:0; background:none;
  padding:15px 15px; cursor:pointer; color:inherit; font-family:inherit; text-align:left}
.dpFnHead > span:first-child{flex:1; min-width:0}
.dpFnHead b{display:block; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:17px; color:var(--white,#fff); margin:0}
.dpFnHead i{display:block; font-style:normal; font-size:12.5px; opacity:.6; margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dpFnChev{flex:0 0 auto; width:20px; height:20px; opacity:.6; transition:transform .25s ease}
.dpFnChev svg{width:20px; height:20px}
.dpFnBox.open .dpFnChev{transform:rotate(180deg)}
.dpFnBody{padding:0 15px 15px}

.dpRmBox p{margin:0 0 14px}
.dpRmRow{display:flex; gap:11px; align-items:flex-start; margin:0 0 12px}
.dpRmRow .dpRmIc{flex:0 0 auto; width:19px; height:19px; margin-top:1px; color:#141022}
.dpRmRow span{font-family:'Montserrat',system-ui,sans-serif; font-size:13.5px; line-height:1.55;
  color:rgba(20,16,34,.82)}
.dpRmBox .dpRmNote{font-size:12px; line-height:1.6; color:rgba(20,16,34,.58);
  border-top:0; padding-top:0; margin:0 0 11px}
.dpRmBox .dpRmNote:first-of-type{border-top:1px solid rgba(20,16,34,.12); padding-top:14px; margin-top:6px}
.dpRmBox{max-height:82vh; overflow-y:auto}

/* ecrane inguste: textul din postare se strange proportional */
@media (max-width:360px){
  .hsPost .hsSq .hsIn{padding:30px 24px; gap:10px}
  .hsPost .hsRevEy{font-size:18px}
  .hsPost .hsRevP{font-size:12px; line-height:1.44}
  .hsPost .hsRevN{font-size:56px}
  .dpCovT{font-size:32px}
  .dpPair{margin-bottom:12px}
  .dpPair b{font-size:12px; margin-bottom:2px}
  .dpPair span{font-size:12px; line-height:1.42}
  .dpLi{margin-bottom:7px}
  .dpLi span{font-size:12px; line-height:1.38}
  .hsPost .dpWho{font-size:9px}
  .hsPost .hsSq .dpP{margin-bottom:12px}
  .dpOutro p{font-size:19px}
}
/* cardul lui Moss: textul ramane pe trei randuri la orice latime */
@media (max-width:375px){ .dpOutro p{font-size:20px !important} }
@media (min-width:410px){ .dpOutro p{font-size:26px} }

/* ---- fisa personajului ---- */
.bioTap{border:0; background:none; padding:0; cursor:pointer; font-family:inherit; text-align:left;
  -webkit-tap-highlight-color:transparent}
.bioTap.igAv{background-size:cover; background-position:center}
.bioTap:active{opacity:.7}
#bioBody{padding-bottom:110px}
.bioTop{text-align:center; padding:10px 0 0}
.bioAv{display:block; width:124px; height:124px; border-radius:50%; margin:0 auto 20px;
  background-size:cover; background-position:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 0 0 7px var(--catA,#a78bfa), 0 18px 40px rgba(0,0,0,.4)}
.bioName{font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:42px;
  line-height:1.05; margin:0 0 10px; color:var(--white,#fff)}
.bioRole{font-family:'Montserrat',system-ui,sans-serif; font-weight:700; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--catA,#a78bfa); margin-bottom:12px}
.bioWhere{font-family:'Montserrat',system-ui,sans-serif; font-size:13px; line-height:1.55;
  opacity:.6; max-width:290px; margin:0 auto}
/* fraza de deschidere, ca un citat */
.bioHook{position:relative; margin:30px 8px 4px; padding:22px 8px 0; text-align:center;
  font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:700;
  font-size:21px; line-height:1.42; color:var(--white,#fff)}
.bioHook::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:44px; height:1px; background:linear-gradient(90deg, transparent, var(--catA,#a78bfa), transparent)}
.bioTxt{margin-top:26px}
.bioTxt p{font-family:'Montserrat',system-ui,sans-serif; font-size:14.5px; line-height:1.72;
  margin:0 0 18px; opacity:.88}
/* prima litera a primului paragraf, ca intr-o carte */
.bioTxt p:first-child::first-letter{font-family:'Playfair Display',Georgia,serif; font-weight:900;
  font-size:44px; line-height:.9; float:left; margin:5px 9px 0 0; color:var(--catA,#a78bfa)}
.bioSec{margin:28px 0 14px; text-align:center;
  font-family:'Montserrat',system-ui,sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; opacity:.5}
.bioGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.bioGrid .tool{cursor:pointer}
.bioGrid .tool .tn{white-space:normal; font-size:14px; line-height:1.2}
.bioBack{margin-top:26px !important}

/* Butonul Calea Vieții primește forma butonului de ritual, dar rămâne crem. */
#s-hub .lpChip{
  border-width:22px 34px !important;
  font-size:19px;
  min-height:0}
/* Discul rotund se aliniază la înălțimea butonului de lângă el. */
.ritRow .fvDots{width:70px; height:70px; gap:4px}
.ritRow .fvDots span{width:5px; height:5px}






/* Set generat cu Magnific. Pastila e desenata deja lunga, deci la randare
   mijlocul se intinde foarte putin si fibra nu se deformeaza. Capatul rotund
   are 156 px in sursa si e feliat exact acolo, deci ramane intact. */
:root{
  --fvGenPill:url(img/fv-gen-pill.webp);
  --fvGenPillC:url(img/fv-gen-pill-c.webp);
  --fvGenDisc:url(img/fv-gen-disc.webp);
}
/* Butoanele de pe Acasa folosesc exact aceeasi reteta ca butonul din Zodiac:
   aceeasi textura, aceeasi margine de 17 pe 18 si aceeasi felie de 64. */
.ritRow #ritBtn, #s-hub .lpChip{
  box-sizing:border-box !important; border:0;
  border-style:solid !important; border-color:transparent !important;
  border-width:17px 18px !important; min-height:52px;
  border-image-source:var(--fvFill) !important; border-image-slice:64 fill !important;
  border-image-repeat:stretch !important; border-image-width:1 !important;
  border-radius:0 !important; padding:0 !important;
  background:none !important; box-shadow:none !important;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:16px;
  line-height:1.2; color:#1b1730 !important; -webkit-tap-highlight-color:transparent}
#s-hub .lpChip{margin:16px 0 0 !important; width:100% !important}
#s-hub .lpChip::after{display:none}
/* discul de langa ritual: aceeasi textura, dar decupata rotund din centrul ei,
   ca sa nu se vada cusatura pastilei taiata la jumatate */
.ritRow .fvDots{
  width:52px; height:52px; gap:4px; border:0; box-shadow:none; border-radius:999px;
  background-image:var(--fvFill) !important;
  background-size:420% 260% !important; background-position:center !important;
  background-repeat:no-repeat !important; background-color:transparent !important;
  outline:1px dashed rgba(217,180,91,.55); outline-offset:-5px}
.ritRow .fvDots span{width:5px; height:5px; background:rgba(27,23,48,.62)}

/* barele de elemente, pe cardul de postare */
.ntBars{width:100%; margin:2px 0 4px}
.ntBar{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.ntBarN{font-family:'Montserrat',system-ui,sans-serif; font-weight:600; font-size:13.5px;
  color:#f5efe4; width:74px; flex:0 0 auto; text-align:left}
.ntBarT{flex:1; height:10px; border-radius:99px; background:rgba(255,255,255,.13); overflow:hidden}
.ntBarT i{display:block; height:100%; border-radius:99px}
.ntBarV{font-family:'Montserrat',system-ui,sans-serif; font-weight:800; font-size:14px;
  color:#d9b45b; width:18px; text-align:right; flex:0 0 auto}

/* roata pe cardul de feed */
.hsPost .ntWheelSq .hsIn{justify-content:center; padding:24px 16px}
/* explicatiile de casa sunt lungi in engleza, deci corpul lor sta putin mai strans */
.hsPost .hsSq .hsIn .dpP{font-size:13.5px; line-height:1.58}
.ntWheelBox{width:100%; display:flex; align-items:center; justify-content:center}
.ntWheelBox svg{width:100%; height:auto; max-width:300px}

/* titlurile de capitol si aerul dintre postari */
.ntChap{margin:40px 0 20px; text-align:center;
  font-family:'Montserrat',system-ui,sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(245,239,228,.5);
  display:flex; align-items:center; gap:14px}
.ntChap::before, .ntChap::after{content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,239,228,.22), transparent)}
#ntBody .hsPost{margin-bottom:32px}
#ntBody .ntChap:first-child{margin-top:22px}

/* cardul final cu Luna: acelasi tipar ca al lui Moss, alta poza */
.dpOutro.ntOutro{margin-top:34px}
.dpOutro.ntOutro p{font-size:21px; max-width:92%}

/* aceleasi capitole si acelasi aer si in Citirea Profunda */
#dpBody .hsPost{margin-bottom:32px}
#dpBody .ntChap:first-child{margin-top:22px}

/* zodiacul in tiparul de feed */
#zoDaily .hsPost{margin-bottom:30px}
#zoDaily .ntChap:first-child{margin-top:18px}
#zoDaily .zoRevSq .hsRevP{text-align:center !important}
#zoDaily .zoRevSq .hsRevP p{text-align:center}

/* cardul cu datele din spatele citirii are randuri multe, deci mai strans */
#zoDaily .zoRevSq .zoMr{margin:0 0 5px; font-size:12.5px; line-height:1.3;
  display:flex; gap:8px; align-items:baseline}
#zoDaily .zoRevSq .zoMr span{flex:0 0 auto; opacity:.6}
#zoDaily .zoRevSq .zoMr b{flex:1; text-align:right}
#zoDaily .zoRevSq .zoMa{margin:0 0 7px; font-size:12.5px; line-height:1.4}
#zoDaily .zoRevSq .zoMi, #zoDaily .zoRevSq .zoMn{font-size:12px; line-height:1.45; margin:0 0 12px}
#zoDaily .zoRevSq .hsRevEy{margin-bottom:6px}
#zoDaily .zoRevSq .zoMt{font-size:11px; letter-spacing:.14em; margin:10px 0 8px}
#zoDaily .zoRevSq .hsIn{padding:30px 26px}

/* caruselul din fereastra de info */
.ziCar{position:relative; margin:2px -4px 8px}
.ziCar .hsCar{border-radius:18px; overflow-x:auto}
.ziSq{background-color:transparent}
.ziSq .hsIn{justify-content:center; padding:30px 26px}
.ziSq .hsRevEy{font-size:11px; letter-spacing:.2em; margin-bottom:14px;
  color:rgba(245,239,228,.6)}
.ziSq .hsRevP{background:none !important; box-shadow:none !important; padding:0 !important}
.ziSq .hsRevP p{font-size:14.5px; line-height:1.62; text-align:center; margin:0;
  color:#f5efe4; background:none; box-shadow:none; padding:0}
.ziSq .ziEx{margin:0; padding:0; list-style:none; text-align:center}
.ziSq .ziEx li{font-size:14px; line-height:1.55; margin:0 0 12px; color:#f5efe4}
.ziSq .dpCovT{color:#f5efe4}
.ziCovV{font-family:'Montserrat',system-ui,sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(245,239,228,.72); margin-top:12px}

/* fereastra de info: poza de sus se strange, ca postarea sa incapa pe ecran */
.ziCar .hsPost{margin:0}
.ziCar .hsPostHead{border-radius:16px 16px 0 0}
.ziCar .hsPostBar{border-radius:0 0 16px 16px}
/* cand fereastra arata o postare, poza de sus se strange si titlul devine mai mic */
#zoSheet:has(.ziCar) .zoShHero{height:132px !important; min-height:0 !important}
#zoSheet:has(.ziCar) .zoShHead{padding-top:10px; padding-bottom:6px}
#zoSheet:has(.ziCar) .zoShHead h3{font-size:24px}
.ziSq .hsIn{padding:26px 24px}

/* butonul care le citeste pe toate deodata */
.ziAll{margin-top:14px; width:100%}
/* fara poza de sus in ferestrele de info */
#zoSheet .zoShHero.noimg{display:none}

/* poza cu Luna din capul ecranului de zodiac, estompata sus si jos */
.zoHero{margin:-6px -22px 4px; text-align:center}
.zoHero .zoHeroImg{display:block; width:100%; aspect-ratio:4/3;
  background-image:url(img/x-css-zo-hero.webp);
  background-size:cover; background-position:center 62%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%)}
.zoHero .sub{margin:-6px 22px 0; font-size:13.5px; line-height:1.55}
/* linia scurta cu element, planeta, modalitate si zodia chinezeasca */
.zoLine{margin-top:12px; font-family:'Montserrat',system-ui,sans-serif; font-weight:600;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(245,239,228,.66); text-align:center; line-height:1.7}
/* postarile de sub cardul de identitate */
#zoIdFeed{margin-top:18px}
#zoIdFeed .ziCar{margin-bottom:26px}
.ziOne{margin-top:20px}

/* ecranul de zodiac ia albastrul din poza cu Luna */
#s-zodiac{--felt:rgb(53,62,93)}
body.zoSkin .phone{background-color:rgb(53,62,93) !important}
.zoHero .zoHeroImg{background-size:80% auto !important; background-color:rgb(53,62,93);
  background-image:url(img/x-css-zo-hero-2.webp) !important;
  aspect-ratio:4/3.4; background-position:center 58%}
/* numele si data nasterii, sub semn */
.zoWho{margin-top:14px; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:19px; color:#f5efe4; text-align:center}
.zoBorn{margin-top:3px; font-family:'Montserrat',system-ui,sans-serif; font-size:12px;
  letter-spacing:.06em; color:rgba(245,239,228,.6); text-align:center}
/* cele patru iconite */
.zoIcoRow{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:20px 0 6px}
.zoIco{display:flex; flex-direction:column; align-items:center; gap:5px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:18px; padding:12px 5px 11px; cursor:pointer; color:inherit;
  transition:border-color .18s, background .18s}
.zoIco.on{border-color:rgba(250,204,21,.55); background:rgba(255,255,255,.09)}
.zoIco i{display:block; width:46px; height:46px; background-size:contain;
  background-repeat:no-repeat; background-position:center}
.zoIco b{font-family:'Montserrat',system-ui,sans-serif; font-weight:700; font-size:8.5px;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(245,239,228,.55);
  text-align:center; line-height:1.25}
.zoIco span{font-family:'Montserrat',system-ui,sans-serif; font-size:11px;
  color:#f5efe4; text-align:center; line-height:1.25}
#zoIcoBody{margin-top:14px}
/* umbra sta in spatele intregii postari, nu in spatele pozei */
.hsPost{box-shadow:0 2px 4px rgba(10,8,24,.22), 0 22px 44px -20px rgba(10,8,24,.7)}
.hsPost .hsSq{box-shadow:none !important}
.hsPost .hsPostBody{box-shadow:none !important}

/* trecerea intre zone: culorile aluneca, nu sar */
.cTab{transition:color .3s ease, border-color .3s ease, background-color .3s ease,
  box-shadow .3s ease}
/* nicio estompare la schimbarea zonei: doar alunecare */

/* placutele aluneca, deci au nevoie de propriul strat de compunere */
#toolGrid .tool{will-change:transform, opacity; backface-visibility:hidden}
/* grila nu mai taie placutele cat ies din cadru */
.grid{overflow:visible}

/* stratul cu placutele care ies din cadru */
.catGhost{overflow:visible}
.catGhost .tool{will-change:transform; backface-visibility:hidden}

/* Meniul de sub cele trei puncte are acum un card mai inalt, ca sa incapa
   mai multe butoane. Sursa are 382 pe 507, iar felia e 90, deci coltul de sus
   si cel de jos raman intacte oricat de mult creste mijlocul. */
:root{--fvCardTall:url(img/fv-card-tall.webp)}
.fmCard{border-image-source:var(--fvCardTall) !important;
  border-image-slice:90 fill !important;
  border-width:44px 40px !important;
  min-height:150px; display:flex; flex-direction:column; justify-content:center; gap:2px}

/* citirea numerelor: text alb pe Montserrat, fara caseta deschisa */
.anTx{width:100%; font-family:'Montserrat',system-ui,sans-serif; font-size:14.5px;
  line-height:1.66; color:#f5efe4; text-align:center; background:none; padding:0;
  border-radius:0; box-shadow:none}
#anCards .hsRevT, #anMoreFeed .hsRevT{color:#f5efe4}
#anCards .hsRevEy, #anMoreFeed .hsRevEy{color:rgba(245,239,228,.6)}
#anCards .hsRevN, #anCards .anBigN{color:#f5efe4}
.anSq .hsIn{justify-content:center; gap:14px; padding:30px 26px}
/* slide-ul de mantra */
.anManLine{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:21px;
  line-height:1.45; color:#f5efe4; text-align:center}
#anManBody{width:100%; display:flex; flex-direction:column; align-items:center; gap:10px}
.anManRun{width:100%; display:flex; flex-direction:column; align-items:center; gap:10px}
.anManRun .qbsBar{width:100%; height:6px; border-radius:99px; background:rgba(245,239,228,.18); overflow:hidden}
.anManRun .qbsBar i{display:block; height:100%; width:0; border-radius:99px; background:var(--catB, #d9b45b)}
.anManT{font-family:'Montserrat',system-ui,sans-serif; font-size:12.5px;
  color:rgba(245,239,228,.7); margin:0}
.anManStop{color:rgba(245,239,228,.6); font-size:12.5px}
.anManDone{font-family:'Montserrat',system-ui,sans-serif; font-size:13.5px;
  color:rgba(245,239,228,.8); margin:0; text-align:center}
#anMoreFeed{margin-top:26px}

/* supratitlul citirii: Playfair bold, maro cald, ridicat fata de text */
#anCards .anHd, #anMoreFeed .anHd, .anHd{
  font-family:'Playfair Display',Georgia,serif !important; font-weight:700 !important;
  font-size:19px !important; line-height:1.3 !important;
  color:#c9a15e !important; text-align:center !important; margin:0 0 20px !important;
  transform:translateY(-25%)}
.anSq .hsIn{justify-content:center; gap:8px; padding:30px 26px}
.anTx p{margin:0 0 13px}
.anTx p:last-child{margin-bottom:0}
#anCards .forYou, #anCards .guide, #anMoreFeed .forYou, #anMoreFeed .guide,
#anCards .hsRevP, #anMoreFeed .hsRevP{
  background:none !important; border:0 !important; border-top:0 !important;
  border-radius:0 !important; padding:0 !important; box-shadow:none !important;
  color:#f5efe4 !important; font-style:normal !important; font-size:14.5px !important;
  line-height:1.66 !important; text-align:center !important}
#anCards .forYou b, #anMoreFeed .forYou b{color:#c9a15e}
.anMoreB{margin-top:22px}
/* cifra sta pe fundalul inchis al cardului, deci ramane deschisa.
   butonul Opreste sta pe fetru deschis, deci textul lui e inchis. */
.anManRun .anManT{color:#f5efe4}
.anManRun .anManStop{color:#1b1730 !important; font-weight:600}

/* Randurile din paragrafe se impart egal, ca sa nu ramana un cuvant singur
   pe ultimul rand. Regula generala, in toata aplicatia. */
p, .anTx, .dpP, .hsRevP, .anTx p, .dpTxt p, .bioTxt p, .sub, .ziSq .hsRevP p{
  text-wrap:pretty; hanging-punctuation:first last}
.anHd, .dpCovT, .hsRevT, .hsRevEy, h1, h2, h3, .zoWho, .anManLine{
  text-wrap:balance}

/* Tastatura numerica: toate tastele la fel, crem, Playfair bold,
   centrate optic. Singurul buton colorat ramane cel de dezvaluire. */
.numpad button, .numpad .npx{
  border-image-source:var(--fvCream) !important;
  font-family:'Playfair Display',Georgia,serif !important; font-weight:700 !important;
  color:#1b1730 !important; line-height:1 !important;
  font-size:21px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; position:static !important; top:auto !important;
  height:52px !important; min-height:52px !important;
  /* Playfair are cifrele asezate putin sus in caseta, deci le coboram un fir */
  padding-top:2px !important}
/* doua puncte sunt un semn scurt: acelasi corp, dar fara coborarea cifrelor */
.numpad .npx[onclick*="':'"]{font-size:23px !important; padding-top:0 !important}
/* sageata de stergere nu exista in Playfair, deci ramane pe fontul de sistem */
.numpad .npx[onclick*="npDel"]{font-family:system-ui,sans-serif !important;
  font-size:19px !important; padding-top:0 !important}
/* cuvantul Spatiu e text, nu cifra */
.numpad .npx[data-i="npSpace"]{font-size:15px !important; letter-spacing:.08em;
  padding-top:1px !important}

/* butonul care cere citirea lunga, in albastru inchis */
.anMoreB{margin-top:22px; color:#1b2f5e !important}
/* fila de asteptare, chiar in card */
.anSq .anLoad{width:100%; height:5px; border-radius:99px; overflow:hidden;
  background:rgba(245,239,228,.16); margin:2px 0 6px}
.anSq .anLoad i{display:block; height:100%; width:38%; border-radius:99px;
  background:var(--catB, #d9b45b); animation:anLoadRun 1.25s ease-in-out infinite}
@keyframes anLoadRun{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
/* istoricul numerelor: rand curat, cu calendar compact dedesubt */
.anLogHead{display:flex; align-items:baseline; gap:9px}
.anLogHead b{font-family:'Playfair Display',Georgia,serif; font-size:17px; flex:0 0 auto}
.anLogDate{flex:1; font-family:'Montserrat',system-ui,sans-serif; font-size:11.5px;
  letter-spacing:.06em; opacity:.6}
.anLogC{font-family:'Montserrat',system-ui,sans-serif; font-size:12px;
  font-weight:600; color:var(--catB)}


/* Butonul de stat cu mesajul traieste acum pe ultima fila din carusel,
   deci cel vechi de sub postare nu mai are rost. */
#angelRes .ghost.anMain{display:none !important}

/* bulinele se aseaza in mijlocul postarii, nu al spatiului dintre butoane */
.hsPostBar{position:relative}
.hsPostBar .hsDots{position:absolute; left:50%; transform:translateX(-50%);
  margin:0; width:auto; justify-content:center}
/* butonul de la finalul citirii, in albastru inchis, ca celalalt */
#anManBody .hsBtn{color:#1b2f5e !important}

/* Feedul meu: postarile salvate, cea mai noua sus */
#hsFeedOv{position:fixed; inset:0; z-index:400;
  background:#141127; background-image:var(--feltTex); background-repeat:repeat;
  opacity:0; pointer-events:none; transition:opacity .26s ease;
  display:flex; flex-direction:column}
#hsFeedOv.on{pointer-events:auto}
#hsFeedOv.show{opacity:1}
.hsFeedTop{flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 12px}
.hsFeedTop b{flex:1; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:21px; color:#f5efe4}
.hsFeedX{width:38px; height:38px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(245,239,228,.12); color:#f5efe4; font-size:16px}
.hsFeedBody{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:4px 20px calc(40px + env(safe-area-inset-bottom,0px))}
.hsFeedItem{margin-bottom:26px}
.hsFeedWhen{font-family:'Montserrat',system-ui,sans-serif; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(245,239,228,.5);
  margin:0 2px 8px}
.hsFeedEmpty{font-family:'Montserrat',system-ui,sans-serif; font-size:14px;
  line-height:1.6; color:rgba(245,239,228,.65); text-align:center; margin:18vh 10px 0}
#hsFeedOv .hsPostNav{display:none}
#hsFeedOv .hsPost{margin:0}
#hsFeedOv .hsCar{scroll-snap-type:x mandatory}
#hsFeedOv .hsSlide{scroll-snap-align:center}

/* data zilei, in cardul facut pentru tine */
#s-zodiac .zoMade, #hsFeedOv .zoMade, .zoMade{
  font-family:'Montserrat',system-ui,sans-serif !important; font-size:11px !important;
  letter-spacing:.14em; text-transform:uppercase; color:#c9a15e !important;
  text-align:center; margin:0 0 10px !important}
/* semnul de carte plin ia maroul titlurilor */
.hsPostAct[data-ps].on{color:#c9a15e !important}
/* intrebarea de scoatere din feed */
#hsFeedAsk{position:fixed; inset:0; z-index:460; display:flex; align-items:flex-end;
  justify-content:center; padding:0 16px calc(26px + env(safe-area-inset-bottom,0px));
  background:rgba(8,6,18,.62); opacity:0; pointer-events:none; transition:opacity .24s ease}
#hsFeedAsk.on{pointer-events:auto}
#hsFeedAsk.show{opacity:1}
#hsFeedAsk .fmCard{width:100%; max-width:390px; box-sizing:border-box; color:#1b1730;
  border-style:solid; border-color:transparent; border-width:44px 40px;
  border-image-source:var(--fvCardTall); border-image-slice:90 fill;
  border-image-repeat:stretch; border-image-width:1;
  padding:2px; display:flex; flex-direction:column; gap:2px;
  transform:translateY(26px); opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.25,1), opacity .28s ease}
#hsFeedAsk .fmRow{margin:8px 0 0;
  border-style:solid; border-color:transparent; border-width:19px 20px;
  border-image-source:var(--fvCream); border-image-slice:64 fill;
  border-image-repeat:stretch; border-image-width:1; border-radius:0;
  background:none; padding:0; min-height:16px;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:15px;
  color:#1b1730; display:flex; align-items:center; justify-content:center}
#hsFeedAsk .fmRow span{display:block; width:100%; text-align:center}
#hsFeedAsk .fmClose{display:block; margin:6px auto 0; padding:8px 10px;
  background:none; border:0; cursor:pointer; font-size:12.5px; color:rgba(27,23,48,.55)}
#hsFeedAsk.show .fmCard{transform:none; opacity:1}
.hsAskT{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:19px;
  color:#1b1730; text-align:center; margin:0 0 6px}
.hsAskS{font-family:'Montserrat',system-ui,sans-serif; font-size:13px; line-height:1.55;
  color:rgba(27,23,48,.68); text-align:center; margin:0 6px 14px}

/* intrebarea de dinaintea scoaterii din feed */
#hsFeedAsk{position:fixed; inset:0; z-index:460; display:flex; align-items:center;
  justify-content:center; padding:24px; background:rgba(8,6,18,.72);
  opacity:0; pointer-events:none; transition:opacity .24s ease}
#hsFeedAsk.on{pointer-events:auto}
#hsFeedAsk.show{opacity:1}
#hsFeedAsk .fmCard{transform:none; opacity:1}
.hsAskT{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:18px;
  color:#1b1730; text-align:center; margin:0 0 6px}
.hsAskM{font-family:'Montserrat',system-ui,sans-serif; font-size:12.5px; line-height:1.55;
  color:rgba(27,23,48,.7); text-align:center; margin:0 0 14px}
/* semnul de carte, in maro cald, ca titlurile */
.hsPostAct[data-ps].on{color:#c9a15e !important}

/* Orele oglinda: grila de trei coloane, pastile egale, cifre mari si groase */
.mhBox{margin-top:18px}
.mhGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.mhGrid .mhPill{
  width:100%; min-height:54px; padding:0 !important; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',Georgia,serif !important; font-weight:700 !important;
  font-size:18px !important; line-height:1 !important;
  /* Playfair aseaza cifrele putin sus in caseta, deci le coboram un fir */
  padding-top:2px !important}
/* capetele de sectiune, cu cate o linie de fiecare parte */
.mhChap{margin:0 0 14px}
.mhChapSub{margin:-2px 0 16px; font-weight:400; font-size:13px;
  letter-spacing:.02em; text-transform:none; color:rgba(245,239,228,.55);
  display:block; text-align:center}
/* subtitlul nu mai are linii; doar titlul de deasupra le poarta */
.mhChapSub::before, .mhChapSub::after{display:none}
/* butoanele care se deschid, in acelasi tipar cu restul aplicatiei */
.mhBox .zoHead{background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13); border-radius:18px; padding:15px 17px}
.mhBox .zoWrap.open>.zoHead{border-radius:18px 18px 0 0;
  border-color:rgba(201,161,94,.45)}
.mhBox .zoHead .ttl{font-family:'Playfair Display',Georgia,serif !important;
  font-weight:700 !important; font-size:16px !important; color:#f5efe4}
.mhBox .zoHead .hint{font-family:'Montserrat',system-ui,sans-serif;
  font-size:12px !important; font-weight:600; color:#c9a15e}
.mhBox .zoHead svg{color:#c9a15e}
.mhBox .zoDrawer .inner{background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13); border-top:none;
  border-radius:0 0 18px 18px; padding:16px}
.mhBox .zoWrap.open>.zoDrawer .inner{border-color:rgba(201,161,94,.45)}

/* in istoricul numerelor, numarul e mare si data mica dedesubt */
#anLog .hsDay .n{font-size:26px}
#anLog .hsDay .m{font-size:11px; letter-spacing:.1em; margin-top:5px}

/* Caseta unde scrii numarul: cifrele stau la mijloc pe verticala.
   Avea 19px de umplutura doar jos, care le impingea in sus. */
/* Caseta unde scrii numarul: cifrele stau la mijloc pe verticala.
   Avea 19px de umplutura doar jos, care le impingea in sus.
   Substitutul e cu putin mai jos din cauza formei cifrelor, deci il ridicam
   cu un fir, ca sa cada in acelasi loc ca textul scris. */
.numInput{padding:0 16px 2px !important; display:flex; align-items:center}
.numInput::placeholder{position:relative; top:-2px}

/* Moss, intre titlu si subtitlu. Fundalul lui e exact fetrul uneltei,
   iar marginile de sus si de jos se sting, ca sa nu se vada nicio linie. */
/* poza incepe sub titlu, nu peste el */
.anHero{margin:8px -22px 6px; text-align:center}
.anHero .anHeroImg{display:block; width:100%; aspect-ratio:3/2.6;
  background-size:150% auto !important;
  background-image:url(img/css-an-hero.webp);
  background-repeat:no-repeat; background-position:center 56%;
  background-color:rgb(68,46,79);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%)}
.anHero .sub{margin:10px 22px 0; font-size:13.5px; line-height:1.55}
/* linia de sub istoric sta la mijloc, ca titlul de deasupra */
#anLog .sub{text-align:center}

/* butonul care strange partea de sus a uneltei */
/* butonul sta langa titlu, care ramane mereu pe ecran */
.anTitleRow{position:relative}
.anFold{position:absolute; right:-2px; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:rgba(245,239,228,.7); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  -webkit-tap-highlight-color:transparent}
.anFold svg{width:17px; height:17px; transition:transform .32s ease}
.anFold.on svg{transform:rotate(-90deg)}
.anFold:active{transform:translateY(-50%) scale(.92)}
#angelAsk{position:relative}
/* partea de sus se strange lin, fara sa sara */
#anIntro{overflow:hidden; max-height:640px; opacity:1;
  transition:max-height .42s ease, opacity .3s ease}
#anIntro.folded{max-height:0; opacity:0}

/* cristalul zilei, mare, in capul cardului */
.hpCryBig{width:96px; height:96px; margin:0 auto 4px; background-size:contain;
  background-repeat:no-repeat; background-position:center}
.hpCryBig.pop{animation:hpCryPop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes hpCryPop{0%{transform:scale(.6) rotate(-8deg); opacity:0}100%{transform:none; opacity:1}}
.hpCryNm{font-family:'Montserrat',system-ui,sans-serif; font-size:11.5px;
  letter-spacing:.06em; color:rgba(27,23,48,.6); text-align:center; margin:2px 0 8px}
/* cele sapte locasuri */
.hpCry{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:14px 0 4px}
.hpCrySlot{position:relative; aspect-ratio:1/1; border-radius:10px;
  border:1.5px dashed rgba(27,23,48,.22); background:rgba(27,23,48,.05)}
.hpCrySlot.now{border-color:rgba(201,161,94,.75)}
.hpCrySlot i{position:absolute; inset:8%; background-size:contain;
  background-repeat:no-repeat; background-position:center; opacity:1}
.hpCrySlot.on{border-style:solid; border-color:transparent; background:transparent}
.hpCrySlot.drop i{animation:hpDrop .52s cubic-bezier(.2,1.35,.4,1)}
@keyframes hpDrop{0%{transform:translateY(-26px) scale(.7); opacity:0}
  70%{transform:translateY(2px) scale(1.06); opacity:1}100%{transform:none}}
/* geodele stranse pana acum */
.hpGeoRow{display:flex; justify-content:center; gap:7px; margin-top:12px}
.hpGeoRow span{width:26px; height:26px; background-size:contain;
  background-repeat:no-repeat; background-position:center}
/* butonul de test */
.hpTest{display:block; width:100%; margin-top:9px; padding:9px; border:0; cursor:pointer;
  background:none; font-family:'Montserrat',system-ui,sans-serif; font-size:12px;
  color:rgba(27,23,48,.5); text-decoration:underline}
/* momentul geodei */
#hsGeo{position:fixed; inset:0; z-index:520; display:flex; align-items:center;
  justify-content:center; padding:26px; background:rgba(8,6,18,.82);
  opacity:0; pointer-events:none; transition:opacity .28s ease}
#hsGeo.on{pointer-events:auto}
#hsGeo.show{opacity:1}
.hgCard{position:relative; width:100%; max-width:330px; text-align:center;
  border-style:solid; border-color:transparent; border-width:42px 38px;
  border-image-source:var(--fvCardTall); border-image-slice:90 fill;
  border-image-repeat:stretch; border-image-width:1; padding:2px; color:#1b1730;
  transform:scale(.86); opacity:0; transition:transform .46s cubic-bezier(.2,1.3,.35,1), opacity .3s ease}
#hsGeo.show .hgCard{transform:none; opacity:1}
.hgRay{position:absolute; left:50%; top:52px; width:230px; height:230px; margin-left:-115px;
  border-radius:999px; background:radial-gradient(circle, rgba(201,161,94,.42), transparent 68%);
  animation:hgPulse 2.6s ease-in-out infinite}
@keyframes hgPulse{0%,100%{transform:scale(.92); opacity:.75}50%{transform:scale(1.06); opacity:1}}
.hgImg{position:relative; width:150px; height:150px; margin:0 auto 10px;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  animation:hgIn .7s cubic-bezier(.2,1.4,.35,1)}
@keyframes hgIn{0%{transform:scale(.4) rotate(-14deg); opacity:0}100%{transform:none; opacity:1}}
.hgT{position:relative; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:22px; margin-bottom:6px}
.hgS{position:relative; font-family:'Montserrat',system-ui,sans-serif; font-size:12.5px;
  line-height:1.6; color:rgba(27,23,48,.72); margin-bottom:18px}
/* butonul geodei poarta acelasi fetru ca restul aplicatiei */
#hsGeo .hpBtn{position:relative; width:100%; border-style:solid; border-color:transparent;
  border-width:17px 18px; border-image-source:var(--fvFill); border-image-slice:64 fill;
  border-image-repeat:stretch; border-image-width:1; padding:2px 8px;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:16px;
  color:#1b1730; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
#hsGeo .hpBtn:active{transform:scale(.97)}

/* Evolutia: titlul etapei, citatul ei, apoi paragraful care o duce mai departe */
.dpEvoT{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:19px;
  color:#f5efe4; text-align:center; margin-bottom:4px}
.dpEvoQ{font-family:'Montserrat',system-ui,sans-serif; font-size:13px; font-style:italic;
  color:#c9a15e; text-align:center; margin-bottom:12px}
/* randuri in chenar rotunjit, centrate */
.dpPills{display:flex; flex-direction:column; gap:9px; width:100%}
.dpPill{border:1px solid rgba(245,239,228,.22); border-radius:16px;
  background:rgba(245,239,228,.06); padding:12px 14px;
  font-family:'Montserrat',system-ui,sans-serif; font-size:13.5px; line-height:1.5;
  color:#f5efe4; text-align:center}
/* umbra din spatele postarilor, mult mai discreta */
.hsPost{box-shadow:0 1px 2px rgba(10,8,24,.05), 0 6px 14px -10px rgba(10,8,24,.18) !important}

/* Cardurile citirii adanci cresc daca textul cere, dar nu scad sub inaltimea
   pe care o aveau, ca sa nu sara caruselul de la un slide la altul. */
/* Toate cardurile citirii au aceeasi inaltime; textul se imparte pe mai multe
   file, nu se micsoreaza si nu intinde cardul. */
#s-deep .hsSq.flow{aspect-ratio:3/4 !important; min-height:0}
#s-deep .hsSq.flow .hsIn{position:absolute; inset:0; overflow:hidden;
  justify-content:center}
/* toate filele unui carusel se intind cat cea mai inalta, ca sa nu ramana
   o fasie alba sub cele scurte */
#s-deep .hsCar{align-items:stretch}
#s-deep .hsSlide{display:flex}
#s-deep .hsSlide > .hsSq{flex:1 1 auto}

/* Ghidul, ca foaie peste ecran, deschis din meniul cu trei puncte */
#hgOv{position:fixed; inset:0; z-index:420;
  background:#141127; background-image:var(--feltTex); background-repeat:repeat;
  opacity:0; pointer-events:none; transition:opacity .26s ease;
  display:flex; flex-direction:column}
#hgOv.on{pointer-events:auto}
#hgOv.show{opacity:1}
.hgSheetTop{flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 12px}
.hgSheetTop b{flex:1; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:21px; color:#f5efe4}
.hgSheetBody{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 20px calc(40px + env(safe-area-inset-bottom,0px))}
#hgOv .hgTop{display:none}
#hgOv .hgBox{margin-top:0}

/* Cele doua intrebari din onboarding */
.obQT{font-family:'Montserrat',system-ui,sans-serif; font-size:13px;
  letter-spacing:.02em; color:rgba(245,239,228,.75); margin:0 0 10px}
.obOpt{display:block; width:100%; margin-bottom:9px; padding:14px 16px;
  border:1px solid rgba(245,239,228,.2); border-radius:16px;
  background:rgba(245,239,228,.05); color:#f5efe4; cursor:pointer;
  font-family:'Montserrat',system-ui,sans-serif; font-size:14.5px; text-align:center;
  -webkit-tap-highlight-color:transparent; transition:border-color .2s ease, background .2s ease}
.obOpt.on{border-color:#c9a15e; background:rgba(201,161,94,.14)}
.obOpt:active{transform:scale(.985)}