/* ============================================================
   Dewy Dreams — My Glow Journey
   Jewel-botanical: luminous pearl, botanical emerald,
   champagne-gold "jewel" accent, dewy blush.
   Type: Cormorant (luxe serif, big moments) + Hanken Grotesk (UI).
   Signature motif: the dewdrop.
   ============================================================ */
:root{
  --bg:#F7F4EF; --surface:#FFFFFF; --surface-2:#EFEAE1;
  --ink:#233027; --ink-soft:#6E7A70; --line:#E6DFD4; --line-2:#D7CDBE;
  --emerald:#1F5A45; --emerald-deep:#143C2C; --emerald-wash:#E7EFEA;
  --gold:#C2A05E; --gold-deep:#9E7E40; --gold-wash:#F4ECDC;
  --blush:#D08C82; --blush-wash:#F6E8E4;
  --shadow:0 1px 2px rgba(20,40,30,.05),0 10px 26px rgba(20,40,30,.07);
  --shadow-lg:0 14px 44px rgba(20,40,30,.16);
  --r:20px; --r-sm:13px; --r-pill:999px; --maxw:460px; --nav-h:74px;
  --display:"Cormorant Garamond",Georgia,serif;
  --ui:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ui);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
input,select{font-family:inherit;font-size:16px}
.app{max-width:var(--maxw);margin:0 auto;min-height:100dvh;background:var(--bg);position:relative;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}

.screen{display:none;flex:1;padding:0 20px calc(var(--nav-h) + 28px)}
.screen.active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 0 14px}
.topbar .eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.topbar h1{font-family:var(--display);font-weight:600;font-size:38px;line-height:1;letter-spacing:.005em;margin-top:3px}
.brand-dot{width:34px;height:34px;border-radius:11px;flex:0 0 auto;background:linear-gradient(160deg,#2d7056,var(--emerald));position:relative}
.brand-dot::after{content:"";position:absolute;left:50%;top:46%;width:13px;height:13px;background:var(--bg);border-radius:0 50% 50% 50%;transform:translate(-50%,-50%) rotate(45deg)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.card h2{font-family:var(--display);font-weight:600;font-size:25px;line-height:1.05;margin-bottom:3px}
.card .sub{color:var(--ink-soft);font-size:14px}

/* streak hero */
.streak{background:linear-gradient(158deg,#2c7257 0%,var(--emerald-deep) 100%);color:#fff;border:none;text-align:center;padding:28px 18px 24px;position:relative;overflow:hidden}
.streak::before{content:"";position:absolute;left:50%;top:-30%;width:120px;height:120px;background:rgba(194,160,94,.16);border-radius:0 50% 50% 50%;transform:translateX(-50%) rotate(45deg)}
.streak .num{font-family:var(--display);font-weight:500;font-size:70px;line-height:1;letter-spacing:0;font-feature-settings:"tnum";position:relative}
.streak .label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:2px}
.streak .note{font-size:13.5px;opacity:.92;margin-top:11px;max-width:30ch;margin-inline:auto}

.doses{display:flex;gap:12px}
.dose{flex:1;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 12px;text-align:left;transition:.18s;background:var(--surface);display:flex;align-items:center;gap:10px}
.dose .tick{width:26px;height:26px;border-radius:50%;flex:0 0 auto;border:2px solid var(--line-2);display:grid;place-items:center;color:transparent;font-size:14px;transition:.18s}
.dose .when{font-size:13px;color:var(--ink-soft)}
.dose .what{font-weight:600;font-size:15px}
.dose.done{background:var(--emerald-wash);border-color:transparent}
.dose.done .tick{background:var(--emerald);border-color:var(--emerald);color:#fff}
.dose.done .what{color:var(--emerald-deep)}
.dose:active{transform:scale(.98)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;padding:14px 18px;border-radius:var(--r-pill);font-weight:600;font-size:15px;width:100%;transition:.15s}
.btn:active{transform:scale(.98)}
.btn.brand{background:var(--emerald)}
.btn.gold{background:var(--gold);color:#3a2e12}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn.sm{width:auto;padding:10px 16px;font-size:14px}
.row-btns{display:flex;gap:10px}

.peek{display:flex;gap:12px;align-items:stretch}
.peek .ph{flex:1;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);position:relative}
.peek .ph img{width:100%;height:100%;object-fit:cover}
.peek .ph .tag{position:absolute;left:8px;bottom:8px;font-size:11px;background:rgba(20,40,30,.62);color:#fff;padding:3px 8px;border-radius:var(--r-pill);letter-spacing:.03em}
.peek .arrow{align-self:center;color:var(--emerald);font-size:20px}

.empty{text-align:center;color:var(--ink-soft);padding:26px 12px}
.empty .em-ic{font-size:30px;margin-bottom:6px}
.empty p{font-size:14px;margin-bottom:14px}

/* before/after (signature) */
.compare{position:relative;width:100%;aspect-ratio:3/4;max-height:60vh;border-radius:var(--r);overflow:hidden;background:var(--surface-2);touch-action:none;user-select:none;box-shadow:var(--shadow)}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after-wrap{position:absolute;inset:0;overflow:hidden;width:50%}
.compare .after-wrap img{width:auto;min-width:100%}
.compare .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(20,40,30,.15);transform:translateX(-50%)}
.compare .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:#fff;box-shadow:var(--shadow-lg);display:grid;place-items:center;color:var(--emerald-deep);font-size:15px;border-radius:0 50% 50% 50%;rotate:45deg}
.compare .knob span{rotate:-45deg}
.compare .lbl{position:absolute;bottom:12px;font-size:12px;color:#fff;background:rgba(20,40,30,.6);padding:4px 10px;border-radius:var(--r-pill);letter-spacing:.04em}
.compare .lbl.before{left:12px}
.compare .lbl.after{right:12px}
.compare-dates{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin:8px 2px 0}

.timeline{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px;scroll-snap-type:x mandatory}
.timeline::-webkit-scrollbar{height:0}
.shot{flex:0 0 88px;scroll-snap-align:start;text-align:center}
.shot .thumb{width:88px;height:110px;border-radius:var(--r-sm);object-fit:cover;border:1px solid var(--line);background:var(--surface-2)}
.shot.sel .thumb{outline:2.5px solid var(--gold);outline-offset:2px}
.shot .d{font-size:11px;color:var(--ink-soft);margin-top:5px}

/* routine steps grouped AM/PM */
.routine-block{margin-top:6px}
.routine-block .rb-head{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin:14px 0 4px}
.steps{counter-reset:s}
.step{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .n{counter-increment:s;flex:0 0 25px;height:25px;border-radius:50%;background:var(--emerald-wash);color:var(--emerald-deep);display:grid;place-items:center;font-weight:700;font-size:12.5px}
.step .n::before{content:counter(s)}
.step .tx strong{display:block;font-size:15px}
.step .tx span{font-size:13.5px;color:var(--ink-soft)}

/* product card */
.product{display:flex;gap:14px;align-items:center;padding:4px 0 2px}
.product .pinfo{flex:1}
.product .pname{font-weight:700;font-size:16px;line-height:1.2}
.product .pmeta{font-size:13px;color:var(--ink-soft);margin-top:2px}
.product .price{font-family:var(--display);font-weight:600;font-size:22px;color:var(--emerald-deep)}
.shop-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--emerald);color:#fff;font-weight:600;font-size:14px;padding:11px 16px;border-radius:var(--r-pill);width:100%;margin-top:12px}
.alt-product{font-size:13px;color:var(--ink-soft);margin-top:10px}
.alt-product a{color:var(--emerald-deep);font-weight:600;text-decoration:none}

/* milestone (gold jewel) */
.milestone{background:linear-gradient(150deg,var(--gold-wash),#fff);border:1px solid var(--gold);position:relative;overflow:hidden}
.milestone .badge{font-family:var(--display);font-weight:600;font-size:15px;color:var(--gold-deep);letter-spacing:.04em}
.milestone h2{color:var(--emerald-deep)}
.milestone .promo{background:#fff;border:1px dashed var(--gold);border-radius:var(--r-sm);padding:10px 12px;margin:12px 0;font-size:13.5px;color:var(--ink)}
.milestone .promo b{color:var(--gold-deep)}

.setrow{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:none}
.setrow .k{font-size:15px}
.setrow .v{color:var(--ink-soft);font-size:14px;display:flex;align-items:center;gap:10px}
.setrow input[type=time]{border:1px solid var(--line-2);border-radius:10px;padding:7px 10px;color:var(--ink);background:var(--surface)}
.tg{width:46px;height:28px;border-radius:var(--r-pill);background:var(--line-2);position:relative;transition:.18s;flex:0 0 auto}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg.on{background:var(--emerald)}
.tg.on::after{left:21px}

.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--maxw);height:var(--nav-h);background:rgba(247,244,239,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-soft);font-size:11px;letter-spacing:.02em;padding-top:8px}
.nav button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7}
.nav button.active{color:var(--emerald-deep)}
.nav button.active svg{stroke:var(--emerald)}

.onb{position:fixed;inset:0;z-index:50;background:var(--bg);display:none;flex-direction:column;max-width:var(--maxw);margin:0 auto;padding-top:env(safe-area-inset-top)}
.onb.show{display:flex}
.onb .head{padding:26px 24px 8px}
.onb .progress-bar{height:4px;background:var(--line);border-radius:4px;margin:0 24px;overflow:hidden}
.onb .progress-bar i{display:block;height:100%;background:var(--emerald);width:20%;transition:width .3s}
.onb .q{flex:1;padding:26px 24px;overflow-y:auto}
.onb .q .eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.onb .q h2{font-family:var(--display);font-weight:600;font-size:32px;line-height:1.08;margin:7px 0 22px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:10px;transition:.15s;font-size:16px}
.opt .ic{font-size:22px;width:26px;text-align:center}
.opt:active{transform:scale(.99)}
.opt.sel{border-color:var(--emerald);background:var(--emerald-wash)}
.onb .foot{padding:16px 24px calc(20px + env(safe-area-inset-bottom))}
.onb .welcome{text-align:center;margin:0 auto auto;padding:24px 28px 18px;max-width:360px}
.onb .welcome .mark{width:70px;height:70px;border-radius:20px;background:linear-gradient(160deg,#2d7056,var(--emerald));margin:0 auto 20px;position:relative}
.onb .welcome .mark::after{content:"";position:absolute;left:50%;top:46%;width:26px;height:26px;background:var(--bg);border-radius:0 50% 50% 50%;transform:translate(-50%,-50%) rotate(45deg)}
.onb .welcome h2{font-family:var(--display);font-weight:600;font-size:33px;line-height:1.08}
.onb .welcome p{color:var(--ink-soft);margin:14px 0 4px;font-size:15px}

.toast{position:fixed;bottom:calc(var(--nav-h) + 16px);left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-pill);font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:60;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.section-label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin:22px 2px 10px}
.hide{display:none!important}
.center-col{display:flex;flex-direction:column}
.fine{text-align:center;color:var(--ink-soft);font-size:12px;margin-top:6px;line-height:1.5}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ============================================================
   Premium pass — depth, product imagery, streak ring, motion
   ============================================================ */
/* soft dew-glow behind the app */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(194,160,94,.10), transparent 60%),
    radial-gradient(90% 50% at 100% 8%, rgba(31,90,69,.07), transparent 55%);}

/* richer shadows */
:root{--shadow:0 1px 2px rgba(20,40,30,.04),0 6px 16px rgba(20,40,30,.05),0 18px 40px rgba(20,40,30,.05);}
.card{background:linear-gradient(180deg,#fff, #FFFDFA);}

/* card entrance on active screen */
.screen.active .card{animation:rise .5s cubic-bezier(.2,.7,.2,1) backwards}
.screen.active .card:nth-child(2){animation-delay:.04s}
.screen.active .card:nth-child(3){animation-delay:.09s}
.screen.active .card:nth-child(4){animation-delay:.14s}
.screen.active .card:nth-child(5){animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* streak progress ring */
.streak .ring{position:relative;width:150px;height:150px;margin:2px auto 4px}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:rgba(255,255,255,.16);stroke-width:6}
.ring-prog{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(194,160,94,.5));transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1)}
.streak .ring .num{position:absolute;inset:0;display:grid;place-items:center}
.streak::before{top:-44%;opacity:.5}

/* product thumbnail in cards */
.pthumb{width:64px;height:64px;flex:0 0 auto;border-radius:14px;overflow:hidden;
  background:var(--surface-2);box-shadow:0 4px 12px rgba(20,40,30,.12);border:1px solid var(--line)}
.pthumb img{width:100%;height:100%;object-fit:cover}

/* welcome hero art */
.welcome .hero-art{width:200px;height:200px;margin:0 auto 14px;
  animation:float 6s ease-in-out infinite}
.welcome .hero-art svg{width:100%;height:100%;filter:drop-shadow(0 12px 24px rgba(20,40,30,.16))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* gold milestone shimmer */
.milestone::after{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);animation:shimmer 4.5s ease-in-out infinite}
@keyframes shimmer{0%,72%{left:-60%}88%,100%{left:130%}}

@media (prefers-reduced-motion:reduce){
  .welcome .hero-art,.milestone::after,.screen.active .card{animation:none!important}
}

/* fix: keep streak hero emerald (generic .card gradient must not win) */
.card.streak{background:linear-gradient(158deg,#2c7257 0%,var(--emerald-deep) 100%)}
.card.milestone{background:linear-gradient(150deg,var(--gold-wash),#fff)}

/* ============================================================ Lock screen */
.lock{position:fixed;inset:0;z-index:80;background:linear-gradient(170deg,#C0506B,#7E2A46);
  display:none;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto;
  max-width:var(--maxw);margin:0 auto;color:#fff;padding:calc(20px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom))}
.lock.show{display:flex;animation:fade .3s ease}
.lock-inner{width:100%;max-width:300px;text-align:center}
.lock-drop{width:54px;height:54px;margin:0 auto 18px;background:rgba(255,255,255,.16);
  border-radius:0 50% 50% 50%;transform:rotate(45deg);position:relative}
.lock-drop::after{content:"";position:absolute;inset:30% 38% 30% 18%;background:#fff;opacity:.6;border-radius:50%}
.lock h2{font-family:var(--display);font-weight:600;font-size:23px;margin-bottom:16px}
.pin-dots{display:flex;gap:16px;justify-content:center;margin-bottom:12px}
.pin-dots .pd{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);transition:.15s}
.pin-dots .pd.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(194,160,94,.6)}
.pin-msg{min-height:18px;font-size:13.5px;color:#ffd9d2;margin-bottom:12px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:260px;margin:0 auto}
.keypad .key{height:56px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  font-size:24px;font-weight:500;font-family:var(--display);transition:.12s}
.keypad .key:active{background:rgba(255,255,255,.28);transform:scale(.95)}
.keypad .key.empty{background:none}

/* circular keypad keys */
.keypad{justify-items:center}
.keypad .key{width:64px;height:64px;border-radius:50%;display:grid;place-items:center}

/* multiple product options per goal */
.alts{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
.alts-h{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin:6px 2px 4px}
.alt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.alt-row:last-child{border-bottom:none}
.alt-row .an{font-size:14px;font-weight:500;line-height:1.25}
.alt-row .ap{font-size:13.5px;font-weight:700;color:var(--emerald-deep);white-space:nowrap}
.alt-row:active{opacity:.6}

/* ============================================================ Streak calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-title{font-family:var(--display);font-weight:600;font-size:20px}
.cal-nav{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--ink);font-size:20px;line-height:1;display:grid;place-items:center}
.cal-nav:active{transform:scale(.92)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{margin-bottom:6px}
.cal-dow-c{text-align:center;font-size:11px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em}
.cal-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;font-size:13.5px;font-weight:500;
  color:var(--ink-soft);background:var(--surface-2)}
.cal-cell.blank{background:none}
.cal-cell.future{opacity:.35}
.cal-cell.half{background:var(--emerald-wash);color:var(--emerald-deep);font-weight:600}
.cal-cell.full{background:var(--emerald);color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(31,90,69,.28)}
.cal-cell.today{outline:2px solid var(--gold);outline-offset:1px}
.cal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12.5px;color:var(--ink-soft)}
.cal-legend{display:flex;align-items:center;gap:6px}
.cal-legend .lg{width:12px;height:12px;border-radius:4px;display:inline-block;margin-left:8px}
.cal-legend .lg.full{background:var(--emerald)}
.cal-legend .lg.half{background:var(--emerald-wash)}

/* quiz hint for multi-select */
.qhint{font-size:13.5px;color:var(--ink-soft);margin:-12px 2px 16px}

/* ============================================================ Buy: contrast CTA + restock */
:root{ --cta:#D2674E; --cta-deep:#B85440; }   /* warm coral that pops on emerald/cream */
/* make the reorder/buy buttons stand out from the emerald UI */
.shop-btn.cta, .milestone .shop-btn{ background:var(--cta); }
.shop-btn{ background:var(--cta); box-shadow:0 6px 16px rgba(210,103,78,.28); }
.shop-btn:active{ background:var(--cta-deep); transform:scale(.99); }

.restock{ border:1px solid var(--cta); background:linear-gradient(150deg,#FBEDE9,#fff); position:relative; }
.rk-row{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.rk-tx{ flex:1; }
.rk-h{ font-family:var(--display); font-weight:600; font-size:20px; line-height:1.1; color:var(--ink); }
.rk-s{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; }
.rk-done{ display:block; width:100%; text-align:center; margin-top:10px; padding:10px; font-size:13.5px; font-weight:600; color:var(--ink-soft); background:none; }
.rk-done:active{ opacity:.6; }

/* clearer "one ritual" day — distinct sage green, not near-white */
.cal-cell.half{ background:#A9D3C2; color:var(--emerald-deep); font-weight:700; }
.cal-legend .lg.half{ background:#A9D3C2; }

/* ============================================================ Add-to-home sheet */
.sheet-backdrop{position:fixed;inset:0;z-index:70;background:rgba(20,40,30,.45);
  display:none;align-items:flex-end;justify-content:center}
.sheet-backdrop.show{display:flex;animation:fade .25s ease}
.sheet{width:100%;max-width:var(--maxw);background:var(--bg);border-radius:24px 24px 0 0;
  padding:14px 24px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(20,40,30,.25);
  animation:sheetUp .32s cubic-bezier(.2,.7,.2,1);text-align:center}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:0 auto 18px}
.sheet-drop{width:52px;height:52px;margin:0 auto 12px;background:linear-gradient(160deg,#2d7056,var(--emerald));
  border-radius:0 50% 50% 50%;transform:rotate(45deg);position:relative}
.sheet-drop::after{content:"";position:absolute;inset:32% 40% 30% 20%;background:#fff;opacity:.6;border-radius:50%}
.sheet h2{font-family:var(--display);font-weight:600;font-size:26px;margin-bottom:6px}
.sheet p{color:var(--ink-soft);font-size:14.5px;margin-bottom:18px;max-width:34ch;margin-inline:auto}
.ios-steps{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.ios-step{display:flex;align-items:center;gap:12px;font-size:14.5px;padding:7px 0;color:var(--ink)}
.ios-step .sn{flex:0 0 24px;height:24px;border-radius:50%;background:var(--emerald-wash);color:var(--emerald-deep);font-weight:700;font-size:13px;display:grid;place-items:center}
.ios-step .shareic{width:20px;height:20px;display:inline-block;vertical-align:-5px;color:var(--emerald);margin:0 1px}
.sheet-dismiss{display:block;width:100%;margin-top:10px;padding:12px;color:var(--ink-soft);font-size:14px;font-weight:600;background:none}
.sheet-dismiss:active{opacity:.6}

/* ============================================================
   PINK THEME + LIGHT/DARK MODE  (overrides the emerald scheme above)
   Accent names like --emerald are remapped to pink so existing
   components recolor without rewriting every rule.
   ============================================================ */
:root{
  --bg:#FBEFF2; --surface:#FFFFFF; --surface-2:#F8E6EB;
  --ink:#2B2227; --ink-soft:#9A828B; --line:#F1DCE3; --line-2:#E7C8D2;
  --pink:#E98BA3; --pink-deep:#D96E8C; --pink-wash:#FBE4EB;
  --emerald:#E98BA3; --emerald-deep:#C75F7E; --emerald-wash:#FBE4EB;
  --gold:#C2A05E; --gold-deep:#B07FA0; --gold-wash:#F8ECDC;
  --cta:#E98BA3; --cta-deep:#D96E8C; --blush:#E98BA3;
  --cal-empty:var(--surface-2); --cal-half:#EFB6C9; --cal-half-ink:#B2547A;
  --cal-full:var(--pink); --cal-full-ink:#fff;
  --shadow:0 1px 2px rgba(80,30,50,.05),0 6px 16px rgba(80,30,50,.05),0 18px 40px rgba(80,30,50,.05);
}
[data-theme="dark"]{
  --bg:#100B0E; --surface:#1B1418; --surface-2:#241A20;
  --ink:#F4EAEE; --ink-soft:#A98F9A; --line:#2C2127; --line-2:#3C2D34;
  --pink:#EC92AB; --pink-deep:#E27C98; --pink-wash:#2C1A22;
  --emerald:#EC92AB; --emerald-deep:#F2A9BE; --emerald-wash:#2C1A22;
  --gold:#CDB06A; --gold-deep:#D9A7C2; --gold-wash:#2A2030;
  --cta:#EC92AB; --cta-deep:#E27C98; --blush:#EC92AB;
  --cal-empty:var(--surface-2); --cal-half:#5A3742; --cal-half-ink:#F2B7CA;
  --cal-full:#EC92AB; --cal-full-ink:#1B1418;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 8px 22px rgba(0,0,0,.55);
}
body{background:var(--bg);color:var(--ink)}
body::before{background:
  radial-gradient(120% 70% at 50% -10%, rgba(233,139,163,.12), transparent 60%),
  radial-gradient(90% 50% at 100% 8%, rgba(233,139,163,.07), transparent 55%);}
.card{background:linear-gradient(180deg,var(--surface),var(--surface))}

/* streak hero -> soft themed card with pink ring (not solid block) */
.card.streak{background:linear-gradient(180deg,var(--surface),var(--surface-2));color:var(--ink);border:1px solid var(--line)}
.streak::before{display:none}
.streak .num{color:var(--ink)}
.streak .label{color:var(--pink-deep);opacity:1}
.streak .note{color:var(--ink-soft);opacity:1}
.ring-track{stroke:var(--line-2)}
.ring-prog{stroke:var(--pink);filter:drop-shadow(0 0 5px rgba(233,139,163,.45))}

/* buttons readable in both themes */
.btn{background:var(--ink);color:var(--bg)}
[data-theme="dark"] .btn{background:#2E2329;color:var(--ink)}
.btn.brand{background:var(--pink);color:#fff}
.btn.gold{background:var(--gold);color:#3a2e12}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.shop-btn,.shop-btn.cta{background:var(--pink);box-shadow:0 6px 16px rgba(233,139,163,.3)}
.shop-btn:active{background:var(--pink-deep)}
[data-theme="dark"] .toast{background:#2E2329;color:var(--ink)}

/* dose done, nav, chips */
.dose.done{background:var(--pink-wash)}
.dose.done .tick{background:var(--pink);border-color:var(--pink);color:#fff}
.dose.done .what{color:var(--pink-deep)}
.nav{background:var(--surface);border-top-color:var(--line);z-index:40}
.nav button.active{color:var(--pink-deep)}
.nav button.active svg{stroke:var(--pink)}
.topbar .eyebrow,.onb .q .eyebrow{color:var(--pink-deep)}
.brand-dot{background:linear-gradient(160deg,#f2a9be,var(--pink))}
.onb .welcome .mark,.lock-drop,.sheet-drop{background:linear-gradient(160deg,#f2a9be,var(--pink))}

/* calendar themed */
.cal-cell{background:var(--cal-empty);color:var(--ink-soft)}
.cal-cell.half{background:var(--cal-half);color:var(--cal-half-ink);font-weight:700}
.cal-cell.full{background:var(--cal-full);color:var(--cal-full-ink)}
.cal-legend .lg.full{background:var(--cal-full)}
.cal-legend .lg.half{background:var(--cal-half)}
.cal-nav{background:var(--surface-2);color:var(--ink)}

/* milestone + restock */
.card.milestone{background:linear-gradient(150deg,var(--gold-wash),var(--surface));border-color:var(--gold)}
.restock{border-color:var(--pink);background:linear-gradient(150deg,var(--pink-wash),var(--surface))}

/* lock screen stays a pink accent surface */
.lock{background:linear-gradient(170deg,var(--pink),var(--pink-deep));color:#fff}

/* theme toggle button */
.theme-toggle{position:absolute;top:22px;right:18px;z-index:45;width:38px;height:38px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow);cursor:pointer}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}

/* cleaner streak numeral — plain system font, normal weight */
.streak .num{font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:74px;letter-spacing:-1px}

/* ============================================================ Water tracker */
.water-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.water-count{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink)}
.water-reset{font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--surface-2);padding:6px 13px;border-radius:20px}
.water-reset:active{transform:scale(.94)}
.water-row{display:flex;gap:7px;justify-content:space-between}
.glass{flex:1;aspect-ratio:1;display:grid;place-items:center;border-radius:12px;background:var(--surface-2);color:var(--line-2);transition:transform .08s,background .15s,color .15s}
.glass.on{background:var(--pink-wash);color:var(--pink)}
.glass svg{width:21px;height:21px;fill:currentColor}
.glass:active{transform:scale(.88)}
.water-note{font-size:13px;color:var(--ink-soft);margin-top:13px;text-align:center}

/* water goal stepper + wrap-friendly droplets */
.water-row{flex-wrap:wrap;justify-content:center;gap:8px}
.glass{flex:0 0 auto;width:31px;height:31px}
.water-goal{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:20px;padding:5px 8px}
.water-goal .gl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-left:4px}
.water-goal b{font-size:15px;min-width:18px;text-align:center;color:var(--ink)}
.gstep{width:24px;height:24px;border-radius:50%;background:var(--surface);color:var(--ink);font-size:17px;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow)}
.gstep:active{transform:scale(.9)}
.water-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px}
.water-foot .water-note{margin-top:0;text-align:left;flex:1}

/* ============================================================ Water — filling dewdrop */
.water-viz{display:flex;justify-content:center;margin:10px 0 6px}
.drop-svg{width:120px;height:150px;overflow:visible;cursor:pointer}
.drop-svg:active{transform:scale(.97)}
.drop-bg{fill:var(--surface-2)}
.drop-outline{stroke:var(--pink);stroke-width:2.5;opacity:.55}
.water-level{transition:transform .7s cubic-bezier(.34,.8,.3,1)}
.wave{fill:var(--pink)}
.wave.w2{fill:var(--pink-deep);opacity:.45}
@keyframes waveMove{from{transform:translateX(0)}to{transform:translateX(-60px)}}
.wave.w1{animation:waveMove 2.6s linear infinite}
.wave.w2{animation:waveMove 3.9s linear infinite}
@keyframes dropPop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.water.full .drop-svg{animation:dropPop .5s ease}
.water.full .drop-outline{stroke:var(--pink);opacity:1;filter:drop-shadow(0 0 6px rgba(233,139,163,.55))}

.water-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px}
.wbtn.add{background:var(--pink);color:#fff;font-weight:700;font-size:15px;padding:12px 28px;border-radius:30px;box-shadow:0 6px 16px rgba(233,139,163,.3)}
.wbtn.add:active{transform:scale(.96);background:var(--pink-deep)}
.wbtn.minus{width:42px;height:42px;border-radius:50%;background:var(--surface-2);color:var(--ink);font-size:22px;line-height:1}
.wbtn.minus:active{transform:scale(.92)}
.wbtn.minus:disabled{opacity:.35}

/* water: blue->pink fill + goal confetti */
.water{position:relative;overflow:visible}
.wave{transition:fill .6s ease}
.wave.w1{fill:var(--wave,#E98BA3)}
.wave.w2{fill:var(--wave2,#D96E8C);opacity:.5}
.confetti{position:absolute;left:50%;top:140px;width:0;height:0;pointer-events:none;z-index:6}
.confetti i{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:2px;
  animation:confPop 1.15s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes confPop{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  70%{opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

/* falling droplet when you add a glass */
.water-viz{position:relative;overflow:visible}
.pour{position:absolute;left:50%;top:0;width:11px;height:15px;margin-left:-5.5px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:translateY(-10px) scale(.6);
  z-index:4;pointer-events:none;animation:pourFall .52s cubic-bezier(.5,0,.7,1) forwards;
  box-shadow:0 2px 4px rgba(120,60,90,.18)}
@keyframes pourFall{
  0%{transform:translateY(-10px) scale(.55);opacity:0}
  18%{opacity:1}
  78%{transform:translateY(78px) scaleY(1.15) scaleX(.85);opacity:1}
  100%{transform:translateY(96px) scaleY(.4) scaleX(1.5);opacity:0}}

/* pour = stream + droplets + splash (overrides single-drop) */
.stream{position:absolute;left:50%;top:0;width:5px;margin-left:-2.5px;border-radius:3px;
  transform-origin:top center;transform:scaleY(0);z-index:3;pointer-events:none;
  animation:streamFall .5s ease-in forwards;box-shadow:0 0 4px rgba(120,60,90,.15)}
@keyframes streamFall{0%{transform:scaleY(0);opacity:.3}40%{transform:scaleY(1);opacity:.95}
  72%{transform:scaleY(1);opacity:.85}100%{transform:scaleY(1) translateY(10px);opacity:0}}
.pour{position:absolute;left:50%;top:0;width:9px;height:13px;margin-left:-4.5px;
  border-radius:50%/58% 58% 42% 42%;z-index:4;pointer-events:none;
  animation:pourFall .5s cubic-bezier(.5,0,.7,1) forwards;box-shadow:0 2px 4px rgba(120,60,90,.18)}
@keyframes pourFall{
  0%{transform:translate(var(--jx,0),-12px) scale(.5);opacity:0}
  20%{opacity:1}
  80%{transform:translate(var(--jx,0),var(--land)) scaleY(1.25) scaleX(.8);opacity:1}
  100%{transform:translate(var(--jx,0),var(--land)) scaleY(.35) scaleX(1.6);opacity:0}}
.splash{position:absolute;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;
  z-index:4;pointer-events:none;animation:splashOut .46s ease-out forwards}
@keyframes splashOut{0%{transform:translate(0,0) scale(.5);opacity:0}
  25%{opacity:1}100%{transform:translate(var(--sx),var(--sy)) scale(.25);opacity:0}}

/* water streak badge (left of the drop) — number color cycles per day */
.water-streak{position:absolute;left:8px;top:50%;transform:translateY(-50%);text-align:center;width:62px;z-index:2;pointer-events:none}
.ws-num{display:block;font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:36px;font-weight:700;line-height:1;color:var(--pink);transition:color .45s ease}
.ws-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}

/* exciting streak badge: glowing ring + pop */
.ws-ring{width:58px;height:58px;border-radius:50%;border:2.5px solid var(--pink);display:grid;place-items:center;margin:0 auto;background:var(--surface);transition:border-color .45s,box-shadow .45s}
.ws-num{font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:28px;font-weight:800;line-height:1;transition:color .45s ease}
@keyframes wsPop{0%{transform:scale(1)}40%{transform:scale(1.22)}70%{transform:scale(.95)}100%{transform:scale(1)}}
.ws-ring.pop{animation:wsPop .5s ease}
.ws-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;text-align:center}

/* hydration reward */
.water-reward{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;background:var(--surface)}
.water-reward.hide{display:none}
.wr-top{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink)}
.wr-left{color:var(--pink-deep)}
.wr-bar{height:8px;border-radius:6px;background:var(--surface-2);margin:9px 0 8px;overflow:hidden}
.wr-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#6FB7E0,var(--pink));transition:width .5s ease}
.wr-hint{font-size:11.5px;color:var(--ink-soft)}
.water-reward.unlocked{text-align:center;border:1.5px solid var(--pink);background:linear-gradient(160deg,var(--pink-wash),var(--surface))}
.wr-burst{font-size:30px;line-height:1;margin-bottom:4px}
.wr-h{font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink)}
.wr-s{font-size:13.5px;color:var(--ink-soft);margin:4px 0 8px}
.wr-code{font-size:13px;letter-spacing:.04em;margin-bottom:12px;color:var(--ink)}
.wr-code b{background:var(--pink-wash);color:var(--pink-deep);padding:3px 10px;border-radius:8px;font-family:system-ui,monospace}

/* reward: hidden (starred) code + claim note */
.wr-code .stars{letter-spacing:2px;color:var(--pink-deep);background:var(--pink-wash);padding:3px 12px;border-radius:8px;font-size:15px}
.wr-claimnote{font-size:12px;color:var(--ink-soft);margin:7px 0 12px}

/* make the glass count pop */
.water-count{display:flex;align-items:baseline;gap:6px}
.water-count .wc-num{font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:34px;font-weight:800;line-height:1;color:var(--pink-deep)}
.water-count .wc-goal{color:var(--ink)}
.water-count .wc-of{font-size:14px;font-weight:600;color:var(--ink-soft)}
.water-count .wc-suf{font-size:14px;font-weight:600;color:var(--ink-soft)}

/* ============================================================ skin check-in */
.checkin .mood-row{display:flex;flex-wrap:wrap;gap:8px}
.mood{flex:1 1 auto;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px;border-radius:14px;background:var(--surface-2);border:1.5px solid transparent;transition:.15s}
.mood:active{transform:scale(.96)}
.mood.on{background:var(--pink-wash);border-color:var(--pink)}
.mood .m-emo{font-size:22px;line-height:1}
.mood .m-lbl{font-size:11.5px;font-weight:600;color:var(--ink-soft)}
.mood.on .m-lbl{color:var(--pink-deep)}
.checkin-note{width:100%;margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:14px;background:var(--surface);color:var(--ink)}
.checkin-note::placeholder{color:var(--ink-soft)}
.checkin-note:focus{outline:none;border-color:var(--pink)}

/* photo note + journal */
.photo-note{margin-top:12px}
.pn-head{display:flex;align-items:center;margin-bottom:8px}
.pn-date{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.pn-input{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:14px;line-height:1.45;background:var(--surface);color:var(--ink);resize:vertical;min-height:64px;font-family:var(--ui)}
.pn-input::placeholder{color:var(--ink-soft)}
.pn-input:focus{outline:none;border-color:var(--pink)}
.timeline .tnote{font-size:10.5px;color:var(--ink-soft);margin-top:3px;max-width:74px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.journal{padding:4px 0}
.jrow{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.jrow:last-child{border-bottom:none}
.jdate{flex:0 0 76px;font-size:12px;font-weight:700;color:var(--pink-deep);padding-top:2px}
.jbody{flex:1;display:flex;flex-direction:column;gap:3px}
.jmood{font-size:13px;font-weight:600;color:var(--ink)}
.jnote{font-size:13px;color:var(--ink-soft);line-height:1.45}

/* photo delete button + confirm dialog */
.pn-head{justify-content:space-between}
.pn-del{margin-left:auto;font-size:12.5px;font-weight:600;color:#C0506B;background:var(--pink-wash);padding:6px 13px;border-radius:20px}
.pn-del:active{transform:scale(.94)}
.confirm-ov{position:fixed;inset:0;z-index:90;background:rgba(20,10,15,.5);display:grid;place-items:center;padding:28px;animation:cfFade .15s ease}
@keyframes cfFade{from{opacity:0}to{opacity:1}}
.confirm-box{background:var(--surface);border-radius:20px;padding:22px;max-width:340px;width:100%;box-shadow:var(--shadow-lg);text-align:center}
.confirm-title{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);margin-bottom:6px}
.confirm-msg{font-size:14px;color:var(--ink-soft);line-height:1.5;margin-bottom:18px}
.confirm-actions{display:flex;gap:10px}
.confirm-actions .btn{flex:1;margin:0}
.cf-del{flex:1;border:none;border-radius:var(--r-pill);padding:13px;font-size:15px;font-weight:600;background:#D6536F;color:#fff;font-family:inherit}
.cf-del:active{transform:scale(.97);background:#C0506B}

/* ============================================================ product guide */
.gcard{border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.gc-head{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;background:none}
.gc-thumb{width:50px;height:50px;border-radius:11px;object-fit:cover;background:var(--surface-2);flex:0 0 auto}
.gc-thumb.noimg{visibility:hidden}
.gc-meta{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.gc-name{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3}
.gc-price{font-size:12.5px;color:var(--pink-deep);font-weight:600}
.gc-chev{flex:0 0 auto;color:var(--ink-soft);font-size:18px;transition:transform .2s}
.gcard.open .gc-chev{transform:rotate(180deg)}
.gc-body{display:none;padding:4px 16px 16px}
.gcard.open .gc-body{display:block}
.gc-row{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.gc-k{flex:0 0 78px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pink-deep);padding-top:1px}
.gc-v{flex:1;font-size:13.5px;color:var(--ink);line-height:1.5}
.gc-tip{margin:12px 0;padding:11px 13px;background:var(--pink-wash);border-radius:11px;font-size:13px;color:var(--ink);line-height:1.5}
.gc-tip::before{content:"Tip — ";font-weight:700;color:var(--pink-deep)}
.gc-body .shop-btn{display:block;text-align:center;text-decoration:none}

/* nav fits 4 items */
.nav button{font-size:10.5px}
.nav button svg{width:22px;height:22px}

/* routine-time selector + single-dose layout */
.rtwhen-row{display:flex;gap:8px}
.rtwhen-row button{flex:1;padding:11px 8px;border-radius:12px;background:var(--surface-2);color:var(--ink);font-size:14px;font-weight:600;border:1.5px solid transparent;transition:.15s}
.rtwhen-row button:active{transform:scale(.96)}
.rtwhen-row button.on{background:var(--pink-wash);border-color:var(--pink);color:var(--pink-deep)}
.doses.single{grid-template-columns:1fr}

/* journal: add button + free-text entries */
.jadd{width:100%;margin:0 0 10px}
.jentry{padding:12px 16px;border-bottom:1px solid var(--line)}
.jentry:last-child{border-bottom:none}
.je-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.je-head .jdate{flex:0 0 auto}
.je-del{width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--ink-soft);font-size:17px;line-height:1;display:grid;place-items:center}
.je-del:active{transform:scale(.9)}
.je-input{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:13.5px;line-height:1.5;background:var(--surface);color:var(--ink);resize:vertical;min-height:54px;font-family:var(--ui)}
.je-input::placeholder{color:var(--ink-soft)}
.je-input:focus{outline:none;border-color:var(--pink)}

/* progress segmented control (Photos / Journal) */
.seg{display:flex;gap:4px;background:var(--surface-2);border-radius:14px;padding:4px;margin-bottom:16px}
.seg button{flex:1;padding:10px;border-radius:10px;background:none;color:var(--ink-soft);font-size:14px;font-weight:600;transition:.18s}
.seg button.on{background:var(--surface);color:var(--pink-deep);box-shadow:var(--shadow-sm)}
.seg button:active{transform:scale(.98)}

/* journal: add-row + photo entries */
.jadd-row{display:flex;gap:8px;margin:4px 0 12px}
.jadd-row .btn{flex:1;margin:0}
.jphoto .jp-row{display:flex;gap:11px;align-items:stretch}
.jp-thumb{width:66px;height:66px;border-radius:11px;object-fit:cover;background:var(--surface-2);flex:0 0 auto;cursor:pointer}
.jp-note{flex:1;min-height:66px}

/* photo note footer: saved indicator + Done */
.pn-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.pn-saved{font-size:12px;color:var(--ink-soft)}
.pn-done{background:var(--pink-deep);color:#fff;font-size:14px;font-weight:600;padding:9px 22px;border-radius:var(--r-pill)}
.pn-done:active{transform:scale(.96)}

/* photo note: saved message log + composer */
.pn-msgs{display:flex;flex-direction:column;gap:7px;margin:4px 0 12px}
.pn-msg{display:flex;align-items:flex-start;gap:8px;background:var(--pink-wash);border-radius:11px;padding:9px 12px}
.pn-msg-tx{flex:1;font-size:13.5px;line-height:1.45;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.pn-msg-del{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.06);color:var(--ink-soft);font-size:15px;line-height:1;display:grid;place-items:center}
.pn-msg-del:active{transform:scale(.9)}
.pn-hint{font-size:12px;color:var(--ink-soft)}
/* journal photo message lines */
.jp-msgs{flex:1;display:flex;flex-direction:column;gap:4px;justify-content:center;cursor:pointer}
.jp-msg{font-size:13.5px;line-height:1.45;color:var(--ink)}
.jp-empty{font-size:13px;color:var(--ink-soft)}

/* ============================== Progress redesign: Journal log + Before/After */
.jcompose{padding:14px}
.jcompose textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-size:14px;line-height:1.5;background:var(--surface);color:var(--ink);resize:vertical;min-height:60px;font-family:var(--ui)}
.jcompose textarea::placeholder{color:var(--ink-soft)}
.jcompose textarea:focus{outline:none;border-color:var(--pink)}
.jcompose-row{display:flex;gap:8px;margin-top:10px}
.jcompose-row .btn{margin:0;width:auto}
.jcompose-row #journalAddPhoto{flex:0 0 auto}
.jcompose-row #journalAdd{flex:1;min-width:0}

/* day cards (date-grouped log) */
.day-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:12px}
.day-head{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);margin-bottom:10px}
.day-photos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.day-thumb{width:72px;height:90px;border-radius:10px;object-fit:cover;background:var(--surface-2);cursor:pointer}
.day-mood{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.day-note{display:flex;align-items:flex-start;gap:8px;background:var(--pink-wash);border-radius:11px;padding:9px 12px;margin-bottom:7px}
.day-note span{flex:1;font-size:13.5px;line-height:1.45;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.day-note.ck{background:var(--surface-2)}
.day-note-del{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.06);color:var(--ink-soft);font-size:15px;line-height:1;display:grid;place-items:center}
.day-note-del:active{transform:scale(.9)}

/* before & after */
.ba-slots{display:flex;gap:12px;margin-bottom:16px}
.ba-slot{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 10px;border-radius:16px;background:var(--surface);border:2px solid var(--line);transition:.15s}
.ba-slot.active{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-wash)}
.ba-slot.filled{background:var(--surface)}
.ba-lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-deep)}
.ba-pick{width:100%;aspect-ratio:3/4;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.ba-pick img{width:100%;height:100%;object-fit:cover}
.ba-ph{font-size:12.5px;color:var(--ink-soft);text-align:center;padding:0 8px}
.ba-when{font-size:12px;font-weight:600;color:var(--ink-soft);min-height:15px}
.ba-divider{height:1px;background:var(--line);margin:18px 0 4px}
.ba-date{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pink-deep);margin:12px 0 8px}
.ba-row{display:flex;gap:8px;flex-wrap:wrap}
.ba-img{position:relative;width:84px;height:108px;border-radius:11px;overflow:hidden;border:2px solid transparent;background:var(--surface-2);padding:0}
.ba-img img{width:100%;height:100%;object-fit:cover}
.ba-img.sel-b{border-color:#6FB7E0}
.ba-img.sel-a{border-color:var(--pink)}
.ba-tag{position:absolute;left:0;right:0;bottom:0;font-size:10px;font-weight:700;color:#fff;padding:2px 0;text-align:center}
.ba-tag.b{background:#6FB7E0}
.ba-tag.a{background:var(--pink)}

/* photo delete affordance + viewer */
.day-photo{position:relative}
.day-thumb-del{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:1;display:grid;place-items:center;border:none}
.day-thumb-del:active{transform:scale(.9)}
.pv-ov{position:fixed;inset:0;z-index:90;background:rgba(20,10,15,.82);display:grid;place-items:center;padding:24px;animation:cfFade .15s ease}
.pv-box{max-width:420px;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.pv-box img{max-width:100%;max-height:64vh;border-radius:16px;object-fit:contain;background:#000}
.pv-meta{color:#fff;font-size:14px;font-weight:600}
.pv-actions{display:flex;gap:10px;width:100%}
.pv-actions .btn{flex:1;width:auto;margin:0;background:rgba(255,255,255,.16);color:#fff;border:none}
.pv-del{flex:1;border:none;border-radius:var(--r-pill);padding:13px;font-size:15px;font-weight:600;background:#D6536F;color:#fff}
.pv-del:active{transform:scale(.97)}

/* before/after header selector */
.ba-header-opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.ba-header-opts button{padding:9px 14px;border-radius:11px;background:var(--surface-2);color:var(--ink);font-size:13.5px;font-weight:600;border:1.5px solid transparent;transition:.15s}
.ba-header-opts button:active{transform:scale(.96)}
.ba-header-opts button.on{background:var(--pink-wash);border-color:var(--pink);color:var(--pink-deep)}

/* ============================== Operator (owner) dashboard */
.op-ov{position:fixed;inset:0;z-index:95;background:var(--bg);overflow-y:auto;padding:calc(22px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom));animation:cfFade .18s ease}
.op-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.op-head h1{margin:2px 0 0}
.op-close{background:var(--pink-deep);color:#fff;font-size:14px;font-weight:600;padding:9px 18px;border-radius:var(--r-pill)}
.op-close:active{transform:scale(.96)}
.op-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.op-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.op-card.hl{background:linear-gradient(135deg,var(--pink) 0%,var(--pink-deep) 100%);border:none}
.op-card.hl .op-num,.op-card.hl .op-cap{color:#fff}
.op-num{font-family:var(--display);font-weight:700;font-size:26px;color:var(--ink);line-height:1.1}
.op-cap{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.op-goal-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;color:var(--ink)}
.op-prog{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.op-prog-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--pink),var(--pink-deep));transition:width .4s ease}
.op-bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:6px}
.op-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.op-bar-fill{width:100%;max-width:34px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--pink),var(--pink-deep));min-height:4px;transition:height .4s ease}
.op-bar-lbl{font-size:11px;color:var(--ink-soft)}
.op-settings .op-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.op-settings label{font-size:14px;color:var(--ink)}
.op-inwrap{display:flex;align-items:center;gap:4px;background:var(--surface-2);border-radius:10px;padding:6px 12px}
.op-inwrap span{color:var(--ink-soft);font-size:14px}
.op-inwrap input{width:80px;border:none;background:transparent;font-size:15px;font-weight:600;color:var(--ink);text-align:right}
.op-inwrap input:focus{outline:none}
.op-addrow{display:flex;gap:8px;margin-bottom:12px}
.op-addrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:14px;background:var(--surface);color:var(--ink)}
.op-addrow input:focus{outline:none;border-color:var(--pink)}
.op-sub{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.op-sub:last-child{border-bottom:none}
.op-sub-main{flex:1;min-width:0;display:flex;flex-direction:column}
.op-sub-name{font-size:14.5px;font-weight:600;color:var(--ink)}
.op-sub-since{font-size:12px;color:var(--ink-soft)}
.op-sub-st{flex:0 0 auto}
.op-st{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.op-st.active{background:#E3F5EA;color:#2E8B57}
.op-st.paused{background:#FFF3DA;color:#B7791F}
.op-st.canceled{background:var(--surface-2);color:var(--ink-soft)}
.op-sub-del{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.06);color:var(--ink-soft);font-size:16px;line-height:1;display:grid;place-items:center}
.op-sub-del:active{transform:scale(.9)}

/* hidden owner entrance: press & hold the greeting block — cool fill + subtle press */
#greetBlock{display:inline-block;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:default;transition:transform .2s ease}
#greetEyebrow{position:relative;display:inline-block;transition:color .3s ease;touch-action:none}
#greetEyebrow.holding{color:var(--pink-deep)}
#greetEyebrow::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--pink),var(--pink-deep));transition:width .18s ease}
#greetEyebrow.holding::after{width:100%;transition:width 3s linear}

/* owner gate sits above the dashboard; change-code button */
#opGate{z-index:100}
.op-codebtn{margin-top:14px;width:100%;padding:11px;border-radius:12px;background:var(--surface-2);color:var(--ink-soft);font-size:13.5px;font-weight:600}
.op-codebtn:active{transform:scale(.98)}

/* operator: new metrics, milestone, reasons, delta */
.confirm-ov{z-index:120}
.op-delta{font-weight:700}
.op-delta.up{color:#9be7b4}
.op-delta.down{color:#ffc9c9}
.op-card.hl .op-delta.up{color:#dffff0}
.op-num.pos{color:#2E8B57}
.op-num.neg{color:#C0506B}
.op-milestone{background:linear-gradient(135deg,#FFF3DA,#FCEFF1);border:1px solid #F1C7D5;border-radius:14px;padding:12px 14px;font-size:14px;color:var(--ink);margin-bottom:14px;text-align:center}
.op-milestone.soft{background:var(--surface);color:var(--ink-soft)}
.op-milestone b{color:var(--pink-deep)}
.op-goal-sub{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px;font-size:13px;color:var(--ink)}
.op-reasons{display:flex;flex-direction:column;gap:8px}
.op-reason{display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);border-radius:10px;padding:9px 13px;font-size:14px;color:var(--ink)}
.op-reason-n{font-weight:700;color:var(--pink-deep)}
.reason-list{display:flex;flex-direction:column;gap:8px}
.reason-opt{padding:12px;border-radius:11px;background:var(--surface-2);color:var(--ink);font-size:14.5px;font-weight:600}
.reason-opt:active{transform:scale(.98)}
.reason-opt.skip{background:transparent;color:var(--ink-soft);font-weight:500}

/* info icon + bubble */
.info-i{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--pink-wash);color:var(--pink-deep);font-size:11px;font-weight:700;font-style:italic;font-family:Georgia,serif;vertical-align:middle;margin-left:2px;line-height:1}
.info-i:active{transform:scale(.9)}
.info-bubble{position:fixed;z-index:130;background:#3a2630;color:#fff;font-size:13.5px;line-height:1.55;padding:12px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:cfFade .12s ease}

/* brand logo placements */
.welcome .hero-logo{width:210px;max-width:70%;margin:0 auto 6px}
.welcome .hero-logo img{width:100%;height:auto;display:block}
.lock-logo{width:60px;height:auto;margin-bottom:12px;opacity:.96}

/* home brand wordmark — masked so it fills with --ink (dark on light, light on dark) */
.brand-bar{text-align:center;padding:22px 0 4px}
.brand-bar .wordmark{display:inline-block;height:66px;width:222px;background:var(--ink);
  -webkit-mask:url(icons/logo-wordmark.png) center/contain no-repeat;
  mask:url(icons/logo-wordmark.png) center/contain no-repeat}

/* branded launch splash — matches the home-screen icon (cream logo on rose) */
.splash{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,#EC93AD 0%,#C25C7B 100%);
  transition:opacity .55s ease;padding-top:env(safe-area-inset-top)}
.splash.hide{opacity:0;pointer-events:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:20px;animation:splashIn .6s ease}
.splash-mark{width:132px;height:218px;background:#F8E9ED;
  -webkit-mask:url(icons/logo-mark-cream.png) center/contain no-repeat;mask:url(icons/logo-mark-cream.png) center/contain no-repeat}
.splash-word{width:208px;height:60px;background:#F8E9ED;
  -webkit-mask:url(icons/logo-wordmark.png) center/contain no-repeat;mask:url(icons/logo-wordmark.png) center/contain no-repeat}
@keyframes splashIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Guide — collapsible category accordion */
.gcat{border-bottom:1px solid var(--line)}
.gcat-head{display:flex;align-items:center;gap:10px;width:100%;padding:15px 4px;background:none;text-align:left;cursor:pointer}
.gcat-label{flex:1;font-weight:600;font-size:15.5px;color:var(--ink)}
.gcat-count{font-size:12px;color:var(--ink-soft);background:var(--surface-2);border-radius:11px;padding:2px 9px;min-width:24px;text-align:center}
.gcat-chev{color:var(--ink-soft);font-size:15px;transition:transform .22s ease}
.gcat.open .gcat-chev{transform:rotate(180deg)}
.gcat-body{display:none;padding:2px 0 10px}
.gcat.open .gcat-body{display:block;animation:cfFade .18s ease}

/* category intro note (e.g. botanical duos) */
.gcat-note{font-size:13px;line-height:1.55;color:var(--ink-soft);background:var(--surface-2);border-radius:12px;padding:11px 13px;margin:4px 2px 12px}

/* ============ membership paywall + auth ============ */
.paywall{position:fixed;inset:0;z-index:90;display:none;background:linear-gradient(172deg,#FBEFF2,#F6E0E7);overflow-y:auto;padding:calc(env(safe-area-inset-top) + 24px) 22px calc(env(safe-area-inset-bottom) + 28px)}
.paywall.show{display:flex;align-items:center;justify-content:center}
.paywall-card{max-width:380px;width:100%;margin:auto;text-align:center}
.pw-logo{width:120px;height:120px;margin:0 auto 14px;border-radius:30px;background:linear-gradient(158deg,#EC93AD,#C25C7B);
  -webkit-mask:none;position:relative;box-shadow:0 14px 34px rgba(194,92,123,.32)}
.pw-logo::after{content:"";position:absolute;inset:0;background:#F8E9ED;
  -webkit-mask:url(icons/logo-mark-cream.png) center/64% no-repeat;mask:url(icons/logo-mark-cream.png) center/64% no-repeat}
.pw-title{font-family:var(--display);font-weight:600;font-size:30px;color:var(--ink);margin:0 0 4px}
.pw-sub{color:var(--ink-soft);font-size:14.5px;margin:0 0 20px}
.pw-list{list-style:none;text-align:left;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:11px}
.pw-list li{position:relative;padding-left:30px;font-size:14.5px;color:var(--ink);line-height:1.45}
.pw-list li::before{content:"✓";position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;background:var(--pink-deep);color:#fff;font-size:12px;display:grid;place-items:center}
.pw-cta{font-size:16px;padding:15px}
.pw-login{display:block;width:100%;margin-top:12px;background:none;color:var(--pink-deep);font-weight:600;font-size:14.5px;padding:8px}
.pw-terms{color:var(--ink-soft);font-size:11.5px;line-height:1.5;margin:14px 0 0}
.auth{position:fixed;inset:0;z-index:115;display:none;align-items:center;justify-content:center;background:rgba(40,28,34,.5);backdrop-filter:blur(3px);padding:22px}
.auth.show{display:flex;animation:cfFade .15s ease}
.auth-card{position:relative;width:100%;max-width:360px;background:var(--surface);border-radius:22px;padding:26px 22px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.auth-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--surface-2);color:var(--ink-soft);font-size:14px}
.auth-title{font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink);margin:0 0 4px}
.auth-sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 18px}
.auth-label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.auth-input{width:100%;padding:13px 14px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--bg);color:var(--ink);font-size:16px;margin-bottom:14px}
.auth-input:focus{outline:none;border-color:var(--pink-deep)}
#authCode{letter-spacing:.4em;text-align:center;font-size:22px;font-weight:600}
.auth-back{display:block;width:100%;margin-top:10px;background:none;color:var(--ink-soft);font-size:13.5px;padding:6px}
.auth-hint{text-align:center;font-size:12.5px;color:var(--pink-deep);margin:12px 0 0;min-height:16px}
/* membership card on routine screen */
.mcard{margin-top:18px}
.mcard .k{font-size:13px;color:var(--ink-soft)}
.mcard-actions{display:flex;gap:10px;margin-top:12px}
.mcard-actions button{flex:1;padding:11px;border-radius:11px;font-size:13.5px;font-weight:600}
.mc-manage{background:var(--surface-2);color:var(--ink)}
.mc-out{background:none;color:var(--pink-deep)}

.mc-discount{background:linear-gradient(135deg,#FFF3DA,#FCEFF1);border:1px solid #F1C7D5;border-radius:12px;padding:12px 14px;margin:12px 0 4px;font-size:13px;color:var(--ink-soft);text-align:center}
.mc-discount b{display:inline-block;font-size:18px;letter-spacing:.08em;color:var(--pink-deep);margin:4px 0}
.mc-copy{display:block;margin:8px auto 0;background:var(--pink-deep);color:#fff;border-radius:9px;padding:7px 16px;font-size:12.5px;font-weight:600}

.op-seg{margin-bottom:16px}

.pw-terms-link{background:none;color:var(--pink-deep);font-weight:600;font-size:11.5px;text-decoration:underline;padding:0}
.terms-card{max-width:380px;max-height:84vh;display:flex;flex-direction:column}
.terms-body{overflow-y:auto;text-align:left;font-size:13.5px;line-height:1.6;color:var(--ink);padding-right:4px}
.terms-body p{margin:0 0 11px}
.terms-body b{color:var(--ink)}

/* discreet owner entrance — looks like a small signature mark */
.owner-mark{display:block;margin:26px auto 6px;width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--line-2);background:none;color:var(--ink-soft);opacity:.5;
  font-family:var(--display);font-style:italic;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:opacity .2s,transform .2s}
.owner-mark span{margin-top:-1px}
.owner-mark:active{transform:scale(.92);opacity:.8}

/* discreet owner entrance — invisible tap target over "LIP" in the wordmark */
.brand-bar .wordmark{position:relative}
.owner-lip{position:absolute;right:-2px;bottom:-2px;width:52px;height:26px;background:none;border:none;padding:0;cursor:default}