:root{
  --teal:#17A2A2;
  --teal-soft:#e3f3f3;
  --copper:#CD7F32;
  --copper-soft:#f7ecdf;
  --charcoal:#2C3E50;
  --cream:#FBF8F3;
  --card:#ffffff;
  --line:rgba(44,62,80,.10);
  --muted:rgba(44,62,80,.55);
  --shadow:0 6px 24px rgba(44,62,80,.08), 0 1px 2px rgba(44,62,80,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Source Sans 3',system-ui,sans-serif;
  color:var(--charcoal);
  background:var(--cream);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(23,162,162,.07), transparent 60%),
    radial-gradient(90% 60% at 100% 0%, rgba(205,127,50,.05), transparent 55%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:480px;margin:0 auto;padding:22px 16px 48px;}

/* header */
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin:0 0 2px 2px;
}
.topline{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:18px;}
.month{font-family:'Crimson Pro',Georgia,serif;font-size:30px;font-weight:700;line-height:1;margin:0;}
.saved{font-size:11px;color:var(--muted);}

/* cards */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:20px;margin-bottom:14px;
  opacity:0;transform:translateY(10px);
  animation:rise .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.card.mt16{margin-top:16px;}
.card:nth-child(1){animation-delay:.02s}
.card:nth-child(2){animation-delay:.08s}
.card:nth-child(3){animation-delay:.14s}
.card:nth-child(4){animation-delay:.20s}
.card:nth-child(5){animation-delay:.26s}
@keyframes rise{to{opacity:1;transform:none}}

.label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 2px;}

/* hero ring */
.hero{text-align:center;padding-top:24px;padding-bottom:22px;}
.ringwrap{position:relative;width:184px;height:184px;margin:6px auto 4px;}
svg.ring{transform:rotate(-90deg);display:block;}
.ring-bg{stroke:var(--teal-soft);}
.ring-fg{stroke:var(--teal);stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1),stroke .4s ease;}
.hit .ring-fg{stroke:var(--copper);}
.ring-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.bignum{font-family:'Crimson Pro',serif;font-weight:700;font-size:62px;line-height:.9;}
.bignum .of{font-size:26px;color:var(--muted);font-weight:400;}
.hit .bignum{color:var(--copper);}
.hero-cap{font-size:14px;color:var(--muted);margin:2px 0 16px;}
.bump{animation:bump .32s cubic-bezier(.2,1.4,.4,1);}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}

.pill{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;
  background:var(--copper-soft);color:var(--copper);padding:4px 12px;border-radius:999px;
  margin-bottom:14px;opacity:0;transform:translateY(4px);transition:.3s;
}
.hit .pill{opacity:1;transform:none;}

.addbtn{
  width:100%;border:none;border-radius:14px;background:var(--teal);color:#fff;
  font-family:'Source Sans 3',sans-serif;font-size:17px;font-weight:700;
  padding:15px;cursor:pointer;box-shadow:0 4px 14px rgba(23,162,162,.32);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.hit .addbtn{background:var(--copper);box-shadow:0 4px 14px rgba(205,127,50,.32);}
.addbtn:active{transform:scale(.97);}
.addbtn:disabled{opacity:.6;cursor:default;}
.undo{
  margin-top:10px;background:none;border:none;color:var(--muted);font-size:13px;
  font-family:inherit;cursor:pointer;padding:6px 10px;
}

.substat{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.substat .stxt{font-size:14px;color:var(--charcoal);font-weight:600;}
.substat .stxt b{font-family:'Crimson Pro',serif;font-size:22px;font-weight:700;}
.ministep{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;
  color:var(--charcoal);font-size:20px;font-weight:600;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.ministep:active{transform:scale(.94);}

/* section heading */
.sec{font-family:'Crimson Pro',serif;font-size:20px;font-weight:700;margin:24px 4px 10px;}
.sec small{display:block;font-family:'Source Sans 3',sans-serif;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px;}

/* action tiles */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tile{
  background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:15px 14px 12px;position:relative;cursor:pointer;user-select:none;
  transition:transform .08s ease, border-color .2s ease;
}
.tile:active{transform:scale(.975);}
.tile.done{border-color:var(--copper);background:linear-gradient(180deg,#fff, #fffaf3);}
.tile .tname{font-size:13px;font-weight:600;color:var(--charcoal);min-height:34px;}
.tile .tcount{font-family:'Crimson Pro',serif;font-size:34px;font-weight:700;line-height:1;margin-top:6px;}
.tile.done .tcount{color:var(--copper);}
.tile .ttarget{font-size:14px;color:var(--muted);font-weight:400;}
.tile .minus{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--line);background:#fff;color:var(--muted);font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.tile .minus:active{transform:scale(.9);}

/* week + toggles */
.checkrow{
  display:flex;align-items:flex-start;gap:13px;padding:13px 2px;cursor:pointer;user-select:none;
  border-bottom:1px solid var(--line);
}
.checkrow:last-child{border-bottom:none;}
.box{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:2px solid var(--teal);
  display:flex;align-items:center;justify-content:center;margin-top:1px;transition:.18s;
}
.box svg{width:15px;height:15px;opacity:0;transform:scale(.5);transition:.18s;}
.checkrow.on .box{background:var(--teal);}
.checkrow.on .box svg{opacity:1;transform:none;}
.checkrow .ctxt{font-size:15px;font-weight:600;}
.checkrow .csub{font-size:12.5px;color:var(--muted);font-weight:400;}
.checkrow.on .ctxt{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(44,62,80,.3);}

/* collapsible setup */
.acc-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.acc-head-label{margin:0;}
.acc-head .chev{transition:transform .25s ease;color:var(--muted);}
.acc.open .chev{transform:rotate(180deg);}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.acc.open .acc-body{max-height:420px;}
.acc-body-inner{padding-top:8px;}
.flag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--copper);background:var(--copper-soft);padding:2px 7px;border-radius:6px;margin-left:6px;vertical-align:middle;}

/* history */
.hist{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;-webkit-overflow-scrolling:touch;}
.hchip{flex:0 0 auto;background:var(--teal-soft);border-radius:12px;padding:8px 13px;text-align:center;min-width:64px;}
.hchip .hm{font-size:11px;color:var(--charcoal);font-weight:700;letter-spacing:.04em;}
.hchip .hc{font-family:'Crimson Pro',serif;font-size:22px;font-weight:700;color:var(--teal);line-height:1;margin-top:2px;}
.hchip .hl{font-size:10px;color:var(--muted);}
.emptyhist{font-size:13px;color:var(--muted);}

/* footer */
.foot{text-align:center;margin-top:22px;}
.errbox{text-align:center;color:var(--muted);padding:60px 16px;font-size:15px;}
.loading{text-align:center;color:var(--muted);padding:60px 0;font-size:15px;}