:root{--bg:#F6F1E8;--card:#FFFDF8;--ink:#2F3A33;--muted:#7C857D;--line:#E8E0D2;--pri:#5E8B73;--pri2:#DCEBE1;--acc:#D9825B;--acc2:#F7E1D5;--gold:#E7B75A;--gold2:#FAEED2;--lil:#9C8CD6;--lil2:#ECE8FA;--hf:'Fraunces',Georgia,serif;--bf:'Inter',system-ui,sans-serif;--r:22px}
body.night{--bg:#1F2420;--card:#2A302B;--ink:#EEF0EA;--muted:#A5ADA6;--line:#3A413B;--pri:#86B59B;--pri2:#2F4337;--acc:#E99B77;--acc2:#4A3428;--gold:#E7B75A;--gold2:#463B23;--lil:#B1A4E6;--lil2:#36324A}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:var(--bf)}
button{font-family:inherit;cursor:pointer}
#app{display:flex;min-height:100vh}
.side{display:none}
main{flex:1;min-width:0;padding:18px 18px 110px;max-width:760px;margin:0 auto;width:100%}
h1{font:600 28px var(--hf);margin:6px 0 2px} .sub{color:var(--muted);font-size:14px;margin:0 0 14px}
.hello{color:var(--muted);font-size:14px} .hello b{display:block;color:var(--ink);font:600 28px var(--hf);margin-top:2px}
.big{margin-top:14px;border-radius:var(--r);background:var(--pri);color:#fff;padding:22px;position:relative;overflow:hidden}
.big:after{content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12)}
.big small{font-weight:600;font-size:12px;letter-spacing:.14em;opacity:.85}.big .n{font:700 58px/1 var(--hf);margin:10px 0 8px}.big .s{font-size:14px;opacity:.92}
.big.low{background:var(--acc)}
.row{display:flex;gap:10px;margin-top:12px}.mini{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;text-align:left;color:var(--ink)}
.mini small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:11px;color:var(--muted);letter-spacing:.06em}.mini div{font:700 22px var(--hf);margin-top:4px}
.step{margin-top:12px;background:var(--gold2);border-radius:18px;padding:14px;display:flex;gap:12px;align-items:center;border:0;width:100%;text-align:left;color:var(--ink)}
.step i{flex:none;width:36px;height:36px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-style:normal;color:#fff;font-weight:800}
.step b{display:block;font-size:15px}.step small{color:var(--muted);font-size:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 16px;margin-top:12px}
.card h4{margin:12px 0 6px;font-size:12px;color:var(--muted);letter-spacing:.08em;display:flex;justify-content:space-between}
.it{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-weight:600;font-size:15px}.card h4+.it{border-top:0}
.ico{flex:none;width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--pri2)}
.it>span{min-width:0}.it small{display:block;font-weight:500;font-size:12px;color:var(--muted)}.it .am{margin-left:auto;font-weight:700;text-align:right}
.it .pos{color:var(--pri)}.tick{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:none;color:#fff;font-weight:900}
.tick.on{background:var(--pri);border-color:var(--pri)}
.empty{color:var(--muted);font-size:14px;padding:14px 0}
.bar{height:10px;border-radius:10px;background:var(--line);overflow:hidden;margin:6px 0 2px}.bar i{display:block;height:100%;border-radius:10px;background:var(--pri)}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.k{border-radius:18px;padding:14px}.k small{font-weight:600;font-size:11px;letter-spacing:.06em;opacity:.8}.k div{font:700 24px var(--hf);margin-top:4px}
.pill{display:inline-block;border-radius:20px;padding:6px 12px;font-size:13px;font-weight:600;background:var(--card);border:1px solid var(--line);margin:0 6px 6px 0;color:var(--ink)}
.pill.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;font-size:12px;font-weight:600;text-align:center;margin:8px 0 12px}
.cal div{padding:8px 0 6px;border-radius:10px;background:var(--bg);min-height:42px}.cal .h{background:none;min-height:0;color:var(--muted);padding:2px}
.cal .t{outline:2px solid var(--pri)}.cal span{display:block;width:6px;height:6px;border-radius:50%;margin:4px auto 0}
.btn{border:0;border-radius:14px;padding:12px 16px;font-weight:700;font-size:15px;background:var(--pri);color:#fff}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
input,select{width:100%;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:12px;font-size:16px;font-family:inherit}
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 4px;letter-spacing:.04em}
.tabbar{position:fixed;left:0;right:0;bottom:0;height:72px;background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom);z-index:5}
.tabbar button,.side nav button{border:0;background:none;color:var(--muted);font-size:11px;font-weight:700}
.tabbar button b{display:block;font-size:20px;margin-bottom:2px}.tabbar .on{color:var(--pri)}
.fab{position:fixed;right:20px;bottom:90px;width:64px;height:64px;border-radius:50%;border:0;background:var(--acc);color:#fff;font-size:38px;line-height:62px;box-shadow:0 14px 26px -10px var(--acc);z-index:6}
.modal{position:fixed;inset:0;background:rgba(20,25,20,.35);z-index:10;display:flex;align-items:flex-end;justify-content:center}.modal.hidden{display:none}
.sheet{background:var(--card);width:100%;max-width:520px;border-radius:30px 30px 0 0;padding:16px 20px 24px;animation:up .25s ease}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.grab{width:44px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 12px}
.sheet h3{margin:0;font:600 22px var(--hf)}
.amt{font:700 56px var(--hf);text-align:center;margin:10px 0 4px}.amt span{color:var(--muted);font-size:32px}
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
.chip{border:0;border-radius:16px;padding:10px 4px;font-size:12px;font-weight:700;background:var(--bg);color:var(--ink)}.chip b{display:block;font-size:22px;margin-bottom:2px}
.chip.on{background:var(--pri2);outline:2px solid var(--pri)}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.keys button{border:0;background:var(--bg);color:var(--ink);border-radius:14px;padding:13px;font-size:22px;font-weight:700}
.save{margin-top:12px;width:100%;border:0;background:var(--pri);color:#fff;border-radius:16px;padding:16px;font-size:16px;font-weight:800}
.toast{position:fixed;left:50%;bottom:170px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-weight:600;opacity:0;transition:.3s;z-index:20;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}
.win{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.win i{font-style:normal;font-size:22px}
@media (min-width:980px){
  .side{display:block;width:230px;background:var(--card);border-right:1px solid var(--line);padding:22px 16px;position:sticky;top:0;height:100vh}
  .logo{font:700 24px var(--hf);margin-bottom:18px}.logo span{color:var(--pri)}
  .addb{width:100%;border:0;background:var(--acc);color:#fff;border-radius:14px;padding:12px;font-weight:700;font-size:15px;margin-bottom:16px}
  .side nav button{display:block;width:100%;text-align:left;font-size:15px;padding:11px 12px;border-radius:12px;margin-bottom:2px}.side nav button.on{background:var(--pri2);color:var(--pri)}
  .sync{position:absolute;bottom:22px;left:16px;right:16px;font-size:12px;font-weight:600;color:var(--pri)}
  .tabbar,.fab{display:none} main{padding:28px 36px;max-width:1100px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.kpis{grid-template-columns:repeat(4,1fr)}
  .modal{align-items:center}.sheet{border-radius:30px}
}

.sheet{max-height:92vh;overflow:auto}
/* v2 */
.vh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.vh .btn{flex:none;margin-top:8px}
.lnk{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:0}
.months{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}.months::-webkit-scrollbar{display:none}.months .pill{flex:none;margin:0}
.tgrid>div{min-width:0}
.bva{display:grid;grid-template-columns:110px 1fr 92px;gap:10px;align-items:center;font-size:13px;font-weight:600;padding:6px 0}.bva small{text-align:right;color:var(--muted);font-size:12px}.bva .bar{margin:0}
.leg{font-weight:600;letter-spacing:0;text-transform:none}.leg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 3px 0 8px}
.env{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}.env:first-child{border-top:0}.env small{color:var(--muted);font-size:12px}
.env .am{text-align:right;font-weight:800}.env .am small{display:block;font-weight:600}.pos{color:var(--pri)}.neg{color:var(--acc)}
.bar.big2{height:14px;margin:4px 0}.gl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600;padding-bottom:12px}
.fb{font-style:normal;font-size:11px;background:var(--acc2);color:var(--acc);border-radius:10px;padding:2px 8px;margin-left:6px}
.year{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;height:220px;align-items:end;padding-bottom:12px}
.yb{display:flex;flex-direction:column;align-items:center;height:100%}.yc{flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center}.yc i{width:40%;border-radius:6px 6px 2px 2px;min-height:2px}.yb small{font-size:10px;color:var(--muted);margin-top:4px}
.sw{display:flex;gap:10px}.sw button{width:38px;height:38px;border-radius:50%;border:3px solid var(--card);outline:2px solid transparent}.sw button.on{outline-color:var(--ink)}
.icons{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}.icons button{border:0;background:var(--bg);border-radius:10px;padding:6px 0;font-size:18px}.icons button.on{background:var(--pri2);outline:2px solid var(--pri)}
.fbtns{display:flex;gap:10px;align-items:center}.fbtns .save{flex:1}.fbtns .del{margin-top:12px;color:var(--acc)}
.rowbtn{width:100%;border-left:0;border-right:0;border-bottom:0;background:none;color:var(--ink);text-align:left}
textarea{width:100%;min-height:70px;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:12px;font:inherit;font-size:15px}
.cal em{display:flex;justify-content:center;gap:2px;font-style:normal}.cal em span{margin:4px 0 0}.cal .x{background:none}.cal div[data-day]{cursor:pointer}
.donut{display:flex;gap:16px;align-items:center;padding-bottom:12px}.legend div{display:flex;gap:6px;align-items:center;font-size:12px;font-weight:600;margin:5px 0}.legend b{margin-left:auto;padding-left:8px}.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
@media (min-width:980px){.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}}

.amt.small{font-size:34px;display:flex;align-items:center;gap:6px;margin:6px 0 14px}.amt.small input{font:inherit;border:0;border-bottom:2px solid var(--line);background:transparent;color:var(--ink);width:100%;padding:4px 0;outline:none}
.amt.small input:focus{border-color:var(--pri)}input.bad{border-color:var(--acc)!important}
.gbtn{display:inline-flex;align-items:center;gap:10px}.gbtn b{background:#fff;color:#4285F4;border-radius:50%;width:22px;height:22px;display:inline-grid;place-items:center;font:700 14px Inter,sans-serif}
.gchip{margin:0 0 12px;font-weight:600;color:var(--pri)}.gchip[data-s=signin],.gchip[data-s=error],.sync[data-s=signin],.sync[data-s=error]{color:var(--acc);cursor:pointer}
a.btn{text-decoration:none;display:inline-block}
.btns{display:flex;flex-wrap:wrap;gap:10px}.btns .btn{margin:0}
.demobar{position:sticky;top:0;z-index:7;display:flex;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;align-items:center;justify-content:center;gap:8px 14px;padding:8px 12px;background:var(--pri);color:#fff;font-size:13px;text-align:center}
.demobar.hidden{display:none}.demobar .dbtn{background:#fff;color:var(--pri);border-radius:999px;padding:5px 12px;font-weight:700;text-decoration:none;white-space:nowrap}
.demobar .dlink{background:none;border:0;color:#fff;text-decoration:underline;font:inherit;cursor:pointer;padding:0}
body.demo .side{top:0}
@media (max-width:420px){.demobar{font-size:11.5px;gap:6px;padding:8px 10px;justify-content:space-between}.demobar .dbtn{padding:4px 10px}}
@media (max-width:370px){.demobar{flex-wrap:wrap;white-space:normal;justify-content:center}}
/* the buttons of a sheet: same height, same corners, side by side */
.fbtns{align-items:stretch;margin-top:12px}.fbtns>*{margin:0!important;min-height:54px;border-radius:16px;padding:12px 16px;font-size:16px;font-weight:800;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}
.fbtns>.btn.ghost{flex:1}.fbtns>.del{flex:none;min-width:110px}
.amthint{text-align:center;font-size:13px;color:var(--muted);margin:0 0 10px}.amthint b{color:var(--pri)}
/* bottom bar: room above the icons, and the iPhone home bar below them */
@media (max-width:979px){
.tabbar{height:auto;min-height:72px;padding:12px 0 calc(10px + env(safe-area-inset-bottom));align-items:flex-start;box-sizing:border-box}
.tabbar button{padding:2px 6px}.tabbar button b{margin-bottom:5px}
main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.fab{bottom:calc(96px + env(safe-area-inset-bottom))}
}
.addform{max-width:560px}.addform label{display:block;margin-top:12px}.addform .amt.small{justify-content:flex-start;margin:4px 0 4px}.two{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}.addform .chips{margin-top:6px}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}
/* the amount box: a real field with room around the number */
.amt.small{font-size:32px;gap:10px;align-items:center;margin:6px 0 12px;padding:10px 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--bg);box-sizing:border-box}
.amt.small span{font-size:26px;line-height:1}
.amt.small input{border:0!important;padding:4px 0;margin:0;background:transparent;line-height:1.2;height:auto}
.amt.small:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri2)}
.addform .amt.small{margin:6px 0 8px}