:root{
  --bg:#f5f2ea; --bg-raised:#fffdf8; --ink:#1e2420; --ink-dim:#5b6560;
  --line:#ded7c6; --line-soft:#eae5d8;
  --accent:#2f6f62; --accent-soft:#e2ede9;
  --warn:#a8672b; --warn-soft:#f3e6d5;
  --crit:#a13d33; --crit-soft:#f3e0dc;
  --debit:#7c5b9e; --debit-soft:#ece4f3;
  --mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", monospace;
  --serif: "Iowan Old Style","Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141a17; --bg-raised:#1b2320; --ink:#e8e6dd; --ink-dim:#9aa39c;
    --line:#2c3733; --line-soft:#232b28;
    --accent:#6fbfa8; --accent-soft:#1d2f2a;
    --warn:#e0a462; --warn-soft:#2e2519;
    --crit:#e08477; --crit-soft:#2f1e1b;
    --debit:#b79bd6; --debit-soft:#292235;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.45; }
a{ color:var(--accent); }
::selection{ background:var(--accent-soft); }

.wrap{ max-width:1240px; margin:0 auto; padding:0 1.5rem 4rem; }

nav.topbar{
  border-bottom:2px solid var(--ink); background:var(--bg-raised);
}
nav.topbar .inner{
  max-width:1240px; margin:0 auto; padding:1rem 1.5rem; display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
}
nav.topbar .brand{ font-family:var(--serif); font-weight:600; font-size:1.2rem; text-decoration:none; color:var(--ink); margin-right:auto; }
nav.topbar .links{ display:flex; gap:1.4rem; }
nav.topbar .links a{ font-size:.86rem; text-decoration:none; color:var(--ink-dim); padding:.3rem 0; border-bottom:2px solid transparent; }
nav.topbar .links a:hover{ color:var(--ink); }
nav.topbar .links a.active{ color:var(--ink); border-bottom-color:var(--accent); font-weight:600; }

.flash{
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent);
  padding:.8rem 1.1rem; margin:1.5rem 0; border-radius:3px; font-size:.88rem;
}
.flash.error{ background:var(--crit-soft); color:var(--crit); border-color:var(--crit); }

h1.page-title{ font-family:var(--serif); font-weight:600; font-size:1.9rem; margin:2rem 0 .3rem; text-wrap:balance; }
p.page-sub{ color:var(--ink-dim); font-size:.9rem; margin:0 0 1.6rem; max-width:70ch; }
h2{ font-family:var(--serif); font-size:1.25rem; font-weight:600; margin:0 0 .5rem; }

.kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:2rem; }
.kpi{ background:var(--bg-raised); padding:1rem 1.1rem; }
.kpi .label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); margin-bottom:.35rem; }
.kpi .value{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.28rem; font-weight:600; }
.kpi .sec{ font-size:.74rem; color:var(--ink-dim); margin-top:.1rem; font-family:var(--mono); }
.kpi.matched .value{ color:var(--accent); }
.kpi.warn .value{ color:var(--warn); }
.kpi.crit .value{ color:var(--crit); }
@media (max-width:900px){ .kpis{ grid-template-columns:repeat(2,1fr); } }

.card{ background:var(--bg-raised); border:1px solid var(--line); padding:1.2rem 1.3rem; margin-bottom:1.6rem; }

.btn{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans); font-size:.84rem; font-weight:600;
  padding:.55rem 1.1rem; border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  border-radius:3px; cursor:pointer; text-decoration:none;
}
.btn:hover{ opacity:.88; }
.btn.secondary{ background:var(--bg-raised); color:var(--ink); border-color:var(--line); }
.btn.secondary:hover{ border-color:var(--ink-dim); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn.small{ padding:.35rem .7rem; font-size:.76rem; }

form.inline{ display:inline; }

input[type="text"], input[type="search"], select, input[type="file"]{
  font-family:var(--sans); font-size:.86rem; padding:.5rem .7rem; border:1px solid var(--line);
  background:var(--bg-raised); color:var(--ink); border-radius:3px;
}
input:focus, select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
select[multiple]{ padding:.3rem; }
select[multiple] option{ padding:.35rem .5rem; border-radius:2px; }
select[multiple] option:checked{ background:var(--accent-soft); color:var(--accent); }
label{ font-size:.8rem; color:var(--ink-dim); display:block; margin-bottom:.3rem; }
.field{ margin-bottom:1rem; }

.toolbar{ display:flex; gap:.6rem; margin-bottom:1.2rem; flex-wrap:wrap; align-items:center; }
.toolbar .hint{ font-size:.78rem; color:var(--ink-dim); margin-left:auto; }

.table-scroll{ overflow-x:auto; border:1px solid var(--line); background:var(--bg-raised); }
table{ border-collapse:collapse; width:100%; font-size:.84rem; min-width:640px; }
thead th{
  text-align:left; padding:.6rem .8rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-dim); border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{ padding:.55rem .8rem; border-bottom:1px solid var(--line-soft); vertical-align:top; }
tbody tr:hover{ background:var(--line-soft); }
td.num, th.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
td.date, th.date{ font-family:var(--mono); white-space:nowrap; }
.psid-code{ font-family:var(--mono); font-size:.78rem; color:var(--ink-dim); }
.file-tag{
  display:inline-block; font-size:.72rem; color:var(--ink-dim); text-decoration:none;
  border:1px solid var(--line); border-radius:3px; padding:.15rem .5rem; white-space:nowrap; background:var(--bg);
}
.file-tag:hover{ color:var(--ink); border-color:var(--ink-dim); }

.totals-row td{
  font-weight:700; border-top:2px solid var(--ink); background:var(--line-soft);
}

.pill{ display:inline-block; font-size:.66rem; padding:.16rem .5rem; border-radius:99px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.pill.matched{ background:var(--accent-soft); color:var(--accent); }
.pill.partial{ background:var(--warn-soft); color:var(--warn); }
.pill.unmatched{ background:var(--crit-soft); color:var(--crit); }
.pill.debit{ background:var(--debit-soft); color:var(--debit); }
.pill.exact{ background:var(--accent-soft); color:var(--accent); }
.pill.batch{ background:var(--accent-soft); color:var(--accent); opacity:.85; }
.pill.manual{ background:var(--warn-soft); color:var(--warn); }

.empty-state{ text-align:center; color:var(--ink-dim); padding:3rem 1rem; font-style:italic; }

footer.pagefoot{ text-align:center; color:var(--ink-dim); font-size:.76rem; margin-top:2.5rem; }

/* bank transactions day accordion */
.day{ border:1px solid var(--line); background:var(--bg-raised); margin-bottom:.9rem; }
.day-head{ display:flex; align-items:center; gap:.9rem; padding:.75rem 1rem; cursor:pointer; user-select:none; border-bottom:1px solid transparent; }
.day.open .day-head{ border-bottom-color:var(--line); }
.day-head .chev{ font-family:var(--mono); color:var(--ink-dim); width:1rem; text-align:center; transition:transform .15s; }
.day.open .day-head .chev{ transform:rotate(90deg); }
.day-head .day-date{ font-family:var(--serif); font-size:1.05rem; font-weight:600; min-width:11rem; }
.day-head .day-stats{ display:flex; gap:1.4rem; font-size:.8rem; color:var(--ink-dim); font-family:var(--mono); flex-wrap:wrap; }
.day-head .day-stats b{ color:var(--ink); font-weight:600; }
.day-body{ display:none; }
.day.open .day-body{ display:block; }
tr.txn-row.has-detail{ cursor:pointer; }
.expand-btn{ font-family:var(--mono); font-size:.72rem; border:1px solid var(--line); background:var(--bg); color:var(--ink-dim); border-radius:3px; padding:.2rem .5rem; cursor:pointer; white-space:nowrap; }
.expand-btn:hover{ color:var(--ink); border-color:var(--ink-dim); }
tr.detail-row{ display:none; }
tr.detail-row.open{ display:table-row; }
tr.detail-row td{ background:var(--line-soft); padding:.7rem 1rem 1rem 2.4rem; border-bottom:1px solid var(--line); }
.psid-table{ width:100%; border-collapse:collapse; font-size:.78rem; background:var(--bg-raised); border:1px solid var(--line); }
.psid-table th{ text-align:left; padding:.4rem .65rem; font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); border-bottom:1px solid var(--line); }
.psid-table td{ padding:.4rem .65rem; border-bottom:1px solid var(--line-soft); }
.psid-table tr:last-child td{ border-bottom:none; }
.lag{ font-size:.72rem; color:var(--ink-dim); font-family:var(--mono); }
.lag.zero{ color:var(--accent); }

/* reconcile picker */
.picker-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:900px){ .picker-grid{ grid-template-columns:1fr; } }
.picker-col h2{ display:flex; justify-content:space-between; align-items:baseline; }
.picker-col h2 .count{ font-family:var(--mono); font-size:.8rem; color:var(--ink-dim); font-weight:400; }
.picker-list{ max-height:520px; overflow-y:auto; border:1px solid var(--line); background:var(--bg-raised); }
.picker-row{ border-bottom:1px solid var(--line-soft); }
.picker-row:last-child{ border-bottom:none; }
.picker-item{ display:flex; align-items:flex-start; gap:.6rem; padding:.6rem .8rem; font-size:.83rem; cursor:pointer; }
.picker-item:hover{ background:var(--line-soft); }
.picker-item input{ margin-top:.2rem; }
.picker-item .meta{ color:var(--ink-dim); font-size:.76rem; }
.picker-item .amt{ margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }

.detail-toggle{
  font-family:var(--mono); font-size:.68rem; border:1px solid var(--line); background:var(--bg);
  color:var(--ink-dim); border-radius:3px; padding:.15rem .45rem; cursor:pointer; align-self:center; white-space:nowrap;
}
.detail-toggle:hover{ color:var(--ink); border-color:var(--ink-dim); }
.detail-toggle.open{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.item-detail{ display:none; padding:.7rem 1rem .9rem 2.2rem; background:var(--line-soft); font-size:.78rem; }
.item-detail.open{ display:block; }
.detail-grid{ display:grid; grid-template-columns:repeat(2, minmax(140px,1fr)); gap:.4rem 1.2rem; margin-bottom:.5rem; }
.detail-grid > div{ display:flex; justify-content:space-between; gap:.6rem; border-bottom:1px dotted var(--line); padding-bottom:.2rem; }
.detail-grid span{ color:var(--ink-dim); }
.detail-grid b{ font-weight:600; text-align:right; }
.detail-fees{ display:flex; gap:.6rem; padding-top:.3rem; border-top:1px solid var(--line); }
.detail-fees span{ color:var(--ink-dim); white-space:nowrap; }
.link-bar{
  position:sticky; bottom:0; background:var(--bg-raised); border:1px solid var(--ink); border-radius:3px;
  padding:.9rem 1.1rem; margin-top:1rem; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
}
.link-bar .totals{ font-family:var(--mono); font-size:.85rem; display:flex; gap:1.4rem; }
.link-bar .diff-ok{ color:var(--accent); }
.link-bar .diff-bad{ color:var(--crit); }
.link-bar .diff-target{ color:var(--warn); }

.instant-btn{
  font-family:var(--mono); font-size:.68rem; border:1px solid var(--accent); background:var(--accent-soft);
  color:var(--accent); border-radius:3px; padding:.15rem .45rem; cursor:pointer; align-self:center; white-space:nowrap; font-weight:600;
}
.instant-btn:hover{ opacity:.8; }

.sort-btn{ opacity:.75; }
.sort-btn.active{ opacity:1; background:var(--ink); color:var(--bg); border-color:var(--ink); }

.suggest-message{ font-size:.83rem; margin:.6rem 0 0; min-height:1.2em; }
.suggest-message.ok{ color:var(--accent); }
.suggest-message.warn{ color:var(--warn); }

.upload-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:800px){ .upload-grid{ grid-template-columns:1fr; } }

/* pagination */
.pager{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.2rem; flex-wrap:wrap; }
.pager-info{ font-size:.78rem; color:var(--ink-dim); }
.pager-links{ display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.pager-btn{
  display:inline-flex; align-items:center; justify-content:center; min-width:2rem; height:2rem; padding:0 .5rem;
  font-family:var(--mono); font-size:.8rem; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:3px; background:var(--bg-raised);
}
.pager-btn:hover{ border-color:var(--ink-dim); }
.pager-btn.current{ background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:600; }
.pager-btn.disabled{ color:var(--ink-dim); opacity:.5; }
.pager-dots{ color:var(--ink-dim); font-family:var(--mono); font-size:.8rem; padding:0 .2rem; }

/* reports hub */
.report-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
@media (max-width:800px){ .report-grid{ grid-template-columns:1fr; } }
.report-card{ background:var(--bg-raised); border:1px solid var(--line); padding:1.3rem 1.4rem; }
.report-card h2{ margin-bottom:.3rem; }
.report-card p{ font-size:.84rem; color:var(--ink-dim); margin:0 0 1rem; }
.report-filter{ display:flex; gap:.8rem; align-items:end; flex-wrap:wrap; margin-bottom:1.6rem; }
.report-filter .field{ margin-bottom:0; }

/* printed report header, hidden on screen inside report pages until printed... actually shown always */
.report-head{
  display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid var(--ink);
  padding-bottom:1rem; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem;
}
.report-head h1{ font-family:var(--serif); font-size:1.7rem; font-weight:600; margin:0 0 .2rem; }
.report-head .range{ color:var(--ink-dim); font-size:.9rem; }
.report-head .meta{ text-align:right; font-size:.78rem; color:var(--ink-dim); }
.report-totals{ display:flex; gap:1.6rem; font-family:var(--mono); font-size:.86rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.report-totals b{ font-weight:600; }
.report-day-title{
  font-family:var(--serif); font-size:1.05rem; font-weight:600; margin:1.6rem 0 .5rem;
  padding-bottom:.3rem; border-bottom:1px solid var(--line);
}
.report-day-title:first-of-type{ margin-top:0; }
.status-line{ font-size:.76rem; color:var(--ink-dim); margin-top:.15rem; }

/* posting / draft vs posted */
.status-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.6rem; }
@media (max-width:800px){ .status-grid{ grid-template-columns:1fr; } }
.status-panel{ background:var(--bg-raised); border:1px solid var(--line); padding:1.3rem 1.4rem; }
.status-panel.draft{ border-top:3px solid var(--warn); }
.status-panel.posted{ border-top:3px solid var(--accent); }
.status-panel h2{ display:flex; align-items:center; gap:.5rem; }
.status-panel .stat-row{ display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--line-soft); font-size:.87rem; }
.status-panel .stat-row:last-child{ border-bottom:none; }
.status-panel .stat-row b{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.danger-zone{
  background:var(--crit-soft); border:1px solid var(--crit); padding:1.2rem 1.4rem; margin-bottom:1.6rem;
}
.danger-zone h2{ color:var(--crit); }
.danger-zone p{ font-size:.85rem; color:var(--ink); margin:0 0 1rem; }
.danger-zone input[type="text"]{ font-family:var(--mono); }
.btn.danger{ background:var(--crit); border-color:var(--crit); color:#fff; }
.btn.danger:hover{ opacity:.85; }

.post-history-empty{ color:var(--ink-dim); font-style:italic; font-size:.85rem; }

/* reconciliation progress bar */
.progress-track{
  width:100%; height:.6rem; background:var(--line-soft); border-radius:99px; overflow:hidden; border:1px solid var(--line);
}
.progress-fill{
  height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease;
}
.progress-meta{
  display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.78rem; color:var(--ink-dim); font-family:var(--mono); margin-top:.5rem;
}
.progress-meta b{ color:var(--ink); font-weight:600; }

@media print{
  nav.topbar, .toolbar, .report-filter, .no-print, footer.pagefoot{ display:none !important; }
  body{ background:#fff; color:#000; }
  .wrap{ max-width:none; padding:0 .3in; }
  .report-head{ border-bottom-color:#000; }
  .report-day-title{ page-break-after:avoid; border-bottom-color:#000; }
  table{ font-size:9.5pt; }
  thead{ display:table-header-group; }
  tr{ page-break-inside:avoid; }
  .table-scroll{ border:none; overflow:visible; }
  a{ color:inherit; text-decoration:none; }
  .pill{ border:1px solid #999; }
}