/* ============================================================
   BRAND
   ------------------------------------------------------------
   A calm, confident money palette. Emerald for the brand chrome
   and for money you have left. Coral for what is committed
   (fixed bills). Blue for what moves month to month (variable
   spending). Gold is kept apart from all of that, for goals -
   money with a job, not money that is spoken for yet.
   ============================================================ */
:root{
  --brand:    #0B6E4F;  /* emerald - the brand, chrome */
  --brand-2:  #0E8C63;  /* lifted emerald - hovers, fills */
  --ink:      #10241C;  /* near-black green, text */
  --good:     #189B67;  /* leftover / positive money */
  --fixed:    #D6524F;  /* coral - committed, fixed bills */
  --variable: #3D7FE0;  /* blue - flexible, variable spend */
  --gold:     #C9992F;  /* goals and savings, kept apart */
  --paper:    #F4F6F4;
  --card:     #FFFFFF;

  --warn: var(--fixed);
  --line: rgba(16,36,28,.13);
  --muted: rgba(16,36,28,.60);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:var(--font); background:var(--paper); color:var(--ink);
  font-size:15px; line-height:1.45;
  padding-bottom:env(safe-area-inset-bottom);
}
button{font-family:inherit; font-size:inherit; cursor:pointer;
  transition:transform .09s ease, background .16s ease, border-color .16s ease;
  -webkit-user-select:none; user-select:none;}
button:active{transform:scale(.975);}
button:disabled:active{transform:none;}
h1,h2,h3{margin:0; line-height:1.2;}

.app{max-width:760px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;}

.topbar{
  background:var(--brand); color:#fff; padding:12px 16px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
  padding-top:calc(12px + env(safe-area-inset-top));
}
.logo{font-weight:800; letter-spacing:.5px; font-size:19px; display:flex; align-items:center; gap:9px;}
.coin{
  width:28px; height:28px; border-radius:50%; flex:0 0 28px;
  background:linear-gradient(135deg, var(--gold), var(--brand-2));
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.topbtns{margin-left:auto; display:flex; align-items:center; gap:14px;}
.period{font-size:12.5px; opacity:.9; font-weight:700;}
.ver{display:block; border:0; background:transparent;
  color:rgba(255,255,255,.65); font-size:10px; font-weight:800; letter-spacing:.7px; padding:1px 0;}
.ver:hover{color:var(--gold);}
.ver.gear{font-size:17px; line-height:1; color:rgba(255,255,255,.85);}
.ver.gear:hover{color:var(--gold);}
#settingsBtn[hidden]{display:none;}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line);}
.stat{background:var(--card); padding:9px 5px; text-align:center;}
.stat .k{font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); font-weight:700;}
.stat .v{font-size:15.5px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:1px;}
.stat .v.good{color:var(--good);}
.stat .v.bad{color:var(--fixed);}
@keyframes pop{0%{transform:scale(1)} 35%{transform:scale(1.16)} 100%{transform:scale(1)}}
.stat .v.pop{animation:pop .5s ease;}

main{flex:1; padding:14px; display:flex; flex-direction:column; gap:14px;}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px;}
.card h2{font-size:12px; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; font-weight:800;}
.card p.note{font-size:12px; color:var(--muted); margin:8px 0 0;}
.card p.lede{font-size:14px; margin:0 0 4px;}

.nudge{border-color:var(--brand); background:linear-gradient(180deg, rgba(11,110,79,.07), rgba(11,110,79,0));}
.nudge h2{color:var(--brand);}
.nudge.alert{border-color:var(--fixed); background:linear-gradient(180deg, rgba(214,82,79,.09), rgba(214,82,79,0));}
.nudge.alert h2{color:var(--fixed);}

.hero-num{font-size:38px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--good);}
.hero-num.bad{color:var(--fixed);}
.hero-sub{font-size:13px; color:var(--muted); margin-top:2px; font-weight:600;}
.hero-fun{font-size:12.5px; color:var(--muted); margin-top:10px; padding-top:10px; border-top:1px solid var(--line);}

.btn{border:0; border-radius:10px; padding:11px 16px; font-weight:700; background:var(--brand); color:#fff; min-height:44px;}
.btn:hover{background:var(--brand-2);}
.btn:disabled{background:var(--line); color:var(--muted); cursor:not-allowed;}
.btn.wide{width:100%; font-size:15.5px;}
.btn.ghost{background:transparent; color:var(--brand); border:1.5px solid var(--brand);}
.btn.ghost:hover{background:rgba(11,110,79,.08);}
.btn.danger{background:transparent; color:var(--fixed); border:1.5px solid var(--fixed);}
.btn.danger:hover{background:rgba(214,82,79,.1);}
.btn.danger.armed{background:var(--fixed); color:#fff;}
.btn.sm{padding:8px 12px; min-height:38px; font-size:12.5px; border-radius:8px;}

.chiprow{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 12px;}
.chip{border:1.5px dashed var(--line); background:transparent; color:var(--muted);
  border-radius:20px; padding:6px 12px; font-size:12.5px; font-weight:700;}
.chip:hover{border-color:var(--brand); color:var(--brand); border-style:solid;}
.chip.add{border-style:solid; border-color:var(--brand); color:var(--brand);}
.chip.add:hover{background:rgba(11,110,79,.08);}

.custrow{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 2px; border-top:1px solid var(--line);}
.custrow:first-child{border-top:0;}
.custrow .iname{font-weight:700; font-size:14px;}
.addrow{display:flex; gap:8px; margin-top:12px;}
.addrow .field{flex:1; margin-bottom:0;}

.itemlist{margin-top:2px;}
.item{display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 2px; border-top:1px solid var(--line); background:transparent; border-left:0; border-right:0; border-bottom:0;
  text-align:left; color:inherit; font:inherit; border-radius:0;}
.item:first-child{border-top:0;}
.item:active{background:rgba(16,36,28,.03);}
.item .ilabel{display:flex; flex-direction:column; gap:2px; min-width:0;}
.item .iname{font-weight:700; font-size:14.5px;}
.item .idur{font-size:11px; color:var(--muted); font-weight:600;}
.item .idur.fin{color:var(--fixed); font-weight:800;}
.item .iamt{font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;}
.empty{font-size:13.5px; color:var(--muted); padding:6px 2px 4px;}

.totalrow{display:flex; justify-content:space-between; align-items:baseline; padding-top:12px; margin-top:6px; border-top:2px solid var(--line); font-weight:800;}
.totalrow .pct{font-size:11px; color:var(--muted); font-weight:700; margin-left:7px;}

.bar{height:8px; background:var(--line); border-radius:4px; overflow:hidden; margin-top:9px;}
.bar i{display:block; height:100%; border-radius:4px; background:var(--good); transition:width .3s ease;}
.bar i.warn{background:var(--gold);}
.bar i.bad{background:var(--fixed);}
.gauge-lab{display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; color:var(--muted); margin-top:2px;}
.gauge-lab b{color:var(--ink);}

.donut-wrap{display:flex; align-items:center; gap:20px; margin-top:4px;}
.donut{width:128px; height:128px; border-radius:50%; flex:0 0 128px; display:flex; align-items:center; justify-content:center;}
.donut-hole{width:82px; height:82px; border-radius:50%; background:var(--card); display:flex; flex-direction:column;
  align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--line);}
.donut-hole b{font-size:19px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;}
.donut-hole small{font-size:9px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-top:1px;}
.legend{display:flex; flex-direction:column; gap:9px; flex:1; min-width:0;}
.legend .lrow{display:flex; align-items:center; gap:8px; font-size:12.5px;}
.legend i{width:10px; height:10px; border-radius:3px; flex:0 0 10px;}
.legend .lname{flex:1; color:var(--muted); font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.legend .lval{font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;}

.goal{border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px;}
.goal:last-child{margin-bottom:0;}
.goal.done{border-color:var(--gold); background:linear-gradient(180deg, rgba(201,153,47,.10), rgba(201,153,47,0));}
.goal .grow1{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:7px;}
.goal .gname{font-weight:800; font-size:14.5px;}
.goal .gnums{font-size:12px; color:var(--muted); font-weight:700; white-space:nowrap;}
.goal .gtag{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  background:rgba(201,153,47,.18); color:#8a6a1c; border-radius:6px; padding:1px 7px; margin-left:6px;}
.goal-add{width:100%; border:1.5px dashed var(--line); background:transparent; color:var(--muted);
  border-radius:12px; padding:13px; font-weight:700; font-size:13.5px;}
.goal-add:hover{border-color:var(--brand); color:var(--brand);}

.chart{display:flex; align-items:flex-end; gap:4px; height:110px; margin-top:6px;}
.chart .col{flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end; height:100%;}
.chart .b{border-radius:4px 4px 0 0; background:var(--good); min-height:2px; transition:height .3s ease;}
.chart .b.bad{background:var(--fixed);}
.chart .lab{font-size:9px; text-align:center; color:var(--muted); font-weight:800; padding-top:4px;}

table.hist{width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; margin-top:12px;}
table.hist th{text-align:right; font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:0 0 6px; font-weight:800;}
table.hist td{text-align:right; padding:8px 0; border-top:1px solid var(--line); vertical-align:middle;}
table.hist th:first-child, table.hist td:first-child{text-align:left; font-weight:800;}
table.hist td.del{text-align:right; width:26px;}
.xbtn{border:0; background:transparent; color:var(--muted); font-size:16px; font-weight:800; padding:2px 4px; line-height:1;}
.xbtn:hover{color:var(--fixed);}

.field{margin-bottom:14px;}
.field label{display:block; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.field input{width:100%; border:1.5px solid var(--line); border-radius:11px; padding:12px 13px;
  font-size:16px; font-family:inherit; color:var(--ink); background:var(--paper);}
.field input:focus{outline:none; border-color:var(--brand); background:var(--card);}
.field .hint{font-size:11.5px; color:var(--muted); margin-top:5px;}

.nav{
  display:grid; grid-template-columns:repeat(4,1fr); gap:5px;
  position:sticky; bottom:0; background:var(--paper);
  padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); z-index:20;
}
.nav button{
  border:0; background:transparent; color:var(--muted);
  font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  padding:8px 2px; border-radius:9px; min-height:44px;
}
.nav button.on{background:var(--brand); color:#fff;}
.nav button .badge{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--fixed); margin-left:4px; vertical-align:middle;}
.nav button.on .badge{background:#fff;}

.modal-host{
  position:fixed; inset:0; background:rgba(16,36,28,.55); z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
  animation:fade .16s ease-out; backdrop-filter:saturate(140%) blur(2px);
}
@keyframes fade{from{opacity:0} to{opacity:1}}
.modal{
  background:var(--card); border-radius:22px 22px 0 0; width:100%; max-width:520px;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom));
  max-height:88vh; overflow:auto; overscroll-behavior:contain;
  animation:rise .26s cubic-bezier(.2,.85,.3,1);
}
@keyframes rise{from{transform:translateY(30px); opacity:.5} to{transform:none; opacity:1}}
.modal:before{content:""; display:block; width:38px; height:4px; border-radius:3px; background:var(--line); margin:2px auto 14px;}
@media (min-width:600px){
  .modal-host{align-items:center; padding:18px;}
  .modal{border-radius:20px; padding-bottom:18px;}
}
.modal .kicker{font-size:11px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:var(--brand); margin-bottom:6px;}
.modal h3{font-size:19px; margin-bottom:14px;}
.modal p{margin:0 0 14px; font-size:14.5px;}
.choices{display:flex; flex-direction:column; gap:8px;}
.choice{text-align:left; border:1.5px solid var(--line); background:transparent; border-radius:11px; padding:12px; color:var(--ink);}
.choice:hover{border-color:var(--brand); background:rgba(11,110,79,.05);}
.choice b{display:block; font-size:14.5px;}
.choice small{color:var(--muted); font-size:12.5px;}

.hero{text-align:center; padding:22px 18px;}
.hero .mark{font-size:30px; font-weight:800; letter-spacing:1px; color:var(--ink); display:flex; align-items:center; justify-content:center; gap:10px;}
.hero .sub{color:var(--muted); font-size:13px; margin-top:6px;}
.spinner{width:30px; height:30px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--brand);
  animation:spin .8s linear infinite; margin:6px auto 0;}
@keyframes spin{to{transform:rotate(360deg)}}
.autherr{color:var(--fixed); font-size:13px; font-weight:700; margin:12px 0 -4px; text-align:left;}
.linkbtn{display:block; width:100%; background:transparent; border:0; color:var(--brand); font-weight:700; font-size:13px; padding:10px; margin-top:2px;}
.linkbtn:hover{text-decoration:underline;}

.note{font-size:12px; color:var(--muted); margin-top:10px;}
.hide-file{position:absolute; width:1px; height:1px; overflow:hidden; opacity:0;}
@media (max-width:380px){ .stat .v{font-size:14px;} .hero-num{font-size:32px;} .donut-wrap{flex-direction:column; align-items:flex-start;} }