@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{
  --bg:#f5f5f3; --surface:#fff; --ink:#17181c; --muted:#74777d; --line:#e6e6e2;
  --accent:#17181c; --good:#2f7d55; --warn:#a66a00; --bad:#b33a3a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif}
.app{max-width:1240px;margin:auto;padding:30px 28px 48px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.eyebrow,.card-label,.small-label{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--muted)}
h1{font-size:30px;margin:4px 0 0;letter-spacing:-.03em}
h2{font-size:18px;margin:4px 0 0;letter-spacing:-.02em}
.header-meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px}
.icon-btn{border:1px solid var(--line);background:var(--surface);width:36px;height:36px;border-radius:10px;font-size:19px;cursor:pointer}
.status-banner{display:flex;align-items:center;gap:12px;background:#fff8e8;border:1px solid #ead9ad;padding:14px 16px;border-radius:14px;margin-bottom:16px}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--warn)}
.status-banner strong{font-size:12px;display:block;letter-spacing:.08em}
.status-banner span{font-size:13px;color:var(--muted)}
.cards{display:grid;gap:14px;margin-bottom:14px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.card{padding:20px}
.metric{font-size:30px;font-weight:700;letter-spacing:-.04em;margin:10px 0 4px}
.muted{font-size:12px;color:var(--muted)}
.progress{height:7px;background:#ededeb;border-radius:99px;margin:17px 0 8px;overflow:hidden}
.progress span{display:block;height:100%;background:var(--ink);border-radius:99px;width:0}
.split{display:flex;justify-content:space-between}
.grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-bottom:14px}
.panel{padding:20px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.pill{border:1px solid var(--line);border-radius:99px;padding:5px 9px;font-size:11px;color:var(--muted)}
.chart-wrap{height:270px}
#cashChart{width:100%;height:100%;overflow:visible}
.chart-foot{display:flex;gap:50px;border-top:1px solid var(--line);padding-top:14px}
.chart-foot div{display:flex;flex-direction:column;gap:4px}
.chart-foot strong{font-size:15px}
.obligations{display:flex;flex-direction:column}
.obligation{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.obligation:last-child{border-bottom:0}
.date{font-size:11px;color:var(--muted);font-weight:600}
.ob-title{font-size:13px;font-weight:600}
.ob-cat{font-size:11px;color:var(--muted);margin-top:3px}
.amount{font-size:13px;font-weight:600}
.badge{font-size:10px;padding:4px 7px;border-radius:99px;margin-left:5px}
.paid{background:#edf7f0;color:var(--good)} .open{background:#fff3dc;color:var(--warn)}
.budget-row{padding:12px 0;border-bottom:1px solid var(--line)}
.budget-row:last-child{border-bottom:0}
.budget-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}
.budget-name{font-weight:600}.budget-values{color:var(--muted)}
.budget-bar{height:6px;background:#ededeb;border-radius:99px;overflow:hidden}
.budget-bar span{height:100%;display:block;background:var(--ink);border-radius:99px}
.summary-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.summary-item{background:#f8f8f6;border-radius:12px;padding:15px}
.summary-item .value{font-size:19px;font-weight:700;margin-top:5px}
.summary-item .label{font-size:11px;color:var(--muted)}
footer{display:flex;justify-content:space-between;padding:16px 4px;color:#999;font-size:10px}
@media(max-width:800px){
  .app{padding:20px 14px 40px}.cards-3,.grid-2{grid-template-columns:1fr}
  .metric{font-size:26px}.chart-wrap{height:220px}
}

.line{fill:none;stroke:#17181c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.area{stroke:none}.zero{stroke:#d7d7d2;stroke-dasharray:4 5}.min-dot{fill:#b33a3a;stroke:#fff;stroke-width:2}.axis{font:11px "DM Sans",sans-serif;fill:#92948f}