:root {
  --bg: #f7f4ee; --card: #ffffff; --ink: #2e2a25; --muted: #968d80;
  --accent: #8c5f4a; --accent-ink: #ffffff; --danger: #b23b2e; --ok: #4a7c59;
  --line: #e6e0d6;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 "Avenir Next", "Segoe UI", system-ui, sans-serif; }
header, main, footer { max-width: 880px; margin: 0 auto; padding: 0 20px; }
header { padding-top: 32px; }
h2 { font-size: 18px; font-weight: 600; margin: 28px 0 8px; }
#summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.stat-label { display: block; font-size: 13px; color: var(--muted); }
.stat-value { font-size: 22px; font-weight: 600; }
.banner { background: #fdf3d7; border: 1px solid #e8d49a; border-radius: 10px; padding: 12px 16px;
  margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.banner.error { background: #fbe9e6; border-color: #eac3bd; }
.banner[hidden] { display: none; }
form fieldset { border: 1px solid var(--line); background: var(--card); border-radius: 10px;
  padding: 16px; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
form label.check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 10px; }
form input { font: inherit; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; }
form input[type="checkbox"] { padding: 0; }
#f-name, #d-name { width: 220px; }
#f-amount, #d-amount { width: 130px; }
form.editing .stage-only { display: none; }
button { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; }
button[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.form-error { color: var(--danger); margin: 0 0 8px; font-size: 14px; }
#expense-list, #deposit-list { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.expense, .deposit { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.expense-head, .deposit { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 12px; align-items: center; }
.expense { display: block; }
.expense.overdue, .deposit.overdue { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.expense.settled, .deposit.returned { opacity: .55; }
.cell-label { display: block; font-size: 12px; color: var(--muted); }
.cell.name .cell-value { font-weight: 600; }
.actions { display: flex; gap: 6px; justify-content: end; }
.actions button { padding: 5px 10px; font-size: 13px; }
.stages { list-style: none; margin: 10px 0 0; padding: 10px 0 0 8px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 6px; }
.stage { display: flex; align-items: center; gap: 12px; font-size: 14px; min-height: 28px; }
.stage .marker { width: 1.1em; text-align: center; color: var(--muted); }
.stage.paid { color: var(--muted); }
.stage.paid .marker { color: var(--ok); }
.stage .stage-amount { min-width: 100px; font-weight: 600; }
.stage .stage-due { min-width: 110px; color: var(--muted); }
.stage.overdue .stage-due { color: var(--danger); font-weight: 600; }
.stage .actions { margin-left: auto; }
.stage button { padding: 3px 9px; font-size: 12px; }
.stage input { font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.stage input[type="number"] { width: 110px; }
.stage label.check { display: flex; flex-direction: row; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.stage .stage-err { color: var(--danger); font-size: 12px; }
.add-stage { background: none; border: none; color: var(--accent); cursor: pointer; padding: 2px 0; font-size: 13px; }
.section-summary { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.empty-note { color: var(--muted); text-align: center; padding: 24px 0; }
footer { padding: 16px 20px 40px; border-top: 1px solid var(--line); margin-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
footer .note { font-size: 13px; color: var(--muted); flex-basis: 100%; margin: 8px 0 0; }
@media (max-width: 640px) {
  #summary { grid-template-columns: 1fr; }
  .expense-head, .deposit { grid-template-columns: 1fr 1fr; }
}
#history { margin-top: 28px; }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
#history-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.hist { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hist .hist-meta { color: var(--muted); }
.hist .hist-action { font-weight: 600; }
.hist .actions { margin-left: auto; display: flex; gap: 6px; }
.hist button { padding: 3px 9px; font-size: 12px; }
#history-detail { margin-top: 10px; font-size: 14px; white-space: pre-wrap; font-family: ui-monospace, monospace; color: var(--ink); }
#history-detail .add { color: var(--ok); }
#history-detail .del { color: var(--danger); }