:root { --brand: #7a5c2e; }
body { background: #f7f6f3; }
.tile { background: #fff; border: 1px solid #e7e3dc; border-radius: .75rem; padding: .75rem .9rem; height: 100%; }
.tile .label { color: #6c757d; font-size: .8rem; }
.tile .value { font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.delta { font-size: .8rem; }
.delta.good { color: #198754; }
.delta.bad { color: #dc3545; }
.estimate { color: #6c757d; font-size: .75rem; }
.money { white-space: nowrap; text-align: right; }
tr.ok td { background: #e8f5e9; }
tr.mismatch td { background: #fde2e1; }
tr.no_bank td { color: #6c757d; }
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: #fff; border-top: 1px solid #ddd;
  z-index: 1000; padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a { flex: 1; text-align: center; padding: .6rem 0 .7rem; font-size: .75rem; color: #555; text-decoration: none; }
.bottom-nav a.active { color: var(--brand); font-weight: 600; }
@media (max-width: 767.98px) {
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { background: #fff; border: 1px solid #e7e3dc; border-radius: .6rem; margin-bottom: .6rem; padding: .4rem .6rem; }
  table.cards td { border: 0; padding: .15rem 0; text-align: left; }
  table.cards td[data-label]::before { content: attr(data-label) ": "; color: #6c757d; }
}