/* หน้า ยืม-คืน: การ์ดสรุป, รายชื่อแยกตามคน, ประวัติ */
.loan-cards { grid-template-columns: repeat(3, 1fr); }
.loan-section { display: grid; gap: 10px; }
.loan-section + .loan-section { margin-top: 10px; }
.loan-section h4 { margin: 16px 4px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.person.open { margin: 4px 0; } /* การ์ดที่กางอยู่เว้นห่างจากการ์ดข้างเคียงเพิ่ม */
.person { border-radius: 16px; transition: box-shadow .15s; }
.person.open { box-shadow: var(--in); }
.person-main { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; cursor: pointer; transition: box-shadow .15s; }
@media (hover: hover) { .person:not(.open) .person-main:hover { box-shadow: var(--out-sm); } }
.p-avatar { width: 42px; height: 42px; flex: none; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 17px; color: #fff; background: linear-gradient(135deg, #fbbf24, var(--loan)); box-shadow: 3px 3px 8px rgba(217, 119, 6, .3); }
.person.done .p-avatar { background: linear-gradient(135deg, #6ee7b7, var(--income)); box-shadow: 3px 3px 8px rgba(22, 163, 122, .3); }
.p-info { flex: 1; min-width: 0; }
.p-name { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.p-chevron { display: inline-grid; color: var(--muted); transition: transform .2s; }
.person.open .p-chevron { transform: rotate(180deg); }
.p-sub { font-size: 13px; color: var(--muted); }
.p-bar { height: 6px; margin-top: 8px; border-radius: 999px; box-shadow: var(--in); overflow: hidden; }
.p-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-2), var(--primary)); }
.person.done .p-bar span { background: var(--income); }
.p-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; min-width: 150px; }
.p-bal { font-weight: 700; color: var(--loan); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-done { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--income); white-space: nowrap; }
.p-hist { padding: 0 12px 10px 68px; }
.p-hist-row { display: grid; grid-template-columns: 76px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 13.5px; cursor: pointer; }
@media (hover: hover) { .p-hist-row:hover { box-shadow: var(--out-sm); } }
.p-hist-date, .p-hist-note { color: var(--muted); }
.p-hist-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-hist-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.p-hist .tag { margin: 0; }

@media (max-width: 760px) {
  .loan-cards .card:last-child { grid-column: span 2; }
  .person-main { gap: 10px; padding: 10px 6px; }
  .p-right { min-width: 0; }
  .p-avatar { width: 36px; height: 36px; font-size: 15px; border-radius: 12px; }
  .p-hist { padding: 0 4px 8px; }
  .p-hist-row { grid-template-columns: 60px auto minmax(0, 1fr) auto; gap: 8px; padding: 8px 6px; }
}