                                                                                                                                      
                                                                                                                             
                                                                                                                                  
                                                                                                                           
.ba { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 0; font-family: var(--sp-font-ui); color: var(--sp-o-ink); }
.ba-group { border: 1px solid var(--sp-o-field-edge); border-radius: 10px; background: var(--sp-o-card); overflow: hidden; }
.ba-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 10px 8px 14px; background: var(--sp-o-band); border-bottom: 1px solid var(--sp-o-row-edge); }
.ba-name { font-weight: 600; font-size: 14px; }
.ba-count { font-size: 13px; color: var(--sp-o-ink-2); }
.ba-total { font-size: 14px; font-weight: 600; font-family: var(--sp-font-num); font-variant-numeric: tabular-nums; }
.ba-headact { margin-left: auto; }
.ba-parts { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px; border-bottom: 1px solid var(--sp-o-row-edge); font-size: 13px; color: var(--sp-o-ink-2); }
.ba-tablewrap { overflow-x: auto; }
.ba-lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.ba-lines th { text-align: left; font-weight: 600; font-size: 12px; color: var(--sp-o-ink-2); padding: 6px 10px; border-bottom: 1px solid var(--sp-o-row-edge); white-space: nowrap; }
.ba-lines td { padding: 5px 10px; border-bottom: 1px solid var(--sp-o-row-edge); vertical-align: middle; }
.ba-lines tbody tr.ba-line:nth-of-type(4n+3) td { background: var(--sp-o-row-alt); }
.ba-lines .ba-amt { text-align: right; font-family: var(--sp-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ba-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
                                                                                                                                   
                                                                                                                     
.ba-bank { color: var(--sp-o-ink-2); overflow-wrap: anywhere; }
.ba-desc { min-width: 8em; overflow-wrap: anywhere; }
.ba-acct { overflow-wrap: anywhere; min-width: 9em; }
.ba-none { color: var(--sp-o-muted); font-style: italic; }
.ba-act { white-space: nowrap; text-align: right; }
.ba .act-btn { font-size: 12px; padding: 3px 10px; min-height: 28px; }
.ba-pick { margin-top: 4px; display: block; max-width: 100%; width: 22em; min-height: 30px; font-size: 13px; background: var(--sp-o-field); border: 1px solid var(--sp-o-field-edge); border-radius: 6px; color: var(--sp-o-ink); }
.ba-msgrow td { background: var(--sp-o-card); padding-top: 0; }
.ba-msg { font-size: 13px; padding: 2px 0 4px; }
.ba-msg.bad, .ba-groupmsg.bad { color: var(--sp-problem); }
.ba-msg.ok, .ba-groupmsg.ok { color: var(--sp-o-ink-2); }
.ba-msg input, .ba-msg select { min-height: 30px; font-size: 13px; background: var(--sp-o-field); border: 1px solid var(--sp-o-field-edge); border-radius: 6px; color: var(--sp-o-ink); }
.ba-line.ba-done td { color: var(--sp-o-muted); }
.ba-groupmsg { padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--sp-o-row-edge); }
.ba-note { font-size: 12px; color: var(--sp-o-ink-2); }
@media (max-width: 640px) {
  .ba-lines th:nth-child(2), .ba-lines td.ba-bank { display: none; }
  .ba-desc { min-width: 8em; }
}
