:root{
  --bg:#FAF9F5; --surface:#FFFFFF; --border:#E8E6DD;
  --clay:#CC785C; --clay-dark:#B05E40; --clay-soft:#D9926F;
  --ink:#1A1A18; --muted:#6B6862; --track:#EAE7DD; --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';-webkit-font-smoothing:antialiased}
.muted{color:var(--muted)}
.app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;
  padding:calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 22px);
  display:flex;flex-direction:column;gap:16px}

.gear{position:absolute;top:calc(env(safe-area-inset-top) + 22px);right:22px;
  background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;line-height:1}

.goal{text-align:center;padding-top:6px}
.goal__prefix{font-size:14px;color:var(--muted);margin-bottom:4px}
.goal__name{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:30px;letter-spacing:-0.01em}
.goal__figures{font-family:'Fraunces',serif;font-size:18px;margin-top:6px}
.bar{height:14px;background:var(--track);border-radius:999px;overflow:hidden;margin:12px 0 6px}
.bar__fill{height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--clay),var(--clay-soft));
  transition:width .6s cubic-bezier(.2,.8,.2,1)}
.goal__remaining{font-size:14px}
.goal__eta{font-size:13px}

.totals{text-align:center;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px}
.totals__label{font-size:12px;text-transform:uppercase;letter-spacing:.09em}
.totals__big{font-family:'Fraunces',serif;font-weight:600;font-size:42px;line-height:1.05;margin:6px 0;display:inline-block}
.totals__week{font-size:14px}

.chart{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px 12px;display:flex;flex-direction:column;flex:1 1 0;min-height:0}
.chart__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.chart__title{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.chart__toggle{display:inline-flex;background:var(--track);border-radius:999px;padding:3px}
.chart__toggle button{appearance:none;border:none;background:none;cursor:pointer;font-family:'Inter',sans-serif;
  font-size:12px;font-weight:600;color:var(--muted);padding:5px 13px;border-radius:999px;transition:background .15s ease,color .15s ease}
.chart__toggle button.is-active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chart__svg{display:block;width:100%;height:100%}
.chart__line{fill:none;stroke:var(--clay);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart__goal{stroke:var(--clay-soft);stroke-width:1.5;stroke-dasharray:4 4;opacity:.75}
.chart__dot{fill:var(--clay);stroke:var(--surface);stroke-width:2}
.chart__range{text-align:center;font-size:12px;margin-top:6px}

.fly{position:fixed;left:0;top:0;transform:translate(-50%,-50%);opacity:1;z-index:60;pointer-events:none;
  font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--clay);will-change:transform,opacity;
  transition:transform .62s cubic-bezier(.34,.8,.3,1),opacity .62s ease-in}

.actions__prompt{margin-top:auto;text-align:center;color:var(--muted);font-size:15px;margin-bottom:4px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{appearance:none;cursor:pointer;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;font-family:'Inter',sans-serif;
  display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink);
  transition:transform .08s ease,background .15s ease,border-color .15s ease}
.btn:active{transform:scale(.97);background:#FBEDE7;border-color:var(--clay)}
.btn__emoji{font-size:24px;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.btn__label{font-size:16px;font-weight:600}
.btn__amt{font-size:14px;color:var(--muted)}
.action{position:relative;display:flex}
.action .btn{flex:1}
.action__minus{position:absolute;top:8px;right:8px;width:28px;height:28px;
  border-radius:999px;border:1px solid var(--border);background:var(--bg);
  color:var(--muted);font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:opacity .2s ease,transform .1s ease;font-family:'Inter',sans-serif}
.action__minus:active{transform:scale(.9)}
.action__minus:disabled{opacity:.25;cursor:default}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);transform:translateX(-50%);
  background:var(--ink);color:#fff;border-radius:999px;padding:12px 16px;display:flex;align-items:center;gap:16px;
  font-size:14px;box-shadow:0 8px 28px rgba(0,0,0,.18);animation:rise .2s ease}
.toast[hidden]{display:none}
.toast button{background:none;border:none;color:var(--clay-soft);font-weight:600;cursor:pointer;font-size:14px}
@keyframes rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

.pop{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}

.ritual{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:ritualIn .4s ease}
.ritual[hidden]{display:none}
@keyframes ritualIn{from{opacity:0}to{opacity:1}}
.ritual__ring{width:168px;height:168px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,color-mix(in srgb,var(--surface) 70%,var(--clay-soft)),color-mix(in srgb,var(--clay-soft) 30%,transparent));
  border:2px solid var(--clay-soft);transform:scale(.8);
  transition:transform 4s ease-in-out}
.ritual__ring.is-inhale{transform:scale(1.25)}
.ritual__ring.is-exhale{transform:scale(.8)}
.ritual__glyph{font-size:48px;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.ritual__text{font-family:'Fraunces',serif;font-size:21px;font-weight:500;color:var(--ink);
  text-align:center;max-width:300px;padding:0 24px;transition:opacity .5s ease;margin:0}
.ritual__skip{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;
  text-decoration:underline;font-family:'Inter',sans-serif}
@media (prefers-reduced-motion: reduce){.ritual__ring{transition:none}.ritual{animation:none}}

.app.celebrate .goal__name::after{content:" 🎉"}
.app.celebrate .bar__fill{background:linear-gradient(90deg,var(--clay-dark),var(--clay))}

@media (prefers-reduced-motion: reduce){
  .fly{transition:none}
  .bar__fill{transition:none}
  .btn{transition:none}
}

.sheet{position:relative;border:none;border-radius:24px 24px 0 0;padding:24px;width:100%;max-width:480px;margin:auto auto 0;background:var(--bg);color:var(--ink)}
.sheet::backdrop{background:rgba(26,26,24,.4)}
.sheet h2{font-family:'Fraunces',serif;font-weight:600;margin-bottom:18px}
.sheet label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:13px;color:var(--muted)}
.sheet input{font-size:17px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);font-family:'Inter',sans-serif}
.sheet hr{border:none;border-top:1px solid var(--border);margin:6px 0 16px}
.sheet__actions{display:flex;align-items:center;gap:18px;margin-top:6px}
.sheet button[value="save"]{background:var(--clay);color:#fff;border:none;border-radius:12px;padding:12px 24px;font-size:16px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif}
.link{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;font-family:'Inter',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';text-align:left}
.link--danger{color:#B0403E;margin-top:12px;display:block}

.pro{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px}
.pro__title{font-family:'Fraunces',serif;font-weight:600;font-size:17px;display:flex;align-items:center;gap:8px}
.pro__badge{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--clay);background:#FBEDE7;border-radius:999px;padding:3px 9px}
.pro__perks{list-style:none;margin:12px 0 16px;display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--ink)}
.pro__buy{display:block;width:100%;background:var(--clay);color:#fff;border:none;border-radius:12px;
  padding:13px;font-size:16px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif}
.pro__buy:active{background:var(--clay-dark)}
#restorePro{display:block;margin:10px auto 0;text-align:center}
#proUnlocked .link{display:block;font-size:15px}
.tip{text-align:center;margin-top:20px}
.tip .link{display:inline-block;text-align:center}

.goals{margin-top:8px}
.goals__label{font-size:12px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px}
.goals__list{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.goals__item{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:14px;cursor:pointer}
.goals__item.is-active{border-color:var(--clay);color:var(--clay)}
#addGoal{display:block}

[data-theme="dark"]{
  --bg:#1A1A18; --surface:#26251F; --border:#3A372F;
  --clay:#E0805F; --clay-dark:#CC785C; --clay-soft:#E8A283;
  --ink:#F5F3EC; --muted:#A7A399; --track:#332F27;
}
[data-theme="sage"]{
  --bg:#F3F5F0; --surface:#FFFFFF; --border:#DFE5D8;
  --clay:#6E8B6A; --clay-dark:#566F53; --clay-soft:#90A98C;
  --ink:#1E231C; --muted:#5F6B5B; --track:#E2E8DC;
}
.themes{display:flex;gap:10px;margin-top:8px}
.theme-swatch{width:34px;height:34px;border-radius:999px;border:2px solid var(--border);cursor:pointer}
.theme-swatch.is-active{border-color:var(--ink)}
.theme-swatch:disabled{opacity:.4;cursor:not-allowed}
.theme-swatch[data-theme="classic"]{background:#CC785C}
.theme-swatch[data-theme="dark"]{background:#26251F}
.theme-swatch[data-theme="sage"]{background:#6E8B6A}
.themes__prolock{margin-top:8px}
.sheet .notify__row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0; }
.notify__row input[type="time"] { font: inherit; }
.notify__hint { font-size: .85rem; }

#chart{flex:1;min-height:120px}
.rate{text-align:center;margin:2px 0 18px}
.rate .link{display:inline-block;text-align:center}
.sheet__close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.sheet__close:active{transform:scale(.92)}