:root{
  --bg:#F7F2EA; --surface:#FFFDF9; --surface-2:#EDE4D5;
  --text:#241E19; --text-dim:#6B5F52; --rule:#DCCFB9;
  --ink:#2E2A6E; --ink-glow:rgba(46,42,110,0.08);
  --brass:#8A6A1C; --brass-glow:rgba(138,106,28,0.10);
  --debit:#7A2E2E; --credit:#2E5C3E;
  --radius:2px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#181510; --surface:#211D17; --surface-2:#2B251C;
    --text:#EFE7D8; --text-dim:#A4988990; --rule:#3B3226;
    --ink:#9C97E6; --ink-glow:rgba(156,151,230,0.10);
    --brass:#D8B357; --brass-glow:rgba(216,179,87,0.10);
    --debit:#E08787; --credit:#8FCBA0;
  }
}
:root[data-theme="dark"]{
  --bg:#181510; --surface:#211D17; --surface-2:#2B251C;
  --text:#EFE7D8; --text-dim:#A49889; --rule:#3B3226;
  --ink:#9C97E6; --ink-glow:rgba(156,151,230,0.10);
  --brass:#D8B357; --brass-glow:rgba(216,179,87,0.10);
  --debit:#E08787; --credit:#8FCBA0;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px; line-height:1.5;
}
.shell{display:flex;flex-direction:column;min-height:100vh;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 24px;border-bottom:1px solid var(--rule);background:var(--surface);
}
.brand{font-family:Georgia,'Source Serif 4',serif;font-weight:700;font-size:20px;color:var(--ink);}
.brand-sub{font-size:12px;color:var(--text-dim);margin-left:10px;}

.tabs{display:flex;gap:4px;padding:0 24px;border-bottom:1px solid var(--rule);background:var(--surface);}
.tab{
  font-family:inherit;font-size:13px;color:var(--text-dim);background:none;border:none;
  border-bottom:2px solid transparent;padding:10px 14px;cursor:pointer;white-space:nowrap;
}
.tab:hover{color:var(--text);}
.tab.active{color:var(--ink);border-bottom-color:var(--ink);}
.pill{
  display:inline-block;min-width:16px;padding:0 5px;border-radius:8px;background:var(--brass-glow);
  color:var(--brass);font-size:11px;text-align:center;
}
.flow-hint{margin:10px 24px 0;font-size:12px;color:var(--text-dim);}

.main{max-width:880px;margin:0 auto;padding:28px 24px 80px;width:100%;}
.panel{display:none;}
.panel.active{display:block;}

.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:16px;
}
.card-muted{background:var(--surface-2);}
.card h2{margin:0 0 14px;font-size:15px;font-weight:600;}
.card p{color:var(--text-dim);font-size:13px;}
.card code{background:var(--surface-2);padding:1px 5px;border-radius:2px;}
.sample-hint{font-size:12px;color:var(--text-dim);margin-left:8px;}
.card-muted p{margin:10px 0;}

form label{display:block;margin-bottom:12px;font-size:12px;color:var(--text-dim);}
form input,form select{
  display:block;width:100%;margin-top:4px;padding:8px 10px;font-size:13px;font-family:inherit;
  background:var(--bg);color:var(--text);border:1px solid var(--rule);border-radius:var(--radius);
}

.btn{
  font-family:inherit;font-size:13px;padding:8px 16px;border-radius:var(--radius);cursor:pointer;
  border:1px solid var(--rule);background:var(--surface);color:var(--text);
  text-decoration:none;display:inline-block;
}
.btn:hover{border-color:var(--ink);color:var(--ink);}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--surface);}
.btn-primary:hover{opacity:0.85;color:var(--surface);}
.btn-ghost{background:none;}

#upload-result{margin-top:14px;font-size:12px;}
.result-ok{color:var(--credit);}
.result-err{color:var(--debit);}

table{width:100%;table-layout:auto;border-collapse:collapse;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule);font-size:13px;}
th{font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-dim);font-weight:600;}
tr:last-child td{border-bottom:none;}
.amount-debit{color:var(--debit);}
.amount-credit{color:var(--credit);}
.empty-note{color:var(--text-dim);font-size:13px;padding:40px 0;text-align:center;}

.review-card{
  max-width:420px;margin:0 auto;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:24px;
}
.review-progress{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:16px;}
.txn-block{text-align:center;padding:8px 0 20px;border-bottom:1px solid var(--rule);margin-bottom:20px;}
.txn-date{font-size:12px;color:var(--text-dim);}
.txn-account{font-size:12px;color:var(--text-dim);}
.txn-description{font-size:17px;font-weight:600;margin:8px 0;word-break:break-word;}
.txn-amount{font-size:26px;font-family:Georgia,'Source Serif 4',serif;}
.txn-suggestion{font-size:12px;color:var(--brass);margin-top:8px;}

.category-picker{margin-bottom:20px;}
.category-picker label{display:block;margin-bottom:12px;font-size:12px;color:var(--text-dim);}
.category-picker select,.custom-input{
  display:block;width:100%;margin-top:4px;padding:10px;font-size:14px;font-family:inherit;
  background:var(--bg);color:var(--text);border:1px solid var(--rule);border-radius:var(--radius);
}
.custom-input{margin-bottom:12px;}

.review-actions{display:flex;flex-direction:column;gap:10px;}
.review-actions .btn{width:100%;padding:12px;font-size:14px;text-align:center;}

@media (max-width:640px){
  .review-card{max-width:none;padding:18px;}
}

/* ---- balances -> stats ---- */
.step-next{display:flex;justify-content:flex-end;margin-top:16px;}

/* ---- stats ---- */
.stats-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.stats-title{margin:0;font-family:Georgia,'Source Serif 4',serif;font-size:24px;font-weight:700;color:var(--ink);}
.month-picker{font-size:12px;color:var(--text-dim);}
.month-picker select{
  display:block;margin-top:4px;padding:8px 10px;font-size:13px;font-family:inherit;min-width:180px;
  background:var(--surface);color:var(--text);border:1px solid var(--rule);border-radius:var(--radius);
}

.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px;}
.summary-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;}
.summary-label{font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-dim);}
.summary-value{font-family:Georgia,'Source Serif 4',serif;font-size:26px;margin:4px 0 2px;}
.summary-delta{font-size:12px;color:var(--text-dim);min-height:18px;}

.cat-list{list-style:none;margin:0;padding:0;}
.cat-list > li + li{border-top:1px solid var(--rule);}
.cat-row{
  display:grid;grid-template-columns:minmax(90px,140px) 1fr 90px 40px;align-items:center;gap:12px;
  padding:9px 0;font-size:13px;
}
.cat-name{font-weight:600;overflow-wrap:anywhere;}
.cat-bar{height:10px;background:var(--surface-2);border-radius:var(--radius);overflow:hidden;}
.cat-bar span{display:block;height:100%;background:var(--ink);}
.cat-amount{text-align:right;font-variant-numeric:tabular-nums;}
.cat-share{text-align:right;color:var(--text-dim);font-size:12px;font-variant-numeric:tabular-nums;}
.cat-details summary{cursor:pointer;list-style:none;}
.cat-details summary::-webkit-details-marker{display:none;}
.cat-details summary .cat-name::after{content:" ▸";color:var(--text-dim);font-weight:400;}
.cat-details[open] summary .cat-name::after{content:" ▾";}
.cat-subs{list-style:none;margin:0 0 8px;padding:0 0 0 14px;border-left:2px solid var(--rule);}
.cat-subs li{display:flex;justify-content:space-between;padding:4px 0;font-size:12px;color:var(--text-dim);}

.chart-legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);margin-bottom:10px;}
.key{display:inline-block;width:10px;height:10px;border-radius:1px;margin-left:8px;}
.key:first-child{margin-left:0;}
.key-income{background:var(--brass);}
.key-spending{background:var(--ink);}
.month-chart svg{display:block;width:100%;height:180px;}
.month-chart .baseline{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke;}
.month-chart .hit{fill:transparent;}
.month-chart .bar-income{fill:var(--brass);opacity:0.55;}
.month-chart .bar-spending{fill:var(--ink);opacity:0.55;}
.month-chart .month{cursor:pointer;outline:none;}
.month-chart .month:hover .bar-income,.month-chart .month:hover .bar-spending,
.month-chart .month.selected .bar-income,.month-chart .month.selected .bar-spending{opacity:1;}
.month-chart .month:focus-visible .hit{fill:var(--ink-glow);}
.chart-labels{display:flex;margin-top:6px;}
.chart-labels span{flex:1;text-align:center;font-size:12px;color:var(--text-dim);}
.chart-labels span.selected{color:var(--ink);font-weight:600;}
.chart-hint{font-size:12px;margin:10px 0 0;}

.bal-list{list-style:none;margin:0;padding:0;}
.bal-list li{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;}
.bal-list li + li{border-top:1px solid var(--rule);}
.bal-list li > span:last-child{font-family:Georgia,'Source Serif 4',serif;font-size:15px;}

.synthetic-note{font-size:12px;color:var(--text-dim);margin:8px 0 0;}
.synthetic-note code{background:var(--surface-2);padding:1px 5px;border-radius:2px;}

@media (max-width:640px){
  .summary{grid-template-columns:1fr;}
  .summary-card{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;}
  .summary-value{grid-row:1 / span 2;grid-column:2;margin:0;font-size:22px;}
  /* four steps fit on one row: equal-width tabs, tighter padding */
  .tabs{padding:0 8px;gap:0;}
  .tab{flex:1;padding:10px 4px;font-size:12px;}
  .cat-row{grid-template-columns:1fr auto;row-gap:6px;}
  .cat-bar{grid-column:1 / -1;grid-row:2;}
  .cat-share{display:none;}
  .month-picker, .month-picker select{width:100%;}
}