@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FFFAF7;--white:#fff;--border:#F0EDE8;--border2:#EDE8E0;
  --text:#2D2D2D;--mid:#666;--dim:#999;--faint:#BBB;--tag-bg:#F8F5F0;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono','Courier New',monospace;
  --r-sm:10px;--r:14px;--r-lg:18px;--r-xl:22px;
  --sh-sm:0 1px 6px rgba(0,0,0,.04);--sh:0 2px 12px rgba(0,0,0,.06);--sh-lg:0 4px 24px rgba(0,0,0,.09);
  /* phase tokens (updated by JS) */
  --pc:#F06292;--pbg:#FFF0F5;--ppill:#FCE4EC;--ptxt:#880E4F;
}
html{font-size:16px;-webkit-tap-highlight-color:transparent}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;padding-bottom:84px}
::-webkit-scrollbar{display:none}
button{font-family:var(--sans);cursor:pointer;border:none;background:none;outline:none;transition:opacity .15s}
button:active{opacity:.72}
input,textarea,select{font-family:var(--sans)}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
input[type=range]{accent-color:var(--pc);width:100%}
a{text-decoration:none;color:inherit}

/* ── Screens ── */
.screen{display:none;animation:fadeUp .28s ease}
.screen.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Layout helpers ── */
.px{padding-left:20px;padding-right:20px}
.flex{display:flex}.fb{display:flex;justify-content:space-between;align-items:center}
.fc{display:flex;align-items:center}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mb8{margin-bottom:8px}.mb10{margin-bottom:10px}.mb12{margin-bottom:12px}.mb14{margin-bottom:14px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}

/* ── Typography ── */
.ph{font-size:9px;color:var(--faint);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pt{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--text);line-height:1}
.ps{font-size:13px;color:var(--dim);margin-top:3px}
.serif{font-family:var(--serif)}.mono{font-family:var(--mono)}.dim{color:var(--dim)}.faint{color:var(--faint)}
.sm{font-size:13px}.xs{font-size:11px}.xxs{font-size:9px}.lh{line-height:1.6}
.fw6{font-weight:600}.fw7{font-weight:700}.italic{font-style:italic}

/* ── Cards ── */
.card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh);margin-bottom:12px}
.card-sm{padding:12px;border-radius:var(--r)}
.card-xl{border-radius:var(--r-xl);padding:18px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:var(--r);font-size:13px;font-weight:600;color:#fff;box-shadow:var(--sh);transition:opacity .15s,transform .1s}
.btn:active{transform:scale(.97)}
.btn-full{width:100%}
.btn-sm{padding:8px 16px;font-size:11px;border-radius:var(--r-sm)}
.btn-ghost{background:transparent!important;border:1.5px solid var(--border);color:var(--dim);box-shadow:none;padding:10px 14px;font-size:12px}
.btn-outline{background:transparent!important;border:1.5px solid currentColor;box-shadow:none}

/* ── Tags ── */
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-family:var(--mono);white-space:nowrap;background:var(--tag-bg);color:var(--dim)}
.tag-row{display:flex;gap:6px;flex-wrap:wrap}

/* ── Meter bars ── */
.meter{margin-bottom:10px}
.meter-hd{display:flex;justify-content:space-between;margin-bottom:4px;font-size:12px}
.meter-track{height:6px;background:var(--border);border-radius:3px}
.meter-fill{height:100%;border-radius:3px;transition:width 1.2s ease}

/* ── HPI ring (SVG) ── */
.hpi-wrap{position:relative;width:128px;height:128px;flex-shrink:0}
.hpi-wrap svg{width:100%;height:100%}
.hpi-label{position:absolute;bottom:-2px;left:0;right:0;text-align:center;font-size:9px;font-family:var(--mono);font-weight:700}

/* ── Bottom nav ── */
#bnav{position:fixed;bottom:0;left:0;right:0;background:rgba(255,250,247,.97);border-top:1.5px solid var(--border);backdrop-filter:blur(20px);z-index:50;box-shadow:0 -4px 24px rgba(0,0,0,.06);padding-bottom:env(safe-area-inset-bottom,0px)}
.bnav-inner{display:flex;justify-content:space-around;padding:7px 4px;max-width:520px;margin:0 auto}
.ni{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 6px;border-radius:var(--r-sm);border:1.5px solid transparent;min-width:44px;cursor:pointer;transition:all .15s}
.ni .ni-i{font-size:15px;line-height:1}
.ni .ni-l{font-size:7px;font-family:var(--mono);color:var(--faint);letter-spacing:.03em;font-weight:400}
.ni.active .ni-l{font-weight:700}

/* ── Sheet (bottom drawer) ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:200;display:none;align-items:flex-end}
.overlay.open{display:flex}
.sheet{background:var(--bg);border-radius:24px 24px 0 0;width:100%;max-height:92vh;overflow:auto;padding:20px 20px 50px}
.sh{width:40px;height:4px;background:#E8E0D8;border-radius:2px;margin:0 auto 16px}
.s-title{font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:4px}
.s-sub{font-size:13px;color:var(--dim);margin-bottom:18px}

/* ── Auth / Onboarding ── */
#auth-screen,#ob-screen{min-height:100vh;display:flex;flex-direction:column;padding:0 24px 40px;position:relative;overflow:hidden;background:var(--bg)}
.blob{position:absolute;border-radius:50%;pointer-events:none}
.blob1{width:300px;height:300px;background:radial-gradient(circle,#FCE4EC80 0%,transparent 70%);top:-80px;right:-60px}
.blob2{width:200px;height:200px;background:radial-gradient(circle,#FBE9E780 0%,transparent 70%);bottom:80px;left:-40px}
.logo-wrap{display:flex;align-items:center;gap:10px;padding:44px 0 30px}
.logo-icon{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#F06292,#FF7043);display:flex;align-items:center;justify-content:center;font-size:17px}
.logo-name{font-family:var(--serif);font-size:21px;font-weight:700}
.logo-sub{font-size:9px;color:var(--faint);font-family:var(--mono)}
.ob-dots{display:flex;gap:5px;margin-bottom:32px}
.ob-dot{flex:1;height:3px;border-radius:2px;background:var(--border);transition:background .3s}
.ob-dot.on{background:#F06292}
.field-label{font-size:11px;color:var(--dim);font-family:var(--mono);margin-bottom:7px}
.field-in{width:100%;background:var(--white);border:1.5px solid var(--border2);border-radius:var(--r);color:var(--text);padding:13px 16px;font-size:15px;outline:none;transition:border-color .15s}
.field-in:focus{border-color:#F06292}
.opt-btn{width:100%;padding:13px 16px;background:var(--white);border:1.5px solid var(--border2);border-radius:var(--r);color:var(--mid);cursor:pointer;text-align:left;font-size:14px;transition:all .18s}
.opt-btn.sel{background:#FCE4EC;border-color:#F06292;color:#C2185B;font-weight:600}
.rv{font-size:32px;font-weight:700;color:#F06292;font-family:var(--mono);text-align:center;display:block}

/* ── Tab bar ── */
.tab-row{display:flex;gap:6px}
.tab{flex:1;padding:9px 4px;background:var(--tag-bg);border:1.5px solid transparent;border-radius:var(--r-sm);color:var(--dim);font-size:10px;cursor:pointer;font-family:var(--mono);font-weight:400;transition:all .15s;text-align:center}
.tab.on{font-weight:700}

/* ── Stick figure canvas ── */
.fig-wrap{background:var(--tag-bg);border:1.5px solid var(--border2);border-radius:var(--r);overflow:hidden}
.fig-wrap canvas{display:block;width:100%;height:auto}
.fig-cue{padding:7px 10px;background:rgba(255,255,255,.75);font-family:var(--serif);font-style:italic;font-size:12px;color:var(--mid);text-align:center;min-height:32px}

/* ── Calendar ── */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:0 10px 14px}
.cal-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;position:relative;cursor:pointer;border:2px solid transparent}
.cal-num{font-size:11px;font-family:var(--mono);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.cal-dot{width:4px;height:4px;border-radius:50%;margin-top:1px}
.cal-period{position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:#E91E63}

/* ── Heatmap ── */
.hmap{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.hcell{aspect-ratio:1;border-radius:6px;border:1.5px solid transparent;cursor:pointer}

/* ── Workout session full-screen ── */
#ws{position:fixed;inset:0;background:var(--bg);z-index:300;overflow:auto;display:none}
#ws.open{display:block}
.ws-hd{position:sticky;top:0;background:rgba(255,250,247,.97);border-bottom:1.5px solid var(--border);backdrop-filter:blur(20px);z-index:10;padding:14px 20px}

/* ── Stars ── */
.stars{font-size:11px;letter-spacing:1px}

/* ── Toast ── */
#toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-80px);background:var(--text);color:#fff;padding:12px 22px;border-radius:30px;font-size:13px;z-index:999;transition:transform .3s;white-space:nowrap;box-shadow:var(--sh-lg)}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ── Install banner ── */
#install-banner{display:none;position:fixed;bottom:88px;left:16px;right:16px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--sh-lg);z-index:100;align-items:center;gap:12px}
#install-banner.show{display:flex}
.ib-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#F06292,#FF7043);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}

/* ── Utility ── */
.divider{height:1px;background:var(--border);margin:12px 0}
.tc{text-align:center}