/* 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. */