/* Minimal, responsive styles */
:root { --pad: 16px; --gap: 10px; --radius: 12px; }
*{ box-sizing: border-box; }
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; background:#f7f7fb; color:#111; }
.header{ display:flex; align-items:center; justify-content:space-between; padding:var(--pad); background:#111; color:#fff; }
.header a{ color:#fff; text-decoration:none; margin-left:12px; }
.container{ max-width:1100px; margin:24px auto; padding:0 var(--pad); }
.card{ background:#fff; border-radius:var(--radius); padding:var(--pad); box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:16px; }
.input, select, input[type="date"]{ width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px; }
.row{ display:grid; grid-template-columns: repeat(12, 1fr); gap:var(--gap); }
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
.col-3{ grid-column: span 3; }
.btn{ display:inline-block; padding:10px 14px; border-radius:999px; border:0; background:#111; color:#fff; cursor:pointer; text-decoration:none; }
.btn.secondary{ background:#06c; }
.btn.green{ background:#2a7; }
.btn.red{ background:#d33; }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ border-bottom:1px solid #eee; padding:10px; text-align:left; }
.table th{ background:#fafafa; }
.badge{ padding:4px 8px; border-radius:999px; font-size:12px; }
.badge.paid{ background:#e8fff1; color:#15803d; }
.badge.unpaid{ background:#fff4e5; color:#92400e; }
.flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.right{ margin-left:auto; }
.small{ font-size:12px; color:#666; }
img.thumb{ width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid #eee; }
.print-area{ padding:24px; max-width:800px; margin:0 auto; background:#fff; }
hr.dim{ border:0; border-top:1px dashed #ccc; margin:12px 0; }