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