* { box-sizing: border-box; }

body {
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #fff;
  color: #1c1e21;
  margin: 0;
}

.topbar {
  background: #1c1e21;
  color: #fff;
  padding: 10px 16px;
}

.topbar .brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}

.page {
  padding: 12px 16px;
}

.muted { color: #6b7280; font-size: 0.85rem; margin: 6px 0 12px; }

table.grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #333;
}

table.grid th, table.grid td {
  border: 1px solid #999;
  padding: 6px 8px;
  font-size: 0.85rem;
  vertical-align: top;
  text-align: left;
}

table.grid th {
  background: #e9ecef;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

table.grid th.group-amazon { background: #ffd9a8; text-align: center; }
table.grid th.group-chase { background: #b9dcff; text-align: center; }

td.nowrap { white-space: normal; word-break: break-word; }
th { white-space: normal; word-break: break-word; }
td.items { white-space: normal; }
td.num { text-align: right; }

tr.row-unmatched { background: #fff2f2; }

/* Money direction: charge (debit, money out) vs credit (return/refund, money back). */
td.amt-charge { color: #a33; }
td.amt-credit { color: #1a7a3c; font-weight: 600; }

td.notes { white-space: normal; color: #555; font-size: 0.78rem; font-style: italic; }

.badge-refund {
  display: inline-block;
  background: #ffe1e1;
  color: #a33;
  border: 1px solid #e08a8a;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 5px;
  margin-right: 5px;
  letter-spacing: 0.03em;
}

.badge-flag {
  display: inline-block;
  background: #eef1f5;
  color: #444;
  border: 1px solid #c9d0da;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 5px;
  margin: 1px 2px 1px 0;
  letter-spacing: 0.02em;
}

table.nested {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #7c93b8;
  background: #f3f6fb;
}

table.nested td {
  border: 1px solid #7c93b8;
  padding: 3px 6px;
  font-size: 0.85rem;
  white-space: normal;
}