.trip-splitter-shell { max-width: 980px; }
.trip-splitter-app .card { background: var(--bs-body-bg); }
.trip-splitter-app .content-card-white {
  --bs-body-bg: #fff;
  --bs-body-color: #212529;
  --bs-secondary-color: #6c757d;
  --bs-border-color: #dee2e6;
  --bs-tertiary-bg: #f8f9fa;
  background: #fff;
  color: #212529;
}
.step-number { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-size: .9rem; margin-right: .35rem; }
.person-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: end; border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .85rem; }
.expense-card { border: 1px solid var(--bs-border-color); border-radius: .85rem; padding: 1rem; background: var(--bs-tertiary-bg); }
.expense-grid { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(10rem, 1.5fr) minmax(8rem, .8fr) auto; gap: .75rem; align-items: end; }
.split-details { border-top: 1px solid var(--bs-border-color); margin-top: 1rem; padding-top: .75rem; }
.split-details summary { cursor: pointer; color: var(--bs-primary); }
.participant-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem 1rem; margin-top: .75rem; }
.settlement-card { background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), .14), rgba(var(--bs-info-rgb), .1)) !important; }
.settlement-list { display: grid; gap: .75rem; }
.payment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; background: rgba(var(--bs-body-bg-rgb), .82); border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .85rem 1rem; }
.payment-person { font-weight: 700; overflow-wrap: anywhere; }
.payment-person.receiver { text-align: left; }
.payment-arrow { color: var(--bs-primary); font-size: 1.25rem; font-weight: 700; }
.payment-amount { font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.settled-message { border: 1px solid rgba(var(--bs-success-rgb), .35); border-radius: .75rem; padding: 1rem; font-weight: 700; background: rgba(var(--bs-success-rgb), .09); }
.summary-metric { height: 100%; border: 1px solid var(--bs-border-color); border-radius: .7rem; padding: .85rem; }
.summary-metric span { display: block; color: var(--bs-secondary-color); font-size: .85rem; }
.summary-metric strong { display: block; font-size: 1.2rem; margin-top: .2rem; }
.balance-label { display: block; font-size: .72rem; font-weight: 600; }
.balance-positive { color: var(--bs-success-text-emphasis); }
.balance-negative { color: var(--bs-danger-text-emphasis); }
.balance-zero { color: var(--bs-secondary-color); }
@media (max-width: 767.98px) {
  .expense-grid { grid-template-columns: 1fr; }
  .expense-grid .remove-expense { justify-self: start; }
  .payment-row { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; }
  .payment-arrow { grid-column: 1; font-size: 0; }
  .payment-arrow::after { content: "pays"; font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); }
  .payment-person.receiver { grid-column: 1; }
  .payment-amount { grid-column: 2; grid-row: 1 / span 3; }
}