:root {
  --primary: #1b4d7a;
  --primary-dark: #163c5a;
  --bg: #f5f7fb;
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background: var(--bg); color:#222; }
.header { background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; }
.header h1 { margin:0; font-size: 18px; letter-spacing: .4px; }
.header .right { opacity:.95; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.card { background:#fff; border:1px solid #e7ebf0; border-radius:12px; padding:20px; box-shadow: 0 6px 18px rgba(20,40,90,.06); }
.grid { display:grid; gap:18px; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
h2 { margin:0 0 14px; color: var(--primary); font-size:20px; }
label { display:block; margin:10px 0 6px; font-size:14px; color:#404b5a; }
input, select, textarea { width:100%; padding:10px 12px; border:1px solid #cfd6df; border-radius:8px; font-size:14px; background:#fff; }
button, .btn { background: var(--primary); color:#fff; border:none; border-radius:8px; padding:10px 14px; cursor:pointer; font-weight:600; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { background: var(--primary-dark); }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px 8px; border-bottom:1px solid #eef2f6; text-align:left; font-size:14px; }
.badge { padding:4px 8px; border-radius:999px; font-size:12px; }
.badge.green { background:#e9f8ee; color:#1a7f3c; }
.badge.red { background:#fde9ea; color:#a12e3a; }
.badge.gray { background:#edf2f7; color:#3f4c5d; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.footer { text-align:center; padding:24px; color:#6b778c; }
form.inline { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
small.muted { color:#6b778c; }
hr.sep { border:none; border-top:1px solid #e7ebf0; margin:16px 0; }