.wallet-header .header-row { max-width: 760px; flex-wrap: wrap; }
.wallet-header .account span {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
main.wallet-main { max-width: 760px; }
.balance {
  font-size: 48px; font-weight: 750; letter-spacing: -0.04em; line-height: 1.1;
  margin: 4px 0 8px; font-variant-numeric: tabular-nums;
}
.presets { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.presets button { padding: 8px 14px; }
.topup-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.topup-row label {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--muted); font-size: 13px; font-weight: 600;
}
#topup-amount {
  width: 180px; font-size: 16px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text);
}
#topup-amount:focus { border-color: var(--accent); outline: none; }
.form-error { color: var(--red); font-size: 13.5px; margin-top: 10px; }
#topup-note { margin-top: 10px; }
.activity-scroll { overflow-x: auto; }
.amount-credit, .amount-debit { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amount-credit { color: var(--green); }
.amount-debit { color: var(--red); }

@media (max-width: 640px) {
  .balance { font-size: 40px; }
  header { padding: 16px 20px; }
  main.wallet-main { padding: 0 20px; }
}

/* A held amount is money that is still the customer's, so it is reported in the
   neutral register and never in the red a charge uses. */
.held-note { color: var(--amber); font-size: 13px; margin-bottom: 8px; }
.amount-hold { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--amber); }

/* The top-up form while payments are off. Visible so the feature reads as
   coming, plainly inert so nobody tries to use it. */
#topup-controls.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}