:root{
  --cream:#fbf6ed;--paper:#fffdf8;--rose:#e8b9b9;--rose-soft:#f7e2e2;--sage:#bdd2c8;--sage-soft:#e5f0eb;--butter:#f5dda0;--butter-soft:#fbefd0;--blue:#bed3df;--blue-soft:#e6f0f5;--ink:#332d2a;--muted:#857a72;--line:#ded4c8;--green:#d7ecd9;--red:#f6ceca;--lav:#ddd4ee;--shadow:0 18px 45px rgba(75,55,45,.13)
}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(135deg,#f8eadf,#f4f0df 52%,#e8f1eb);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.phone-shell{min-height:100vh;display:grid;place-items:center;padding:22px}.app-frame{width:min(430px,100%);height:min(900px,calc(100vh - 28px));background:var(--cream);border:1px solid rgba(120,90,75,.18);border-radius:38px;box-shadow:var(--shadow);overflow:hidden;position:relative;display:flex;flex-direction:column}.topbar{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:start;padding:24px 18px 10px;background:linear-gradient(180deg,#fff8f1,rgba(255,248,241,.82));z-index:3}.title-block{min-width:0}.back-button[hidden]{visibility:hidden;display:block}h1,h2,h3,p{margin:0}h1{font-size:29px;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}h2{font-size:24px;letter-spacing:-.035em}h3{font-size:18px}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:.15em;color:var(--muted);font-weight:750}.muted{color:var(--muted);font-size:13px}.icon-button,.round-button{border:1px solid var(--line);background:var(--paper);border-radius:999px;width:38px;height:38px;box-shadow:0 5px 15px rgba(70,50,35,.06)}.screen{display:none;overflow:auto;padding:10px 18px 104px;gap:14px;flex:1}.screen.active{display:flex;flex-direction:column}.month-card{display:flex;align-items:center;justify-content:space-between;background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:14px 16px}.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kpi,.card{background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 8px 24px rgba(90,65,45,.06)}.kpi{padding:14px;min-height:104px;display:flex;flex-direction:column;gap:7px;text-align:left;border-color:var(--line)}.kpi span{font-size:12px;color:var(--muted);font-weight:700}.kpi strong{font-size:21px}.kpi small{font-size:12px;color:var(--muted)}.rose{background:var(--rose-soft)}.sage{background:var(--sage-soft)}.butter{background:var(--butter-soft)}.blue{background:var(--blue-soft)}.card{padding:16px}.card-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.pill{font-size:12px;padding:7px 10px;border-radius:999px;border:1px solid var(--line);font-weight:800;background:var(--paper)}.pill.success{background:var(--green)}.pill.danger{background:var(--red)}.donut-wrap{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center}.donut{width:132px;height:132px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}.spend-donut{background:conic-gradient(var(--rose) 0 71%,var(--sage) 71% 100%,var(--butter) 0)}.money-donut{background:conic-gradient(var(--rose) 0 34%,var(--sage) 34% 34%,var(--blue) 34% 100%)}.donut:after{content:"";position:absolute;inset:30px;background:var(--paper);border-radius:50%;border:1px solid var(--line)}.legend{display:flex;flex-direction:column;gap:8px}.legend-row{display:flex;align-items:center;gap:8px;justify-content:space-between;border:0;background:#fffaf4;border-radius:15px;padding:9px 10px;text-align:left}.dot{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:auto}.rose-dot{background:var(--rose)}.sage-dot{background:var(--sage)}.butter-dot{background:var(--butter)}.blue-dot{background:var(--blue)}.text-button{border:0;background:transparent;color:#8d6767;font-weight:800}.insight-list{display:flex;flex-direction:column;gap:8px}.insight{border:1px solid var(--line);border-radius:17px;background:#fffaf4;padding:11px;text-align:left;display:grid;gap:3px}.insight span{color:var(--muted);font-size:13px}.insight.good{background:var(--green)}.insight.warn{background:var(--butter-soft)}.insight.neutral{background:var(--blue-soft)}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-card{border:1px solid var(--line);background:var(--paper);border-radius:19px;padding:15px;font-weight:850;box-shadow:0 6px 18px rgba(80,60,40,.06)}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#f0e5d9;border:1px solid var(--line);border-radius:18px;padding:5px}.segmented button{border:0;background:transparent;border-radius:13px;padding:10px 8px;font-weight:850;color:var(--muted)}.segmented button.active{background:var(--paper);color:var(--ink);box-shadow:0 3px 10px rgba(80,60,40,.08)}.segmented.mini{grid-template-columns:repeat(3,1fr)}.tab-panel{display:none}.tab-panel.active{display:block}.mini-chart{height:145px;display:flex;align-items:end;gap:12px;padding:8px 12px 0;border-radius:20px;background:linear-gradient(180deg,#fff,#fff8f0);margin-bottom:14px}.mini-chart div{flex:1;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,var(--rose),var(--sage));height:var(--h);min-height:4px}.table-card{display:flex;flex-direction:column;gap:7px}.table-head,.table-row{display:grid;grid-template-columns:1.3fr .9fr .8fr;gap:8px;align-items:center}.table-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800;padding:0 8px}.table-row{border:1px solid var(--line);background:#fffaf4;border-radius:15px;padding:11px 9px;text-align:left}.table-row span{font-size:13px}.table-row b{font-size:13px;text-align:right}.table-row em{font-style:normal;font-size:12px;font-weight:850;text-align:right;padding:6px 7px;border-radius:999px;background:var(--blue-soft)}.table-row .ok,.ok{background:var(--green)}.table-row .bad,.bad{background:var(--red)}.table-row.total{background:var(--rose-soft);font-weight:850}.primary-button,.secondary-button{border:0;border-radius:19px;font-weight:900;padding:15px 18px}.primary-button{background:linear-gradient(135deg,var(--rose),#d99d9d);color:#3b2b28;box-shadow:0 10px 25px rgba(120,70,70,.18)}.secondary-button{background:var(--sage-soft);border:1px solid var(--line)}.sticky-action{position:sticky;bottom:6px}.form-card{display:flex;flex-direction:column;gap:14px}.form-card label{font-size:13px;font-weight:800;color:var(--muted);display:grid;gap:6px}.form-card input,.form-card select{border:1px solid var(--line);background:#fffaf4;border-radius:16px;padding:13px}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.goal-card,.detail-card{text-align:center}.progress{height:14px;background:#f1e7db;border-radius:999px;overflow:hidden;margin:18px 0 8px}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--rose));border-radius:999px}.account-card{display:grid;gap:6px;text-align:left}.account-card span{color:var(--muted);font-weight:800}.account-card strong{font-size:24px}.account-card small{color:var(--muted)}.checklist{display:grid;gap:12px}.checklist label{display:flex;gap:10px;background:#fffaf4;border:1px solid var(--line);border-radius:16px;padding:12px}.list-card{display:grid;gap:9px}.list-row{display:grid;grid-template-columns:1fr auto;gap:3px 10px;border:1px solid var(--line);background:#fffaf4;border-radius:16px;padding:12px;text-align:left}.list-row small{grid-column:1;color:var(--muted)}.list-row b{grid-row:1/3;grid-column:2;align-self:center}.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.category-grid button,.months-grid button{border:1px solid var(--line);background:#fffaf4;border-radius:17px;padding:15px;font-weight:850}.months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.months-grid small{color:var(--muted);font-weight:650}.line-chart{height:170px;border-radius:20px;background:linear-gradient(180deg,#fff,#fff8f0);display:flex;align-items:end;gap:20px;padding:18px}.line-chart span{width:18%;height:calc(100% - var(--y));min-height:10px;border-radius:999px;background:linear-gradient(180deg,var(--blue),var(--rose))}.section-title{padding:6px 4px}.bottom-nav{position:absolute;left:0;right:0;bottom:0;background:rgba(255,253,248,.94);backdrop-filter:blur(15px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:9px 10px 18px}.nav{border:0;background:transparent;border-radius:16px;padding:8px 4px;display:grid;gap:2px;color:var(--muted);font-weight:800}.nav span{font-size:10px}.nav.active{background:var(--rose-soft);color:var(--ink)}.nav.center{background:#fff4eb}.toast{position:absolute;left:24px;right:24px;bottom:92px;background:rgba(51,45,42,.92);color:#fff;border-radius:18px;padding:13px 15px;text-align:center;font-weight:750;opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translateY(0)}
@media (max-width:440px){.phone-shell{padding:0}.app-frame{height:100vh;border-radius:0;border:0}.donut-wrap{grid-template-columns:112px 1fr}.donut{width:112px;height:112px}.donut:after{inset:26px}.kpi strong{font-size:19px}.screen{padding-left:14px;padding-right:14px}}

/* Typography refinement inspired by the spreadsheet reference: smaller, neater, more letter-spaced labels */
body{font-size:13px;line-height:1.32;letter-spacing:.005em}.topbar{padding:20px 18px 8px}.screen{gap:11px;padding-top:8px}h1{font-size:24px;letter-spacing:.04em;font-weight:500;text-transform:none}h2{font-size:20px;letter-spacing:.10em;font-weight:500;text-transform:uppercase}h3{font-size:14px;letter-spacing:.16em;font-weight:850;text-transform:uppercase}.eyebrow{font-size:9px;letter-spacing:.22em;font-weight:850}.muted{font-size:11px}.month-card{padding:12px 15px;border-radius:20px}.month-card h2{font-size:22px;letter-spacing:.24em}.icon-button,.round-button{width:34px;height:34px}.kpi{min-height:88px;padding:12px;gap:5px;border-radius:18px}.kpi span{font-size:10px;letter-spacing:.14em;text-transform:uppercase}.kpi strong{font-size:17px;letter-spacing:.01em}.kpi small{font-size:10px}.card{padding:13px;border-radius:18px}.card-heading{margin-bottom:10px}.pill{font-size:10px;padding:6px 8px;letter-spacing:.08em;text-transform:uppercase}.donut-wrap{grid-template-columns:116px 1fr;gap:12px}.donut{width:116px;height:116px}.donut:after{inset:28px}.legend-row{font-size:11px;padding:7px 8px;border-radius:12px}.insight{padding:9px;border-radius:13px}.insight b{font-size:11px;letter-spacing:.09em;text-transform:uppercase}.insight span{font-size:11px}.quick-card{font-size:12px;padding:12px;border-radius:14px}.segmented button{font-size:11px;padding:8px 6px;letter-spacing:.06em;text-transform:uppercase}.mini-chart{height:120px}.table-card{gap:5px}.table-head{font-size:9px;letter-spacing:.18em;padding:0 7px}.table-row{padding:8px 7px;border-radius:10px}.table-row span,.table-row b{font-size:11px}.table-row em{font-size:10px;padding:4px 6px}.form-card{gap:11px}.form-card label{font-size:10px;letter-spacing:.15em;text-transform:uppercase}.form-card input,.form-card select{font-size:12px;padding:10px;border-radius:12px}.primary-button,.secondary-button{font-size:12px;padding:12px 14px;border-radius:14px;letter-spacing:.08em;text-transform:uppercase}.account-card strong{font-size:20px}.account-card span,.account-card small{font-size:11px}.list-row{padding:9px;border-radius:12px}.list-row span{font-size:12px}.list-row small{font-size:10px}.list-row b{font-size:11px}.category-grid button,.months-grid button{font-size:11px;padding:12px;border-radius:12px}.months-grid small{font-size:9px}.progress{height:10px;margin:14px 0 7px}.bottom-nav{padding-top:7px}.nav{font-size:15px;padding:7px 3px;border-radius:12px}.nav span{font-size:9px;letter-spacing:.05em}.toast{font-size:12px;padding:10px 12px;border-radius:14px}
@media (max-width:440px){h1{font-size:22px}h2{font-size:18px}.month-card h2{font-size:20px}.kpi strong{font-size:16px}.screen{padding-left:13px;padding-right:13px}.donut-wrap{grid-template-columns:104px 1fr}.donut{width:104px;height:104px}.donut:after{inset:25px}}

/* Compact account overview cards — closer to account detail cards, with progress visible on overview */
#screen-accounts{gap:9px}.account-card.compact{display:flex;flex-direction:column;gap:7px;padding:11px 12px;min-height:auto;border-radius:17px;background:linear-gradient(180deg,#fffdf8,#fff8f1);box-shadow:0 5px 16px rgba(90,65,45,.045);cursor:pointer}.account-card.compact .account-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.account-card.compact .eyebrow{max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.account-card.compact strong{font-size:16px;line-height:1.05;font-weight:750;letter-spacing:.01em;white-space:nowrap}.account-card.compact .progress{height:7px;margin:1px 0 0;background:#f1e8dd}.account-card.compact .progress span{background:linear-gradient(90deg,var(--sage),var(--rose))}.account-card.compact .muted{font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-card.compact:active{transform:scale(.995)}