:root {
  --cb-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cb-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  --cb-dark-bg: #0b0e11;
  --cb-dark-surface: #161a1e;
  --cb-dark-surface-alt: #1d232a;
  --cb-dark-border: rgba(240, 185, 11, 0.18);
  --cb-dark-text: #f5f5f5;
  --cb-dark-muted: #b7c0ca;
  --cb-dark-soft: #88939f;
  --cb-yellow: #f0b90b;

  --cb-light-bg: #f7f9fc;
  --cb-light-surface: #ffffff;
  --cb-light-border: rgba(42, 60, 82, 0.18);
  --cb-light-text: #0b1623;
  --cb-light-muted: #1e3750;
  --cb-light-soft: #2b4963;
  --cb-blue: #2775ca;
}

html,
body {
  font-family: var(--cb-font-sans);
}

.mono,
.quick-v,
.stat-value,
.amount,
.mi-val,
.tm-val,
.pi-val {
  font-family: var(--cb-font-mono);
}

.page-title,
.panel-title,
.ledger-title,
.trk-title,
.hdr-logo {
  font-family: var(--cb-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.page-copy,
.desc,
.muted,
.muted-copy,
.doc-desc,
.quick-sub,
.trk-note {
  line-height: 1.65;
}

/* readability pass: reduce density, improve scanability */
.hdr-logo {
  font-size: 20px !important;
}

.back-lnk,
.sub-lnk,
.tag {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.mi-lbl,
.quick-k,
.tm-lbl,
.trk-num,
.pi-lbl {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

.mi-val,
.quick-v,
.pi-val {
  font-size: 24px !important;
  line-height: 1.15 !important;
}

.trk-title,
.page-title {
  font-size: 22px !important;
}

.trk-sub,
.page-copy,
.quick-sub {
  font-size: 13px !important;
}

.tm-val,
.trk-total-val {
  font-size: 26px !important;
  line-height: 1.15 !important;
}

.ev-row {
  padding: 9px 0 !important;
  gap: 10px !important;
  min-height: 36px !important;
}

.ev-tag,
.ev-amt,
.ev-hash,
.ev-time,
.desc,
.tx-link,
.doc-link,
.arc-link {
  font-size: 12px !important;
}

.pill,
.status-badge,
.trk-pill,
.ev-badge {
  font-size: 11px !important;
  line-height: 1.2 !important;
  padding: 5px 9px !important;
}

th {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

td {
  font-size: 13px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  line-height: 1.55 !important;
}

.mobile-card {
  padding: 16px !important;
}

html:not([data-theme="light"]),
html:not([data-theme="light"]) body {
  background: var(--cb-dark-bg) !important;
  color: var(--cb-dark-text) !important;
}

html:not([data-theme="light"]) .bg-grid,
html:not([data-theme="light"]) .bg-glow-1,
html:not([data-theme="light"]) .bg-glow-2 {
  display: none !important;
}

html:not([data-theme="light"]) .hdr,
html:not([data-theme="light"]) .sub-nav,
html:not([data-theme="light"]) .hdr-subnav {
  background: #11151a !important;
  border-color: var(--cb-dark-border) !important;
}

html:not([data-theme="light"]) .back-lnk {
  color: var(--cb-dark-muted) !important;
}

html:not([data-theme="light"]) .back-lnk:hover {
  color: var(--cb-dark-text) !important;
}

html:not([data-theme="light"]) .back-lnk.active,
html:not([data-theme="light"]) .back-lnk.nav-active {
  color: #ffffff !important;
  border-bottom-color: var(--cb-yellow) !important;
  text-decoration-color: var(--cb-yellow) !important;
}

html:not([data-theme="light"]) .panel,
html:not([data-theme="light"]) .ledger,
html:not([data-theme="light"]) .hero-card,
html:not([data-theme="light"]) .proof-card,
html:not([data-theme="light"]) .stat,
html:not([data-theme="light"]) .mobile-card,
html:not([data-theme="light"]) .tool-card,
html:not([data-theme="light"]) .result,
html:not([data-theme="light"]) .drop,
html:not([data-theme="light"]) .preview,
html:not([data-theme="light"]) .proof-line,
html:not([data-theme="light"]) .row,
html:not([data-theme="light"]) .issue,
html:not([data-theme="light"]) table,
html:not([data-theme="light"]) th,
html:not([data-theme="light"]) td,
html:not([data-theme="light"]) .search,
html:not([data-theme="light"]) .chip,
html:not([data-theme="light"]) .field input,
html:not([data-theme="light"]) .field textarea {
  background: var(--cb-dark-surface) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--cb-dark-text) !important;
  box-shadow: none !important;
}

html:not([data-theme="light"]) tr:hover td,
html:not([data-theme="light"]) .row:hover {
  background: var(--cb-dark-surface-alt) !important;
}

html:not([data-theme="light"]) .theme-toggle {
  border-color: rgba(240, 185, 11, 0.45) !important;
  color: var(--cb-yellow) !important;
  background: rgba(240, 185, 11, 0.06) !important;
}

html[data-theme="light"],
html[data-theme="light"] body {
  background: var(--cb-light-bg) !important;
  color: var(--cb-light-text) !important;
}

html[data-theme="light"] .bg-grid,
html[data-theme="light"] .bg-glow-1,
html[data-theme="light"] .bg-glow-2 {
  display: none !important;
}

html[data-theme="light"] .hdr,
html[data-theme="light"] .sub-nav,
html[data-theme="light"] .hdr-subnav {
  background: #ffffff !important;
  border-color: var(--cb-light-border) !important;
}

html[data-theme="light"] .back-lnk {
  color: var(--cb-light-soft) !important;
}

html[data-theme="light"] .back-lnk:hover {
  color: var(--cb-light-text) !important;
}

html[data-theme="light"] .back-lnk.active,
html[data-theme="light"] .back-lnk.nav-active {
  color: var(--cb-light-text) !important;
  border-bottom-color: var(--cb-blue) !important;
  text-decoration-color: var(--cb-blue) !important;
}

html[data-theme="light"] .panel,
html[data-theme="light"] .ledger,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .proof-card,
html[data-theme="light"] .stat,
html[data-theme="light"] .mobile-card,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .result,
html[data-theme="light"] .drop,
html[data-theme="light"] .preview,
html[data-theme="light"] .proof-line,
html[data-theme="light"] .row,
html[data-theme="light"] .issue,
html[data-theme="light"] table,
html[data-theme="light"] th,
html[data-theme="light"] td,
html[data-theme="light"] .search,
html[data-theme="light"] .chip,
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea {
  background: var(--cb-light-surface) !important;
  background-image: none !important;
  border-color: var(--cb-light-border) !important;
  color: var(--cb-light-text) !important;
  box-shadow: none !important;
}

html[data-theme="light"] tr:hover td,
html[data-theme="light"] .row:hover {
  background: #eef3f9 !important;
}

html[data-theme="light"] .theme-toggle {
  border-color: rgba(11, 22, 35, 0.26) !important;
  color: var(--cb-light-text) !important;
  background: #ffffff !important;
}