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