#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)}