/* =========================================================================
   FastFlow — Styles
   Aesthetic: emerald gradient + warm cream + soft white cards
   ========================================================================= */

:root{
  /* palette */
  --emerald:      #12C29A;
  --emerald-deep: #0BA986;
  --emerald-dark: #0A8F73;
  --mint:         #E7F8F2;
  --cream:        #F7F1E7;
  --cream-2:      #FBF6EE;
  --ink:          #2C3B3A;
  --ink-soft:     #5C6B6A;
  --muted:        #93A19F;
  --line:         #ECE6DA;
  --white:        #FFFFFF;
  --amber:        #F5A623;
  --coral:        #F0687A;
  --lime:         #8FD14F;
  --danger:       #E5645B;

  --shadow-sm: 0 2px 8px rgba(22,45,40,.06);
  --shadow-md: 0 10px 30px rgba(22,45,40,.10);
  --shadow-lg: 0 20px 50px rgba(22,45,40,.16);

  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;

  --font-ui:      "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", Georgia, serif;

  --app-max: 460px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--emerald-dark);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--emerald); color:#fff; }

/* ---- App shell --------------------------------------------------------- */
.app{
  position:relative;
  max-width:var(--app-max);
  min-height:100vh;
  margin:0 auto;
  background:var(--cream);
  box-shadow:var(--shadow-lg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.screen{ display:none; flex:1 1 auto; padding-bottom:96px; animation:rise .32s ease both; }
.screen.active{ display:block; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Top gradient hero used by several screens */
.hero{
  background:linear-gradient(160deg,var(--emerald) 0%,var(--emerald-deep) 60%,var(--emerald-dark) 100%);
  color:#fff;
  padding:18px 20px 26px;
  border-bottom-left-radius:30px;
  border-bottom-right-radius:30px;
  position:relative;
}
.topbar{ display:flex; align-items:center; justify-content:space-between; }
.topbar .brand{ display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.02em; }
.brand .logo{
  width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.18);
  display:grid; place-items:center; backdrop-filter:blur(4px);
}
.brand .logo svg{ width:18px; height:18px; }
.icon-btn{
  width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.16);
  display:grid; place-items:center; transition:background .2s, transform .1s;
}
.icon-btn:hover{ background:rgba(255,255,255,.26); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn svg{ width:20px; height:20px; }

.greeting{ margin-top:16px; }
.greeting .eyebrow{ font-size:13px; opacity:.85; font-weight:600; }
.greeting h1{ font-family:var(--font-display); font-weight:600; font-size:26px; font-style:italic; margin-top:2px; }

/* ---- Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:800; font-size:16px; letter-spacing:-.01em;
  padding:15px 22px; border-radius:16px; width:100%;
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--emerald); color:#fff; box-shadow:0 10px 22px rgba(18,194,154,.35); }
.btn-primary:hover{ box-shadow:0 12px 26px rgba(18,194,154,.45); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-ghost{ background:var(--white); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn-danger{ background:#fff; color:var(--danger); box-shadow:var(--shadow-sm); }
.btn-sm{ width:auto; padding:10px 16px; font-size:14px; border-radius:12px; }

/* ---- Cards ------------------------------------------------------------- */
.wrap{ padding:18px 18px 6px; }
.card{ background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:20px; }
.card + .card{ margin-top:14px; }
.card-flat{ background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:16px; }
.section-title{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:20px; margin:22px 4px 12px; }
.section-title.on-dark{ color:#fff; }

/* ---- Timer screen ------------------------------------------------------ */
.ring-card{ margin-top:-40px; }
.timer-wrap{ display:flex; flex-direction:column; align-items:center; }
.ring{ position:relative; width:250px; height:250px; }
.ring svg{ transform:rotate(-90deg); width:100%; height:100%; }
.ring .track{ fill:none; stroke:var(--mint); stroke-width:16; }
.ring .prog{ fill:none; stroke:var(--emerald); stroke-width:16; stroke-linecap:round; transition:stroke-dashoffset .6s ease; }
.ring .center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.ring .state{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.ring .time{ font-family:var(--font-ui); font-weight:800; font-size:40px; letter-spacing:-.02em; margin-top:2px; }
.ring .sub{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
.ring.eating .prog{ stroke:var(--amber); }
.ring.eating .track{ stroke:#FCEFD6; }

.plan-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--mint); color:var(--emerald-dark);
  font-weight:800; font-size:14px; padding:8px 14px; border-radius:999px; margin-top:16px;
}
.plan-pill svg{ width:16px; height:16px; }

.startend{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; width:100%; }
.startend .cell{ flex:1; text-align:center; background:var(--cream-2); border-radius:14px; padding:12px 8px; }
.startend .cell .k{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
.startend .cell .v{ font-weight:800; margin-top:3px; font-size:15px; }

.timer-actions{ margin-top:18px; width:100%; }

/* Stage list */
.stages{ list-style:none; }
.stage{
  display:flex; align-items:flex-start; gap:14px; padding:14px 0;
  border-bottom:1px solid var(--line);
}
.stage:last-child{ border-bottom:none; }
.stage .dot{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--mint); color:var(--emerald-dark);
}
.stage.reached .dot{ background:var(--emerald); color:#fff; }
.stage .dot svg{ width:20px; height:20px; }
.stage .txt h4{ font-size:15px; font-weight:800; }
.stage .txt p{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
.stage .when{ margin-left:auto; font-size:12px; font-weight:800; color:var(--muted); white-space:nowrap; }
.stage.reached .when{ color:var(--emerald-dark); }

/* Award strip (like the store screenshots) */
.awards{ display:flex; justify-content:center; gap:26px; margin-top:16px; }
.award{ text-align:center; color:#fff; }
.award .num{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:26px; line-height:1; }
.award .cap{ font-size:11px; opacity:.9; margin-top:4px; max-width:110px; }
.award .stars{ color:#FFD86B; font-size:12px; margin-top:3px; }

/* ---- Coaching cards ---------------------------------------------------- */
.coach{ display:flex; gap:14px; align-items:center; }
.coach + .coach{ margin-top:12px; }
.coach .thumb{ width:56px; height:56px; border-radius:14px; flex:0 0 auto; background:var(--mint); display:grid; place-items:center; }
.coach .thumb svg{ width:26px; height:26px; color:var(--emerald-dark); }
.coach .meta .row{ display:flex; align-items:center; gap:8px; }
.coach .meta .cat{ font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--muted); }
.badge{ font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; }
.badge.free{ background:var(--mint); color:var(--emerald-dark); }
.badge.pro{ background:#FDECC8; color:#B7791F; }
.coach .meta h4{ font-size:15px; font-weight:800; margin-top:2px; }

/* ---- Plan / meals ------------------------------------------------------ */
.dayscroll{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:none; }
.dayscroll::-webkit-scrollbar{ display:none; }
.daychip{
  flex:0 0 auto; width:54px; height:66px; border-radius:16px; background:var(--white);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; transition:transform .15s, box-shadow .2s;
}
.daychip .d{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; }
.daychip .n{ font-size:20px; font-weight:800; }
.daychip.active{ background:var(--emerald); color:#fff; box-shadow:0 10px 20px rgba(18,194,154,.35); transform:translateY(-2px); }
.daychip.active .d{ color:rgba(255,255,255,.85); }
.daychip.done::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); }

.meal{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.meal:last-child{ border-bottom:none; }
.meal .ic{ width:42px; height:42px; border-radius:12px; background:var(--mint); display:grid; place-items:center; flex:0 0 auto; }
.meal .ic svg{ width:22px; height:22px; color:var(--emerald-dark); }
.meal .body h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; }
.meal .body p{ font-size:15px; font-weight:600; margin-top:3px; line-height:1.35; }
.kcal-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--cream-2); font-weight:800; font-size:13px; padding:7px 12px; border-radius:999px; color:var(--ink-soft); }
.tip{
  background:var(--mint); border-radius:16px; padding:14px 16px; margin-top:14px;
  display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--emerald-dark); font-weight:600;
}
.tip svg{ width:20px; height:20px; flex:0 0 auto; }

/* ---- Sleep ------------------------------------------------------------- */
.sleep-hero{ text-align:center; }
.sleep-big{ font-family:var(--font-ui); font-weight:800; font-size:44px; letter-spacing:-.02em; }
.sleep-big small{ font-size:20px; color:var(--ink-soft); font-weight:800; }
.time-inputs{ display:flex; gap:12px; margin-top:16px; }
.time-inputs .field{ flex:1; }
.field label{ font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.field input{
  width:100%; margin-top:6px; padding:13px 14px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--cream-2); font-family:inherit; font-weight:700; font-size:16px; color:var(--ink);
}
.field input:focus{ outline:none; border-color:var(--emerald); background:#fff; }
.bars{ display:flex; align-items:flex-end; gap:8px; height:120px; margin-top:8px; }
.bars .bar{ flex:1; background:var(--mint); border-radius:8px 8px 4px 4px; position:relative; min-height:6px; transition:height .4s; }
.bars .bar span{ position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:10px; font-weight:800; color:var(--muted); }
.bars .bar b{ position:absolute; top:-18px; left:0; right:0; text-align:center; font-size:10px; font-weight:800; color:var(--emerald-dark); }
.bars .bar.good{ background:var(--emerald); }

/* ---- Stats / weight / water -------------------------------------------- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat{ background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:16px; }
.stat .k{ font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.stat .v{ font-weight:800; font-size:26px; margin-top:4px; letter-spacing:-.02em; }
.stat .v small{ font-size:14px; color:var(--ink-soft); font-weight:800; }
.stat .delta{ font-size:12px; font-weight:800; margin-top:4px; }
.delta.down{ color:var(--emerald-dark); }
.delta.up{ color:var(--coral); }

.chart{ margin-top:6px; }
.chart svg{ width:100%; height:150px; overflow:visible; }
.chart .grid line{ stroke:var(--line); stroke-width:1; }
.chart .area{ fill:url(#g-area); }
.chart .line{ fill:none; stroke:var(--emerald); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.chart .pt{ fill:#fff; stroke:var(--emerald); stroke-width:3; }
.chart .goal{ font-weight:800; font-size:11px; }

.water{ display:flex; align-items:center; gap:16px; }
.water .glass{
  width:66px; height:88px; border-radius:12px 12px 16px 16px; border:3px solid var(--emerald);
  position:relative; overflow:hidden; flex:0 0 auto; background:#fff;
}
.water .glass .fill{ position:absolute; left:0; right:0; bottom:0; background:var(--emerald); transition:height .4s; }
.water .info{ flex:1; }
.water .info .amt{ font-weight:800; font-size:24px; }
.water .info .amt small{ font-size:14px; color:var(--ink-soft); }
.water .info .goal{ font-size:13px; color:var(--muted); font-weight:700; margin-top:2px; }
.water .ctrls{ display:flex; gap:8px; }
.round{ width:44px; height:44px; border-radius:50%; background:var(--mint); color:var(--emerald-dark); display:grid; place-items:center; font-weight:800; font-size:22px; transition:transform .1s; }
.round:active{ transform:scale(.9); }
.round.plus{ background:var(--emerald); color:#fff; }

/* ---- Challenges -------------------------------------------------------- */
.challenge{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.challenge:last-child{ border-bottom:none; }
.check{
  width:28px; height:28px; border-radius:9px; border:2px solid var(--line); flex:0 0 auto;
  display:grid; place-items:center; transition:.2s;
}
.check.on{ background:var(--emerald); border-color:var(--emerald); }
.check svg{ width:16px; height:16px; color:#fff; opacity:0; }
.check.on svg{ opacity:1; }
.challenge .c-body h4{ font-size:15px; font-weight:800; }
.challenge.on .c-body h4{ text-decoration:line-through; color:var(--muted); }
.challenge .c-body p{ font-size:12px; color:var(--muted); font-weight:700; }

/* ---- Segmented tabs (inside screens) ----------------------------------- */
.seg{ display:flex; background:var(--cream-2); border-radius:14px; padding:5px; box-shadow:var(--shadow-sm); }
.seg button{ flex:1; padding:10px; border-radius:10px; font-weight:800; font-size:14px; color:var(--muted); transition:.2s; }
.seg button.active{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }

/* ---- Bottom navigation ------------------------------------------------- */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--app-max);
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:flex; padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  z-index:40;
}
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; color:var(--muted); font-weight:700; font-size:11px; transition:color .2s; }
.tab svg{ width:24px; height:24px; }
.tab.active{ color:var(--emerald-dark); }
.tab.active svg{ transform:translateY(-1px); }

/* ---- Onboarding / welcome overlay -------------------------------------- */
.welcome{
  position:fixed; inset:0; z-index:100; max-width:var(--app-max); margin:0 auto;
  background:linear-gradient(165deg,var(--emerald) 0%,var(--emerald-deep) 55%,var(--emerald-dark) 100%);
  color:#fff; display:flex; flex-direction:column; padding:34px 26px 26px; overflow-y:auto;
}
.welcome.hidden{ display:none; }
.welcome .wlogo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; }
.welcome .wlogo .logo{ width:34px; height:34px; }
.welcome h2{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:34px; line-height:1.1; margin-top:auto; }
.welcome p.lead{ font-size:16px; opacity:.92; margin-top:12px; line-height:1.5; }
.welcome .feat{ display:flex; gap:12px; align-items:center; margin-top:22px; font-weight:700; }
.welcome .feat .fi{ width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.16); display:grid; place-items:center; }
.welcome .feat .fi svg{ width:20px; height:20px; }
.welcome .actions{ margin-top:26px; }
.welcome .fineprint{ text-align:center; font-size:12px; opacity:.8; margin-top:12px; }

/* choice chips for onboarding */
.choices{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.choice{ background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.28); border-radius:14px; padding:12px 16px; font-weight:800; transition:.15s; }
.choice.sel{ background:#fff; color:var(--emerald-dark); border-color:#fff; }

/* ---- Toast ------------------------------------------------------------- */
.toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px; font-weight:700; font-size:14px;
  opacity:0; pointer-events:none; transition:.3s; z-index:60; box-shadow:var(--shadow-md);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- Modal (edit plan / weight) ---------------------------------------- */
.sheet-backdrop{ position:fixed; inset:0; background:rgba(20,30,28,.45); opacity:0; pointer-events:none; transition:.25s; z-index:80; }
.sheet-backdrop.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:50%; bottom:0; transform:translateX(-50%) translateY(100%);
  width:100%; max-width:var(--app-max); background:var(--cream); border-radius:26px 26px 0 0;
  padding:22px 20px calc(24px + env(safe-area-inset-bottom)); z-index:90; transition:transform .3s ease;
  box-shadow:var(--shadow-lg);
}
.sheet.open{ transform:translateX(-50%) translateY(0); }
.sheet .grabber{ width:44px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 16px; }
.sheet h3{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:22px; margin-bottom:14px; }
.plan-option{ display:flex; align-items:center; gap:14px; padding:14px; background:#fff; border-radius:16px; box-shadow:var(--shadow-sm); margin-bottom:10px; transition:.15s; border:2px solid transparent; }
.plan-option.sel{ border-color:var(--emerald); }
.plan-option .po-label{ font-weight:800; font-size:18px; }
.plan-option .po-tag{ font-size:11px; font-weight:800; color:var(--emerald-dark); background:var(--mint); padding:3px 8px; border-radius:999px; }
.plan-option .po-blurb{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.plan-option .po-right{ margin-left:auto; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; }
.plan-option.sel .po-right{ border-color:var(--emerald); background:var(--emerald); }
.plan-option.sel .po-right svg{ opacity:1; }
.plan-option .po-right svg{ width:14px; height:14px; color:#fff; opacity:0; }

/* utilities */
.center{ text-align:center; }
.muted{ color:var(--ink-soft); }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.row-split{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

@media (min-width:520px){
  .app{ margin:20px auto; min-height:calc(100vh - 40px); border-radius:34px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ================== RECIPE ================== */
/* Meal row becomes tappable */
.meal.tappable{
  width:100%; text-align:left; cursor:pointer; background:transparent;
  border:none; font-family:inherit; transition:.15s;
}
.meal.tappable:hover{ background:rgba(18,194,154,.05); }
.meal.tappable:active{ transform:scale(.99); }
.meal-meta{
  display:block; margin-top:4px; font-size:12px; font-weight:700;
  color:var(--muted); letter-spacing:.02em;
}
.meal .chev{
  margin-left:auto; align-self:center; flex-shrink:0;
  width:18px; height:18px; color:var(--muted);
}
.meal .chev svg{ width:100%; height:100%; }

/* Taller sheet with its own scroll — recipes are long */
.sheet-tall{ max-height:88vh; display:flex; flex-direction:column; }
.r-scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; margin:0 -4px; padding:0 4px; }

.r-eyebrow{
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--emerald); margin-bottom:4px;
}
#recipeName{ margin-bottom:10px; }

.r-meta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.r-meta span{
  font-size:12px; font-weight:700; color:var(--muted);
  background:#F2EDE3; padding:5px 10px; border-radius:8px;
}

.r-head{
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:18px 0 10px;
}
.r-head:first-child{ margin-top:0; }

.r-ing{ list-style:none; padding:0; margin:0; }
.r-ing li{
  position:relative; padding:8px 0 8px 20px; font-size:14.5px; line-height:1.5;
  border-bottom:1px solid var(--line); color:var(--ink);
}
.r-ing li:last-child{ border-bottom:none; }
.r-ing li::before{
  content:""; position:absolute; left:2px; top:15px;
  width:6px; height:6px; border-radius:50%; background:var(--emerald);
}

.r-steps{ list-style:none; padding:0; margin:0; counter-reset:step; }
.r-steps li{
  position:relative; padding:0 0 16px 34px; font-size:14.5px; line-height:1.6;
  counter-increment:step; color:var(--ink);
}
.r-steps li::before{
  content:counter(step); position:absolute; left:0; top:0;
  width:23px; height:23px; border-radius:50%;
  background:var(--emerald); color:#fff;
  font-size:12px; font-weight:800; display:grid; place-items:center;
}
/* connecting line between steps */
.r-steps li:not(:last-child)::after{
  content:""; position:absolute; left:11px; top:26px; bottom:6px;
  width:1.5px; background:var(--line);
}