.spacer { flex: 1; }
.person-row { display: flex; gap: 8px; }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.totals .card { padding: 12px 14px; }
.totals b { display: block; font-size: 20px; font-weight: 600; }
.totals span { color: var(--subtle); font-size: 12px; }
.split-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.split-rows .sr { display: flex; align-items: center; gap: 8px; }
.split-rows .sr input[type=number] { width: 110px; }
.split-rows .sr span.v { margin-left: auto; color: var(--subtle); font-size: 12px; }
#items li { gap: 12px; }
#items .t { flex: 1; min-width: 0; }
#items .t b { display: block; font-weight: 600; }
#items .t span { color: var(--subtle); font-size: 12px; }
#items .amt { font-weight: 600; white-space: nowrap; }
.bal { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bal .nm { width: 30%; min-width: 90px; }
.bal .track { flex: 1; height: 12px; position: relative; background: var(--hover); border-radius: 6px; }
.bal .track i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.bal .track i.pos { left: 50%; background: var(--ok); } .bal .track i.neg { right: 50%; background: var(--bad); }
.bal .v { width: 110px; text-align: right; font-weight: 600; } .bal .v.pos { color: var(--ok); } .bal .v.neg { color: var(--bad); }