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