:root {
  --paper: #f2ede2;
  --paper-line: #d9cfb8;
  --ink: #2b2a25;
  --ink-soft: #6b6558;
  --rule: #c9bd9e;
  --green: #3f5d43;
  --green-bg: #e4ebe0;
  --rust: #8a4a3a;
  --rust-bg: #f1e2dc;
  --gold: #a9822c;
  --gold-bg: #f4ecd4;
  --navy: #2f3e4d;
  --card: #faf7ef;
  --tab-active-green: #66FF00;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  color: var(--ink);
  background: var(--paper);
  margin: 0;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.wrap { max-width: 980px; margin: 0 auto; padding: 28px 20px 60px; }

.masthead { display:flex; align-items:baseline; justify-content:space-between; border-bottom:3px double var(--rule); padding-bottom:14px; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.masthead h1 { font-family: Georgia, "Times New Roman", serif; font-size: 26px; margin: 0; font-weight: 700; }
.who { font-size: 12px; color: var(--ink-soft); }
.who a { color: var(--navy); }

.mainnav { display:flex; gap:4px; flex-wrap:wrap; margin-bottom: 18px; }
.mainnav a { padding: 7px 12px; font-size: 13px; text-decoration:none; color: var(--ink-soft); border-radius: 5px; }
.mainnav a.active, .mainnav a:hover { background: var(--card); color: var(--ink); font-weight:600; }

.tabs { display:flex; gap:6px; margin-bottom:0; flex-wrap:wrap; }
.tab { padding:9px 16px; background:var(--card); border:1px solid var(--rule); border-bottom:none; border-radius:6px 6px 0 0; text-decoration:none; font-size:14px; display:flex; align-items:center; gap:8px; color:var(--ink-soft); transform:translateY(2px); }
.tab.active { background:var(--paper); color:var(--ink); font-weight:600; border-color:var(--ink); border-bottom:3px solid var(--paper); transform:translateY(3px); }
.tab.active .badge { background:var(--tab-active-green); color:var(--ink); }
.tab .badge { font-size:9px; text-transform:uppercase; letter-spacing:.5px; padding:2px 6px; border-radius:3px; background:var(--navy); color:#fff; font-weight:700; }
.tabbar-rule { border-bottom:1px solid var(--ink); margin-bottom:24px; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.card { background:var(--card); border:1px solid var(--paper-line); border-radius:8px; padding:14px 16px; }
.card .label { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); margin-bottom:6px; }
.card .amt { font-size:22px; font-weight:700; }
.card.income .amt { color:var(--green); }
.card.expense .amt { color:var(--rust); }
.card.net .amt { color:var(--navy); }

.section { background:var(--card); border:1px solid var(--paper-line); border-radius:8px; padding:18px 18px 20px; margin-bottom:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.section h2 { font-family:Georgia,serif; font-size:15px; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; }
.section h2 .hint { font-family:-apple-system,sans-serif; font-size:11px; color:var(--ink-soft); font-weight:400; }
.section h2 .hint a { color: var(--navy); }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.field { display:flex; flex-direction:column; gap:4px; }
.field.full { grid-column:1/-1; }
label { font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.4px; }
input, select, textarea { font-family:inherit; font-size:13px; padding:7px 9px; border:1px solid var(--rule); border-radius:5px; background:#fff; color:var(--ink); }
textarea { resize:vertical; min-height:70px; }
.type-toggle { display:flex; gap:8px; }
.checkbox-row { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
.checkbox-row input { width:auto; }

.btn { padding:8px 16px; background:var(--navy); color:#fff; border:none; border-radius:5px; cursor:pointer; font-size:13px; font-weight:600; margin-top:10px; }
.btn:hover { opacity:.9; }
.btn.secondary { background:transparent; border:1px solid var(--navy); color:var(--navy); }
.link-btn { background:none; border:none; color:var(--ink-soft); text-decoration:underline; cursor:pointer; font-size:11px; padding:6px 4px; }

table { width:100%; border-collapse:collapse; font-size:12.5px; }
th { text-align:left; font-size:10px; text-transform:uppercase; color:var(--ink-soft); padding:6px 8px; border-bottom:1px solid var(--ink); letter-spacing:.4px; }
td { padding:7px 8px; border-bottom:1px solid var(--paper-line); vertical-align:top; }
tr:hover td { background:#fbf9f2; }
.amt-in { color:var(--green); font-weight:600; }
.amt-out { color:var(--rust); font-weight:600; }
.pill { font-size:10px; padding:2px 7px; border-radius:10px; background:var(--paper); border:1px solid var(--rule); color:var(--ink-soft); }
.flag { font-size:9px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:3px; background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold); }
.empty { text-align:center; padding:30px 10px; color:var(--ink-soft); font-size:13px; }
.filters { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }

.vendor-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--paper-line); }
.vendor-name { font-weight:600; font-size:13px; }
.vendor-amt { font-size:14px; font-weight:700; }

.flash-msg { background: var(--green-bg); border:1px solid var(--green); color:var(--green); padding:9px 14px; border-radius:6px; font-size:13px; margin-bottom:16px; }

.chart-widget .chart-controls { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.chart-widget .chart-controls .field { min-width:150px; }
.chart-widget .chart-canvas-wrap { position:relative; height:280px; }
.chart-widget .chart-canvas-wrap canvas { max-height:280px; }
.footnote { font-size:11px; color:var(--ink-soft); text-align:center; margin-top:30px; padding-top:16px; border-top:1px solid var(--paper-line); }

@media print {
  .no-print, .mainnav, .masthead .who, .tabs, .tabbar-rule { display:none !important; }
  body { background:#fff; }
  .section { border:none; box-shadow:none; }
}

@media (max-width: 640px) {
  .cards { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .tab { flex:0 0 auto; }
  .type-toggle { flex-direction:column; max-width:none !important; }
  .type-toggle label { flex:none; }
  .masthead h1 { font-size:22px; }
  table { font-size:11.5px; }
  th, td { padding:6px 5px; }
}