* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background: #F7F9FC; color: #172B4D; }
header { background: #172B4D; color: #fff; padding: 14px 24px; display: flex; align-items: center; gap: 24px; }
header h1 { margin: 0; font-size: 22px; }
nav { display: flex; gap: 8px; flex-wrap: wrap; }
nav button { background: transparent; color: #D7E5F5; border: 1px solid #50647D; }
nav button.actief { background: #2364AA; color: #fff; border-color: #2364AA; }
main { max-width: 760px; margin: 24px auto; padding: 0 16px; }
.kaart { background: #fff; border: 1px solid #DCE5EF; border-radius: 12px; padding: 20px 24px; }
button { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid #A7BED7; background: #fff; cursor: pointer; }
button:hover:not(:disabled) { background: #EAF2FB; }
button.primair { background: #2364AA; color: #fff; border-color: #2364AA; }
.opties { display: grid; gap: 8px; margin: 16px 0; }
.opties button { text-align: left; }
.opties button.goed { background: #E8F5F4; border-color: #067C82; }
.opties button.fout { background: #FDECEA; border-color: #C0392B; }
.voortgang { color: #50647D; font-size: 14px; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #DCE5EF; }
label { display: block; margin: 10px 0 4px; font-weight: 600; }
input, select, textarea { font: inherit; padding: 6px 8px; border: 1px solid #A7BED7; border-radius: 6px; width: 100%; }
.rij { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.melding { color: #C0392B; }
.uitleg { background: #EAF2FB; border-left: 4px solid #2364AA; padding: 8px 12px; border-radius: 4px; }