/* Fonts live inside the app (no outside requests, and they work offline). Both are open fonts (SIL Open Font License). */
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-serif-display-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-serif-display-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Easy Budget: styles. Phone first; computer layout from 900px. */
:root{
  --cream:#FBF6EE; --card:#FFFFFF; --navy:#1E2A3A; --muted:#566170; --line:#EADFD0;
  --blush:#F4A593; --blush-deep:#C04E3B; --blush-soft:#FBD5CA;
  --sage:#5E9468; --sage-soft:#CFE6CD; --butter:#FBE3A1; --lilac:#DDD4F7; --sky:#C8E3F4;
  --i-sage:#2F6B3C; --i-butter:#7A5A06; --i-lilac:#4B3D96; --i-blush:#A23E2C; --i-sky:#235F85;
  --b-sage:#63A56E; --b-butter:#E3B32F; --b-lilac:#8E7CE0; --b-blush:#F08A74; --b-sky:#5FA8DB;
  --warn:#B93F2B; --warn-soft:#FBD9D2;
  --serif:"DM Serif Display",Georgia,serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --cream:#161D27; --card:#222C39; --navy:#F7F1E8; --muted:#A9B4C0; --line:#34404F;
  --blush:#F4A593; --blush-soft:#5A3530; --sage-soft:#274A30; --butter:#5A4A17; --lilac:#3C3470; --sky:#1F4560;
  --i-sage:#A5DBAE; --i-butter:#F3D377; --i-lilac:#C9BEFA; --i-blush:#FFBBAB; --i-sky:#A5D5F5;
  --blush-deep:#FFB09E; --warn:#FF9F8C; --warn-soft:#4F2A24;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--cream);color:var(--navy);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2.5px solid var(--blush-deep);outline-offset:2px;border-radius:8px}

/* ---------- layout ---------- */
.shell{min-height:100%}
.side{display:none}
.main{padding:calc(14px + env(safe-area-inset-top)) 18px calc(110px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;min-width:0;font-weight:600;color:var(--muted);padding:4px 0}
.tab svg.i{width:23px;height:23px}
.tab.on{color:var(--navy)}
.tab.on svg.i{stroke-width:2.2}
.fab{position:fixed;z-index:21;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));height:54px;padding:0 20px 0 16px;border-radius:99px;background:var(--navy);color:var(--cream);display:flex;align-items:center;gap:6px;font-weight:700;font-size:15.5px;box-shadow:0 10px 22px -8px rgba(43,58,74,.55)}
.fab:active{transform:scale(.97)}
.fab svg.i{width:25px;height:25px;stroke-width:2.4}
:root[data-theme="dark"] .fab{background:var(--blush);color:#1F2832}
.desk-only{display:none}

/* ---------- shared bits ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px}
.pill{font-size:12px;font-weight:600;padding:6px 10px;border-radius:99px;background:var(--card);border:1px solid var(--line);white-space:nowrap}
.iconbtn{width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.iconbtn svg.i{width:18px;height:18px}
.ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none}
.ico svg.i{width:19px;height:19px}
.ico.sm{width:32px;height:32px;border-radius:10px}.ico.sm svg.i{width:17px;height:17px}
.c-sage{background:var(--sage-soft);color:var(--i-sage)} .c-butter{background:var(--butter);color:var(--i-butter)}
.c-lilac{background:var(--lilac);color:var(--i-lilac)} .c-blush{background:var(--blush-soft);color:var(--i-blush)}
.c-sky{background:var(--sky);color:var(--i-sky)}
.bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;border-radius:9px}
.sec{display:flex;justify-content:space-between;align-items:baseline;margin:20px 2px 10px}
.sec h2{font-size:15px}
.sec a,.sec button{font-size:12.5px;color:var(--muted);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px;border-radius:16px;background:var(--navy);color:var(--cream);font-weight:700;font-size:15.5px;width:100%}
.btn.ghost{background:var(--card);color:var(--navy);border:1.5px solid var(--line)}
.btn.small{height:40px;font-size:13.5px;border-radius:12px;width:auto;padding:0 14px}
.btn.warn{background:var(--warn);color:#fff}
.link{color:var(--blush-deep);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:5px}
.link svg.i{width:15px;height:15px}
.muted{color:var(--muted)}
.empty{text-align:center;color:var(--muted);font-size:13.5px;padding:18px 10px;line-height:1.5}
.notice{display:flex;gap:10px;align-items:flex-start;border-radius:18px;padding:13px 14px;font-size:13.5px;line-height:1.45;margin-bottom:12px;background:var(--sage-soft)}
.notice.warn{background:var(--warn-soft)}
.notice svg.i{color:var(--i-sage);margin-top:1px}
.notice.warn svg.i{color:var(--warn)}
.notice b{display:block;font-size:14.5px;margin-bottom:2px}
.notice .btn{margin-top:10px}

/* ---------- today ---------- */
.hello{display:flex;justify-content:space-between;align-items:center;margin:4px 0 14px;gap:10px}
.hello h1{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hello .r{display:flex;gap:8px;align-items:center}
.hero{text-align:center;padding:16px 18px 14px}
.ring{position:relative;width:200px;height:200px;margin:0 auto}
.ring svg{transform:rotate(135deg);width:100%;height:100%}
.ring circle{fill:none;stroke-width:14;stroke-linecap:round}
.ring .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center}
.ring .k{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.ring .big{font-family:var(--serif);font-size:60px;line-height:1.05;white-space:nowrap}
.ring .big small{font-size:27px;vertical-align:top;position:relative;top:9px;margin-right:2px}
.ring .big.long{font-size:44px}.ring .big.long small{font-size:22px;top:6px}
.ring .sub{font-size:13px;color:var(--muted)}
.hero.short .ring .big{color:var(--warn)}
.split{display:flex;margin-top:2px;border-top:1px solid var(--line);padding-top:11px}
.split div{flex:1;padding:0 4px}
.split b{display:block;font-size:18px}
.split span{font-size:12px;color:var(--muted)}
.split div+div{border-left:1px solid var(--line)}
.hero .link{margin-top:11px}
.lead{font-size:13.5px;line-height:1.45;color:var(--muted);margin:2px 6px 0}
.lead b{color:var(--navy)}
.nextbill{margin-top:12px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px}
.nextbill .t{flex:1;font-size:12.5px;color:var(--muted);min-width:0}
.nextbill .t b{display:block;color:var(--navy);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextbill .a{font-weight:700}
.limits{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lim{border-radius:18px;padding:11px 11px 12px;background:var(--card);border:1px solid var(--line);text-align:left;min-width:0}
.lim .ico{width:30px;height:30px;border-radius:10px}.lim .ico svg.i{width:16px;height:16px}
.lim b{display:block;font-size:17px;margin-top:7px}
.lim > span:not(.ico){font-size:11.5px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lim.over b{color:var(--warn)}
.spentlink{display:flex;justify-content:center;margin-top:16px}

/* ---------- add ---------- */
.addv{max-width:420px;margin:0 auto}
.add-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:2px 0 4px}
.add-top .x{width:36px;height:36px;display:grid;place-items:center;color:var(--muted)}
.seg2{display:flex;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:3px}
.seg2 button{padding:7px 12px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg2 button.on{background:var(--navy);color:var(--cream)}
.datebtn{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:600;color:var(--muted);padding:8px 4px;white-space:nowrap}
.datebtn svg.i{width:15px;height:15px}
.amount{text-align:center;margin:14px 0 2px;font-family:var(--serif);font-size:64px;line-height:1.1;white-space:nowrap}
.amount small{font-size:30px;vertical-align:top;position:relative;top:10px;color:var(--muted);margin-right:2px}
.amount.empty-amt span{color:var(--muted)}
.after{text-align:center;font-size:13px;color:var(--muted);min-height:18px}
.after b{color:var(--i-sage)}
.note-in{display:block;margin:8px auto 0;width:100%;height:40px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);padding:0 12px;font-size:14px}
.chips-k{font-size:11.5px;font-weight:700;color:var(--muted);margin:16px 2px 8px;text-transform:uppercase;letter-spacing:.08em;display:flex;justify-content:space-between}
.chips-k button{text-transform:none;letter-spacing:0;font-size:12px;color:var(--blush-deep)}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat{border-radius:16px;padding:9px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;font-weight:600;border:1.5px solid var(--line);background:var(--card);min-width:0}
.cat:active{transform:scale(.96)}
.cat .ico{width:34px;height:34px}
.cat .nm{max-width:100%;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat em{font-style:normal;font-size:10.5px;color:var(--muted);font-weight:500}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.key{height:50px;border-radius:14px;background:var(--card);display:grid;place-items:center;font-size:22px;font-weight:600;border:1px solid var(--line)}
.key:active{background:var(--line)}
.key svg.i{width:24px;height:24px}

/* ---------- plan ---------- */
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px;margin:4px 0 14px}
.seg button{flex:1;text-align:center;font-size:13px;font-weight:600;padding:8px 0;border-radius:99px;color:var(--muted)}
.seg button.on{background:var(--navy);color:var(--cream)}
.period{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:18px}
.period .arr{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--cream)}
.period .arr:disabled{opacity:.3}
.period b{font-size:15px;display:block;text-align:center}
.period span{display:block;font-size:12px;color:var(--muted);text-align:center}
.tl{margin-top:14px;position:relative;padding-left:22px}
.tl:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.ev{position:relative;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:9px 10px 9px 12px;margin-bottom:8px;width:100%;text-align:left}
.ev:before{content:"";position:absolute;left:-20px;top:50%;margin-top:-6px;width:12px;height:12px;border-radius:50%;background:var(--cream);border:2px solid var(--muted)}
.ev.done{opacity:.7}
.ev.pay{background:var(--sage-soft);border-color:transparent}
.ev.pay:before{background:var(--sage);border-color:var(--sage)}
.ev.soon:before{background:var(--blush-deep);border-color:var(--blush-deep)}
.ev .d{width:34px;font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.2;text-align:center;flex:none}
.ev .d b{display:block;font-size:16px;color:var(--navy)}
.ev .n{flex:1;font-size:14px;font-weight:600;min-width:0}
.ev .n span{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
.ev .a{font-weight:700;font-size:14px;white-space:nowrap}
.ev.pay .a{color:var(--i-sage)}
.chk{width:30px;height:30px;display:grid;place-items:center;flex:none}
.chk i{width:22px;height:22px;border-radius:7px;border:2px solid var(--muted);display:grid;place-items:center;color:transparent}
.chk.on i{color:#fff}
.chk i svg.i{width:14px;height:14px;stroke-width:3}
.chk.on i{background:var(--sage);border-color:var(--sage)}
.chk.auto i{background:var(--line);border-color:var(--line);color:var(--muted)}
.chk:disabled i{opacity:.7}
.todaymark{font-size:11px;font-weight:700;color:var(--blush-deep);margin:2px 0 8px -2px;text-transform:uppercase;letter-spacing:.06em}
.row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin-bottom:8px;width:100%;text-align:left}
.row .n{flex:1;min-width:0;font-weight:600;font-size:14.5px}
.row .n span{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:1px}
.row .a{font-weight:700;white-space:nowrap;text-align:right}
.row .a span{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
.row .bar{margin-top:8px}
.addrow{display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px dashed var(--line);border-radius:16px;padding:12px;font-size:13.5px;font-weight:600;color:var(--muted);width:100%;margin-top:4px}
.addrow svg.i{width:17px;height:17px}
.total{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:14px 16px}
.total b{font-family:var(--serif);font-weight:400;font-size:28px}
.total span{font-size:12.5px;color:var(--muted)}

/* ---------- settings ---------- */
.set h1{font-family:var(--serif);font-weight:400;font-size:27px;margin:4px 0 14px}
.group{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:14px}
.group-k{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:18px 4px 8px}
.srow{display:flex;align-items:center;gap:12px;padding:13px 14px;width:100%;text-align:left;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow .n{flex:1;font-weight:600;font-size:14.5px;min-width:0}
.srow .n span{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:1px}
.srow .v{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.srow svg.i.chev{width:16px;height:16px;color:var(--muted)}
.srow.danger .n{color:var(--warn)}
.foot{font-size:12px;color:var(--muted);line-height:1.6;display:flex;gap:8px;padding:6px 4px 0}
.foot svg.i{width:16px;height:16px;margin-top:2px}

/* ---------- sheet (bottom panel / dialog) ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(20,26,33,.45);display:flex;align-items:flex-end;justify-content:center;animation:fade .15s}
.sheet{background:var(--cream);width:100%;max-width:520px;max-height:92vh;overflow:auto;border-radius:26px 26px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom));animation:up .2s ease-out}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 12px}
.sheet h2{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet h2 button{color:var(--muted)}
.sheet p.sub{color:var(--muted);font-size:13.5px;line-height:1.45;margin-bottom:6px}
.field{margin-top:14px}
.field>label,.field>.lbl{display:block;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.inp{width:100%;height:50px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);padding:0 14px;font-size:16px;font-weight:600}
.inp:focus{outline:0;border-color:var(--navy)}
.money-in{position:relative}
.money-in .inp{padding-left:38px;font-family:var(--serif);font-size:22px;font-weight:400}
.money-in .cur{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;font-weight:600}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{padding:9px 13px;border-radius:99px;background:var(--card);border:1.5px solid var(--line);font-size:13px;font-weight:600}
.opt.on{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.sheet .acts{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.err{color:var(--warn);font-size:13px;font-weight:600;margin-top:10px;min-height:1px}
.math{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px 16px;margin-top:12px}
.math .r{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:6px 0}
.math .r span{color:var(--muted)}
.math .r b{white-space:nowrap}
.math .tot{border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
.math .big{display:flex;justify-content:space-between;align-items:center;background:var(--blush-soft);border-radius:14px;padding:10px 12px;margin:8px -4px 2px;gap:8px}
.math .big span{font-size:13.5px;font-weight:600}
.math .big b{font-family:var(--serif);font-weight:400;font-size:24px;white-space:nowrap}
.math.short .big{background:var(--warn-soft)}
.steps-list{counter-reset:s;margin-top:10px}
.steps-list li{list-style:none;counter-increment:s;display:flex;gap:10px;font-size:14px;line-height:1.45;margin-bottom:10px}
.steps-list li:before{content:counter(s);flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy);color:var(--cream);font-size:12px;font-weight:700;display:grid;place-items:center}
.spendrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.spendrow .n{flex:1;font-size:14px;font-weight:600;min-width:0}
.spendrow .n span{display:block;font-size:12px;color:var(--muted);font-weight:500}
.spendrow .del{width:34px;height:34px;display:grid;place-items:center;color:var(--muted)}

/* ---------- toast ---------- */
.toast{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;bottom:calc(140px + env(safe-area-inset-bottom));z-index:60;background:var(--navy);color:var(--cream);border-radius:16px;padding:12px 8px 12px 16px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);max-width:calc(100% - 32px);animation:up .2s ease-out}
.toast button{color:var(--blush);font-weight:700;padding:4px 10px}
:root[data-theme="dark"] .toast{background:#F3EEE6;color:#1F2832}
:root[data-theme="dark"] .toast button{color:var(--warn)}

/* ---------- demo banner ---------- */
.demo-bar{position:sticky;top:0;z-index:30;background:var(--navy);color:var(--cream);font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 12px calc(8px);padding-top:calc(8px + env(safe-area-inset-top));text-align:center;flex-wrap:wrap}
.demo-bar a{background:var(--blush);color:#2B3A4A;border-radius:99px;padding:5px 11px;font-weight:700;white-space:nowrap}

/* ---------- setup ---------- */
.setup{max-width:460px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom))}
.setup .body{flex:1}
.steps{display:flex;gap:6px;margin:6px 0 16px}
.steps i{flex:1;height:5px;border-radius:9px;background:var(--line)}
.steps i.on{background:var(--navy)}
.stepk{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;display:flex;justify-content:space-between;align-items:center}
.stepk button{color:var(--muted);font-size:12.5px;text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:2px}
.q{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;margin-top:4px}
.qs{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.45}
.welcome{text-align:center;padding-top:30px}
.welcome svg{width:88px;height:88px}
.tip{margin-top:14px;background:var(--sage-soft);border-radius:14px;padding:11px 12px;font-size:13px;line-height:1.45;display:flex;gap:8px}
.tip svg.i{width:17px;height:17px;color:var(--i-sage);margin-top:1px}
.setup .acts{display:flex;flex-direction:column;gap:10px;padding-top:18px}
.billset{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:8px}
.billset .top{display:flex;align-items:center;gap:10px}
.billset .top .n{flex:1;font-weight:600;font-size:14.5px;min-width:0}
.billset .top .n span{display:block;font-size:11.5px;color:var(--muted);font-weight:500}
.billset .more{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.billset .more .full{grid-column:1/-1}
.billset .inp{height:44px;font-size:15px}
.billset .money-in .inp{font-size:19px}
.billset em{grid-column:1/-1;font-style:normal;font-size:12px;font-weight:600;color:var(--i-sage)}
.tg{width:44px;height:26px;border-radius:99px;background:var(--line);position:relative;flex:none;transition:background .15s}
.tg:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg.on{background:var(--sage)}
.tg.on:after{left:21px}

/* ---------- extra pieces ---------- */
button.nextbill{width:100%;text-align:left}
.ev .evmain{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:left}
button.ev{width:100%}
.chk:disabled{cursor:default}
.opts.icons{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;justify-items:center}
.sheet{scrollbar-width:thin}
.icopt{padding:0;width:100%;aspect-ratio:1;max-width:52px;border-radius:12px;display:grid;place-items:center;color:var(--muted)}
.icopt svg.i{width:19px;height:19px}
.icopt.on{background:var(--navy);color:var(--cream)}
.colopt{width:38px;height:38px;padding:0;border-radius:50%}
.colopt.on{border-color:transparent;box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--navy)}
.opts .colopt.c-sage{background:var(--b-sage)}.opts .colopt.c-butter{background:var(--b-butter)}.opts .colopt.c-lilac{background:var(--b-lilac)}.opts .colopt.c-blush{background:var(--b-blush)}.opts .colopt.c-sky{background:var(--b-sky)}
.row.goal{flex-wrap:wrap}
.goalacts{display:flex;gap:8px;width:100%;padding-left:48px;margin-top:4px;flex-wrap:wrap}
.daychips{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.day{border-radius:14px;background:var(--card);border:1.5px solid var(--line);text-align:center;padding:7px 0;font-size:10px;font-weight:700;color:var(--muted)}
.day b{display:block;font-size:17px;color:var(--navy)}
.day.on{background:var(--navy);border-color:var(--navy);color:var(--blush)}
.day.on b{color:var(--cream)}
.inp.focus{border-color:var(--navy)}
.setup .err{text-align:center}
[hidden]{display:none!important}

/* ---------- brand ---------- */
.logo{display:flex;align-items:center;gap:10px}
.logo svg{width:38px;height:38px;flex:none}
.logo b{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1;display:block}
.logo small{display:block;font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--sage);margin-top:3px}

@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.toast{animation:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- computer ---------- */
@media (min-width:900px){
  body{background:var(--cream)}
  .shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
  .side{display:flex;flex-direction:column;gap:6px;background:var(--card);border-right:1px solid var(--line);padding:24px 16px;position:sticky;top:0;height:100vh}
  .side .logo{margin:0 6px 22px}
  .side .addbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:14px;background:var(--navy);color:var(--cream);font-weight:700;font-size:14.5px;margin-bottom:14px}
  :root[data-theme="dark"] .side .addbtn{background:var(--blush);color:#1F2832}
  .side .nav{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;font-weight:600;font-size:14.5px;color:var(--muted)}
  .side .nav.on{background:var(--cream);color:var(--navy)}
  .side .grow{flex:1}
  .tabs{display:none}
  .main{max-width:1100px;padding:30px 36px 60px;margin:0}
  .desk-only{display:block}
  .phone-only{display:none!important}
  .today-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start}
  .today-grid .col{display:flex;flex-direction:column;gap:20px}
  .today-grid .sec{margin:0 2px -8px}
  .today-grid .card .sec{margin:0 0 12px}
  .hero{display:flex;align-items:center;gap:28px;text-align:left;padding:22px}
  .hero .ring{width:180px;height:180px;margin:0}
  .hero .ring .big{font-size:54px}
  .hero .facts{flex:1}
  .lead{display:block;font-size:15px;line-height:1.5;margin-bottom:12px}
  .split{border:1px solid var(--line);border-radius:18px;padding:12px 0;margin-bottom:12px}
  .split div{padding:0 14px}
  .split b{font-size:22px}
  .nextbill{margin-top:0}
  .hello h1{font-size:34px}
  .toast{bottom:28px}
  .addv{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:22px;margin-top:10px}
  .qa .amt-in{display:flex;gap:10px}
  .qa .cats{grid-template-columns:repeat(4,1fr);margin-top:10px}
  .plan-wrap,.set{max-width:640px}
  .demo-bar{position:static}
}
@media (max-width:370px){
  .ring{width:176px;height:176px}
  .ring .big{font-size:52px}
  .cat{font-size:10.5px}
  .key{height:46px}
}
.goalacts .btn.small{height:36px;padding:0 12px;font-size:13px}

@media (min-width:600px){
  .opts.icons{grid-template-columns:repeat(8,1fr);gap:7px}
  .overlay{align-items:center;padding:24px}
  .sheet{border-radius:26px;padding:22px 26px 26px;max-height:calc(100vh - 48px)}
  .sheet .grab{display:none}
}
.ptitle{font-family:var(--serif);font-weight:400;font-size:27px;margin:4px 0 12px}
@media (min-width:900px){.ptitle,.set h1{font-size:34px}}
@media (min-width:900px){
  .setup{min-height:0;margin:6vh auto;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:30px 32px 28px;max-width:500px}
  .setup .welcome{padding-top:6px}
}

/* ---------- v2: pages, envelopes, payday ---------- */
.page{max-width:680px}
.intro{font-size:14px;color:var(--muted);line-height:1.5;margin:-4px 2px 14px}
.envsum{display:flex;padding:14px 16px;margin-bottom:12px}
.envsum div{flex:1}
.envsum div+div{border-left:1px solid var(--line);padding-left:16px}
.envsum b{display:block;font-family:var(--serif);font-weight:400;font-size:26px}
.envsum span{font-size:12.5px;color:var(--muted)}
.stuffbtn{margin-bottom:18px}
.stuffbtn svg.i{width:22px;height:22px}
.envs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px}
.envs.mini{grid-template-columns:repeat(3,1fr);gap:10px 8px}
.env{position:relative;display:block;text-align:left;padding-top:24px;min-width:0;width:100%}
.env-sage{--bg:var(--sage-soft);--flap:var(--b-sage)}
.env-butter{--bg:var(--butter);--flap:var(--b-butter)}
.env-lilac{--bg:var(--lilac);--flap:var(--b-lilac)}
.env-blush{--bg:var(--blush-soft);--flap:var(--b-blush)}
.env-sky{--bg:var(--sky);--flap:var(--b-sky)}
.env .cash{position:absolute;left:16%;right:16%;top:calc(24px - var(--peek,0px));height:44px;border-radius:5px;background:linear-gradient(180deg,#B9D3AE,#97BC8C);border:1.5px solid #86AD7B;display:flex;justify-content:center;padding-top:2px;transition:top .5s ease}
.env .cash i{font-style:normal;font-family:var(--serif);font-size:13px;color:#4F7553;line-height:1;opacity:.8}
.env.mini{padding-top:16px}
.env.mini .cash{top:calc(16px - var(--peek,0px));height:30px;left:20%;right:20%}
.env.mini .cash i{font-size:10px}
.pocket{position:relative;z-index:1;display:block;background:var(--bg,var(--card));border-radius:6px 6px 16px 16px;padding:36px 12px 12px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.04),0 6px 14px -10px rgba(43,58,74,.35)}
.pocket:before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:var(--flap,var(--line));opacity:.55;clip-path:polygon(0 0,100% 0,50% 100%)}
.env-name{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.env b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15;margin-top:2px}
.env-sub{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.env-tag{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:700;background:var(--card);border-radius:99px;padding:3px 8px;color:var(--muted)}
.env.over b{color:var(--warn)}
.env.mini .pocket{padding:26px 9px 9px;border-radius:5px 5px 13px 13px}
.env.mini .pocket:before{height:22px}
.env.mini .env-name{font-size:11.5px}
.env.mini b{font-size:20px}
.env.mini .env-sub{font-size:10.5px}
.env.add .pocket{background:transparent;border:1.5px dashed var(--line);box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:118px;padding:14px;color:var(--muted);font-weight:600;font-size:13px}
.env.add .pocket:before{display:none}
.env:active .pocket{transform:translateY(1px)}
.stufflist{margin:8px 0 4px}
.stuffrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);opacity:0;animation:stuffIn .45s ease-out forwards}
.stuffrow .n{flex:1;font-weight:600;font-size:14.5px}
.stuffrow .n span{display:block;font-size:12px;color:var(--i-sage);font-weight:600}
.stuffrow b{font-family:var(--serif);font-weight:400;font-size:22px}
@keyframes stuffIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.billprog{padding:14px 16px;margin-bottom:12px}
.bp-top{display:flex;justify-content:space-between;align-items:baseline}
.bp-top b{font-size:16px}
.bp-top span{font-size:13px;color:var(--muted)}
.env-amt{width:118px;flex:none}
.env-amt .inp{height:40px;font-size:18px;padding-left:30px}
.env-amt .cur{left:11px}
@media (min-width:600px){.envs{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.envs{grid-template-columns:repeat(4,1fr)}.envs.mini{grid-template-columns:repeat(3,1fr)}.today-grid .envs.mini{margin-top:0}}
@media (prefers-reduced-motion:reduce){.stuffrow{opacity:1}}
.row svg.i.chev{width:16px;height:16px;color:var(--muted)}

/* ---------- v1.2: clear numbers ---------- */
.mmap{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;text-align:left}
.mm-k{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.mm-bar{display:flex;gap:3px;height:14px;border-radius:9px;overflow:hidden;background:var(--line)}
.mm-bar i{display:block;min-width:6px}
.mm-blush{background:var(--b-blush)}.mm-butter{background:var(--b-butter)}.mm-sky{background:var(--b-sky)}.mm-sage{background:var(--b-sage)}
.mm-legend{display:grid;gap:6px;margin-top:10px}
.mm-legend div{display:flex;align-items:center;gap:7px;font-size:12.5px;min-width:0}
.mm-legend i{width:10px;height:10px;border-radius:3px;flex:none}
.mm-legend span{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-legend b{font-weight:700}
.mm-legend div:last-child span{color:var(--navy);font-weight:700}
.mm-legend .warn b,.mm-legend .warn span{color:var(--warn)}
.howcard{margin-top:12px}
.howsteps{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:11px}
.howsteps li{display:flex;gap:11px;align-items:flex-start}
.howsteps li > div > b{display:block;font-size:14px}
.howsteps span b{display:inline;font-size:inherit;color:var(--navy)}
.howsteps span:not(.ico){font-size:12.5px;color:var(--muted);line-height:1.4}
.sheet .howsteps{margin:4px 0 14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.stat{border-radius:18px;padding:12px 12px 13px;min-width:0}
.stat span{display:block;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(19px,5.6vw,28px);line-height:1.2;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-sage{background:var(--sage-soft)}.st-blush{background:var(--blush-soft)}.st-butter{background:var(--butter)}.st-sky{background:var(--sky)}.st-lilac{background:var(--lilac)}
.statnote{margin:-4px 2px 14px}
.catgrp+.catgrp{margin-top:12px}
.cg-k{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;margin:0 2px 7px;white-space:nowrap;overflow:hidden}
.cg-k svg.i{width:16px;height:16px;color:var(--muted);flex:none}
.cg-k span{font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.cat em.over{color:var(--warn);font-weight:700}
.tipcard{display:flex;gap:10px;align-items:flex-start;background:var(--lilac);border-radius:18px;padding:13px 14px;font-size:13.5px;line-height:1.45;margin:18px 0 4px}
.tipcard svg.i{color:var(--i-lilac);flex:none;margin-top:1px}
.tipcard b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--i-lilac);margin-bottom:2px}
.gcard{margin-bottom:12px;padding:16px}
.g-top{display:flex;align-items:center;gap:10px}
.g-name{flex:1;font-family:var(--serif);font-weight:400;font-size:20px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-top .btn.small{height:36px;font-size:13px;padding:0 12px;gap:4px}
.g-top .btn.small svg.i{width:15px;height:15px}
.g-amt{margin-top:12px;font-size:15px;color:var(--muted)}
.g-amt b{color:var(--navy);font-size:18px}
.g-bar{height:10px;margin-top:8px}
.g-row{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:7px}
.g-plan{font-size:13px;line-height:1.45;margin:10px 0 0;padding:9px 11px;border-radius:12px;background:var(--cream)}
.g-plan .link{font-size:13px}
.g-acts{display:flex;gap:18px;margin-top:10px}
.g-acts .link{color:var(--muted);font-size:12.5px}
@media (min-width:900px){.stat{padding:16px 18px}.stat span{font-size:12.5px}.stat b{font-size:30px}}

/* ---------- v1.3: months, by-month income, debt ---------- */
.main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
@media (min-width:900px){.fab{display:none}.main{padding-bottom:60px}}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px}
.mode{border:1.5px solid var(--line);background:var(--card);border-radius:18px;padding:14px 12px;text-align:left;display:flex;flex-direction:column;gap:3px}
.mode svg.i{width:22px;height:22px;color:var(--muted);margin-bottom:4px}
.mode b{font-size:15px}
.mode span{font-size:12.5px;color:var(--muted);line-height:1.35}
.mode.on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.mode.on svg.i{color:var(--navy)}
.mswitch{margin-bottom:12px}
.mchart{padding:16px 14px 12px;margin-bottom:12px}
.mc-bars{display:flex;align-items:flex-end;justify-content:space-around;gap:6px;height:150px}
.mc-col{flex:1;max-width:64px;height:100%;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:12px;padding:4px 0 0}
.mc-pair{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.mc-pair i{display:block;width:13px;border-radius:5px 5px 2px 2px}
.mc-pair i.in,.mc-legend i.in{background:var(--b-sage)}
.mc-pair i.out,.mc-legend i.out{background:var(--b-blush)}
.mc-k{font-size:12px;font-weight:600;color:var(--muted);padding:2px 8px;border-radius:99px}
.mc-col.on .mc-k{background:var(--navy);color:var(--cream)}
.mc-col:not(.on) .mc-pair{opacity:.55}
.mc-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px;color:var(--muted);align-items:center}
.mc-legend span{display:flex;align-items:center;gap:5px}
.mc-legend i{width:10px;height:10px;border-radius:3px;display:block}
.mc-note{flex-basis:100%}
.checks{margin-bottom:12px;padding:16px}
.checks h2{font-size:15px;margin:0 0 10px}
.ck{display:flex;align-items:center;gap:10px;font-size:14px;padding:7px 0}
.ck+.ck{border-top:1px solid var(--line)}
.ck span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.ck span svg.i{width:15px;height:15px}
.ck-good span{background:var(--sage-soft);color:var(--i-sage)}
.ck-mid span{background:var(--butter);color:var(--i-butter)}
.ck-bad span{background:var(--warn-soft);color:var(--warn)}
.breakdown{padding:8px 16px;margin-bottom:4px}
.breakdown .r{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:14px}
.breakdown .r+.r{border-top:1px solid var(--line)}
.breakdown .r span{display:flex;align-items:center;gap:8px;color:var(--muted)}
.breakdown svg.i{width:17px;height:17px}
.mlist{padding:6px 14px}
.ml-row{display:flex;align-items:center;gap:10px;padding:10px 0}
.ml-row+.ml-row{border-top:1px solid var(--line)}
.ml-row .n{flex:1;min-width:0;font-weight:600;font-size:14px}
.ml-row .n span{display:block;font-size:12px;color:var(--muted);font-weight:500}
.ml-row .bar{margin-top:6px}
.ml-row > b{text-align:right;font-size:14px;white-space:nowrap}
.ml-row > b span{display:block;font-size:11.5px;color:var(--muted);font-weight:500}
.ml-row > b.ok{color:var(--i-sage)}.ml-row > b.over{color:var(--warn);font-size:12.5px}
.ml-row > b svg.i{width:18px;height:18px}
.dayk{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin:14px 2px 2px}
.spendrow.tap{width:100%;text-align:left}
.spendrow.tap svg.i.chev{width:15px;height:15px;color:var(--muted)}
.tapn{text-align:left;flex:1;min-width:0}
.dcard{display:block;width:100%;text-align:left;margin-bottom:12px;padding:16px}
.focus{font-size:11px;font-weight:700;background:var(--butter);color:var(--i-butter);padding:4px 9px;border-radius:99px;white-space:nowrap}
.seg-sm{margin:2px 0 6px}
.envs{align-items:stretch}
.env{display:flex;flex-direction:column}
.env .pocket{flex:1}

/* ---------- v1.4: pace, colours, help, notes ---------- */
.pace{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;font-weight:700;border-radius:99px;padding:3px 8px 3px 6px;background:var(--card)}
.pace i,.pdot,.pacenote i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.pdot{margin-right:5px;vertical-align:1px}
.pace-ok i,.pdot.pace-ok,.pacenote.pace-ok i{background:#6FA273}
.pace-fast i,.pdot.pace-fast,.pacenote.pace-fast i{background:#E0A93B}
.pace-empty i,.pdot.pace-empty,.pacenote.pace-empty i{background:#9AA3AD}
.pace-over i,.pdot.pace-over,.pacenote.pace-over i{background:var(--warn)}
.pace-ok{color:var(--i-sage)}.pace-fast{color:var(--i-butter)}.pace-over{color:var(--warn)}.pace-empty{color:var(--muted)}
.env-tag{margin-left:4px}
.pacenote{display:flex;gap:8px;align-items:baseline;font-size:13px;line-height:1.45;margin:12px 2px 0;color:var(--navy)}
.howcard > .link{margin-top:4px}
.faq{border-bottom:1px solid var(--line);padding:11px 2px}
.faq summary{font-weight:600;font-size:14.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--muted);font-weight:700}
.faq[open] summary:after{content:"–"}
.faq p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:8px 0 2px}
.faq p b{color:var(--navy)}
.monthnote{font-weight:500;width:100%;height:auto;min-height:64px;padding:10px 12px;font-size:14px;line-height:1.45;resize:vertical;margin-bottom:12px;font-family:inherit}
:root[data-accent="sage"]{--blush:#9CC0A0;--blush-deep:#4F7553;--blush-soft:#E4ECE2}
:root[data-accent="lavender"]{--blush:#B9AEE0;--blush-deep:#5E529A;--blush-soft:#ECE8F7}
:root[data-accent="sky"]{--blush:#9CC3DB;--blush-deep:#3A6884;--blush-soft:#E2EEF5}
:root[data-accent="butter"]{--blush:#E6C877;--blush-deep:#8F6C17;--blush-soft:#F8EED3}
:root[data-theme="dark"][data-accent="sage"]{--blush-soft:#2F3D33;--blush-deep:#A9C7AB}
:root[data-theme="dark"][data-accent="lavender"]{--blush-soft:#383646;--blush-deep:#BDB4E6}
:root[data-theme="dark"][data-accent="sky"]{--blush-soft:#2D3B46;--blush-deep:#A4CBE0}
:root[data-theme="dark"][data-accent="butter"]{--blush-soft:#463F2E;--blush-deep:#E4C77F}
.accents{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.accopt{display:flex;flex-direction:column;align-items:center;gap:6px;height:auto;padding:10px 2px;border-radius:16px;font-size:11.5px}
.accopt i{width:30px;height:30px;border-radius:50%;display:block}
.acc-blush{background:#E8B4A8}.acc-sage{background:#9CC0A0}.acc-lavender{background:#B9AEE0}.acc-sky{background:#9CC3DB}.acc-butter{background:#E6C877}

/* ============================================================
   v2.0 — a cash-stuffing binder you can watch
   ============================================================ */
[hidden]{display:none!important}
@media (max-width:899px){
  .main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(98px + env(safe-area-inset-bottom))}
}

/* ---------- tab bar: the big + is back in the middle ---------- */
.tabs{padding-top:7px}
.tabadd{justify-self:center;width:56px;height:56px;margin-top:-26px;border-radius:50%;background:var(--navy);color:var(--cream);display:grid;place-items:center;box-shadow:0 0 0 6px var(--cream),0 12px 22px -8px rgba(43,58,74,.65);transition:transform .15s}
.tabadd:active{transform:scale(.93)}
.tabadd svg.i{width:26px;height:26px;stroke-width:2.4}
:root[data-theme="dark"] .tabadd{background:var(--blush);color:#1F2832}

/* ---------- banknotes (shared look) ---------- */
.bills i,.scene-stack i,.flybill{background:linear-gradient(180deg,#D6EACB 0%,#A8CC9D 100%);border:1.5px solid #86AD7B;border-radius:6px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.42);color:#3F6B45;font-family:var(--serif);font-style:normal;font-weight:400;text-align:center}

/* ---------- envelopes ---------- */
.envs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 12px;align-items:stretch}
.env{position:relative;display:flex;flex-direction:column;text-align:left;padding-top:30px;min-width:0;width:100%;--rise:calc(14px + var(--fill,0) * 18px)}
.env-sage{--ink:var(--i-sage)}.env-butter{--ink:var(--i-butter)}.env-lilac{--ink:var(--i-lilac)}.env-blush{--ink:var(--i-blush)}.env-sky{--ink:var(--i-sky)}
.bills{position:absolute;left:13%;right:13%;top:30px;height:0;display:block}
.bills i{position:absolute;left:0;right:0;top:0;height:52px;font-size:12px;line-height:1.75;transform-origin:50% 100%;transform:translateY(calc(9px - var(--rise))) rotate(var(--r,0deg));transition:transform .7s cubic-bezier(.3,1.35,.5,1)}
.bills i:nth-child(1){--r:-6deg;left:-5%;right:9%}
.bills i:nth-child(2){--r:5deg;left:9%;right:-5%}
.bills.n0 i,.bills.n1 i:nth-child(-n+2),.bills.n2 i:nth-child(2){display:none}
.env .pocket{position:relative;z-index:1;flex:1;display:block;background:var(--bg,var(--card));border-radius:9px 9px 20px 20px;padding:54px 13px 13px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 20px -14px rgba(43,58,74,.5);transition:transform .15s}
.env .pocket:before{content:"";position:absolute;left:0;right:0;top:0;height:36px;background:var(--flap,var(--line));opacity:.5;clip-path:polygon(0 0,100% 0,50% 100%)}
.env .pocket:after{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(255,255,255,.6);border-radius:6px 6px 15px 15px;pointer-events:none}
:root[data-theme="dark"] .env .pocket:after{border-color:rgba(255,255,255,.13)}
:root[data-theme="dark"] .env .pocket{box-shadow:0 12px 20px -14px rgba(0,0,0,.7)}
.seal{position:absolute;left:50%;top:17px;width:32px;height:32px;margin-left:-16px;border-radius:50%;background:var(--card);color:var(--ink,var(--muted));display:grid;place-items:center;box-shadow:0 3px 7px -3px rgba(43,58,74,.45);z-index:1}
.seal svg.i{width:17px;height:17px}
.env-name{font-size:13.5px}
.env b{font-size:30px}
.env .pace{margin-top:8px}
.env:active .pocket{transform:translateY(2px)}
.env.bump .pocket{animation:bump .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(.95)}100%{transform:scale(1)}}
.env.add{padding-top:30px}
.env.add .pocket{border-radius:20px;min-height:150px;padding:14px}
.env.add .pocket:after{display:none}
.enter .bills i{animation:billUp .85s cubic-bezier(.3,1.35,.5,1) both}
.enter .env:nth-child(2) .bills i{animation-delay:.07s}.enter .env:nth-child(3) .bills i{animation-delay:.14s}.enter .env:nth-child(4) .bills i{animation-delay:.21s}.enter .env:nth-child(n+5) .bills i{animation-delay:.28s}
@keyframes billUp{from{transform:translateY(14px) rotate(0deg)}}
/* small envelopes (the money scene) */
.env.mini{padding-top:20px;--rise:calc(11px + var(--fill,0) * 12px)}
.env.mini .bills{top:20px;left:15%;right:15%}
.env.mini .bills i{height:34px;font-size:9px;border-radius:4px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)}
.env.mini .pocket{padding:36px 6px 11px;text-align:center;border-radius:7px 7px 15px 15px}
.env.mini .pocket:before{height:24px}
.env.mini .pocket:after{inset:4px;border-radius:5px 5px 11px 11px}
.env.mini .seal{width:24px;height:24px;top:10px;margin-left:-12px}
.env.mini .seal svg.i{width:13px;height:13px}
.env.mini .env-name{font-size:11.5px}
.env.mini b{font-size:18px;margin-top:1px}
@media (min-width:600px){.envs{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.envs{grid-template-columns:repeat(4,1fr)}.envs.home{grid-template-columns:repeat(2,1fr)}}

/* ---------- Today: one big number ---------- */
.hero2{position:relative;isolation:isolate;overflow:hidden;border-radius:32px;padding:28px 18px 18px;text-align:center;background:var(--card);border:1px solid var(--line)}
.blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(34px);pointer-events:none}
.hero2 .b1{width:230px;height:230px;left:-80px;top:-100px;background:var(--blush);opacity:.5;animation:drift 15s ease-in-out infinite alternate}
.hero2 .b2{width:210px;height:210px;right:-80px;top:-60px;background:var(--b-lilac);opacity:.3;animation:drift 19s ease-in-out infinite alternate-reverse}
.hero2 .b3{width:230px;height:200px;right:-60px;bottom:-110px;background:var(--b-butter);opacity:.34;animation:drift 17s ease-in-out infinite alternate}
.hero2 .b4{width:210px;height:190px;left:-70px;bottom:-110px;background:var(--b-sage);opacity:.28;animation:drift 21s ease-in-out infinite alternate-reverse}
:root[data-theme="dark"] .blob{opacity:.2!important}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(26px,18px) scale(1.12)}}
.h-k{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.h-big{font-family:var(--serif);font-size:104px;line-height:1;margin:8px 0 4px;white-space:nowrap;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.h-big small{font-size:44px;vertical-align:top;position:relative;top:13px;margin-right:3px;color:var(--muted)}
.h-big.long{font-size:72px}.h-big.long small{font-size:32px;top:9px}
.h-sub{font-size:15px;font-weight:600}
.hero2.short .h-big{color:var(--warn)}
.h-dots{display:flex;justify-content:center;gap:4px;margin:15px auto 0;max-width:300px}
.h-dots i{flex:1;max-width:9px;aspect-ratio:1;border-radius:50%;background:rgba(43,58,74,.13)}
.h-dots i.gone{background:var(--navy);opacity:.8}
.h-dots i.now{background:var(--card);box-shadow:0 0 0 2.5px var(--blush-deep)}
:root[data-theme="dark"] .h-dots i{background:rgba(255,255,255,.14)}
.h-play{display:inline-flex;align-items:center;gap:8px;margin-top:18px;height:46px;padding:0 20px 0 16px;border-radius:99px;background:var(--card);border:1.5px solid var(--line);font-weight:700;font-size:14px;box-shadow:0 8px 16px -12px rgba(43,58,74,.5);transition:transform .15s}
.h-play:active{transform:scale(.96)}
.h-play svg.i{width:19px;height:19px;color:var(--blush-deep)}
.h-play.due{background:var(--navy);border-color:var(--navy);color:var(--cream);animation:nudge 1.8s ease-in-out infinite}
.h-play.due svg.i{color:var(--blush)}
:root[data-theme="dark"] .h-play.due{background:var(--blush);border-color:var(--blush);color:#1F2832}
:root[data-theme="dark"] .h-play.due svg.i{color:#1F2832}
@keyframes nudge{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.h-note{font-size:12.5px;color:var(--muted);line-height:1.45;margin:13px auto 0;max-width:270px}
.teaser{text-decoration:none;color:inherit}
.teaser .t b{white-space:normal;line-height:1.3}
.teaser svg.i.chev{width:16px;height:16px;color:var(--muted);flex:none}
.today-grid .sec{margin-top:22px}
@media (min-width:900px){.hero2{padding:36px 24px 26px}.h-big{font-size:118px}.h-big small{font-size:50px;top:15px}}

/* ---------- the money scene ---------- */
.scene{position:fixed;inset:0;z-index:80;background:var(--cream);overflow:auto;isolation:isolate;animation:sceneIn .32s ease-out}
@keyframes sceneIn{from{opacity:0;transform:scale(1.03)}}
.scene > .blob{position:fixed}
.scene .b1{width:300px;height:300px;left:-110px;top:-120px;background:var(--blush);opacity:.42;animation:drift 15s ease-in-out infinite alternate}
.scene .b2{width:280px;height:280px;right:-120px;top:20%;background:var(--b-lilac);opacity:.26;animation:drift 19s ease-in-out infinite alternate-reverse}
.scene .b3{width:320px;height:260px;left:10%;bottom:-150px;background:var(--b-butter);opacity:.3;animation:drift 17s ease-in-out infinite alternate}
.scene-x{position:fixed;top:calc(12px + env(safe-area-inset-top));right:14px;z-index:3;width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.scene-in{position:relative;max-width:440px;min-height:100%;margin:0 auto;padding:calc(20px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.scene-top{text-align:center;padding-top:30px}
.scene-k{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.scene-stack{position:relative;width:124px;height:66px;margin:18px auto 8px;transition:opacity .3s,height .4s,margin .4s}
.scene-stack i{position:absolute;inset:0;font-size:22px;line-height:60px;border-radius:9px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.42),0 6px 12px -8px rgba(43,58,74,.5)}
.scene-stack i:nth-child(1){transform:rotate(-7deg) translate(-7px,3px)}
.scene-stack i:nth-child(2){transform:rotate(6deg) translate(7px,2px)}
.scene-amt{font-family:var(--serif);font-size:68px;line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums}
.scene-amt small{font-size:30px;vertical-align:top;position:relative;top:9px;margin-right:2px;color:var(--muted)}
.scene-sub{font-size:14px;color:var(--muted);min-height:21px;line-height:1.45;padding:0 8px}
.scene-tiles{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px;margin:26px 0 20px;align-content:start}
.stile{opacity:.5;transition:opacity .3s}
.stile .bills{opacity:0;transition:opacity .2s}
.stile.in{opacity:1;animation:tileIn .5s cubic-bezier(.3,1.6,.5,1)}
.stile.in .bills{opacity:1}
@keyframes tileIn{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
.scene-acts{display:grid;gap:12px;position:sticky;bottom:calc(14px + env(safe-area-inset-bottom))}
.scene-acts .btn{box-shadow:0 14px 24px -14px rgba(43,58,74,.7)}
.scene-acts .btn svg.i{width:22px;height:22px}
.scene-links{display:flex;justify-content:center;gap:22px}
.scene.done .scene-stack{opacity:0;height:0;margin:10px auto 0}
.scene.done .scene-amt{font-size:108px;animation:reveal .6s cubic-bezier(.3,1.6,.5,1)}
.scene.done .scene-amt small{font-size:46px;top:14px}
.scene.done .scene-k{color:var(--navy)}
.scene.done .scene-sub{font-size:15px;font-weight:600;color:var(--navy)}
.scene.short .scene-amt{color:var(--warn)}
.scene.short .scene-sub{font-weight:500;color:var(--muted)}
@keyframes reveal{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@media (min-width:900px){.scene-in{max-width:560px}.scene-tiles{grid-template-columns:repeat(4,1fr)}}

/* ---------- flying cash, floating numbers, confetti ---------- */
.flybill{position:fixed;z-index:95;width:56px;height:30px;font-size:13px;line-height:26px;pointer-events:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.42),0 8px 14px -8px rgba(43,58,74,.55);will-change:transform}
.floaty{position:fixed;z-index:95;pointer-events:none;font-size:17px;font-weight:700;padding:5px 11px;border-radius:99px;background:var(--navy);color:var(--cream);white-space:nowrap;box-shadow:0 8px 16px -8px rgba(43,58,74,.6)}
.floaty.plus{background:var(--sage);color:#fff}
.confetti{position:fixed;inset:0;z-index:96;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:0;display:block}

/* ---------- the envelope challenge ---------- */
.chpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chopt{text-align:left;padding:16px;display:flex;flex-direction:column;gap:3px;border-radius:22px;transition:transform .15s}
.chopt:active{transform:scale(.97)}
.chopt b{font-size:15px}
.chopt span{font-size:12.5px;color:var(--muted);line-height:1.35}
.chopt em{font-style:normal;font-family:var(--serif);font-size:26px;margin-top:10px}
.chhead{padding:16px;margin-bottom:14px}
.chhead .g-top .link{color:var(--muted);font-size:12.5px}
.ch-nums{display:flex;gap:22px;margin-top:14px}
.ch-nums b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.ch-nums b small{font-size:17px;color:var(--muted)}
.ch-nums span{font-size:12px;color:var(--muted)}
.chdice{margin-top:14px;width:100%;gap:7px}
.chdice svg.i{width:18px;height:18px}
.chgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px 8px;margin-bottom:14px}
.cht{position:relative;aspect-ratio:1/.84;border-radius:6px 6px 13px 13px;overflow:hidden;display:grid;place-items:center;padding-top:9px;font-weight:700;font-size:14.5px;color:var(--navy);background:var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 7px 11px -9px rgba(43,58,74,.55);transition:transform .15s}
.cht:before{content:"";position:absolute;left:0;right:0;top:0;height:44%;background:var(--flap);opacity:.5;clip-path:polygon(0 0,100% 0,50% 100%)}
.cht span{position:relative;display:grid;place-items:center}
.cht.c0{--bg:var(--butter);--flap:var(--b-butter)}.cht.c1{--bg:var(--blush-soft);--flap:var(--b-blush)}.cht.c2{--bg:var(--lilac);--flap:var(--b-lilac)}.cht.c3{--bg:var(--sky);--flap:var(--b-sky)}.cht.c4{--bg:var(--sage-soft);--flap:var(--b-sage)}
.cht:active{transform:scale(.92)}
.cht.done{background:var(--navy);color:var(--cream);box-shadow:none}
.cht.done:before{background:var(--cream);opacity:.14}
.cht.done svg.i{width:19px;height:19px;stroke-width:2.6}
.cht.hot{transform:scale(1.12);box-shadow:0 0 0 3px var(--blush-deep);z-index:1}
.cht.picked{animation:pick 1s ease-in-out 3}
.cht.justdone{animation:stamp .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes pick{0%,100%{transform:scale(1.12)}50%{transform:scale(1.24)}}
@keyframes stamp{0%{transform:scale(.7) rotate(-8deg)}100%{transform:scale(1) rotate(0)}}
@media (min-width:600px){.chgrid{grid-template-columns:repeat(10,1fr)}}
@media (prefers-reduced-motion:reduce){.blob,.h-play.due,.enter .bills i,.scene,.stile.in,.scene.done .scene-amt,.cht.picked,.cht.justdone,.env.bump .pocket{animation:none!important}.bills i{transition:none}}
.scene-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 10px}
.stile{width:calc((100% - 20px) / 3);flex:none}
.env.mini .pocket{padding:40px 6px 15px}
.env.mini b{font-size:20px}
.env.mini .env-name{font-size:12px}
@media (min-width:900px){.stile{width:calc((100% - 30px) / 4)}}
.btn.small.chdice{width:100%}
.scene-tiles{align-content:center;margin:18px 0 22px}
.scene.done .scene-amt.long{font-size:74px}
.scene.done .scene-amt.long small{font-size:32px;top:10px}

/* ---------- first screen ---------- */
.welcome.w2{position:relative;isolation:isolate;padding:34px 0 6px}
.welcome.w2 svg{width:auto;height:auto}
.welcome.w2 .seal svg.i{width:15px;height:15px}
.w2 .blob{filter:blur(40px)}
.w2 .b1{width:220px;height:220px;left:-90px;top:-60px;background:var(--blush);opacity:.45}
.w2 .b2{width:200px;height:200px;right:-90px;top:10px;background:var(--b-lilac);opacity:.28}
.w2 .b3{width:220px;height:160px;left:20%;top:150px;background:var(--b-butter);opacity:.28}
.w-envs{display:flex;justify-content:center;align-items:flex-end;gap:8px;margin:0 auto 26px}
.w-envs .env{width:92px;flex:none}
.w-envs .env .pocket{padding:46px 6px 26px}
.w-envs .env .seal{width:28px;height:28px;top:12px;margin-left:-14px}
.w-envs .env:nth-child(1){transform:rotate(-8deg) translateY(10px)}
.w-envs .env:nth-child(2){width:104px;z-index:1}
.w-envs .env:nth-child(3){transform:rotate(8deg) translateY(10px)}
.welcome.w2 .q{font-size:34px;line-height:1.1}
.welcome.w2 .qs{margin-top:10px;line-height:1.5}


/* ============================================================
   v2.1 — richer colour, stronger contrast, a real computer layout
   ============================================================ */
/* Today's big card: deep ink with a glow, so the number is the first thing you see */
.hero2{background:linear-gradient(155deg,var(--h1,#1F2B45) 0%,var(--h2,#33294F) 55%,var(--h3,#4B2B47) 100%);border:0;color:#FFF8EF;box-shadow:0 26px 44px -26px rgba(38,36,74,.75)}
.hero2 .blob{filter:blur(42px)}
.hero2 .b1{background:var(--blush);opacity:.6}
.hero2 .b2{background:#9B86FF;opacity:.5}
.hero2 .b3{background:#FFC64A;opacity:.3}
.hero2 .b4{background:#4FD1A1;opacity:.26}
:root[data-theme="dark"] .hero2 .blob{opacity:.42!important}
:root[data-theme="dark"] .hero2{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 26px 44px -26px rgba(0,0,0,.8)}
.hero2 .h-k{color:rgba(255,248,239,.78)}
.hero2 .h-big{color:#FFF8EF;text-shadow:0 6px 30px rgba(20,16,40,.35)}
.hero2 .h-big small{color:rgba(255,248,239,.62)}
.hero2 .h-sub{color:#FFF8EF}
.hero2 .h-note{color:rgba(255,248,239,.72)}
.hero2 .h-dots i{background:rgba(255,255,255,.2)}
.hero2 .h-dots i.gone{background:#FFF8EF;opacity:.95}
.hero2 .h-dots i.now{background:transparent;box-shadow:0 0 0 2.5px #FFB6A5}
.hero2 .h-play{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#FFF8EF;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero2 .h-play svg.i{color:#FFB6A5}
.hero2 .h-play.due,:root[data-theme="dark"] .hero2 .h-play.due{background:#FFF8EF;border-color:#FFF8EF;color:#1E2A3A}
.hero2 .h-play.due svg.i,:root[data-theme="dark"] .hero2 .h-play.due svg.i{color:#C04E3B}
.hero2.short .h-big{color:#FFB6A5}
/* banknotes a touch greener */
.bills i,.scene-stack i,.flybill{background:linear-gradient(180deg,#CDEBC2 0%,#8FCB8B 100%);border-color:#5E9E62;color:#245C33}
/* envelopes: clearer edges and text */
.env .pocket{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(30,42,58,.05),0 14px 22px -14px rgba(30,42,58,.5)}
.env .pocket:before{opacity:.62}
.env .pocket:after{border-color:rgba(255,255,255,.75)}
.env-sub{color:var(--navy);opacity:.72}
.env.add .pocket{border-color:#D8CBB8}
:root[data-theme="dark"] .env.add .pocket{border-color:var(--line)}
.stat span{color:var(--navy);opacity:.75}
.card{box-shadow:0 10px 24px -22px rgba(30,42,58,.45)}
.tabs{box-shadow:0 -10px 24px -20px rgba(30,42,58,.35)}
.tab{color:var(--muted)}.tab.on{color:var(--navy);font-weight:700}
.sec h2{font-size:16px}
.cht:before{opacity:.62}

/* Today layout: stacked on a phone, a real dashboard on a computer */
.tg2 .sec{margin-top:22px}
@media (min-width:900px){
  .main{max-width:1180px}
  .tg2{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:"hero quick" "hero coming" "envs envs" "next teaser" "spent spent";gap:20px}
  .g-hero{grid-area:hero}.g-quick{grid-area:quick}.g-coming{grid-area:coming}.g-envs{grid-area:envs}.g-next{grid-area:next}.g-teaser{grid-area:teaser}.g-spent{grid-area:spent}
  .g-hero .hero2{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 28px}
  .g-quick .card,.g-coming .card{height:100%}
  .tg2 .sec{margin:4px 2px 14px}
  .tg2 .card .sec{margin:0 0 12px}
  .tg2 .envs.home{grid-template-columns:repeat(4,1fr);gap:20px 18px}
  .tg2 .nextbill{margin-top:0;height:100%;padding:16px 18px}
  .tg2 .spentlink{margin-top:0}
  .h-big{font-size:132px}.h-big small{font-size:54px;top:17px}
  .h-sub{font-size:17px}.h-note{font-size:13.5px;max-width:320px}
  .side{box-shadow:10px 0 30px -28px rgba(30,42,58,.4)}
  .side .nav{color:var(--navy);opacity:.72}
  .side .nav.on{opacity:1;background:var(--navy);color:var(--cream)}
  :root[data-theme="dark"] .side .nav.on{background:var(--blush);color:#1E2A3A}
  .side .addbtn{background:linear-gradient(135deg,#F4A593,#E9806C);color:#3A1810;box-shadow:0 12px 20px -12px rgba(233,128,108,.9)}
  .page{max-width:820px}
  .envs{gap:22px 18px}
}
.h-dots{width:100%}

/* ---------- v2.2: saving, challenge and debt are envelopes too ---------- */
.pot{text-decoration:none;color:inherit}
.pot .pace{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.g-envs .sec + .envs + .sec{margin-top:26px}


/* ---------- v2.3: iPhone fixes ---------- */
/* iOS Safari gives date inputs their own width: make them fit like the other fields */
input[type="date"].inp{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;text-align:left;line-height:46px}
input[type="date"].inp::-webkit-date-and-time-value{text-align:left;margin:0}
input[type="date"].inp.focus{border-color:var(--navy);background:var(--card)}
/* the real screen height, without Safari's bars, so buttons at the bottom stay reachable */
.setup{min-height:100vh;min-height:100dvh}
.in-browser .setup{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
@media (max-width:899px){.in-browser .main{padding-bottom:calc(150px + env(safe-area-inset-bottom))}}
.nbtns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.nbtns .btn{margin-top:0}
.h-how{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:rgba(255,248,239,.85);text-decoration:underline;text-underline-offset:3px}
.h-how svg.i{width:15px;height:15px}
/* Phones: the setup buttons stay in view above Safari's bottom bar while the page scrolls */
@media (max-width:899px){
  .setup .acts{position:sticky;bottom:0;z-index:5;margin:0 -20px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(251,246,238,0) 0,var(--cream) 22px)}
  :root[data-theme="dark"] .setup .acts{background:linear-gradient(180deg,rgba(22,29,39,0) 0,var(--cream) 22px)}
  .setup .acts .err:empty{display:none}
}

/* ============================================================
   v2.4 — more envelope colours, and colours you can make your own
   ============================================================ */
:root{--s-mint:#C9EFE0;--i-mint:#1F6B52;--b-mint:#4DBE98;--s-teal:#C4E9EC;--i-teal:#1C6570;--b-teal:#3FAAB8;--s-peach:#FFDDBF;--i-peach:#94500F;--b-peach:#F29A4D;--s-rose:#FBD0E0;--i-rose:#9C2C5C;--b-rose:#EA6C9D;--s-grape:#E9CDF3;--i-grape:#74358C;--b-grape:#B86AD4;--s-lime:#DDEDB0;--i-lime:#50660E;--b-lime:#9CC02F;--s-stone:#E3E0DA;--i-stone:#4D4A44;--b-stone:#9A948A}
:root[data-theme="dark"]{--s-mint:#1F4A3D;--i-mint:#9FE3CB;--s-teal:#1B4A52;--i-teal:#9EDDE6;--s-peach:#5A3A1C;--i-peach:#FFCB9B;--s-rose:#5A2A40;--i-rose:#FFB4D0;--s-grape:#48295A;--i-grape:#E2B9F2;--s-lime:#3E4A17;--i-lime:#D3E88C;--s-stone:#3D3F45;--i-stone:#D5D2CC}
.c-mint{background:var(--s-mint);color:var(--i-mint)}.env-mint{--bg:var(--s-mint);--flap:var(--b-mint);--ink:var(--i-mint)}.opts .colopt.c-mint{background:var(--b-mint)}
.c-teal{background:var(--s-teal);color:var(--i-teal)}.env-teal{--bg:var(--s-teal);--flap:var(--b-teal);--ink:var(--i-teal)}.opts .colopt.c-teal{background:var(--b-teal)}
.c-peach{background:var(--s-peach);color:var(--i-peach)}.env-peach{--bg:var(--s-peach);--flap:var(--b-peach);--ink:var(--i-peach)}.opts .colopt.c-peach{background:var(--b-peach)}
.c-rose{background:var(--s-rose);color:var(--i-rose)}.env-rose{--bg:var(--s-rose);--flap:var(--b-rose);--ink:var(--i-rose)}.opts .colopt.c-rose{background:var(--b-rose)}
.c-grape{background:var(--s-grape);color:var(--i-grape)}.env-grape{--bg:var(--s-grape);--flap:var(--b-grape);--ink:var(--i-grape)}.opts .colopt.c-grape{background:var(--b-grape)}
.c-lime{background:var(--s-lime);color:var(--i-lime)}.env-lime{--bg:var(--s-lime);--flap:var(--b-lime);--ink:var(--i-lime)}.opts .colopt.c-lime{background:var(--b-lime)}
.c-stone{background:var(--s-stone);color:var(--i-stone)}.env-stone{--bg:var(--s-stone);--flap:var(--b-stone);--ink:var(--i-stone)}.opts .colopt.c-stone{background:var(--b-stone)}
.opts.colgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px 8px;justify-items:center}
/* page background */
:root[data-bg="snow"]{--cream:#F6F6F4;--line:#E3E2DE}
:root[data-bg="rose"]{--cream:#FCF1F0;--line:#EFD9D6}
:root[data-bg="mint"]{--cream:#F0F7F1;--line:#D6E6D8}
:root[data-bg="sky"]{--cream:#EEF5FA;--line:#D5E3EC}
:root[data-bg="lilac"]{--cream:#F4F1FB;--line:#DFD9EE}
:root[data-theme="dark"][data-bg="snow"]{--cream:#131517;--card:#22262B;--line:#33383F}
:root[data-theme="dark"][data-bg="rose"]{--cream:#1E181C;--card:#2D242A;--line:#43363D}
:root[data-theme="dark"][data-bg="mint"]{--cream:#141D1A;--card:#202C28;--line:#32423B}
:root[data-theme="dark"][data-bg="sky"]{--cream:#121C27;--card:#1E2B3A;--line:#304254}
:root[data-theme="dark"][data-bg="lilac"]{--cream:#19192A;--card:#26263A;--line:#3A3954}
/* the Colours panel */
.accopt{min-width:0;line-height:1.15;text-align:center}
.accopt i{box-shadow:inset 0 0 0 1px rgba(30,42,58,.12)}
.accopt.own{position:relative;cursor:pointer}
.accopt.own i{background:conic-gradient(#F08A74,#E3B32F,#63A56E,#5FA8DB,#8E7CE0,#EA6C9D,#F08A74)}
.accopt.own input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.accopt.own:focus-within{outline:2.5px solid var(--blush-deep);outline-offset:2px}
.lookprev{display:flex;gap:10px;align-items:stretch;margin:6px 0 2px;position:sticky;top:0;z-index:2;background:var(--cream);padding:8px 0}
.lp-hero{flex:1.5;border-radius:20px;padding:14px 16px;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-hero span{font-size:11.5px;font-weight:600;color:rgba(255,248,239,.78)}
.lp-hero b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05}
.lp-side{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.lp-chip{flex:1;display:flex;align-items:center;gap:7px;border-radius:14px;padding:0 12px;background:var(--blush-soft);color:var(--blush-deep);font-size:12.5px;font-weight:700;white-space:nowrap}
.lp-chip i{width:14px;height:14px;border-radius:50%;background:var(--blush);flex:none}
.lp-btn{flex:1;display:grid;place-items:center;border-radius:14px;background:var(--navy);color:var(--cream);font-size:12.5px;font-weight:700;min-height:32px}
.sheet .accents{grid-template-columns:repeat(6,1fr);gap:6px}
.sheet .accopt{font-size:10.5px;padding:9px 0 8px;border-radius:14px;letter-spacing:-.01em}
.sheet .accopt i{width:28px;height:28px}

/* ============================================================
   v2.4.1 — the app colour shows on every main button, with text that stays easy to read
   ============================================================ */
:root{--act:#EF8F78;--on-act:#1E2A3A;--deep-light:#B24A36}
.btn,.fab,.tabadd,.side .addbtn,.h-play.due,
:root[data-theme="dark"] .fab,:root[data-theme="dark"] .tabadd,:root[data-theme="dark"] .side .addbtn,:root[data-theme="dark"] .h-play.due{background:var(--act);border-color:var(--act);color:var(--on-act)}
.h-play.due svg.i,:root[data-theme="dark"] .h-play.due svg.i{color:var(--on-act)}
.btn{box-shadow:0 10px 18px -14px var(--act)}
.btn.ghost{background:var(--card);color:var(--navy);border:1.5px solid var(--line);box-shadow:none}
.btn.warn{background:var(--warn);color:#fff;box-shadow:none}
:root[data-theme="dark"] .btn.warn{color:#1E2A3A}
.fab,.tabadd{box-shadow:0 0 0 6px var(--cream),0 12px 22px -10px var(--act)}
.fab{box-shadow:0 10px 22px -8px var(--act)}
@media (min-width:900px){.side .addbtn{background:var(--act);color:var(--on-act);box-shadow:0 12px 20px -12px var(--act)}}
.lp-btn{background:var(--act);color:var(--on-act)}
/* Today card: small marks follow the app colour */
.hero2 .h-dots i.now{box-shadow:0 0 0 2.5px var(--blush)}
.hero2 .h-play svg.i{color:var(--blush)}
.hero2 .h-play.due,:root[data-theme="dark"] .hero2 .h-play.due{background:#FFF8EF;border-color:#FFF8EF;color:#1E2A3A}
.hero2 .h-play.due svg.i,:root[data-theme="dark"] .hero2 .h-play.due svg.i{color:var(--deep-light)}
.demo-bar a{color:var(--on-act)}
.ev.done{opacity:.88}
.logo small{color:var(--i-sage)}

/* ============================================================
   v2.5 — bills calendar and the year screen
   ============================================================ */
.cal{padding:12px 10px 12px;margin:12px 0 4px}
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-head span{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-bottom:6px}
.cday{min-height:58px;border-radius:12px;padding:5px 2px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;border:1.5px solid transparent}
.cday b{font-size:13.5px;font-weight:600;line-height:1.3;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.cday.has{background:var(--cream)}
.cday.payday{background:var(--sage-soft)}
.cday.today b{background:var(--navy);color:var(--cream)}
.cday.on{border-color:var(--navy)}
.cdots{display:flex;gap:3px;height:7px;align-items:center}
.cdots u,.cal-legend u{display:block;width:7px;height:7px;border-radius:50%;text-decoration:none;flex:none}
u.b{background:var(--b-blush)}u.d{background:var(--muted);opacity:.55}u.p{background:var(--sage)}u.g{background:var(--b-butter)}
.cday em{font-style:normal;font-size:10px;font-weight:700;line-height:1.1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip;color:var(--navy)}
.cday em.in{color:var(--i-sage)}
.cday em.paid{color:var(--muted);text-decoration:line-through}
.cal-legend{margin-top:10px;padding:0 4px}
.cal-list{margin-top:0}
a.ev{color:inherit}
.linkbtn{font-size:13px;font-weight:700;color:var(--blush-deep);text-decoration:underline;text-underline-offset:3px}
@media (min-width:900px){.cday{min-height:78px;padding-top:8px}.cday em{font-size:11.5px}.cal{padding:16px}}
/* year */
.ychart .mc-bars{gap:2px}
.ychart .mc-col{max-width:none;padding:4px 0 0}
.ychart .mc-pair{gap:2px}
.ychart .mc-pair i{width:38%;max-width:13px}
.ychart .mc-col.on .mc-k{background:none;color:var(--navy)}
.ychart .mc-k{padding:2px 0}
.mc-col.none .mc-pair{border-bottom:2px dotted var(--line)}
.ytable{padding:4px 14px;margin-bottom:4px}
.yt-row{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:6px;width:100%;padding:11px 0;font-size:14px;text-align:right;align-items:center}
.yt-row span:first-child{text-align:left;font-weight:700}
.yt-row+.yt-row{border-top:1px solid var(--line)}
.yt-head{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:9px 0}
.yt-head span:first-child{font-weight:700}
.yt-foot{font-weight:700;border-top:2px solid var(--navy)!important}
.yt-row .pos{color:var(--i-sage);font-weight:700}
.yt-row .neg{color:var(--warn);font-weight:700}
button.yt-row:active{opacity:.7}
.cday em{letter-spacing:-.02em}