:root{
  --bg:#0b1220; --ink:#e6edf6; --muted:#90a0b7;
  --accent:#14b8a6; --err:#f87171; --ok:#34d399; --line:#243049;
  /* Calm, non-alarming tones for the shame-free over-budget view. */
  --accent-soft:#5eead4;   /* lighter teal — over-spend overflow segment */
  --soft:#d9a85b;          /* warm sand — "past your pool"; attention, not alarm */
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);min-height:100vh;
  display:flex;justify-content:center;
  padding:env(safe-area-inset-top) 16px 24px;
}
.card{width:100%;max-width:480px;margin-top:24px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
h1{font-size:1.4rem;margin:0 0 4px}
h2{font-size:1rem;color:var(--muted);margin:22px 0 8px}
.muted{color:var(--muted);font-size:.92rem;margin:0 0 16px}
.link{color:var(--accent);text-decoration:none;font-size:.95rem}
.link.tiny{display:inline-block;font-size:.8rem;background:none;border:0;margin-top:18px;padding:0;cursor:pointer;color:var(--muted)}
code{background:#0d1626;border:1px solid var(--line);border-radius:6px;padding:1px 6px}
form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted)}
input,select{
  background:#0d1626;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:14px;font-size:1rem;width:100%;
}
input:focus,select:focus{outline:none;border-color:var(--accent)}
/* Hide native number spinners app-wide — typing a value is enough. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amount-wrap{
  flex-direction:row;align-items:center;background:#0d1626;
  border:1px solid var(--line);border-radius:14px;padding:6px 14px;
}
.amount-wrap .currency{font-size:1.8rem;color:var(--muted);margin-right:6px}
.amount-wrap input{border:0;background:none;font-size:2rem;padding:8px 0;font-weight:600}
button[type=submit]{
  background:var(--accent);color:#04201c;border:0;border-radius:14px;
  padding:16px;font-size:1.05rem;font-weight:700;cursor:pointer;
}
button[type=submit]:disabled{opacity:.6}
.status{min-height:1.2em;font-size:.9rem;margin:4px 0 0}
.status.ok{color:var(--ok)}
.status.err{color:var(--err)}
.cat{margin-bottom:14px}
.cat.tappable{cursor:pointer;border-radius:8px;padding:6px 8px;margin:0 -8px 8px;transition:background .15s}
.cat.tappable:hover{background:#0d1626}
.cat.selected{background:#0d1626;box-shadow:inset 0 0 0 1px var(--accent)}
.cat-top{display:flex;justify-content:space-between;font-size:.92rem;margin-bottom:6px}
.bar{position:relative;height:8px;background:#0d1626;border-radius:6px;overflow:hidden}
.fill{position:absolute;left:0;top:0;height:100%;background:var(--accent);transition:width .3s}
/* Over-spend continues past the limit in a lighter teal — past the line, not "failed". */
.fill-overflow{position:absolute;top:0;height:100%;background:var(--accent-soft);opacity:.55}
/* Thin marker at the limit line; uses the track colour to read as a notch. */
.limit-marker{position:absolute;top:0;height:100%;width:2px;background:var(--bg)}
/* Per-category footer: caption (left) + trend sparkline (right). */
.cat-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:5px;min-height:1em}
.cat-caption{font-size:.74rem;color:var(--muted)}
.spark{font-size:.8rem;line-height:1;letter-spacing:1px;white-space:nowrap;color:var(--muted)}
.spark-closing{color:var(--accent)}
.spark-widening{color:var(--soft)}
.spark-steady{color:var(--muted)}
/* Balance headline above the category bars. */
.balance-headline{font-size:1rem;font-weight:700;margin:0 0 12px;padding:9px 12px;border-radius:10px}
.balance-headline.ok{color:var(--accent);background:rgba(20,184,166,.10)}
.balance-headline.soft{color:var(--soft);background:rgba(217,168,91,.12)}
.balance-headline.tappable{cursor:pointer}
.month-total{font-size:1.1rem;font-weight:700;margin:0 0 16px}
.recent{list-style:none;padding:0;margin:0}
.recent li{
  display:flex;justify-content:space-between;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:.9rem;color:var(--muted);
}
.recent li strong{color:var(--ink)}
.footer-actions{display:flex;gap:22px;margin-top:18px}
.footer-actions .link.tiny{margin-top:0}
.goalbox{font-size:.9rem;background:rgba(20,184,166,.10);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:12px}
.cashflow{background:#0d1626;border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:6px}
.cf-row{display:flex;justify-content:space-between;font-size:.92rem;padding:3px 0;color:var(--muted)}
.cf-row.total{color:var(--ink);font-weight:700;border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.cf-goal{margin-top:10px;font-size:.85rem;border-radius:8px;padding:7px 9px;text-align:center}
.cf-goal.ok{background:rgba(52,211,153,.12);color:var(--ok)}
.cf-goal.warn{background:rgba(248,113,113,.14);color:var(--err)}
#fixedbox{margin:6px 0 12px;font-size:.9rem}
#fixedbox summary{cursor:pointer;color:var(--muted)}
.fixed-pct{color:var(--muted);font-size:.8rem;margin-left:6px}
#fixedbox>div{margin-top:8px}
.recent li.tappable{cursor:pointer}
.recent li.tappable:hover{color:var(--ink)}
.recent li.tappable:active{opacity:.55}
.link.tiny.danger{color:var(--err)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:0}
.modal[hidden]{display:none}
.modal-card{background:var(--bg);border:1px solid var(--line);border-radius:16px 16px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));width:100%;max-width:480px;display:flex;flex-direction:column;gap:12px;max-height:90vh;max-height:90dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}
@media(min-width:520px){.modal{align-items:center}.modal-card{border-radius:16px}}
.modal-card h2{margin:0;color:var(--ink);font-size:1.2rem}
#edit-save{background:var(--accent);color:#04201c;border:0;border-radius:14px;padding:15px;font-size:1.02rem;font-weight:700;cursor:pointer}
.monthnav{display:flex;align-items:center;justify-content:center;gap:18px;margin:2px 0 14px}
.navbtn{background:#0d1626;border:1px solid var(--line);color:var(--ink);border-radius:10px;width:40px;height:34px;font-size:1.1rem;cursor:pointer}
.navbtn:disabled{opacity:.35;cursor:default}
#view-label{font-weight:700;min-width:140px;text-align:center}
.chart{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:8px;overflow-x:auto}
.chart-col{flex:1 0 40px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;background:none;border:0;cursor:pointer;color:var(--muted)}
.chart-col .chart-bar{width:62%;min-height:2px;background:var(--accent);border-radius:4px 4px 0 0;transition:height .3s}
.chart-col.active .chart-bar{background:#5eead4}
.chart-amt{font-size:.64rem}
.chart-lbl{font-size:.72rem}
.recent li.muted{justify-content:center;color:var(--muted)}

/* ---- Goal tracker (ring) ---- */
.goalbox { background: none; border: 0; padding: 0; margin: 4px 0 12px; font-size: 1rem; }
.goal-card {
  display: flex; gap: 14px; align-items: center;
  background: #0d1626; border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
.goal-ring {
  width: 88px; height: 88px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.goal-ring .hole {
  width: 64px; height: 64px; border-radius: 50%; background: #0d1626;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.goal-ring .pct { font-size: 17px; font-weight: 800; color: var(--ink); }
.goal-ring .pct-lbl { font-size: 9px; letter-spacing: .04em; color: var(--muted); }
.goal-body { flex: 1; min-width: 0; }
.goal-phase { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); font-weight: 700; }
.goal-head { margin: 2px 0 0; font-size: 24px; font-weight: 800; color: var(--ink); }
.goal-head small { font-size: 13px; font-weight: 500; color: var(--muted); }
.goal-sub { margin: 1px 0 8px; font-size: 12px; color: var(--muted); }
.goal-pill {
  display: inline-block; background: rgba(52,211,153,.14); color: var(--ok); font-weight: 700;
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
}
.goal-next {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; padding: 9px 14px; border: 1px dashed var(--line);
  border-radius: 12px; color: var(--muted); font-size: 12px;
}
.goal-actions { display: flex; gap: 8px; margin-top: 12px; }
.goal-actions button {
  flex: 1; background: var(--accent); color: #04201c; border: 0;
  border-radius: 12px; padding: 12px; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.goal-actions button.btn-secondary { background: #0d1626; color: var(--accent); border: 1px solid var(--accent); }
#contrib-save, #adjust-save, #ce-save {
  background: var(--accent); color: #04201c; border: 0; border-radius: 14px;
  padding: 15px; font-size: 1.02rem; font-weight: 700; cursor: pointer;
}
.amount-wrap.inline { display: inline-flex; width: auto; margin-left: 6px; }
.amount-wrap.inline .currency { font-size: 1.1rem; }
.amount-wrap.inline input { font-size: 1.2rem; }

/* ---- Sinking funds ---- */
.fundsbox { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.fund-row {
  background: #0d1626; border: 1px solid var(--line); border-left: 3px solid #a78bfa;
  border-radius: 10px; padding: 9px 12px;
}
.fund-row.tappable { cursor: pointer; transition: box-shadow .15s; }
.fund-row.tappable:hover { box-shadow: inset 0 0 0 1px var(--line); }
.fund-row.selected { box-shadow: inset 0 0 0 1px #a78bfa; }
.fund-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fund-name { font-weight: 700; font-size: .9rem; color: var(--ink); }
.fund-bal { font-weight: 800; font-size: 1.05rem; color: var(--ink); white-space: nowrap; }
.fund-bal small { font-size: .74rem; font-weight: 500; color: var(--muted); }
.fund-sub { font-size: .72rem; color: var(--muted); margin-top: 5px; }
.fund-delta.bank { color: var(--ok); font-weight: 700; }
.fund-delta.draw { color: var(--soft); font-weight: 700; }
.fund-bal.deficit { color: var(--soft); }
.rb-fund-tag {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  color: #a78bfa; background: rgba(167,139,250,.14); border-radius: 999px; padding: 1px 6px; margin-left: 6px;
}

/* ---- Contribution history ---- */
#contrib-history { margin: 4px 0 12px; font-size: .9rem; }
#contrib-history summary { cursor: pointer; color: var(--muted); }
#contrib-history .recent { margin-top: 8px; }
.contrib-sub { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* ---- Rebalance budget editor ---- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; }
.section-head h2 { margin-bottom: 8px; }
.rb-summary { font-size: .9rem; font-weight: 700; margin: 4px 0 10px; color: var(--ink); }
.rb-summary.over { color: var(--err); }
.rb-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.rb-row .rb-name { flex: 1; font-size: .9rem; }
.rb-row .rb-pct { width: 44px; text-align: right; font-size: .78rem; color: var(--muted); }
.rb-row input { width: 96px; text-align: right; padding: 8px 10px; font-size: .95rem; }
#rb-save-month {
  background: var(--accent); color: #04201c; border: 0;
  border-radius: 14px; padding: 15px; font-size: 1.02rem; font-weight: 700; cursor: pointer;
}
#rb-save-baseline {
  background: #0d1626; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 14px; padding: 15px; font-size: 1.02rem; font-weight: 700; cursor: pointer;
  margin-top: 8px;
}
#rb-save-month[disabled], #rb-save-baseline[disabled] { opacity: .5; cursor: default; }

/* ---- Fixed bills add / cancel ---- */
#add-fixed-btn { margin-top: 10px; }
#fixedbox .cf-row.tappable { cursor: pointer; }
#fixedbox .cf-row.tappable:hover { color: var(--ink); }
#fa-save {
  background: var(--accent); color: #04201c; border: 0; border-radius: 14px;
  padding: 15px; font-size: 1.02rem; font-weight: 700; cursor: pointer;
}
#fe-save {
  background: var(--accent); color: #04201c; border: 0; border-radius: 14px;
  padding: 15px; font-size: 1.02rem; font-weight: 700; cursor: pointer;
}
.nudge {
  border: 1px solid var(--accent);
  background: #0d1626;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 16px 0;
  font-size: .92rem;
  color: var(--ink);
}
.nudge-actions { display: flex; gap: 16px; margin-top: 8px; }
.nudge .over { color: var(--err); font-weight: 600; }
.nudge .under { color: var(--ok); font-weight: 600; }

/* ---- Free-to-spend progress bar ---- */
.ftbar{height:10px;background:#0d1626;border-radius:6px;overflow:hidden;margin-top:10px}
.ftbar-fill{height:100%;transition:width .3s}
.ftbar-label{margin:6px 0 0;font-size:.82rem}
.band-green{background:var(--ok)}
.band-teal{background:var(--accent)}
.band-yellow{background:#eab308}
.band-orange{background:#f59e0b}
.band-over{background:var(--soft)}
.cashflow .over{color:var(--err);font-weight:600}
.cashflow .cf-soft{color:var(--soft);font-weight:600}

.topbar-actions{display:flex;align-items:center;gap:16px}
.topbar-actions .link.tiny.iconbtn{margin-top:0;font-size:1.15rem;line-height:1}

/* ---- Rebalance "Suggest" preview card ---- */
.rb-suggest-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 4px 0 12px; background: #0d1626; }
.rb-suggest-card[hidden] { display: none; }
.rb-suggest-head { margin: 0 0 8px; font-size: .82rem; color: var(--muted); }
#rb-suggest-list .cf-row { border: 0; padding: 4px 0; }
#rb-suggest-trade { display: block; margin: 8px 0 0; text-align: left; color: var(--accent); }
.rb-suggest-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
#rb-suggest-accept { background: var(--accent); color: #04201c; border: 0; border-radius: 12px; padding: 10px 16px; font-weight: 700; cursor: pointer; }
#rb-suggest-accept:disabled { opacity: .5; cursor: default; }

/* ---- Money-flow Sankey page ---- */
.flow { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.flow svg text { fill: var(--ink); font-size: 12px; }
.flow svg text.sk-amt { fill: var(--muted); font-size: 10.5px; }

/* ---- Money-flow category driver panel ---- */
.sk-cat { cursor: pointer; }
.flow-detail { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 12px; background: #0d1626; }
.flow-detail[hidden] { display: none; }
.cd-close { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; }
.cd-head { font-weight: 700; margin-bottom: 2px; }
.cd-verdict { color: var(--muted); font-size: .85rem; margin-bottom: 10px; }
.cb-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #0d1626; margin-bottom: 10px; }
.cb-seg { height: 100%; }
.cb-rest { background: var(--muted); opacity: .35; }
.cd-row { display: flex; justify-content: space-between; font-size: .9rem; padding: 3px 0; color: var(--ink); }
.cd-row span:last-child { color: var(--muted); white-space: nowrap; }
.cd-rest { font-size: .8rem; color: var(--muted); margin-top: 4px; }