/* In, Out, Saved — styles
   Light palette lives on :root; dark redefines only tokens. */

:root{
  --bg:#F6F5F3; --card:#FFFFFF; --card2:#FAFAF9;
  --ink:#1A1D1B; --ink2:#4A514D; --dim:#78817C;
  --line:#E2E2DE; --line2:#EEEEEA;
  --in:#0E8A5F; --in-bg:#E4F3EC;
  --out:#D2503A; --out-bg:#FBEAE6;
  --save:#4F5BD5; --save-bg:#E9EAFA;
  --r:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(26,29,27,.05), 0 6px 18px -12px rgba(26,29,27,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131614; --card:#1C201E; --card2:#232825;
    --ink:#EDEFEC; --ink2:#C3C9C5; --dim:#8D958F;
    --line:#2E3431; --line2:#262B28;
    --in:#22A87A; --in-bg:#152A22;
    --out:#E2664B; --out-bg:#2E1D18;
    --save:#7C86E0; --save-bg:#1E2038;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#131614; --card:#1C201E; --card2:#232825;
  --ink:#EDEFEC; --ink2:#C3C9C5; --dim:#8D958F;
  --line:#2E3431; --line2:#262B28;
  --in:#22A87A; --in-bg:#152A22;
  --out:#E2664B; --out-bg:#2E1D18;
  --save:#7C86E0; --save-bg:#1E2038;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.fig{font-family:"Archivo","Manrope",sans-serif; font-variant-numeric:tabular-nums;
  font-stretch:112%; letter-spacing:-.02em}
.wrap{max-width:1120px; margin:0 auto; padding:0 18px 90px}
.mt{margin-top:16px}
.mt2{margin-top:26px}

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:40; background:var(--bg);
  border-bottom:1px solid var(--line); margin-bottom:22px;
  padding-top:env(safe-area-inset-top)}
.top-in{max-width:1120px; margin:0 auto; padding:14px 18px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.brand{font-family:"Archivo",sans-serif; font-weight:800; font-stretch:112%;
  font-size:17px; letter-spacing:-.02em; margin-right:auto}
.brand span{color:var(--save)}

.nav{display:flex; align-items:center; gap:6px}
.nav button{appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink);
  width:34px; height:34px; border-radius:var(--r-sm); cursor:pointer; font-size:15px; line-height:1;
  display:grid; place-items:center}
.nav button:hover{background:var(--card2); border-color:var(--dim)}
.nav .mon{font-family:"Archivo",sans-serif; font-weight:700; font-stretch:112%;
  min-width:148px; text-align:center; font-size:15px}
.today{appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink2);
  padding:0 12px; height:34px; border-radius:var(--r-sm); cursor:pointer;
  font:inherit; font-size:13px; font-weight:600}
.today:hover{background:var(--card2)}

.chip{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  padding:6px 11px; border-radius:99px; border:1px solid var(--line); color:var(--dim);
  background:var(--card); white-space:nowrap}
.chip i{width:7px; height:7px; border-radius:99px; background:currentColor; display:block}
.chip.dirty{color:var(--save); border-color:var(--save); background:var(--save-bg)}
.chip.ok{color:var(--in); border-color:transparent; background:var(--in-bg)}
.chip.warn{color:var(--out); border-color:transparent; background:var(--out-bg)}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow)}
.pad{padding:18px 20px}
.card-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px}
h2{margin:0; font-family:"Archivo",sans-serif; font-stretch:112%; font-size:16px;
  font-weight:700; letter-spacing:-.01em}
h3{margin:0 0 5px; font-family:"Archivo",sans-serif; font-stretch:112%; font-size:13.5px;
  font-weight:700; letter-spacing:-.005em}
.hint{font-size:12.5px; color:var(--dim)}
p.hint{margin:0 0 9px}

.grid{display:grid; gap:16px}
.stats{grid-template-columns:repeat(3,1fr); margin-bottom:16px}
.cols{grid-template-columns:1.1fr 1fr; margin-top:16px}

/* ---------- stat cards ---------- */
.stat{padding:18px 20px 20px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow); position:relative; overflow:hidden}
.stat::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--dim)}
.stat.i::before{background:var(--in)} .stat.o::before{background:var(--out)}
.stat.s::before{background:var(--save)}
.stat .k{font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--dim); margin-bottom:10px}
.stat .v{font-family:"Archivo",sans-serif; font-stretch:112%; font-weight:700;
  font-size:34px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.stat.i .v{color:var(--in)} .stat.o .v{color:var(--out)} .stat.s .v{color:var(--save)}
.stat .m{font-size:12.5px; color:var(--dim); margin-top:9px; min-height:19px}
.stat .cur{font-size:16px; font-weight:600; color:var(--dim); margin-right:4px;
  font-stretch:100%; letter-spacing:0}
.meter{height:7px; border-radius:99px; background:var(--line2); margin-top:13px;
  overflow:hidden; display:flex}
.meter i{display:block; height:100%}

/* ---------- forms ---------- */
.add{display:grid; grid-template-columns:auto 150px 1fr 150px 1fr auto; gap:10px; align-items:end}
.f{display:flex; flex-direction:column; gap:6px; min-width:0}
.f label{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--dim)}
input, select, textarea{
  font:inherit; font-size:14.5px; color:var(--ink); background:var(--card2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px;
  width:100%; min-width:0}
input, select{height:40px}
textarea{resize:vertical; line-height:1.6; font-size:13.5px}
input:focus, select:focus, textarea:focus{outline:2px solid var(--save); outline-offset:-1px;
  background:var(--card)}
input::placeholder{color:var(--dim)}
#amt{font-family:"Archivo",sans-serif; font-stretch:112%; font-weight:700; font-size:17px;
  font-variant-numeric:tabular-nums}

.seg{display:flex; border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; height:40px}
.seg button{appearance:none; border:0; background:var(--card2); color:var(--dim); cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:700; padding:0 15px; white-space:nowrap}
.seg button[aria-pressed="true"]{color:#fff}
.seg button.i[aria-pressed="true"]{background:var(--in)}
.seg button.o[aria-pressed="true"]{background:var(--out)}
.seg button:focus-visible{outline:2px solid var(--save); outline-offset:-2px}

.go{appearance:none; border:0; background:var(--ink); color:var(--bg); cursor:pointer;
  font:inherit; font-weight:700; font-size:14.5px; height:40px; padding:0 24px;
  border-radius:var(--r-sm); white-space:nowrap}
.go.small{height:36px; font-size:13.5px; padding:0 18px; margin-top:12px}
.go:hover{opacity:.87}
.go:focus-visible{outline:2px solid var(--save); outline-offset:2px}

.ghost{appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink2);
  cursor:pointer; font:inherit; font-size:13.5px; font-weight:600; height:36px; padding:0 15px;
  border-radius:var(--r-sm); display:inline-flex; align-items:center}
.ghost:hover{background:var(--card2); border-color:var(--dim)}
.ghost.danger{color:var(--out); border-color:var(--out)}
.ghost.file{position:relative; overflow:hidden}
.ghost.file input{position:absolute; inset:0; opacity:0; cursor:pointer; height:100%}
.row{display:flex; flex-wrap:wrap; gap:9px}

/* ---------- chart ---------- */
.chart-box{position:relative}
svg{display:block; width:100%; height:auto; overflow:visible}
.tip{position:absolute; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--ink); color:var(--bg); border-radius:8px; padding:9px 11px; font-size:12px;
  line-height:1.6; white-space:nowrap; z-index:20; font-variant-numeric:tabular-nums}
.tip b{font-weight:700}
.legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:6px; font-size:12.5px; color:var(--dim)}
.legend span{display:inline-flex; align-items:center; gap:7px}
.sw{width:11px; height:11px; border-radius:3px}

/* ---------- category rows ---------- */
.cat{display:grid; grid-template-columns:1fr auto; gap:5px 12px; padding:11px 0;
  border-bottom:1px solid var(--line2)}
.cat:last-child{border-bottom:0}
.cat .n{font-size:14px; font-weight:600}
.cat .a{font-family:"Archivo",sans-serif; font-stretch:112%; font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:600}
.cat .b{grid-column:1/-1; height:6px; border-radius:99px; background:var(--line2); overflow:hidden}
.cat .b i{display:block; height:100%; background:var(--out); border-radius:99px}
.cat .p{font-size:12px; color:var(--dim)}

/* ---------- transactions ---------- */
.day{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); padding:16px 0 7px; border-bottom:1px solid var(--line2)}
.day:first-child{padding-top:0}
.tx{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line2)}
.tx .dot{width:9px; height:9px; border-radius:99px; flex:none}
.tx .txt{flex:1; min-width:0; display:flex; flex-direction:column}
.tx .t1{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tx .t2{font-size:12px; color:var(--dim)}
.tx .amt{font-family:"Archivo",sans-serif; font-stretch:112%; font-weight:700; font-size:14.5px;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.tx .del{appearance:none; border:0; background:transparent; color:var(--dim); cursor:pointer;
  font-size:17px; line-height:1; padding:4px 2px; border-radius:6px; opacity:.45}
.tx:hover .del, .tx .del:focus-visible{opacity:1}
.tx .del:hover{color:var(--out)}
.scroll{max-height:430px; overflow-y:auto}

/* ---------- investments ---------- */
.inv{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:end}
.inv .out-v{font-family:"Archivo",sans-serif; font-stretch:112%; font-weight:700; font-size:26px;
  font-variant-numeric:tabular-nums; line-height:1.2}

/* ---------- settings ---------- */
.settings summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px}
.settings summary::-webkit-details-marker{display:none}
.settings summary::before{content:"+"; font-family:"Archivo",sans-serif; font-weight:700;
  color:var(--dim); font-size:16px; width:16px}
.settings[open] summary::before{content:"–"}
.settings[open] summary{margin-bottom:18px}
.set-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* ---------- misc ---------- */
.empty{text-align:center; padding:34px 20px; color:var(--dim)}
.empty p{margin:0 0 14px; font-size:14px}
.link{appearance:none; border:0; background:transparent; color:var(--save); cursor:pointer;
  font:inherit; font-weight:700; font-size:14px; text-decoration:underline; text-underline-offset:3px}
.foot{margin-top:26px; font-size:12.5px; color:var(--dim); text-align:center}

@media (max-width:900px){
  .stats{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .add{grid-template-columns:1fr 1fr}
  .add .seg-w, .add .go-w{grid-column:1/-1}
  .go{width:100%}
  .inv{grid-template-columns:1fr}
  .set-grid{grid-template-columns:1fr}
  .brand{width:100%; margin-bottom:4px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* a month where you spent more than you earned */
.stat.s.neg::before{background:var(--out)}
.stat.s.neg .v{color:var(--out)}