:root {
  --ok: #138a36;
  --warn: #b81d13;
  --muted: #6b7280;
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #e5e7eb;
  --link: #2563eb;
}

body { margin: 0; background: var(--bg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #111827;}
header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0;}
h1 { margin:0; font-size:1.1rem;} .muted{ color:var(--muted);}
.btn{ border:1px solid var(--border); background:white; padding:8px 12px; border-radius:8px; font-weight:600; cursor:pointer;}
.btn.primary{ background:var(--link); border-color:var(--link); color:white;} .btn.danger{ background:#fff0f0; border-color:#ffcaca; color:#b21f1f;} .hidden{ display:none !important;}
main{ max-width:900px; margin:20px auto; padding:0 16px;} .card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px;}
.grid{ display:grid; grid-template-columns:1fr auto; gap:12px;} .grid input{ padding:8px; border-radius:6px; border:1px solid var(--border);} .notice{ color:var(--muted); font-size:0.9rem;}
.table-wrapper{ overflow-x:auto;} table{ width:100%; border-collapse:collapse;} th,td{ padding:10px 8px; border-bottom:1px solid var(--border);} .right{text-align:right;}
.pill{ display:inline-block; padding:3px 8px; border-radius:999px; font-size:0.82rem; font-weight:600;} .paid{ background:#e6f8ec; color:var(--ok); border:1px solid #b6e7c3;} .unpaid{ background:#ffecec; color:var(--warn); border:1px solid #ffd9d9;}
.row-actions{ display:inline-flex; gap:8px;} dialog form{ display:flex; flex-direction:column; gap:12px;} .dialog-buttons{ display:flex; justify-content:flex-end; gap:10px;} .error{ color:#b21f1f; font-size:0.9rem;} footer{ text-align:center; padding:30px 0; color:var(--muted);}