:root{
  --paper:#F1F4EC;
  --paper-line:#CBD9C4;
  --ink:#1C2A22;
  --ink-soft:#4C5C51;
  --ink-faint:#8B9A8D;
  --card:#FBFCF8;
  --rule:#D6E0CE;
  --green:#2F6B4F;
  --green-bg:#E3EEE3;
  --rust:#A6432D;
  --rust-bg:#F4E3DE;
  --teal:#14524A;
  --teal-hover:#0D3D37;
  --amber-bg:#FBEED9;
  --amber-ink:#7A5410;
  --radius:10px;
  --font-display:'Source Serif 4', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141B16; --paper-line:#25332A; --ink:#E7EDE5; --ink-soft:#AEBBA9; --ink-faint:#6E7C71;
    --card:#1B241D; --rule:#2A3A2E; --green:#6FCB9C; --green-bg:#1E3227; --rust:#E28268; --rust-bg:#3A241D;
    --teal:#5FC7B9; --teal-hover:#7FDACE; --amber-bg:#3A2E13; --amber-ink:#E3B65C;
  }
}
*{box-sizing:border-box;}
html,body{ margin:0; padding:0; background:var(--paper); }
body{ font-family:var(--font-body); }
.cb-page{ max-width:900px; margin:0 auto; padding:2rem 1rem 4rem; }

.cb-root{
  font-family:var(--font-body); color:var(--ink);
  background: repeating-linear-gradient(var(--paper), var(--paper) 27px, var(--paper-line) 28px), var(--paper);
  border-radius:16px; overflow:hidden; border:0.5px solid var(--rule);
}
.cb-inner{ padding:1.5rem 1.75rem 2rem; }

.cb-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:1rem; margin-bottom:1.25rem; border-bottom:1.5px solid var(--ink); }
.cb-org{ flex:1; min-width:0; }
.cb-org input{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--ink); background:transparent; border:none; width:100%; padding:2px 0; }
.cb-org input:focus{ outline:none; border-bottom:1px dashed var(--ink-faint); }
.cb-reg{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
.cb-reg input{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); background:transparent; border:none; width:220px; }
.cb-reg input:focus{ outline:none; border-bottom:1px dashed var(--ink-faint); }
.cb-fy{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); text-align:right; white-space:nowrap; padding-top:4px; }
.cb-fy select{ font-family:var(--font-mono); font-size:12px; background:var(--card); border:0.5px solid var(--rule); border-radius:6px; padding:4px 8px; color:var(--ink); }

.cb-tabs{ display:flex; gap:2px; margin-bottom:1.25rem; border-bottom:0.5px solid var(--rule); flex-wrap:wrap; }
.cb-tab{ font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--ink-soft); background:none; border:none; padding:9px 14px; cursor:pointer; position:relative; top:1px; border-bottom:2px solid transparent; }
.cb-tab:hover{ color:var(--ink); }
.cb-tab.active{ color:var(--ink); border-bottom:2px solid var(--teal); }

.cb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:1.5rem; }
.cb-metric{ background:var(--card); border:0.5px solid var(--rule); border-radius:var(--radius); padding:12px 14px; }
.cb-metric .lbl{ font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; }
.cb-metric .val{ font-family:var(--font-mono); font-size:21px; font-weight:600; margin-top:4px; color:var(--ink); }
.cb-metric.pos .val{ color:var(--green); }
.cb-metric.neg .val{ color:var(--rust); }

.cb-h{ font-family:var(--font-display); font-size:15px; font-weight:600; margin:0 0 10px; color:var(--ink); }
.cb-section{ margin-bottom:1.75rem; }

.cb-form{ background:var(--card); border:0.5px solid var(--rule); border-radius:12px; padding:16px; }
.cb-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cb-field{ display:flex; flex-direction:column; gap:4px; }
.cb-field.full{ grid-column:1 / -1; }
.cb-field label{ font-size:12px; color:var(--ink-soft); font-weight:500; }
.cb-field input, .cb-field select{ font-family:var(--font-body); font-size:13.5px; color:var(--ink); background:var(--paper); border:0.5px solid var(--rule); border-radius:7px; padding:8px 10px; height:36px; }
.cb-field input:focus, .cb-field select:focus{ outline:none; border-color:var(--teal); }

.cb-toggle{ display:flex; border:0.5px solid var(--rule); border-radius:7px; overflow:hidden; }
.cb-toggle button{ flex:1; padding:8px; font-size:13px; font-weight:500; border:none; cursor:pointer; background:var(--paper); color:var(--ink-soft); }
.cb-toggle button.on.receipt{ background:var(--green-bg); color:var(--green); }
.cb-toggle button.on.payment{ background:var(--rust-bg); color:var(--rust); }
.cb-toggle button.on.cash{ background:var(--amber-bg); color:var(--amber-ink); }
.cb-toggle button.on.bank{ background:var(--green-bg); color:var(--green); }

.cb-btn{ font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--ink); background:var(--card); border:0.5px solid var(--rule); border-radius:7px; padding:8px 14px; cursor:pointer; height:36px; }
.cb-btn:hover{ background:var(--paper); border-color:var(--ink-faint); }
.cb-btn.primary{ background:var(--teal); color:#fff; border-color:var(--teal); }
.cb-btn.primary:hover{ background:var(--teal-hover); }
.cb-btn.danger{ color:var(--rust); }
.cb-btn.small{ padding:4px 10px; height:28px; font-size:12px; }
.cb-btn:disabled{ opacity:.5; cursor:default; }

.cb-row-actions{ display:flex; gap:8px; margin-top:14px; justify-content:flex-end; }

.cb-table-wrap{ overflow-x:auto; border:0.5px solid var(--rule); border-radius:12px; background:var(--card); }
table.cb-table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:640px; }
table.cb-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); padding:9px 10px; border-bottom:1px solid var(--ink); background:var(--card); }
table.cb-table td{ padding:8px 10px; border-bottom:0.5px solid var(--rule); color:var(--ink); vertical-align:top; }
table.cb-table tr:last-child td{ border-bottom:none; }
table.cb-table td.num, table.cb-table th.num{ font-family:var(--font-mono); text-align:right; white-space:nowrap; }
.cb-head-tag{ font-size:11px; padding:2px 7px; border-radius:5px; font-weight:500; white-space:nowrap; }
.cb-head-tag.receipt{ background:var(--green-bg); color:var(--green); }
.cb-head-tag.payment{ background:var(--rust-bg); color:var(--rust); }
.cb-empty{ padding:2rem; text-align:center; color:var(--ink-faint); font-size:13px; }
.cb-actions-cell{ display:flex; gap:6px; align-items:center; white-space:nowrap; }
.cb-edit{ background:none; border:0.5px solid var(--rule); color:var(--ink-soft); cursor:pointer; font-size:11.5px; padding:3px 9px; border-radius:6px; }
.cb-edit:hover{ color:var(--teal); border-color:var(--teal); }
.cb-del{ background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:15px; padding:2px; }
.cb-del:hover{ color:var(--rust); }

.cb-filters{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.cb-filters select, .cb-filters input{ font-family:var(--font-body); font-size:12.5px; background:var(--card); border:0.5px solid var(--rule); border-radius:7px; padding:6px 9px; height:32px; color:var(--ink); }

.cb-toast{ position:absolute; top:14px; right:14px; background:var(--green); color:#fff; font-size:12.5px; padding:8px 14px; border-radius:8px; opacity:0; transform:translateY(-6px); transition:opacity .2s, transform .2s; pointer-events:none; z-index:5; }
.cb-toast.show{ opacity:1; transform:translateY(0); }
.cb-toast.err{ background:var(--rust); }

.cb-heads-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cb-head-chip{ display:flex; align-items:center; gap:6px; background:var(--paper); border:0.5px solid var(--rule); border-radius:20px; padding:5px 6px 5px 12px; font-size:12.5px; }
.cb-head-chip button{ background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:14px; line-height:1; padding:2px; }
.cb-head-chip button:hover{ color:var(--rust); }

.cb-note{ font-size:12px; color:var(--ink-faint); margin-top:8px; line-height:1.5; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.cb-report-card{ background:var(--card); border:0.5px solid var(--rule); border-radius:12px; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cb-report-card .title{ font-weight:500; font-size:14px; }
.cb-report-card .desc{ font-size:12px; color:var(--ink-faint); margin-top:2px; }