/* Lifted from mockup.html, which stays the visual reference. */
:root{
  --bg:#E8EBEC;
  --app:#FBFCFC;
  --ink:#16242A;
  --dim:#6A7C82;
  --faint:#9AA9AE;
  --line:#E2E7E8;
  --line2:#D2DADC;
  --accent:#0E6E64;
  --accent-soft:#E2F0ED;
  --on-accent:#FFFFFF;
  --over:#A33B3B;
  --over-soft:#F8E9E7;
  --warn:#9A6B12;
  --warn-soft:#F7EEDA;
  --elaine:#0E6E64;
  --steve:#7C3F60;
  --shadow:0 1px 2px rgba(20,40,45,.06),0 8px 28px rgba(20,40,45,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1114;--app:#141D21;--ink:#E4EBEC;--dim:#93A5AA;--faint:#69797E;
    --line:#222E33;--line2:#2C3A40;--accent:#5FBDB0;--accent-soft:#16312F;--on-accent:#0A1114;
    --over:#E0857C;--over-soft:#33201E;--warn:#DFB367;--warn-soft:#2E2718;
    --elaine:#5FBDB0;--steve:#D294B4;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0A1114;--app:#141D21;--ink:#E4EBEC;--dim:#93A5AA;--faint:#69797E;
  --line:#222E33;--line2:#2C3A40;--accent:#5FBDB0;--accent-soft:#16312F;--on-accent:#0A1114;
  --over:#E0857C;--over-soft:#33201E;--warn:#DFB367;--warn-soft:#2E2718;
  --elaine:#5FBDB0;--steve:#D294B4;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:15px;line-height:1.45;display:flex;justify-content:center;
  padding:1.5rem .75rem 3rem;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--app);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:15px;line-height:1.45;overscroll-behavior:none;
}
/* The app fills the window; sheets and cards position against it. */
#app{
  height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;
  max-width:520px;margin:0 auto;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* header */
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem .7rem .45rem 1rem;
}
.top h1{font-size:1.28rem;font-weight:650;letter-spacing:-.02em;margin:0}
.topr{display:flex;align-items:center;gap:.45rem}
.who{
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--steve);background:color-mix(in srgb,var(--steve) 11%,transparent);
  padding:.2rem .55rem;border-radius:99px;
}
.who.elaine{color:var(--elaine);background:color-mix(in srgb,var(--elaine) 11%,transparent)}
.gear{
  width:32px;height:32px;display:grid;place-items:center;padding:0;
  background:none;border:none;border-radius:9px;cursor:pointer;color:var(--dim);
}
.gear:active{background:var(--line)}
.gear svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* banner */
.banner{
  margin:.1rem 1rem .5rem;padding:.45rem .7rem;
  background:var(--warn-soft);color:var(--warn);
  border-radius:9px;font-size:.79rem;font-weight:550;
  display:flex;align-items:center;gap:.5rem;
}
.banner.bad{background:var(--over-soft);color:var(--over)}
.banner .grow{flex:1}
.banner button{
  font:inherit;font-size:.74rem;font-weight:650;border:none;cursor:pointer;flex:none;
  background:currentColor;padding:.26rem .55rem;border-radius:7px;
}
.banner button span{color:var(--app)}
.dot{width:6px;height:6px;border-radius:99px;background:currentColor;flex:none}

.screen{flex:1;overflow-y:auto;padding-bottom:.5rem;min-height:0}
.hide{display:none !important}

/* ---- ADD ---- */
#s-add{position:relative;display:flex;flex-direction:column;overflow:hidden}

.grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cell{
  background:var(--app);padding:.5rem .8rem .55rem;cursor:pointer;
  display:flex;flex-direction:column;gap:.1rem;min-width:0;
}
.cl{font-size:.64rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.cv{
  font-size:.88rem;font-weight:550;display:flex;justify-content:space-between;
  align-items:center;gap:.4rem;overflow:hidden;white-space:nowrap;
}
.cv .cvt{overflow:hidden;text-overflow:ellipsis}
.cv .cvt.unset{color:var(--faint);font-weight:500}
.cv i{color:var(--faint);font-style:normal;font-size:.8rem;flex:none}

.money{padding:.7rem 1rem .1rem;display:flex;flex-direction:column;gap:.45rem}
.fld{
  width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  background:var(--app);border:1.5px solid var(--line2);border-radius:12px;
  padding:.45rem .75rem .5rem;display:flex;flex-direction:column;gap:.05rem;
}
.fld[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft)}
.fl{font-size:.64rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fld.e .fl{color:var(--elaine)}
.fld.s .fl{color:var(--steve)}
.fv{font-weight:500;letter-spacing:-.02em;display:flex;align-items:baseline}
.fv em{font-style:normal;color:var(--faint);margin-right:.1em}
.fv .sg{margin-right:.04em}
.total .fv{font-size:2.05rem;line-height:1.1}
.total .fv em{font-size:1.1rem}
.split2{display:flex;gap:.45rem}
.split2 .fld{flex:1}
.split2 .fv{font-size:1.15rem}
.split2 .fv em{font-size:.8rem}

.presets{display:flex;gap:.32rem;padding:.6rem 1rem .1rem}
.preset{
  flex:1;border:1px solid var(--line2);background:transparent;color:var(--dim);
  font:inherit;font-size:.735rem;font-weight:600;
  padding:.36rem 0;border-radius:99px;cursor:pointer;
}
.preset[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.mismatch{
  margin:.6rem 1rem 0;padding:.5rem .55rem .5rem .75rem;border-radius:10px;
  background:var(--over-soft);color:var(--over);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.78rem;font-weight:550;
}
.mismatch button{
  font:inherit;font-size:.74rem;font-weight:650;border:none;cursor:pointer;
  background:var(--over);color:var(--app);padding:.28rem .6rem;border-radius:7px;
}

.flagrow{
  display:flex;align-items:center;justify-content:space-between;
  margin:.6rem 1rem 0;padding:.55rem .75rem;
  background:var(--accent-soft);border-radius:11px;
}
.flagrow .t{font-size:.79rem;font-weight:600;color:var(--accent)}
.flagrow .s{font-size:.7rem;color:var(--dim);margin-top:.05rem}
.tog{
  width:42px;height:25px;border-radius:99px;background:var(--accent);
  border:none;position:relative;cursor:pointer;flex:none;
}
.tog[aria-pressed="false"]{background:var(--line2)}
.tog i{position:absolute;top:3px;left:20px;width:19px;height:19px;border-radius:99px;background:#fff;transition:left .16s ease}
.tog[aria-pressed="false"] i{left:3px}

.save{
  margin:auto 1rem 1rem;padding:.85rem;
  background:var(--accent);color:var(--on-accent);border:none;border-radius:13px;
  font:inherit;font-size:.98rem;font-weight:620;cursor:pointer;
}
.save:disabled{background:var(--line2);color:var(--faint);cursor:default}

.padwrap{
  position:absolute;left:0;right:0;bottom:0;background:var(--app);
  border-top:1px solid var(--line2);
  transform:translateY(102%);transition:transform .22s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -6px 22px rgba(20,40,45,.09);
}
#s-add.pad-open .padwrap{transform:translateY(0)}
.padbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.45rem 1rem;border-bottom:1px solid var(--line);
  font-size:.72rem;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);
}
.padbar button{
  font:inherit;font-size:.82rem;font-weight:650;letter-spacing:0;text-transform:none;
  background:none;border:none;color:var(--accent);cursor:pointer;padding:.1rem .2rem;
}
.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.pad button{
  background:var(--app);border:none;font:inherit;font-size:1.3rem;font-weight:450;
  color:var(--ink);padding:.62rem 0;cursor:pointer;font-variant-numeric:tabular-nums;
}
.pad button.fn{grid-row:span 2;font-size:1.15rem;color:var(--dim)}
.pad button:active{background:var(--line)}

/* blocking panels */
.blocker{
  position:absolute;inset:0;z-index:15;background:var(--app);
  display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:0 1.6rem 3rem;
}
.blockmsg{margin:1.2rem 1.25rem;padding:.9rem 1rem;border-radius:12px;background:var(--over-soft);color:var(--over)}
.blocker h3,.blockmsg h3{margin:0;font-size:1.02rem;font-weight:650;letter-spacing:-.01em}
.blocker p,.blockmsg p{margin:0;font-size:.84rem;line-height:1.5}
.blocker p{color:var(--dim)}
.blockmsg p{margin-top:.35rem}
.btn{
  align-self:flex-start;margin-top:.4rem;font:inherit;font-size:.85rem;font-weight:620;
  border:none;border-radius:10px;padding:.55rem .9rem;cursor:pointer;
  background:var(--accent);color:var(--on-accent);
}
.btn.ghost{background:none;color:var(--accent);padding-left:0}
.blockmsg .btn{background:var(--over);color:var(--app)}

/* ---- BUDGET ---- */
.summary{
  display:flex;gap:.5rem;padding:.4rem 1.25rem .9rem;
}
.stat{flex:1}
.stat .k{font-size:.69rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.stat .v{font-size:1.18rem;font-weight:600;letter-spacing:-.015em;margin-top:.05rem}

.segs{display:flex;gap:.3rem;padding:0 1.25rem .8rem}
.seg{
  flex:1;border:none;background:var(--line);color:var(--dim);font:inherit;
  font-size:.81rem;font-weight:600;padding:.42rem 0;border-radius:8px;cursor:pointer;
}
.seg[aria-pressed="true"]{background:var(--ink);color:var(--app)}

.cat{
  padding:.78rem 1.25rem;border-top:1px solid var(--line);cursor:pointer;
}
.cat .l1{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.cat .nm{font-size:.93rem;font-weight:550;letter-spacing:-.005em}
.cat .rm{font-size:.98rem;font-weight:620;flex:none}
.cat .rm.neg{color:var(--over)}
.cat .l2{
  display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  font-size:.745rem;color:var(--dim);margin-top:.3rem;
}
.bar{
  height:3px;border-radius:99px;background:var(--line2);
  margin-top:.45rem;position:relative;overflow:hidden;
}
.bar u{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:99px}
.bar.over u{background:var(--over)}
.bar b{
  position:absolute;top:-2px;width:2px;height:7px;background:var(--faint);border-radius:1px;
}
.tag{
  font-size:.66rem;font-weight:650;padding:.09rem .36rem;border-radius:4px;
  letter-spacing:.02em;flex:none;
}
.tag.o{background:var(--over-soft);color:var(--over)}
.tag.w{background:var(--warn-soft);color:var(--warn)}
.detail{
  margin-top:.6rem;padding:.6rem .75rem;background:var(--warn-soft);
  border-radius:9px;font-size:.76rem;color:var(--warn);line-height:1.5;
}
.legend{padding:.9rem 1.25rem 1.4rem;font-size:.72rem;color:var(--faint);border-top:1px solid var(--line)}

/* ---- RECENT ---- */
.rec{padding:.8rem 1.25rem;border-top:1px solid var(--line);display:flex;gap:.8rem;align-items:flex-start}
.rec .st{width:7px;height:7px;border-radius:99px;margin-top:.45rem;flex:none;background:var(--accent)}
.rec .st.p{background:var(--warn)}
.rec .st.x{background:var(--over)}
.rec .body{flex:1;min-width:0}
.rec .r1{display:flex;justify-content:space-between;gap:.7rem}
.rec .d{font-size:.91rem;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec .a{font-size:.95rem;font-weight:600;flex:none}
.rec .r2{font-size:.745rem;color:var(--dim);margin-top:.15rem}

.cam{
  background:var(--accent-soft);border:none;border-radius:9px;cursor:pointer;
  width:32px;height:32px;display:grid;place-items:center;color:var(--accent);padding:0;
}
.cam svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.fromreceipt{
  margin:.55rem 1rem 0;padding:.5rem .7rem;border-radius:10px;
  background:var(--warn-soft);color:var(--warn);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.765rem;font-weight:550;line-height:1.35;
}
.fromreceipt button{
  font:inherit;font-size:1rem;background:none;border:none;color:inherit;
  cursor:pointer;padding:0 .15rem;opacity:.65;flex:none;
}
.scanning{
  position:absolute;inset:0;z-index:30;background:var(--app);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
}
.spin{
  width:34px;height:34px;border-radius:99px;
  border:2.5px solid var(--line2);border-top-color:var(--accent);
  animation:sp .8s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}
.scanning p{margin:0;font-size:.86rem;color:var(--dim)}

/* picker + settings sheets */
.sheet{
  position:absolute;inset:0;background:var(--app);z-index:20;
  display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .24s cubic-bezier(.32,.72,0,1);
}
.sheet.side{z-index:25;transform:translateX(100%)}
.sheet.open{transform:none}
.sheethead{
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1rem .7rem;border-bottom:1px solid var(--line);
}
.sheethead h2{font-size:1.02rem;font-weight:650;margin:0;flex:1;letter-spacing:-.015em}
.sheethead button{
  font:inherit;font-size:.85rem;font-weight:600;background:none;border:none;
  color:var(--accent);cursor:pointer;padding:.1rem .2rem;
}
.searchwrap{padding:.6rem 1rem .5rem}
.search{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--line);border:1.5px solid transparent;border-radius:10px;
  padding:.55rem .75rem;outline:none;
}
.search:focus{border-color:var(--accent);background:var(--app)}
.search::placeholder{color:var(--faint)}
.grouphead{
  font-size:.64rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);padding:.75rem 1rem .25rem;position:sticky;top:0;background:var(--app);
}
.opt{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.62rem 1rem;border-bottom:1px solid var(--line);cursor:pointer;
  font-size:.92rem;
}
.opt mark{background:var(--accent-soft);color:var(--accent);font-weight:650;border-radius:2px}
.opt .tick{color:var(--accent);font-weight:700;flex:none}
.opt[aria-selected="true"]{background:var(--accent-soft)}
.empty{padding:2rem 1rem;text-align:center;color:var(--faint);font-size:.85rem}
.optlist{flex:1;overflow-y:auto;min-height:0}

.srow{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.6rem 1rem;border-bottom:1px solid var(--line);font-size:.9rem;
}
.srow .sk{min-width:0}
.srow .sk div:first-child{font-weight:550}
.srow .sub{font-size:.74rem;color:var(--dim);margin-top:.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .sv{color:var(--dim);flex:none;text-align:right}
.srow .sv.bad{color:var(--over);font-weight:600}
.srow button{
  font:inherit;font-size:.84rem;font-weight:600;background:none;border:none;
  color:var(--accent);cursor:pointer;padding:.1rem 0;flex:none;
}
.srow button.dim{color:var(--dim)}
.snote{padding:.55rem 1rem .2rem;font-size:.74rem;color:var(--faint);line-height:1.45}
.serr{
  margin:.5rem 1rem .2rem;padding:.55rem .7rem;border-radius:9px;
  background:var(--over-soft);color:var(--over);font-size:.78rem;line-height:1.45;
}
.serr code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.74rem}

/* settings: sub-pages, editing, confirm */
.srow.nav{cursor:pointer}
.srow .svwrap{display:flex;align-items:center;gap:.5rem;flex:none}
.srow .chev{color:var(--faint);font-size:.9rem}
.tog.sm{width:36px;height:22px}
.tog.sm i{width:16px;height:16px;left:17px}
.tog.sm[aria-pressed="false"] i{left:3px}
.addrow{display:flex;gap:.4rem;align-items:center;padding:.6rem 1rem .5rem}
.addrow .search{flex:1;min-width:0;padding:.45rem .65rem;font-size:.9rem}
.addrow .btn{margin:0;align-self:auto;padding:.45rem .8rem}
.minseg{display:flex;gap:.2rem;flex:none}
.minseg button{
  font:inherit;font-size:.76rem;font-weight:600;border:1px solid var(--line2);background:none;
  color:var(--dim);border-radius:8px;padding:.38rem .5rem;cursor:pointer;
}
.minseg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--app)}
.inerr{padding:0 1rem .4rem;font-size:.76rem;color:var(--over);font-weight:550}
.pinput{
  width:3.4rem;font:inherit;font-size:.9rem;text-align:right;color:var(--ink);
  background:var(--line);border:1.5px solid transparent;border-radius:8px;padding:.3rem .45rem;
}
.pinput.lbl{width:6rem;text-align:left}
.pinput:focus{outline:none;border-color:var(--accent);background:var(--app)}
.setwrap{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.pendbar{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.55rem 1rem calc(.55rem + env(safe-area-inset-bottom));
  background:var(--warn-soft);color:var(--warn);font-size:.84rem;font-weight:600;
}
.pendbar .btn{margin:0;align-self:auto;background:var(--warn);color:var(--app);padding:.4rem .8rem}
.confirm{position:absolute;inset:0;z-index:5;background:rgba(10,17,20,.4);display:flex;align-items:flex-end}
.card{background:var(--app);width:100%;border-radius:16px 16px 0 0;padding:1rem 1rem 1.1rem}
.card h3{margin:0 0 .5rem;font-size:1.02rem;font-weight:650;letter-spacing:-.01em}
.card.bad h3{color:var(--over)}
.card ul{margin:0 0 .6rem;padding-left:1.1rem;font-size:.85rem;line-height:1.55}
.card p{margin:0 0 .8rem;font-size:.78rem;color:var(--dim);line-height:1.45}
.card .acts{display:flex;gap:.9rem;align-items:center}
.card .acts .btn{margin:0;align-self:auto}
.btn.ghost.red{color:var(--over)}
#askcard{z-index:40}
.stale{margin:-.2rem 1rem .45rem;font-size:.72rem;color:var(--dim)}
.okmsg{margin:.6rem 1rem 0;padding:.5rem .7rem;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:.8rem;font-weight:550}
.warnbox{margin:.5rem 1rem .2rem;padding:.6rem .7rem;border-radius:9px;background:var(--warn-soft);color:var(--warn);font-size:.8rem;line-height:1.45}
.warnbox .btn{display:block;margin-top:.5rem;background:var(--warn);color:var(--app)}

/* tabs */
.tabs{
  display:flex;border-top:1px solid var(--line);background:var(--app);
  padding:.45rem .5rem calc(.45rem + env(safe-area-inset-bottom));
}
.tab{
  flex:1;background:none;border:none;font:inherit;font-size:.7rem;font-weight:600;
  color:var(--faint);padding:.35rem 0;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;gap:.18rem;letter-spacing:.01em;
}
.tab[aria-pressed="true"]{color:var(--accent)}
.tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.badge{
  position:absolute;transform:translate(13px,-3px);
  background:var(--warn);color:var(--app);font-size:.6rem;font-weight:700;
  min-width:15px;height:15px;border-radius:99px;display:grid;place-items:center;padding:0 3px;
}
.badge.x{background:var(--over)}