*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI,sans-serif;margin:0;background:#f4f6fa;color:#1f2937;line-height:1.5}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
header{background:#0f3d73;color:#fff}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;flex-wrap:wrap;gap:8px}
.nav nav{display:flex;gap:16px;align-items:center}
header a,header .link{color:#fff;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer}
.brand{font-weight:700;font-size:1.3rem}
.btn,button.primary{background:#2f80ed;color:#fff;border:0;padding:8px 16px;border-radius:6px;cursor:pointer;text-decoration:none;font:inherit}
main{padding:24px 16px;min-height:70vh}
footer{text-align:center;color:#6b7280;padding:20px}
.card{background:#fff;border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.hero{text-align:center;padding:40px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #e5e7eb}
th{background:#eef2f8}
label{display:block;margin:12px 0 4px;font-weight:600}
input,textarea,select{width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:6px;font:inherit}
form.inline{display:inline}
.form{max-width:480px}
.notice{background:#e6f4ea;border:1px solid #9bd3ab;padding:10px 14px;border-radius:6px;margin-bottom:16px}
.error{background:#fdecea;border:1px solid #f5a8a0;padding:10px 14px;border-radius:6px;margin-bottom:16px}
.badge{padding:2px 10px;border-radius:12px;font-size:.85rem;background:#e5e7eb}
.badge.open{background:#fde68a}.badge.in_behandeling{background:#bfdbfe}.badge.gesloten{background:#d1fae5}
.reply{border-left:4px solid #cbd5e1;padding:8px 12px;margin:12px 0;background:#fff}
.reply.staff{border-color:#2f80ed}
.reply small{color:#6b7280}
.body{white-space:pre-wrap}