/* Simple responsive utility */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#f7f7fb; color:#222; }
a { color: #0d6efd; text-decoration: none; }
header, .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 16px; }
.nav { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.nav a { padding:10px 14px; background:white; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.card { background:white; border-radius:16px; padding:16px; box-shadow:0 4px 16px rgba(0,0,0,0.06); margin-bottom:16px; }
.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 900px) { .col-6, .col-4, .col-3 { grid-column: span 12; } }
label { display:block; font-size:0.9rem; margin-bottom:6px; }
input, select, textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; }
button, .btn { display:inline-block; padding:10px 14px; border:0; border-radius:12px; background:#0d6efd; color:white; cursor:pointer; }
.btn-outline { background:transparent; color:#0d6efd; border:1px solid #0d6efd; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px; border-bottom:1px solid #eee; text-align:left; }
.badge { padding:4px 8px; border-radius:999px; font-size:12px; background:#eee; }
.badge.paid { background:#d1f7d6; }
.badge.pending { background:#ffe8a3; }
.footer { text-align:center; padding:24px; color:#777; }
.searchbar { display:flex; gap:8px; flex-wrap:wrap; }
.small { font-size: 12px; color: #666; }