/* ===================================================================
   Astrolomia — "Dreamy Celestial" UI
   =================================================================== */

:root{
  --bg-1:#110a26; --bg-2:#1f1342; --bg-3:#38205c;
  --pink:#f7b7d2; --lav:#c9b6f5; --gold:#f3d9a4; --cyan:#a7d8f0;
  --ink:#f0ecff; --ink-soft:#bcb5df;
  --card:rgba(255,255,255,.055); --card-line:rgba(255,255,255,.14);
  --r-lg:22px; --r-md:16px; --r-sm:14px;
  --grad:linear-gradient(105deg,var(--gold),var(--pink),var(--lav));
}
*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:none;-ms-overflow-style:none;}
*::-webkit-scrollbar{display:none;width:0;height:0;}

body{
  font-family:'Quicksand',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);min-height:100vh;overflow-x:hidden;padding-bottom:70px;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 60% 38% at 80% 6%, rgba(243,217,164,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 16% 2%, #573281 0%, transparent 56%),
    radial-gradient(ellipse at 94% 98%, #672f6d 0%, transparent 56%),
    linear-gradient(168deg,var(--bg-1),var(--bg-2) 52%,var(--bg-3));
  background-attachment:fixed;
}

/* ----- ambience ----- */
.stars{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.7;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 78% 12%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 42% 32%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 88% 48%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 28% 62%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 66% 78%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 8%  88%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 54% 94%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 95% 70%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 35% 7%,#fff,transparent);
  background-repeat:repeat;background-size:460px 460px;
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.35;}to{opacity:.8;}}
.orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(95px);opacity:.36;pointer-events:none;}
.orb-1{width:340px;height:340px;background:var(--pink);top:-95px;left:-105px;}
.orb-2{width:320px;height:320px;background:var(--lav);bottom:-105px;right:-95px;}

/* ----- layout ----- */
main,.site-header,.tabs{max-width:560px;margin:0 auto;padding:0 18px;}

.site-header{text-align:center;padding-top:34px;padding-bottom:10px;}
.crescent{
  width:40px;height:40px;border-radius:50%;margin:0 auto 10px;
  box-shadow:12px 9px 0 0 var(--gold);
  filter:drop-shadow(0 0 16px rgba(243,217,164,.55));
}
.site-header h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2.8rem;font-weight:600;letter-spacing:.5px;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{color:var(--ink-soft);font-size:.92rem;letter-spacing:2px;margin-top:4px;}

/* ----- tabs ----- */
.tabs{display:flex;gap:8px;margin:18px auto 8px;}
.tab{
  flex:1;padding:11px 6px;border:1px solid var(--card-line);
  background:var(--card);color:var(--ink-soft);
  border-radius:100px;font-family:inherit;font-size:.86rem;font-weight:600;
  cursor:pointer;transition:.2s;backdrop-filter:blur(8px);
}
.tab:hover{color:var(--ink);}
.tab:active{transform:scale(.97);}
.tab.active{
  color:#2a1640;border-color:transparent;background:var(--grad);
  box-shadow:0 6px 22px rgba(201,182,245,.45);
}

/* ----- views ----- */
.view{display:none;}
.view.active{display:block;animation:fade .45s ease;}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ----- cards ----- */
.card{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-lg);
  padding:22px;margin:14px 0;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 14px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  animation:rise .5s ease both;
}
.card h2{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;margin-bottom:4px;}
.card .sub{color:var(--ink-soft);font-size:.9rem;margin-bottom:14px;}
.action-stack{margin:16px 0 4px;}

/* ----- forms ----- */
label{display:block;font-size:.82rem;color:var(--ink-soft);margin:14px 0 5px;font-weight:600;}
.hint{font-size:.74rem;color:var(--ink-soft);font-weight:400;}
input[type=text],input[type=password],input[type=email],input[type=date],select{
  width:100%;padding:13px 14px;font-family:inherit;font-size:1rem;
  color:var(--ink);background:rgba(255,255,255,.06);
  border:1px solid var(--card-line);border-radius:var(--r-sm);outline:none;transition:.2s;
}
input:focus,select:focus{border-color:var(--lav);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(201,182,245,.15);}
select{appearance:none;-webkit-appearance:none;cursor:pointer;}
select option{background:#241546;color:var(--ink);}

.date-picker,.time-picker{display:flex;gap:8px;}
.date-picker select,.time-picker select{flex:1;padding:13px 6px;text-align:center;text-align-last:center;}
.check-row{display:flex;align-items:center;gap:8px;margin:9px 0 2px;
  color:var(--ink-soft);font-size:.85rem;font-weight:600;cursor:pointer;}
.check-row input{width:auto;}

.seg{display:flex;gap:8px;}
.seg-opt{flex:1;position:relative;}
.seg-opt input{position:absolute;opacity:0;pointer-events:none;}
.seg-opt label{
  display:block;text-align:center;padding:12px 4px;border-radius:var(--r-sm);cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--card-line);
  color:var(--ink-soft);font-weight:600;font-size:.9rem;margin:0;transition:.2s;
}
.seg-opt input:checked + label{color:#2a1640;border-color:transparent;background:var(--grad);}

.pick-row{display:flex;flex-wrap:wrap;gap:8px;}
.pick-chip{
  padding:9px 14px;border-radius:100px;cursor:pointer;font-size:.85rem;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid var(--card-line);
  color:var(--ink-soft);transition:.15s;
}
.pick-chip:hover{color:var(--ink);}
.pick-chip:active{transform:scale(.96);}
.pick-chip.on{background:var(--grad);color:#2a1640;border-color:transparent;}

/* ----- buttons ----- */
.btn{
  display:block;width:100%;margin-top:14px;padding:14px;
  font-family:inherit;font-size:1rem;font-weight:700;color:#2a1640;cursor:pointer;
  border:none;border-radius:100px;background:var(--grad);
  box-shadow:0 8px 24px rgba(247,183,210,.34);transition:.18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(247,183,210,.5);}
.btn:active{transform:translateY(0) scale(.99);}
.btn.ghost{background:var(--card);color:var(--ink-soft);
  border:1px solid var(--card-line);box-shadow:none;font-weight:600;}
.btn.ghost:hover{color:var(--ink);transform:none;}
.btn.small{margin-top:10px;padding:11px;font-size:.92rem;}

/* ----- city autocomplete ----- */
.place-field{position:relative;}
.place-suggestions{
  display:none;position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:5px;
  background:#281850;border:1px solid var(--card-line);border-radius:var(--r-sm);
  overflow:hidden;max-height:250px;overflow-y:auto;box-shadow:0 16px 40px rgba(0,0,0,.6);
}
.place-suggestions.show{display:block;}
.place-opt{padding:11px 14px;cursor:pointer;font-size:.93rem;
  border-bottom:1px solid rgba(255,255,255,.06);}
.place-opt:last-child{border-bottom:none;}
.place-opt:hover{background:rgba(255,255,255,.1);}
.place-opt span{color:var(--ink-soft);font-size:.8rem;}
.place-empty{padding:11px 14px;color:var(--ink-soft);font-size:.85rem;}

/* ===== reading: class-first headline ===== */
.hero-class{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(150deg,rgba(243,217,164,.26),rgba(247,183,210,.2),rgba(201,182,245,.26));
  border:1px solid rgba(255,255,255,.32);border-radius:var(--r-lg);
  padding:26px 18px 20px;margin:8px 0 13px;
  box-shadow:0 18px 44px rgba(0,0,0,.4);animation:rise .55s ease both;
}
.hero-class::before{
  content:'';position:absolute;top:0;left:-60%;width:42%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
  transform:skewX(-20deg);animation:shimmer 6s ease-in-out 1s infinite;
}
@keyframes shimmer{0%,58%{left:-60%;}82%,100%{left:122%;}}
.class-badge-xl{
  width:88px;height:88px;border-radius:50%;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;font-size:2.9rem;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.4),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 26px rgba(0,0,0,.34), inset 0 0 20px rgba(255,255,255,.18);
}
.class-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:2.8px;color:var(--lav);}
.class-name{
  font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:600;
  line-height:1.1;margin:5px 0 8px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.class-essence{font-size:.96rem;color:var(--ink);font-style:italic;line-height:1.55;}
.sign-pills{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:14px;}
.pill{
  font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:100px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.26);
}

/* who-you-are summary */
.summary-card{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-md);
  padding:16px 17px;margin:0 0 13px;
}
.sum-title{font-size:.72rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--lav);margin-bottom:7px;}
.summary-card p{font-size:.94rem;line-height:1.62;color:var(--ink-soft);}
.summary-card p b{color:var(--ink);font-weight:700;}

/* superlative stat tiles */
.stats-panel{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 13px;}
.stat-tile{
  background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
  border:1px solid var(--card-line);border-radius:var(--r-md);
  padding:14px 11px;text-align:center;
}
.stat-emoji{font-size:1.6rem;line-height:1;}
.stat-label{font-size:.63rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--lav);margin-top:5px;}
.stat-value{font-family:'Cormorant Garamond',serif;font-size:1.24rem;font-weight:600;
  margin-top:2px;color:var(--ink);line-height:1.22;}

.scroll-hint{text-align:center;color:var(--ink-soft);font-size:.78rem;
  letter-spacing:1px;margin:16px 0 6px;}

/* power-stat bars */
.stat-bars{background:var(--card);border:1px solid var(--card-line);
  border-radius:var(--r-md);padding:15px 16px;margin:0 0 13px;}
.bar-row{display:flex;align-items:center;gap:10px;margin-top:11px;}
.bar-label{font-size:.82rem;font-weight:600;width:108px;flex-shrink:0;}
.bar-track{flex:1;height:10px;border-radius:100px;
  background:rgba(255,255,255,.08);overflow:hidden;}
.bar-fill{height:100%;border-radius:100px;width:var(--w);
  background:linear-gradient(90deg,var(--cyan),var(--lav),var(--pink));
  box-shadow:0 0 10px rgba(201,182,245,.5);
  animation:bargrow 1.1s cubic-bezier(.2,.8,.2,1) both;}
@keyframes bargrow{from{width:0;}}
.bar-val{font-family:'Cormorant Garamond',serif;font-size:1.08rem;font-weight:600;
  width:26px;text-align:right;flex-shrink:0;color:var(--gold);}

/* five elements wheel */
.ewheel-wrap{display:flex;justify-content:center;margin-top:12px;}
.ewheel text{text-anchor:middle;dominant-baseline:central;}
.ew-emoji{font-size:15px;}
.ew-gen{stroke:rgba(159,227,197,.5);stroke-width:2;}
.ew-ctrl{stroke:rgba(255,157,138,.28);stroke-width:1.2;stroke-dasharray:3 4;}
.ew-off{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.22);stroke-width:1;}
.ew-on{stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 0 8px rgba(247,183,210,.75));}

/* staggered reveal */
.reading>*{animation:rise .5s ease both;}
.reading>*:nth-child(2){animation-delay:.05s;}
.reading>*:nth-child(3){animation-delay:.1s;}
.reading>*:nth-child(4){animation-delay:.15s;}
.reading>*:nth-child(5){animation-delay:.2s;}
.reading>*:nth-child(6){animation-delay:.25s;}
.reading>*:nth-child(7){animation-delay:.3s;}
.reading>*:nth-child(8){animation-delay:.35s;}
.reading>*:nth-child(9){animation-delay:.4s;}
.reading>*:nth-child(n+10){animation-delay:.45s;}

/* sparkle burst */
.sparkle-layer{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;}
.sparkle{position:absolute;color:var(--gold);text-shadow:0 0 8px rgba(247,183,210,.9);
  animation:sparkfly 1.5s ease-out forwards;}
@keyframes sparkfly{
  0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0);}
  18%{opacity:1;}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(140deg);}
}

/* zodiac wheel */
.zwheel-wrap{display:flex;justify-content:center;margin:6px 0 2px;}
.zwheel text{text-anchor:middle;dominant-baseline:central;}
.zw-emoji{font-size:15px;}
.zw-orbit{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.4;stroke-dasharray:2 6;}
.zw-good{stroke:rgba(159,227,197,.55);stroke-width:2;}
.zw-bad{stroke:rgba(255,140,130,.5);stroke-width:1.6;stroke-dasharray:4 4;}
.zw-node{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.2);stroke-width:1;}
.zw-best{fill:rgba(159,227,197,.22);stroke:rgba(159,227,197,.75);stroke-width:1.5;}
.zw-clash{fill:rgba(255,140,130,.2);stroke:rgba(255,140,130,.75);stroke-width:1.5;}
.zw-me{fill:rgba(247,183,210,.35);stroke:#fff;stroke-width:2;
  filter:drop-shadow(0 0 8px rgba(247,183,210,.75));}
.zw-legend{text-align:center;font-size:.74rem;color:var(--ink-soft);margin-bottom:6px;}
.zw-k{display:inline-block;width:10px;height:10px;border-radius:50%;
  vertical-align:middle;margin:0 5px 0 10px;}
.zw-k-best{background:rgba(159,227,197,.85);}
.zw-k-clash{background:rgba(255,140,130,.85);}

/* compatibility bond + face-off */
.bond{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:4px;}
.bond-person{text-align:center;}
.bond-badge{width:64px;height:64px;border-radius:50%;font-size:2rem;
  display:flex;align-items:center;justify-content:center;margin:0 auto;
  background:radial-gradient(circle,rgba(255,255,255,.32),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.42);}
.bond-name{font-size:.82rem;font-weight:700;margin-top:5px;}
.bond-link{font-size:1.5rem;color:var(--gold);}
.fo-head{display:flex;justify-content:space-between;font-size:.82rem;font-weight:700;
  color:var(--lav);margin:8px 6px 0;}
.fo-row{display:flex;align-items:center;gap:7px;margin-top:9px;}
.fo-side{flex:1;display:flex;align-items:center;gap:6px;}
.fo-l{flex-direction:row-reverse;}
.fo-track{flex:1;height:9px;border-radius:100px;background:rgba(255,255,255,.08);
  overflow:hidden;display:flex;}
.fo-l .fo-track{justify-content:flex-end;}
.fo-fill{height:100%;width:var(--w);border-radius:100px;animation:bargrow 1s ease-out both;}
.fo-l .fo-fill{background:linear-gradient(90deg,var(--lav),var(--cyan));}
.fo-r .fo-fill{background:linear-gradient(90deg,var(--pink),var(--gold));}
.fo-num{font-family:'Cormorant Garamond',serif;font-size:.98rem;font-weight:600;
  width:24px;text-align:center;flex-shrink:0;color:var(--ink);}
.fo-mid{width:82px;flex-shrink:0;text-align:center;font-size:.66rem;
  color:var(--ink-soft);line-height:1.25;}
.fo-mid span{font-weight:600;}

/* share card */
.share-img{width:100%;border-radius:var(--r-md);margin:8px 0 4px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);border:1px solid var(--card-line);}

/* category tabs (reading nav) */
.cat-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;margin-top:8px;}
.cat-tab{flex:0 0 auto;padding:9px 15px;border-radius:100px;
  border:1px solid var(--card-line);background:var(--card);color:var(--ink-soft);
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s;}
.cat-tab:active{transform:scale(.96);}
.cat-tab.on{background:var(--grad);color:#2a1640;border-color:transparent;
  box-shadow:0 5px 16px rgba(201,182,245,.35);}
.cat-panel{display:none;}
.cat-panel.on{display:block;animation:fade .35s ease;}

/* daily horoscope */
.daily-rings{display:flex;justify-content:space-around;gap:8px;margin:6px 0 13px;}
.dr{text-align:center;}
.dr-l{font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-top:4px;}

/* circle insights */
.insight-tile{display:flex;align-items:center;gap:12px;padding:12px 13px;margin-top:9px;
  border-radius:var(--r-md);background:rgba(255,255,255,.05);border:1px solid var(--card-line);}
.insight-emoji{font-size:1.8rem;}
.insight-label{font-size:.67rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--lav);}
.insight-name{font-weight:700;font-size:1.04rem;margin-top:1px;}
.p-compat{flex-shrink:0;font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:1.25rem;color:var(--gold);}
.p-compat span{font-size:.72rem;}

/* advice card */
.advice-card{background:linear-gradient(140deg,rgba(167,216,240,.16),rgba(201,182,245,.17));
  border:1px solid var(--card-line);border-radius:var(--r-md);padding:15px 16px;margin:0 0 13px;}
.adv-row{display:flex;gap:11px;margin-top:10px;align-items:flex-start;}
.adv-k{flex-shrink:0;width:74px;font-size:.66rem;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--lav);padding-top:3px;}
.adv-row p{flex:1;font-size:.92rem;line-height:1.5;color:var(--ink);}

/* collapsible categories */
.acc{background:var(--card);border:1px solid var(--card-line);
  border-radius:var(--r-md);margin:9px 0;overflow:hidden;transition:border-color .2s;}
.acc.open{border-color:rgba(201,182,245,.4);}
.acc-head{
  width:100%;display:flex;align-items:center;gap:11px;padding:15px;
  background:none;border:none;cursor:pointer;font-family:inherit;
  color:var(--ink);text-align:left;transition:background .15s;
}
.acc-head:hover{background:rgba(255,255,255,.05);}
.acc-emoji{font-size:1.3rem;}
.acc-title{flex:1;font-weight:700;font-size:1.02rem;}
.acc-chev{color:var(--ink-soft);font-size:1.05rem;transition:transform .25s ease;}
.acc.open .acc-chev{transform:rotate(180deg);}
.acc-body{display:none;padding:0 15px 15px;}
.acc.open .acc-body{display:block;animation:accopen .3s ease;}
@keyframes accopen{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ----- reading components ----- */
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:4px 0;}
.chip{padding:6px 13px;font-size:.8rem;font-weight:600;border-radius:100px;
  background:rgba(255,255,255,.1);border:1px solid var(--card-line);}
.section-title{
  font-size:.74rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--lav);margin:20px 0 9px;padding-bottom:6px;border-bottom:1px solid var(--card-line);
}
.trait{margin-top:13px;}
.trait .t-label{font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--gold);margin-bottom:3px;}
.trait p{font-size:.95rem;line-height:1.58;color:var(--ink);}
.lead{font-size:1rem;line-height:1.62;}
.quote{
  font-size:.95rem;line-height:1.52;font-style:italic;color:var(--ink);
  background:rgba(255,255,255,.05);border-left:3px solid var(--lav);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:11px 14px;margin:9px 0;
}
.divider{height:1px;background:var(--card-line);margin:18px 0;}

.lifepath-row{display:flex;align-items:center;gap:14px;}
.lifepath-num{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:600;color:#2a1640;
  background:linear-gradient(125deg,var(--cyan),var(--lav));
  box-shadow:0 6px 18px rgba(167,216,240,.4);
}

.info-grid{display:flex;gap:10px;flex-wrap:wrap;}
.info-box{flex:1;min-width:140px;padding:12px 14px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid var(--card-line);}
.info-box .ib-label{font-size:.68rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--lav);}
.info-box .ib-value{font-size:1rem;margin-top:4px;}
.swatches{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}
.swatch{display:flex;align-items:center;gap:6px;font-size:.84rem;}
.swatch-dot{width:16px;height:16px;border-radius:50%;display:inline-block;
  border:1px solid rgba(255,255,255,.35);box-shadow:0 1px 4px rgba(0,0,0,.4);}

/* score rings */
.ring-wrap{display:flex;justify-content:center;margin:8px 0 2px;}
.ring-bg{fill:none;stroke:rgba(255,255,255,.1);}
.ring-fg{fill:none;animation:ringfill 1.2s ease-out;}
@keyframes ringfill{from{stroke-dashoffset:var(--c);}}
.ring-num{fill:#fff;font-family:'Cormorant Garamond',serif;font-weight:600;
  text-anchor:middle;dominant-baseline:central;}

/* feng shui compass */
.compass-wrap{display:flex;justify-content:center;margin:8px 0 14px;}
.compass{filter:drop-shadow(0 8px 20px rgba(0,0,0,.4));}
.compass text{text-anchor:middle;dominant-baseline:central;}
.cmp-orbit{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.4;stroke-dasharray:2 6;}
.cmp-dim{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.18);stroke-width:1;}
.cmp-lucky{stroke:rgba(255,255,255,.5);stroke-width:1;}
.cmp-center{fill:rgba(255,255,255,.08);stroke:rgba(243,217,164,.5);stroke-width:1.2;}
.cmp-icon{font-size:15px;}
.cmp-abbr{fill:var(--ink-soft);font-size:9px;font-weight:700;}
.cmp-abbr-l{fill:#2a1640;font-size:8.5px;font-weight:800;}
.cmp-kua{fill:var(--gold);font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;}
.cmp-kua-l{fill:var(--ink-soft);font-size:7px;font-weight:700;letter-spacing:1px;}

/* direction cards */
.dir-card{display:flex;gap:12px;align-items:flex-start;
  padding:13px 15px;margin:9px 0;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid var(--card-line);}
.dir-badge{flex-shrink:0;width:54px;height:54px;border-radius:var(--r-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--lav),var(--cyan));color:#2a1640;
  font-weight:800;line-height:1.15;}
.dir-badge .d-abbr{font-size:1.05rem;}
.dir-badge .d-emoji{font-size:.8rem;}
.dir-body{flex:1;}
.dir-title{font-weight:700;font-size:.95rem;}
.dir-text{font-size:.85rem;color:var(--ink-soft);line-height:1.45;margin-top:2px;}
.locked{text-align:center;font-size:.86rem;color:var(--ink-soft);
  background:rgba(255,255,255,.05);border:1px dashed var(--card-line);
  border-radius:var(--r-sm);padding:14px;}
.note{font-size:.82rem;color:var(--ink-soft);line-height:1.5;
  background:rgba(255,255,255,.05);border:1px solid var(--card-line);
  border-radius:var(--r-sm);padding:12px 14px;margin-top:14px;}

/* ----- person rows ----- */
.person{
  display:flex;align-items:center;gap:13px;padding:12px 14px;margin:10px 0;
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-md);
  cursor:pointer;transition:.15s;
}
.person:hover{background:rgba(255,255,255,.12);transform:translateX(3px);}
.person:active{transform:scale(.99);}
.person .p-emoji{
  font-size:1.6rem;width:46px;height:46px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.03));
  border:1px solid var(--card-line);
}
.person .p-info{flex:1;min-width:0;}
.person .p-name{font-weight:700;font-size:1rem;}
.person .p-sign{color:var(--ink-soft);font-size:.82rem;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.person .p-go{color:var(--ink-soft);font-size:1.05rem;}
.person .p-del{background:none;border:none;color:var(--ink-soft);font-size:1.05rem;
  cursor:pointer;padding:6px;border-radius:8px;transition:.2s;}
.person .p-del:hover{color:var(--pink);background:rgba(255,255,255,.08);}

/* ----- compatibility ----- */
.match-faces{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px;}
.match-faces .face{font-size:3rem;}
.match-faces .link{font-size:1.4rem;color:var(--gold);}
.match-names{text-align:center;color:var(--ink-soft);font-size:.92rem;}
.stars-row{text-align:center;font-size:1.25rem;letter-spacing:3px;color:var(--gold);margin-top:2px;}
.score-mood{text-align:center;color:var(--ink-soft);font-size:.95rem;}
.score-cat{text-align:center;font-weight:700;font-size:1.12rem;margin-top:8px;}
.ctx{display:flex;align-items:center;gap:13px;padding:12px 14px;margin:10px 0;
  border-radius:var(--r-md);background:rgba(255,255,255,.06);border:1px solid var(--card-line);}
.ctx-hot{border-color:var(--pink);box-shadow:0 0 20px rgba(247,183,210,.22);}
.ctx-ring{flex-shrink:0;line-height:0;}
.ctx-body{flex:1;min-width:0;}
.ctx-name{font-weight:700;}
.ctx-stars{font-size:.78rem;letter-spacing:2px;color:var(--gold);margin-top:1px;}
.ctx-what{font-size:.86rem;color:var(--ink-soft);line-height:1.45;margin-top:3px;}

/* ----- focus card ----- */
.focus-card{
  background:linear-gradient(140deg,rgba(247,183,210,.18),rgba(201,182,245,.16));
  border:1px solid var(--card-line);border-radius:var(--r-md);padding:15px 16px;margin:0 0 6px;
}
.focus-card .fc-title{font-weight:700;font-size:.95rem;}
.focus-card .fc-item{font-size:.9rem;color:var(--ink-soft);margin-top:8px;line-height:1.5;}
.focus-card .fc-item b{color:var(--ink);}

/* ----- misc ----- */
.empty{text-align:center;color:var(--ink-soft);padding:24px 10px;font-size:.95rem;line-height:1.6;}
.error{color:var(--pink);font-size:.86rem;margin-top:8px;text-align:center;}
.relation-tag{display:inline-block;font-size:.68rem;font-weight:700;
  padding:2px 9px;border-radius:100px;margin-left:7px;vertical-align:middle;
  background:rgba(255,255,255,.13);border:1px solid var(--card-line);}

/* ----- modal ----- */
.modal-overlay{
  position:fixed;inset:0;z-index:85;background:rgba(8,4,20,.78);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:26px 14px;overflow-y:auto;opacity:0;pointer-events:none;transition:.25s;
}
.modal-overlay.show{opacity:1;pointer-events:auto;}
.modal{
  width:100%;max-width:560px;background:linear-gradient(168deg,#241546,#1a1036);
  border:1px solid var(--card-line);border-radius:var(--r-lg);
  padding:18px 20px 24px;box-shadow:0 26px 64px rgba(0,0,0,.62);
  transform:translateY(18px);transition:.25s;
}
.modal-overlay.show .modal{transform:none;}
.modal-bar{display:flex;justify-content:flex-end;}
.modal-close{background:rgba(255,255,255,.1);border:1px solid var(--card-line);
  color:var(--ink);width:36px;height:36px;border-radius:50%;
  font-size:1rem;cursor:pointer;transition:.2s;}
.modal-close:hover{background:rgba(255,255,255,.2);}
.modal h2{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;}
.modal .sub{color:var(--ink-soft);font-size:.88rem;margin-bottom:10px;}

footer{text-align:center;color:var(--ink-soft);font-size:.78rem;
  margin-top:34px;padding:0 24px;line-height:1.6;}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--grad);color:#2a1640;font-weight:700;font-size:.88rem;
  padding:11px 22px;border-radius:100px;box-shadow:0 12px 28px rgba(0,0,0,.4);
  opacity:0;transition:.3s;pointer-events:none;z-index:80;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* account bar */
.account{max-width:560px;margin:4px auto 0;padding:0 18px;}
.acct{display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;min-height:36px;}
.acct-hint{font-size:.78rem;color:var(--ink-soft);}
.acct-pic{width:28px;height:28px;border-radius:50%;object-fit:cover;
  border:1px solid var(--card-line);background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;font-size:1rem;}
.acct-name{font-size:.86rem;font-weight:700;}
.acct-btn{background:var(--card);border:1px solid var(--card-line);color:var(--ink-soft);
  font:inherit;font-size:.76rem;font-weight:600;padding:5px 13px;
  border-radius:100px;cursor:pointer;transition:.15s;}
.acct-btn:hover{color:var(--ink);}
.acct-prem{
  font-size:.72rem;font-weight:700;letter-spacing:.4px;
  padding:4px 10px;border-radius:100px;color:#3b2540;
  background:linear-gradient(135deg,#ffd9b0,#ffb6e3);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 6px rgba(255,182,227,.4);
  white-space:nowrap;
}

/* premium upgrade screen */
.upgrade{text-align:center;}
.up-badge{width:74px;height:74px;border-radius:50%;margin:2px auto 8px;
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;
  background:radial-gradient(circle,rgba(255,255,255,.32),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.42);}
.up-price{
  text-align:center;font-size:1.05rem;font-weight:700;
  margin:14px 0 6px;color:var(--ink);
  letter-spacing:.2px;
}
.up-fine{
  text-align:center;font-size:.74rem;line-height:1.5;
  color:var(--ink-soft);margin:10px 4px 0;
}

/* Monthly / Annual plan switcher on the upgrade card */
.up-plans{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:16px 2px 8px;
}
.up-plan{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:14px 14px 12px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.04);
  border:1.5px solid var(--card-line);
  color:var(--ink);font:inherit;text-align:left;
  transition:.18s ease;
}
.up-plan:hover{background:rgba(255,255,255,.08);transform:translateY(-1px);}
.up-plan.is-on{
  border-color:#ffb6e3;background:linear-gradient(135deg,rgba(255,182,227,.18),rgba(177,162,255,.22));
  box-shadow:0 4px 16px rgba(255,182,227,.25);
}
.up-plan-tag{
  display:inline-block;align-self:flex-start;
  font-size:.82rem;letter-spacing:.6px;text-transform:uppercase;font-weight:800;
  color:var(--ink);
  padding:4px 10px;border-radius:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:6px;
}
.up-plan--annual .up-plan-tag{
  background:linear-gradient(135deg,rgba(255,217,176,.35),rgba(255,182,227,.35));
  border-color:rgba(255,217,176,.55);color:#3b2540;
}
.up-plan.is-on .up-plan-tag{color:#3b2540;background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.7);}
.up-plan--annual.is-on .up-plan-tag{background:rgba(255,255,255,.7);}
.up-plan-price{
  font-size:1.42rem;font-weight:800;color:var(--ink);margin-top:2px;letter-spacing:.2px;line-height:1.15;
}
.up-plan-per{font-size:.86rem;font-weight:500;color:var(--ink-soft);}
.up-plan-sub{font-size:.78rem;color:var(--ink-soft);margin-top:3px;line-height:1.35;}
.up-plan-save{
  position:absolute;top:-9px;right:8px;
  font-size:.62rem;font-weight:800;letter-spacing:.5px;
  padding:3px 8px;border-radius:100px;color:#3b2540;
  background:linear-gradient(135deg,#ffd9b0,#ffb6e3);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 5px rgba(255,182,227,.4);
  white-space:nowrap;
}
.up-list{text-align:left;margin:14px 0 4px;}
.up-list div{font-size:.93rem;line-height:1.4;padding:9px 2px;
  border-bottom:1px solid var(--card-line);}
.up-list div:last-child{border-bottom:none;}

/* ===================================================================
   Onboarding questionnaire (T-014)
   =================================================================== */
body.onboarding{overflow:hidden;}
.onboard-overlay{
  position:fixed;inset:0;z-index:70;
  background:
    radial-gradient(ellipse at 16% 2%, #573281 0%, transparent 56%),
    radial-gradient(ellipse at 94% 98%, #672f6d 0%, transparent 56%),
    linear-gradient(168deg,var(--bg-1),var(--bg-2) 52%,var(--bg-3));
  display:flex;align-items:flex-start;justify-content:center;
  padding:30px 16px 44px;overflow-y:auto;
  opacity:0;transition:opacity .3s;
}
.onboard-overlay.show{opacity:1;}
.onboard-card{
  width:100%;max-width:520px;
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-lg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 56px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;animation:rise .42s ease both;
}
.onboard-progress{height:5px;background:rgba(255,255,255,.08);}
.onboard-progress-fill{height:100%;background:var(--grad);
  border-radius:0 4px 4px 0;transition:width .35s ease;}
.onboard-step{padding:24px 22px 26px;}

.ob-intro{text-align:center;padding:18px 6px 8px;}
.ob-spark{font-size:2.7rem;margin-bottom:6px;
  filter:drop-shadow(0 0 16px rgba(243,217,164,.6));}
.ob-intro h2{font-family:'Cormorant Garamond',serif;font-size:1.9rem;
  font-weight:600;line-height:1.2;}
.ob-sub{color:var(--ink-soft);font-size:.96rem;margin-top:10px;line-height:1.55;}

.ob-qtag{font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--lav);margin-bottom:9px;}
.ob-q{font-family:'Cormorant Garamond',serif;font-size:1.52rem;font-weight:600;
  line-height:1.3;}
.ob-hint-line{color:var(--ink-soft);font-size:.86rem;margin-top:5px;}

.ob-opts{display:flex;flex-direction:column;gap:9px;margin-top:18px;}
.ob-opt{
  width:100%;text-align:left;padding:14px 16px;
  font-family:inherit;font-size:.97rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.06);border:1px solid var(--card-line);
  border-radius:var(--r-md);cursor:pointer;transition:.16s;
}
.ob-opt:hover{background:rgba(255,255,255,.1);border-color:var(--lav);}
.ob-opt:active{transform:scale(.99);}
.ob-opt.on{background:var(--grad);color:#2a1640;border-color:transparent;font-weight:700;}

.ob-textarea{
  width:100%;margin-top:16px;padding:13px 14px;
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.06);border:1px solid var(--card-line);
  border-radius:var(--r-sm);outline:none;resize:vertical;min-height:104px;transition:.2s;
}
.ob-textarea:focus{border-color:var(--lav);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(201,182,245,.15);}
.ob-textarea::placeholder{color:var(--ink-soft);opacity:.7;}

.onboard-nav{display:flex;gap:10px;margin-top:20px;}
.onboard-nav .btn{margin-top:0;}
.onboard-nav .btn.ghost{width:auto;flex:0 0 auto;padding-left:20px;padding-right:20px;}
.onboard-nav .btn:not(.ghost){flex:1;}

/* "Your Vibe" card inside a reading */
.vibe-card{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-md);
  padding:16px 18px;margin-top:14px;
}
.vibe-tags{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 3px;}
.vibe-tag{
  font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:100px;
  background:rgba(201,182,245,.16);border:1px solid var(--card-line);color:var(--ink);
}
.vibe-line{color:var(--ink);font-size:.95rem;line-height:1.55;margin-top:9px;}
.vibe-quote{
  margin-top:11px;padding:10px 13px;border-left:2px solid var(--lav);
  background:rgba(255,255,255,.04);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-style:italic;color:var(--ink);font-size:.92rem;line-height:1.5;
}
.vq-label{display:block;font-style:normal;font-size:.66rem;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:var(--lav);margin-bottom:3px;}
.vibe-nudge{margin-top:9px;color:var(--lav);font-size:.9rem;font-weight:600;line-height:1.5;}
.adv-vibe{border-top:1px dashed var(--card-line);margin-top:4px;padding-top:10px;}

/* ===================================================================
   Sign in / sign up  (popup + the questionnaire's account step)
   =================================================================== */
.acct-signin{
  font-family:inherit;font-weight:700;font-size:.82rem;cursor:pointer;
  color:#2a1640;background:var(--grad);border:none;
  padding:8px 16px;border-radius:100px;box-shadow:0 6px 16px rgba(247,183,210,.3);
  transition:.16s;
}
.acct-signin:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(247,183,210,.45);}

.signin{padding-top:2px;}
.si-badge{width:60px;height:60px;border-radius:50%;margin:2px auto 8px;
  display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  background:radial-gradient(circle,rgba(255,255,255,.32),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.42);}
.signin h2{text-align:center;}
.signin .sub{text-align:center;}
.si-google{display:flex;justify-content:center;margin-top:8px;min-height:8px;}
.si-or{display:flex;align-items:center;gap:10px;margin:15px 0 2px;
  color:var(--ink-soft);font-size:.76rem;text-transform:uppercase;letter-spacing:.6px;}
.si-or::before,.si-or::after{content:"";flex:1;height:1px;background:var(--card-line);}
.si-toggle{text-align:center;margin-top:15px;font-size:.85rem;color:var(--ink-soft);}
.si-link{background:none;border:none;color:var(--lav);font-weight:700;
  font-family:inherit;font-size:.85rem;cursor:pointer;padding:2px 3px;text-decoration:underline;}
.si-link:hover{color:var(--pink);}
.ob-loginlink{display:block;width:100%;margin-top:13px;text-align:center;}

/* ---- Today page: daily affirmations ---- */
.affirm-card{
  background:linear-gradient(140deg,rgba(201,182,245,.20),rgba(245,194,231,.15));
  border:1px solid rgba(201,182,245,.32);
  border-radius:18px;
  padding:15px 16px 7px;
  margin:0 0 13px;
}
.affirm-sub{font-size:.81rem;color:var(--ink-soft);margin:3px 0 11px;}
.affirm{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.16rem;
  line-height:1.5;
  color:var(--ink);
  padding:10px 14px;
  margin:0 0 9px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border-left:3px solid var(--lav);
}

/* ===================================================================
   Confirm dialog (before destructive actions)
   =================================================================== */
.confirm-overlay{
  position:fixed;inset:0;z-index:95;background:rgba(8,4,20,.82);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;transition:opacity .2s;
}
.confirm-overlay.show{opacity:1;}
.confirm-box{
  width:100%;max-width:340px;text-align:center;
  background:linear-gradient(168deg,#241546,#1a1036);
  border:1px solid var(--card-line);border-radius:var(--r-lg);
  padding:24px 22px;box-shadow:0 26px 64px rgba(0,0,0,.62);
  transform:translateY(14px) scale(.98);transition:.2s;
}
.confirm-overlay.show .confirm-box{transform:none;}
.confirm-emoji{font-size:2.2rem;margin-bottom:4px;}
.confirm-box h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;}
.confirm-box p{color:var(--ink-soft);font-size:.9rem;margin-top:6px;line-height:1.5;}
.confirm-actions{display:flex;gap:10px;margin-top:18px;}
.confirm-actions .btn{margin-top:0;flex:1;}
.confirm-box .confirm-yes{background:linear-gradient(105deg,#ef8a8a,#f0a9cb);color:#2a1640;}

/* ===================================================================
   Friends / invite (T-019)
   =================================================================== */
.circle-actions{display:flex;gap:8px;margin:14px 0 2px;}
.circle-actions .btn{margin-top:0;}
.linked-tag{
  display:inline-block;margin-left:6px;font-size:.6rem;font-weight:700;
  letter-spacing:.4px;padding:2px 7px;border-radius:100px;vertical-align:middle;
  background:rgba(201,182,245,.22);color:var(--lav);
}
.invite-loading{text-align:center;color:var(--ink-soft);padding:22px 0;font-size:.9rem;}
.invite-code{margin-top:14px;text-align:center;font-size:.84rem;color:var(--ink-soft);}
.invite-code b{color:var(--gold);font-size:1.02rem;letter-spacing:1.5px;}
.cmp-upsell{text-align:center;}
.cmp-upsell p{font-size:.92rem;color:var(--ink-soft);line-height:1.55;}
.cmp-upsell .btn{margin-top:12px;}

/* ---- Today: moon phase (T-023) ---- */
.moon-card{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(140deg,rgba(167,216,240,.16),rgba(201,182,245,.14));
  border:1px solid rgba(167,216,240,.26);
  border-radius:18px;padding:14px 16px;margin:0 0 13px;
}
.moon-orb{font-size:2.7rem;line-height:1;filter:drop-shadow(0 0 12px rgba(243,217,164,.45));}
.moon-body{flex:1;}
.moon-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.moon-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.2rem;font-weight:600;color:var(--ink);}
.moon-illum{font-size:.72rem;color:var(--ink-soft);font-weight:600;}
.moon-card p{font-size:.88rem;line-height:1.5;color:var(--ink-soft);margin-top:3px;}

/* ===================================================================
   Today page — personal redesign (T-024)
   =================================================================== */
.today-hero{
  text-align:center;margin:14px 0 4px;padding:24px 18px 22px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(243,217,164,.16), transparent 70%),
    var(--card);
  border:1px solid var(--card-line);border-radius:var(--r-lg);
  box-shadow:0 14px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  animation:rise .5s ease both;
}
.th-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--lav);}
.th-greet{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.3rem;font-weight:600;
  line-height:1.1;margin:7px 0 2px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.th-greet span{-webkit-text-fill-color:initial;}
.th-vibe{font-size:1rem;color:var(--ink);font-weight:600;margin-bottom:6px;}
.th-score{display:flex;justify-content:center;margin:4px 0 2px;}
.th-mood{font-size:.9rem;color:var(--ink-soft);font-weight:600;}

/* do / don't — two visual cards */
.do-dont{display:flex;gap:10px;margin:4px 0 6px;}
.dd{flex:1;border-radius:var(--r-md);padding:13px 14px;border:1px solid var(--card-line);}
.dd-h{font-size:.74rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:5px;}
.dd p{font-size:.88rem;line-height:1.45;color:var(--ink);}
.dd-do{background:rgba(143,220,182,.12);border-color:rgba(143,220,182,.4);}
.dd-do .dd-h{color:#8fdcb6;}
.dd-dont{background:rgba(239,138,138,.12);border-color:rgba(239,138,138,.4);}
.dd-dont .dd-h{color:#ef8a8a;}

/* in-sync chip */
.sync-chip{
  text-align:center;font-size:.9rem;color:var(--ink);font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--card-line);
  border-radius:100px;padding:10px 16px;margin:0 0 4px;
}

/* affirmation hero */
.affirm-hero{
  text-align:center;margin:16px 0 6px;padding:22px 20px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(247,183,210,.18), transparent 70%),
    linear-gradient(168deg,#241546,#1a1036);
  border:1px solid var(--card-line);border-radius:var(--r-lg);
  box-shadow:0 14px 40px rgba(0,0,0,.34);
}
.ah-label{font-size:.72rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px;}
.ah-quote{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;font-weight:600;
  line-height:1.35;color:var(--ink);}
.ah-more{font-size:.95rem;font-style:italic;color:var(--ink-soft);line-height:1.5;
  margin-top:10px;}

/* ===================================================================
   Circle + Match — visual pass (T-025)
   =================================================================== */
/* Circle — mini compatibility ring on each person row */
.p-ring{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;}

/* Match — tap-to-pick avatar chips (replaces the dropdowns) */
.mp-grid{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 6px;}
.mp-chip{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  width:74px;padding:11px 5px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1.5px solid var(--card-line);
  border-radius:var(--r-md);font-family:inherit;transition:.16s;
}
.mp-chip:hover{background:rgba(255,255,255,.1);}
.mp-chip:active{transform:scale(.96);}
.mp-av{font-size:1.7rem;line-height:1;}
.mp-nm{font-size:.74rem;font-weight:600;color:var(--ink-soft);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-chip.on{background:rgba(255,255,255,.12);}
.mp-chip.on .mp-nm{color:var(--ink);}
.mp-chip.mp-a{border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,217,164,.22);}
.mp-chip.mp-b{border-color:var(--pink);box-shadow:0 0 0 3px rgba(247,183,210,.22);}

/* ===================================================================
   ✿ Cute pass — flowers, stars, moons & crystals everywhere (T-026)
   =================================================================== */

/* ---- floating garden: decorations drifting behind everything ---- */
.garden{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.garden .g{
  position:absolute;line-height:1;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));
  animation:floaty var(--dur,13s) ease-in-out var(--delay,0s) infinite;
}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg)) scale(1);}
  50%{transform:translateY(-26px) rotate(calc(var(--rot,0deg) + 14deg)) scale(1.08);}
}
/* placed toward the edges so they frame the content, not cover it */
.garden .g1 {top:7%; left:6%;   font-size:1.5rem;opacity:.55;--dur:14s;--delay:-2s;--rot:-8deg;}
.garden .g2 {top:13%;right:8%;  font-size:1.1rem;opacity:.7; --dur:11s;--delay:-5s;}
.garden .g3 {top:30%;left:4%;   font-size:1.7rem;opacity:.5; --dur:16s;--delay:-1s;--rot:-12deg;}
.garden .g4 {top:42%;right:5%;  font-size:1.3rem;opacity:.6; --dur:13s;--delay:-7s;}
.garden .g5 {top:55%;left:7%;   font-size:1.25rem;opacity:.6;--dur:12s;--delay:-3s;--rot:10deg;}
.garden .g6 {top:64%;right:7%;  font-size:1.6rem;opacity:.5; --dur:15s;--delay:-9s;}
.garden .g7 {top:78%;left:5%;   font-size:1.35rem;opacity:.6;--dur:13s;--delay:-4s;--rot:8deg;}
.garden .g8 {top:86%;right:9%;  font-size:1.5rem;opacity:.55;--dur:17s;--delay:-6s;--rot:-8deg;}
.garden .g9 {top:92%;left:12%;  font-size:1.1rem;opacity:.65;--dur:12s;--delay:-8s;}
.garden .g10{top:21%;right:14%; font-size:1rem;  opacity:.7; --dur:10s;--delay:-2s;}
.garden .g11{top:48%;left:13%;  font-size:1rem;  opacity:.65;--dur:11s;--delay:-6s;--rot:-6deg;}
.garden .g12{top:72%;right:13%; font-size:1.25rem;opacity:.6;--dur:14s;--delay:-10s;--rot:14deg;}

/* ---- buttons: flower-flanked & bouncy ---- */
.btn{position:relative;}
.btn::before,.btn::after{
  content:"✿";display:inline-block;font-size:.82em;opacity:.85;vertical-align:middle;
}
.btn::before{margin-right:9px;}
.btn::after{margin-left:9px;}
.btn.small::before{margin-right:6px;}
.btn.small::after{margin-left:6px;}
.btn.ghost::before,.btn.ghost::after{opacity:.6;}
.btn:hover{animation:btnbounce .5s ease;}
@keyframes btnbounce{
  0%,100%{transform:translateY(-2px);}
  40%{transform:translateY(-7px) scale(1.015);}
  72%{transform:translateY(-1px) scale(.997);}
}
/* the sign-in pill in the account bar gets a bloom too */
.acct-signin::before{content:"✿ ";font-size:.85em;}

/* ---- cards: a flower sticker peeking from the corner ---- */
.card,.today-hero,.affirm-hero,.modal{position:relative;}
.card::after,.today-hero::after,.affirm-hero::after{
  position:absolute;top:-12px;right:16px;font-size:1.35rem;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));
  animation:stickerpop .45s .15s ease both;
}
.card::after{content:"🌸";}
.today-hero::after{content:"⭐";}
.affirm-hero::after{content:"🌙";font-size:1.5rem;top:-13px;}
.modal::after{
  content:"🔮";position:absolute;top:-12px;left:20px;font-size:1.35rem;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));pointer-events:none;
}
@keyframes stickerpop{from{opacity:0;transform:rotate(-14deg) scale(0);}
  to{opacity:1;transform:rotate(-14deg) scale(1);}}

/* ---- section titles: flower bullet + a soft dotted line ---- */
.section-title{
  display:flex;align-items:center;gap:8px;
  border-bottom:2px dotted rgba(201,182,245,.45);
}
.section-title::before{content:"✿";color:var(--pink);font-size:1.05em;}

/* ---- dividers: a little sprinkle of stars & flowers ---- */
.divider{
  height:auto;background:none;border:none;text-align:center;
  margin:20px 0;line-height:1;letter-spacing:7px;
}
.divider::before{content:"⋆ ✿ ⋆";color:var(--lav);opacity:.85;font-size:.95rem;}

/* ---- tabs: a twinkle on the active one ---- */
.tab.active{position:relative;}
.tab.active::after{
  content:"✨";position:absolute;top:-9px;right:-1px;font-size:.72rem;
  animation:twinkle2 1.9s ease-in-out infinite;
}
@keyframes twinkle2{0%,100%{opacity:.45;transform:scale(.8);}
  50%{opacity:1;transform:scale(1.2);}}

/* ---- header: blooms around the title & crescent ---- */
.crescent{position:relative;}
.crescent::after{
  content:"✦";position:absolute;top:-4px;right:-12px;
  color:var(--gold);font-size:.85rem;
  animation:twinkle2 2.4s ease-in-out infinite;
}
.tagline::before{content:"❀ ";}
.tagline::after{content:" ❀";}

/* ---- footer: a flower garland sign-off ---- */
footer::before{
  content:"🌸 ⭐ 🌙 💎 ⭐ 🌸";display:block;font-size:.95rem;
  margin-bottom:9px;letter-spacing:3px;
}

/* ---- onboarding: a flower marks the chosen answer ---- */
.ob-opt{position:relative;}
.ob-opt.on::after{
  content:"🌸";position:absolute;right:14px;top:50%;
  transform:translateY(-50%);font-size:1rem;
}

/* ---- smaller sweet touches ---- */
.toast::before{content:"✨ ";}
input[type=text],input[type=password],input[type=email],input[type=date],
select,.ob-textarea{border-radius:16px;}
input:focus,select:focus,.ob-textarea:focus{
  border-color:var(--pink);box-shadow:0 0 0 3px rgba(247,183,210,.22);
}
.pick-chip.on::before,.cat-tab.on::before{content:"✦ ";font-size:.82em;}

/* ---- be kind to motion-sensitive folks ---- */
@media (prefers-reduced-motion:reduce){
  .garden .g,.btn:hover,.tab.active::after,.crescent::after,
  .card::after,.today-hero::after,.affirm-hero::after{animation:none;}
}

/* ===================================================================
   🌙 Moon phase calendar (T-027)
   =================================================================== */

/* the Today moon card now opens the calendar */
.moon-card{cursor:pointer;transition:.16s;}
.moon-card:hover{border-color:rgba(167,216,240,.5);transform:translateY(-2px);}
.moon-card:active{transform:scale(.99);}
.moon-cta{
  display:inline-block;margin-top:7px;
  font-size:.75rem;font-weight:700;color:var(--lav);
}

/* month navigation */
.mc-nav{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:14px 0 12px;}
.mc-month{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;}
.mc-arrow{
  width:38px;height:38px;flex-shrink:0;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid var(--card-line);
  color:var(--ink);font-size:1.15rem;font-family:inherit;cursor:pointer;transition:.15s;
}
.mc-arrow:hover{background:rgba(255,255,255,.18);transform:scale(1.08);}
.mc-arrow:active{transform:scale(.95);}

/* the grid */
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.mc-dow{
  text-align:center;font-size:.62rem;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--lav);padding-bottom:2px;
}
.mc-cell{
  min-height:54px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:4px 2px;
  border-radius:13px;background:rgba(255,255,255,.05);
  border:1px solid var(--card-line);
}
.mc-cell.mc-empty{background:none;border:none;}
.mc-day{font-size:.64rem;font-weight:600;color:var(--ink-soft);}
.mc-moon{font-size:1.25rem;line-height:1;}
.mc-key{
  border-color:rgba(243,217,164,.6);background:rgba(243,217,164,.13);
  box-shadow:0 0 13px rgba(243,217,164,.28);
}
.mc-today{
  border-color:transparent;background:var(--grad);
  box-shadow:0 5px 16px rgba(201,182,245,.4);
}
.mc-today .mc-day{color:#2a1640;}

/* next new / full moon tiles */
.mc-foot{display:flex;gap:9px;margin-top:15px;}
.mc-next{
  flex:1;display:flex;align-items:center;gap:10px;padding:11px 12px;
  border-radius:15px;border:1px solid var(--card-line);
  background:linear-gradient(140deg,rgba(167,216,240,.16),rgba(201,182,245,.15));
}
.mc-next>span{font-size:1.7rem;line-height:1;}
.mc-next b{font-size:.64rem;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--lav);}
.mc-next div{font-size:.82rem;line-height:1.4;color:var(--ink);}

/* this month's key moons */
.mc-events{margin-top:16px;}
.mc-eh{font-size:.74rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold);margin-bottom:4px;}
.mc-eitem{
  display:flex;align-items:center;gap:11px;padding:9px 12px;margin-top:8px;
  border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--card-line);
}
.mc-eemoji{font-size:1.35rem;}
.mc-ename{flex:1;font-weight:700;font-size:.92rem;}
.mc-edate{font-size:.82rem;font-weight:600;color:var(--ink-soft);}
.mc-none{font-size:.86rem;color:var(--ink-soft);padding:8px 2px;}

/* ===================================================================
   🔍 Deep-dive detail views (T-028)
   =================================================================== */

/* tappable hero badges */
.pill-tap{
  cursor:pointer;font-family:inherit;color:var(--ink);
  display:inline-flex;align-items:center;gap:5px;transition:.15s;
}
.pill-tap::after{content:'›';font-weight:800;opacity:.55;}
.pill-tap:hover{background:rgba(255,255,255,.28);transform:translateY(-2px);}
.pill-tap:active{transform:scale(.95);}
.pill-hint{
  text-align:center;font-size:.7rem;letter-spacing:.4px;
  color:var(--ink-soft);margin-top:10px;
}

/* detail modal hero */
.detail-hero{text-align:center;padding:4px 6px 12px;}
.dh-emoji{font-size:3.5rem;line-height:1;filter:drop-shadow(0 5px 16px rgba(0,0,0,.45));}
.dh-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:2.6px;color:var(--lav);margin-top:9px;}
.dh-name{
  font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:600;
  line-height:1.1;margin:3px 0 4px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.dh-tagline{font-size:.92rem;color:var(--ink-soft);font-style:italic;}

/* compatibility graph grid */
.compat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 4px;}
.compat-item{
  display:flex;align-items:center;gap:9px;padding:9px 10px;
  border-radius:13px;background:rgba(255,255,255,.05);
  border:1px solid var(--card-line);font-family:inherit;color:var(--ink);
  cursor:pointer;text-align:left;transition:.14s;
}
.compat-item:hover{transform:translateY(-2px);background:rgba(255,255,255,.1);}
.compat-item:active{transform:scale(.97);}
.ci-emoji{font-size:1.5rem;flex-shrink:0;line-height:1;}
.ci-body{display:flex;flex-direction:column;min-width:0;}
.ci-name{font-weight:700;font-size:.85rem;}
.ci-tag{font-size:.66rem;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* relationship tones */
.rel-self{background:var(--grad);border-color:transparent;cursor:default;}
.rel-self:hover{transform:none;background:var(--grad);}
.rel-self .ci-name,.rel-self .ci-tag{color:#2a1640;}
.rel-best{border-color:rgba(143,220,182,.55);background:rgba(143,220,182,.12);}
.rel-best .ci-tag{color:#8fdcb6;}
.rel-good{border-color:rgba(201,182,245,.55);background:rgba(201,182,245,.13);}
.rel-good .ci-tag{color:var(--lav);}
.rel-care{border-color:rgba(245,168,106,.5);background:rgba(245,168,106,.1);}
.rel-care .ci-tag{color:#f5a86a;}
.rel-clash{border-color:rgba(239,138,138,.55);background:rgba(239,138,138,.12);}
.rel-clash .ci-tag{color:#ef8a8a;}

/* ===================================================================
   💞 Match — waiting state before two people are picked (T-030)
   =================================================================== */
.mp-waiting{text-align:center;}
.mp-waiting-emoji{
  font-size:2.7rem;line-height:1;margin-bottom:6px;
  filter:drop-shadow(0 0 14px rgba(247,183,210,.5));
  animation:twinkle2 2.2s ease-in-out infinite;
}
.mp-waiting p{color:var(--ink-soft);font-size:.93rem;line-height:1.55;}

/* Match — focus selector (Love / Friend / Business) */
.mf-seg{display:flex;gap:6px;margin:10px 0 14px;}
.mf-opt{
  flex:1;padding:10px 6px;text-align:center;
  font-family:inherit;font-size:.85rem;font-weight:600;color:var(--ink-soft);
  background:rgba(255,255,255,.06);border:1px solid var(--card-line);
  border-radius:100px;cursor:pointer;transition:.16s;
}
.mf-opt:hover{color:var(--ink);background:rgba(255,255,255,.12);}
.mf-opt:active{transform:scale(.96);}
.mf-opt.on{
  color:#2a1640;border-color:transparent;background:var(--grad);
  box-shadow:0 5px 16px rgba(247,183,210,.32);
}

/* ===================================================================
   Form: "+ more details (optional)" disclosure (T-031)
   =================================================================== */
.form-more{margin-top:10px;}
.form-more summary{
  list-style:none;cursor:pointer;user-select:none;
  display:block;text-align:center;
  padding:11px 14px;
  font-family:inherit;font-size:.9rem;font-weight:600;color:var(--ink-soft);
  background:rgba(255,255,255,.05);
  border:1px dashed var(--card-line);border-radius:100px;
  transition:.18s;
}
.form-more summary::-webkit-details-marker{display:none;}
.form-more summary:hover{color:var(--ink);background:rgba(255,255,255,.09);}
.form-more[open] > summary{
  color:var(--ink);background:rgba(255,255,255,.08);
  border-style:solid;margin-bottom:4px;
}

/* ===================================================================
   🔍 Deep-dive entry / back-nav / viewer-me markers (T-031)
   =================================================================== */

/* Bigger, clearly-tappable hero badges (the three "tap to dive deep" pills) */
.sign-pills{gap:10px;margin-top:16px;}
.sign-pills .pill-tap{
  font-size:.98rem;font-weight:700;padding:11px 18px;
  background:rgba(255,255,255,.18);border-width:1.5px;gap:8px;
}
.sign-pills .pill-tap::after{
  content:'›';font-size:1.25em;font-weight:800;opacity:.85;transition:.16s;
}
.sign-pills .pill-tap:hover{
  background:rgba(255,255,255,.32);transform:translateY(-3px);
  border-color:var(--lav);box-shadow:0 9px 24px rgba(201,182,245,.3);
}
.sign-pills .pill-tap:hover::after{transform:translateX(3px);}
.sign-pills .pill-tap:active{transform:scale(.97);}
.pill-hint{
  text-align:center;font-size:.78rem;font-weight:600;
  color:var(--lav);margin-top:11px;letter-spacing:.3px;
}

/* "‹ back to X" button at the top of a detail modal */
.detail-back{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.08);border:1px solid var(--card-line);
  color:var(--ink);font-family:inherit;font-size:.82rem;font-weight:600;
  padding:7px 14px;border-radius:100px;cursor:pointer;
  margin:-2px 0 8px;transition:.15s;
}
.detail-back:hover{background:rgba(255,255,255,.16);transform:translateX(-3px);}
.detail-back:active{transform:scale(.97);}

/* "Viewing through your X eyes — here's Y" banner on non-self details */
.viewer-banner{
  background:linear-gradient(140deg,rgba(243,217,164,.18),rgba(247,183,210,.14));
  border:1px solid rgba(243,217,164,.4);border-radius:var(--r-md);
  padding:10px 14px;margin:0 0 14px;
  font-size:.9rem;line-height:1.5;color:var(--ink);
}
.viewer-banner b{color:var(--gold);}

/* "this is YOU" marker in compat grids — when viewing someone else's card */
.compat-item.is-me{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 2px rgba(243,217,164,.5), 0 0 18px rgba(243,217,164,.35);
  animation:meghost 2.4s ease-in-out infinite;
}
@keyframes meghost{
  0%,100%{box-shadow:0 0 0 2px rgba(243,217,164,.45), 0 0 18px rgba(243,217,164,.3);}
  50%   {box-shadow:0 0 0 2px rgba(243,217,164,.75), 0 0 26px rgba(243,217,164,.55);}
}
.compat-item.is-me .ci-tag{color:var(--gold) !important;font-weight:700;}

/* "you" marker on the zodiac wheel SVG when you're viewing another animal */
.zw-viewer{
  stroke:var(--gold);stroke-width:2.5;
  filter:drop-shadow(0 0 8px rgba(243,217,164,.7));
}
.zw-k-me{background:var(--gold);}

/* "X vs you" comparison panel */
.vs-panel{
  background:linear-gradient(140deg,rgba(201,182,245,.16),rgba(167,216,240,.12));
  border:1px solid var(--card-line);border-radius:var(--r-md);
  padding:12px 14px;margin:0 0 13px;
}
.vs-panel p{font-size:.92rem;line-height:1.55;color:var(--ink);}
.vs-panel p+p{margin-top:6px;}
.vs-panel b{color:var(--gold);}

/* ===================================================================
   Daily detail — tap any Today element for the "why" (T-035)
   =================================================================== */
[data-detail]{cursor:pointer;transition:transform .14s ease,filter .14s ease;}
[data-detail]:hover{filter:brightness(1.08);}
[data-detail]:active{transform:scale(.985);}

.dd-modal{text-align:center;padding:4px 2px 10px;}
.dd-modal .dd-eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--lav);margin-bottom:6px;
}
.dd-modal h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.55rem;font-weight:600;
  line-height:1.2;margin-bottom:8px;color:var(--ink);
  -webkit-text-fill-color:initial;
}
.dd-modal .dd-ring{display:flex;justify-content:center;margin:6px 0 10px;}
.dd-modal .dd-moon-orb{
  font-size:3rem;line-height:1;margin:4px 0 6px;
  filter:drop-shadow(0 0 14px rgba(243,217,164,.4));
}
.dd-modal .dd-meaning{
  font-size:.84rem;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin:6px 14px 8px;
}
.dd-modal .dd-body{
  font-size:.96rem;line-height:1.6;color:var(--ink);
  margin:10px 6px;text-align:left;
}
.dd-modal .dd-tip{
  margin-top:14px;padding:11px 14px;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid var(--card-line);
  border-left:3px solid var(--gold);border-radius:var(--r-sm);
  font-size:.92rem;line-height:1.5;color:var(--ink);
}
.dd-modal .btn{margin-top:16px;}

/* tap-for-more affordances + richer detail layout (T-036) */
.tap-hint{
  text-align:center;font-size:.78rem;color:var(--ink-soft);font-style:italic;
  margin:2px 0 8px;letter-spacing:.3px;
}
[data-detail]:not(.dr){position:relative;}
[data-detail]:not(.dr):not(.moon-card)::after{
  content:'›';position:absolute;top:50%;right:14px;
  transform:translateY(-50%);
  font-size:1.4rem;color:var(--lav);opacity:.7;pointer-events:none;
  transition:transform .15s ease, opacity .15s ease;
}
[data-detail]:not(.dr):not(.moon-card):hover::after{
  transform:translateY(-50%) translateX(3px);opacity:1;
}
[data-detail].stat-tile{padding-right:24px;}
[data-detail].sync-chip{padding-right:30px;}
[data-detail].dd-do, [data-detail].dd-dont{padding-right:26px;}
.dr.dr-tap{position:relative;}
.dr[data-detail]:hover .ring-fg{filter:drop-shadow(0 0 6px rgba(247,183,210,.5));}

.dd-section{margin:14px 4px 0;text-align:left;}
.dd-section .dd-sub{
  font-size:.7rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--lav);margin-bottom:6px;
}
.dd-section p{font-size:.95rem;line-height:1.6;color:var(--ink);margin:0;}
.dd-section p+p{margin-top:8px;}
.dd-list{margin:6px 0 0;padding:0;list-style:none;}
.dd-list li{
  font-size:.93rem;line-height:1.55;color:var(--ink);
  padding:6px 0 6px 22px;position:relative;
}
.dd-list li::before{
  content:'✦';position:absolute;left:4px;top:6px;color:var(--gold);font-size:.85rem;
}
.dd-list-dont li::before{content:'×';color:#ef8a8a;font-weight:700;font-size:1rem;top:5px;}

/* Friends-in-circle chips inside daily-detail modals (T-037) */
.dd-friends{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;
}
.dd-friend-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;
  background:linear-gradient(135deg, rgba(255,209,232,.18), rgba(177,162,255,.22));
  border:1px solid rgba(255,209,232,.45);
  color:var(--ink);font-size:.92rem;font-weight:600;line-height:1;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dd-friend-chip:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg, rgba(255,209,232,.28), rgba(177,162,255,.32));
  box-shadow:0 4px 14px rgba(177,162,255,.25);
}
.dd-friend-chip:active{transform:translateY(0);}
.dd-friend-cta{
  margin-top:10px;font-size:.92rem;line-height:1.55;color:var(--ink);
  font-style:italic;opacity:.92;
}

/* Premium tease-and-lock cards (T-041) — free users see the first piece
   of content, then this card fades-out the rest with a hook + Unlock CTA. */
.locked-card{
  position:relative;
  margin:18px 4px 6px;
  padding:38px 18px 18px;
  border-radius:18px;
  text-align:center;
  background:linear-gradient(135deg,rgba(255,217,176,.12),rgba(255,182,227,.14),rgba(177,162,255,.16));
  border:1.5px dashed rgba(255,209,232,.55);
  overflow:hidden;
}
.locked-card--compact{padding:24px 16px 14px;margin:10px 4px;}
.locked-fade{
  position:absolute;left:0;right:0;top:-44px;height:44px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(255,209,232,.18));
}
.locked-card .locked-icon{
  font-size:1.7rem;line-height:1;margin-bottom:6px;
  filter:drop-shadow(0 2px 6px rgba(255,182,227,.4));
}
.locked-card .locked-hook{
  font-size:.96rem;line-height:1.55;color:var(--ink);
  margin:0 auto 14px;max-width:36ch;
  font-style:italic;
}
.locked-card .locked-hook b{font-style:normal;color:var(--ink);font-weight:700;}
.locked-card .locked-cta{
  margin-top:2px;
  background:linear-gradient(135deg,#ffd9b0,#ffb6e3);
  color:#3b2540;font-weight:800;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 4px 16px rgba(255,182,227,.35);
}
.locked-card .locked-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,182,227,.45);}

/* When the lock sits at the bottom of a category tab, soften its leading
   so it feels like "the page keeps going" rather than a hard stop. */
.category .locked-card{margin-top:10px;}