:root{
  --bg:#F4F9FC;
  --ink:#0C2B3E;
  --muted:#3F6178;
  --line:#D9E8F1;
  --card:#FFFFFF;
  --aqua:#5FDDD1;
  --cobalt:#1E7FD4;
  --cobalt-d:#1A66C4;
  --cobalt-l:#1A8CC8;
  --danger:#B3261E;
  --r:18px;
  --r-s:12px;
  --shadow:0 6px 24px rgba(12,43,62,.07);
  --num:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Quicksand","Nunito","Segoe UI",system-ui,sans-serif;
  --txt:"Inter","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ring:min(72vw,38dvh,340px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;
  background:
    radial-gradient(560px 560px at 50% 34%,rgba(95,221,209,.18),transparent 70%),
    radial-gradient(760px 520px at 100% 100%,rgba(30,127,212,.10),transparent 70%),
    radial-gradient(900px 420px at 85% -10%,rgba(95,221,209,.22),transparent 70%),
    radial-gradient(700px 380px at -10% 0%,rgba(30,127,212,.10),transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--txt);
  font-size:15px;
  line-height:1.5;
  overscroll-behavior:none;
  overflow-x:hidden;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;min-height:44px}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
h1,h2,h3,p{margin:0}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}

.app{width:100%;max-width:520px;margin:0 auto;padding:16px 16px 40px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px 12px}
.top-title{min-width:0}
.eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
h1{font-family:var(--num);font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.streak{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--cobalt-d);font-size:13px;font-weight:700;white-space:nowrap;min-height:36px}
.streak svg{color:var(--cobalt)}
.streak.is-on{background:linear-gradient(135deg,#E4FAF7,#E3F0FC);border-color:#BFE3EE}

/* tabs */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:999px;margin-bottom:20px}
.tab{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:14px;border-radius:999px;transition:background .2s ease,color .2s ease,transform .12s ease}
.tab.is-active{background:var(--ink);color:#fff}
.tab:active{transform:scale(.96)}
@media (hover:hover){.tab:not(.is-active):hover{color:var(--ink);background:#EEF6FA}}

/* ring */
.today-grid{display:block}
.ring-col{display:flex;flex-direction:column;align-items:center}
.ring-wrap{position:relative;width:var(--ring);aspect-ratio:1;margin:0 auto}
.ring-svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 10px 22px rgba(30,127,212,.18))}
#progress{transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1),opacity .3s}
#water{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
#amp{transform-origin:0 0}
#amp.bump{animation:bump .7s ease-out}
@keyframes bump{0%{transform:scaleY(1)}30%{transform:scaleY(2.4)}100%{transform:scaleY(1)}}
.wave.w1{animation:drift 5s linear infinite}
.wave.w2{animation:drift2 7.5s linear infinite}
@keyframes drift{to{transform:translateX(-100px)}}
@keyframes drift2{from{transform:translateX(-100px)}to{transform:translateX(0)}}
#ripple{transform-box:fill-box;transform-origin:center}
#ripple.go{animation:ripple .9s ease-out}
@keyframes ripple{from{opacity:.85;transform:scale(.3)}to{opacity:0;transform:scale(2.3)}}

.ring-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62%;padding:12px 8px;text-align:center;border-radius:22px;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 8px 24px rgba(12,43,62,.10);
}
.big-row{display:flex;align-items:baseline;justify-content:center;gap:4px}
.big{font-family:var(--num);font-weight:800;font-size:calc(var(--ring) * .15);line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.unit{font-family:var(--num);font-weight:700;font-size:calc(var(--ring) * .06);color:var(--muted)}
.of{font-size:13px;color:var(--muted);font-weight:600;margin-top:2px}
.pct{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;background:#E3F0FC;color:var(--cobalt-d);font-weight:800;font-size:12px;font-variant-numeric:tabular-nums}
.remaining{margin-top:16px;font-size:16px;color:var(--muted);text-align:center;font-weight:500}
.remaining strong{font-family:var(--num);font-size:20px;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

/* actions */
.actions-col{margin-top:16px}
.chips{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px}
.chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:64px;padding:8px 6px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);color:var(--ink);
  box-shadow:var(--shadow);
  transition:transform .12s ease,box-shadow .2s ease,background .2s;
}
.chip-amt{font-family:var(--num);font-weight:800;font-size:18px;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.chip-amt i{font-style:normal;font-size:12px;font-weight:700;opacity:.8}
.chip-lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.75}
.chip.primary{background:linear-gradient(135deg,var(--cobalt-l),var(--cobalt-d));border-color:transparent;color:#fff;min-height:72px;box-shadow:0 10px 24px rgba(30,102,196,.32)}
.chip.primary .chip-amt{font-size:21px}
.chip:active{transform:scale(.95)}
@media (hover:hover){.chip:hover{box-shadow:0 10px 26px rgba(12,43,62,.13)}}

.custom{display:flex;gap:8px;margin-top:12px}
.custom input,.stepper input{
  flex:1;min-width:0;min-height:48px;padding:0 14px;font-size:16px;
  border-radius:var(--r-s);border:1px solid var(--line);background:#fff;color:var(--ink);
}
.custom input::placeholder{color:#7C95A5}

.btn{min-height:48px;padding:0 20px;border-radius:var(--r-s);border:1px solid transparent;font-weight:700;font-size:15px;transition:transform .12s ease,background .2s}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--cobalt-l),var(--cobalt-d));color:#fff}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-danger{background:#fff;color:var(--danger);border-color:#EBC5C2}
.btn-danger-solid{background:var(--danger);color:#fff}
.btn.wide{width:100%}
.field-error{min-height:18px;margin-top:4px;color:var(--danger);font-size:13px;font-weight:600}

.log-head{display:flex;align-items:center;justify-content:space-between;margin:12px 0 8px}
h2{font-family:var(--num);font-size:18px;font-weight:800;letter-spacing:-.01em}
.undo{display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:13px;transition:transform .12s ease,opacity .2s}
.undo:active{transform:scale(.95)}
.undo:disabled{opacity:.45;cursor:default}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.log li{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);animation:slidein .3s ease-out}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.log .t{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.log .a{font-family:var(--num);font-weight:800;font-variant-numeric:tabular-nums}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:20px 16px;color:var(--muted);background:rgba(255,255,255,.6);border:1px dashed #BFD6E3;border-radius:var(--r)}
.empty svg{color:var(--cobalt)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}

/* week */
.chart{position:relative;display:flex;gap:8px;height:220px;padding-top:6px}
.bar-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.bar-val{height:22px;line-height:22px;font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{width:100%;max-width:34px;height:calc((100% - 22px) * var(--p));min-height:4px;border-radius:10px 10px 6px 6px;background:linear-gradient(180deg,#B5EBE8,#8CBFE8);transition:height .6s cubic-bezier(.22,1,.36,1)}
.bar.met{background:linear-gradient(180deg,var(--aqua),var(--cobalt))}
.bar.zero{background:var(--line)}
.is-today .bar-val{color:var(--ink)}
.goal-line{position:absolute;left:0;right:0;border-top:2px dashed rgba(12,43,62,.35);pointer-events:none;z-index:2}
.goal-tag{position:absolute;right:0;bottom:2px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);padding:0 6px;border-radius:6px;line-height:16px}
.bar-labels{display:flex;gap:8px;margin-top:8px}
.bar-lab{flex:1;min-width:0;text-align:center;line-height:1.25}
.bar-lab b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.bar-lab span{font-size:12px;color:var(--muted)}
.bar-lab.is-today b,.bar-lab.is-today span{color:var(--ink)}
.bar-lab.is-today b{border-bottom:2px solid var(--cobalt);display:inline-block;padding-bottom:1px}
.week-empty{margin-top:16px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat-v{font-family:var(--num);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* settings */
.settings{display:flex;flex-direction:column;gap:24px}
.setting-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.stepper{display:flex;gap:8px}
.stepper input{text-align:center;font-family:var(--num);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.step{width:48px;min-width:48px;border-radius:var(--r-s);border:1px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .12s ease}
.step:active{transform:scale(.92)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{border-radius:var(--r-s);border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;transition:transform .12s ease}
.opt:active{transform:scale(.95)}
.opt[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#EEF6FA;border-radius:var(--r-s)}
.seg-btn{border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:700;font-size:13px;padding:0 6px}
.seg-btn[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(12,43,62,.1)}
.seg-btn:active{transform:scale(.96)}
.hint{margin-top:8px;color:var(--muted);font-size:13px}

/* overlays */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(12,43,62,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden}
.sheet{position:relative;z-index:2;width:100%;max-width:340px;background:#fff;color:var(--ink);border-radius:24px;padding:28px 24px 24px;text-align:center;box-shadow:0 20px 60px rgba(12,43,62,.35);animation:pop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{opacity:0;transform:scale(.88) translateY(12px)}to{opacity:1;transform:none}}
.sheet h2{font-size:24px;margin-bottom:8px}
.sheet p{color:var(--muted);margin-bottom:8px}
.sheet .sheet-streak{color:var(--cobalt-d);font-weight:700;margin-bottom:20px}
.sheet-icon{width:72px;height:72px;margin:-64px auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--aqua),var(--cobalt));box-shadow:0 10px 24px rgba(30,127,212,.4);border:4px solid #fff}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.drops{position:absolute;inset:0;pointer-events:none;z-index:1}
.drop{position:absolute;top:-30px;width:var(--s);height:calc(var(--s) * 1.35);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(180deg,var(--aqua),var(--cobalt));opacity:.9;animation:fall var(--d) var(--dl) ease-in forwards}
@keyframes fall{to{transform:translateY(112vh)}}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:calc(100vw - 32px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:0 10px 30px rgba(12,43,62,.3);animation:slidein .25s ease-out}

/* ---- visual pass overrides ---- */
body::after{
  content:"";position:fixed;left:0;right:0;bottom:0;height:140px;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'><path d='M0 70 C180 30 300 110 520 70 C740 30 900 110 1120 66 C1260 40 1360 60 1440 76 L1440 140 L0 140 Z' fill='%235FDDD1' fill-opacity='.14'/><path d='M0 98 C200 66 340 128 580 96 C800 66 960 128 1180 98 C1300 82 1380 94 1440 102 L1440 140 L0 140 Z' fill='%231E7FD4' fill-opacity='.12'/><circle cx='210' cy='58' r='6' fill='none' stroke='%231E7FD4' stroke-opacity='.25' stroke-width='1.5'/><circle cx='260' cy='30' r='3.5' fill='none' stroke='%235FDDD1' stroke-opacity='.45' stroke-width='1.5'/><circle cx='1180' cy='40' r='7' fill='none' stroke='%231E7FD4' stroke-opacity='.22' stroke-width='1.5'/><circle cx='1230' cy='64' r='4' fill='none' stroke='%235FDDD1' stroke-opacity='.45' stroke-width='1.5'/></svg>") center bottom/100% 100% no-repeat;
}
.wave.w1{stroke:rgba(255,255,255,.9);stroke-width:1.6}
.ring-center{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:28px;
  box-shadow:0 12px 30px rgba(12,43,62,.10);
}
.big{font-size:calc(var(--ring) * .165);letter-spacing:-.045em}
.of{color:var(--muted);font-weight:700;letter-spacing:.04em}
.eyebrow{letter-spacing:.16em;font-weight:700}
.chip-lab{letter-spacing:.16em;opacity:.85}
.chip:not(.primary){border-color:#D5E6F1;box-shadow:0 4px 14px rgba(30,127,212,.08)}
.custom input,.stepper input,.step,.opt,.stat{border-color:#D5E6F1;box-shadow:0 4px 14px rgba(30,127,212,.06)}
.undo{border-color:#D5E6F1;color:var(--ink);box-shadow:0 4px 14px rgba(30,127,212,.08)}
.undo:disabled{opacity:.8;color:var(--muted)}
.custom .btn-ghost{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 6px 16px rgba(12,43,62,.22)}
.btn-ghost{border-color:#D5E6F1}
@media (hover:hover){
  .chip:not(.primary):hover,.undo:not(:disabled):hover,.step:hover,.opt:hover{transform:translateY(-1px);border-color:#B9D6E8}
  .custom input:hover{border-color:#B9D6E8}
  .custom .btn-ghost:hover{background:#15425C;transform:translateY(-1px)}
}
.chip:not(.primary):active,.undo:not(:disabled):active,.step:active,.opt:active{transform:translateY(1px) scale(.96);border-color:#9CC4DE}
.custom .btn-ghost:active{background:#08202F;transform:translateY(1px) scale(.97)}
.log-head h2{font-size:20px;font-weight:800}
.empty{
  background:linear-gradient(160deg,rgba(221,248,244,.85),rgba(222,236,250,.85));
  border:1px solid #C9E2EE;
  box-shadow:0 4px 14px rgba(30,127,212,.06);
}
.empty svg{box-sizing:content-box;padding:12px;border-radius:50%;background:linear-gradient(135deg,#CFF5F0,#CDE3F8);color:var(--cobalt-d)}
.empty p{color:var(--muted);font-weight:500}
@media (min-width:900px){
  body{
    background:
      radial-gradient(560px 560px at 32% 46%,rgba(95,221,209,.18),transparent 70%),
      radial-gradient(760px 520px at 100% 100%,rgba(30,127,212,.10),transparent 70%),
      radial-gradient(900px 420px at 85% -10%,rgba(95,221,209,.22),transparent 70%),
      radial-gradient(700px 380px at -10% 0%,rgba(30,127,212,.10),transparent 70%),
      var(--bg);
    background-attachment:fixed;
  }
}

/* desktop */
@media (min-width:900px){
  :root{--ring:min(420px,56dvh)}
  .app{max-width:1040px;padding:32px 32px 56px}
  h1{font-size:34px}
  .tabs{max-width:420px;margin-left:auto;margin-right:auto}
  .today-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-top:8px}
  .actions-col{margin-top:0}
  #view-week,#view-settings{max-width:640px;margin:0 auto}
}
@media (max-width:360px){
  .chip-amt{font-size:16px}
  .chip.primary .chip-amt{font-size:18px}
  .stat-v{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .wave.w1,.wave.w2{animation:none}
  #water,#progress,.bar{transition:none}
  #amp.bump,#ripple.go,.sheet,.log li,.toast{animation:none}
  .drops{display:none}
  .chip,.btn,.tab,.undo,.step,.opt{transition:none}
}