:root {
  --bg1: #e2e8f0; --bg2: #f1f5f9;
  --accent: #b45309; --accent2: #92400e; --accent-zacht: #fef3c7;
  --c-p: #dc2626; --c-o: #2563eb; --c-g: #ea580c; --c-l: #16a34a;
}
.zd-opdracht {
  display: flex; align-items: center; gap: 12px; background: #1e293b; color: #fff; border-radius: 18px;
  padding: 12px 16px; box-shadow: var(--schaduw);
}
.zd-opdracht .ic { font-size: 34px; }
.zd-opdracht .stap { font-size: 14px; color: #fcd34d; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.zd-opdracht .tekst { font-size: 21px; font-weight: 800; }
.zd-papier {
  margin-top: 10px; background: #fffdf5; border-radius: 6px 6px 20px 20px; padding: 26px 18px 22px;
  box-shadow: var(--schaduw); position: relative;
  background-image: repeating-linear-gradient(180deg, transparent 0 46px, #e0e7ff 46px 48px);
}
.zd-papier::before { content: ""; position: absolute; left: 44px; top: 0; bottom: 0; width: 2px; background: #fecaca; }
.zd-zin { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; position: relative; }
.zd-w {
  font-family: var(--lees); font-size: 30px; font-weight: 700; padding: 4px 12px 8px; border-radius: 12px;
  background: #fff; border: 3px solid #cbd5e1; box-shadow: 0 3px 0 #cbd5e1; position: relative; min-width: 44px;
  transition: transform .1s;
}
.zd-w:hover { border-color: var(--accent); transform: translateY(-2px); }
.zd-w.kies { background: #fef3c7; border-color: var(--accent); box-shadow: 0 3px 0 var(--accent); }
.zd-w .lab { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font-family: system-ui, sans-serif; font-size: 11px; font-weight: 900; white-space: nowrap; letter-spacing: .3px; }
.zd-w.m-p { border-color: var(--c-p); box-shadow: 0 3px 0 var(--c-p); }
.zd-w.m-o { background: #dbeafe; }
.zd-w.m-g { border-color: var(--c-g); box-shadow: 0 3px 0 var(--c-g); }
.zd-w.m-p.m-g { border-color: var(--c-p); }
.zd-w.m-l { background: #dcfce7; }
.zd-w.toon-fout { outline: 4px dashed var(--fout); }
.zd-w.toon-goed { outline: 4px solid #fde047; }
.zd-w .lab.l-p { color: var(--c-p); } .zd-w .lab.l-o { color: var(--c-o); } .zd-w .lab.l-g { color: var(--c-g); } .zd-w .lab.l-l { color: var(--c-l); }
.zd-punt { font-family: var(--lees); font-size: 30px; font-weight: 700; align-self: center; margin-left: -6px; }
.zd-acties { display: flex; justify-content: center; gap: 10px; margin-top: 18px; min-height: 56px; }
.zd-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--muted); }
.zd-legenda span::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; }
.zd-legenda .p::before { border: 3px solid var(--c-p); } .zd-legenda .o::before { background: #dbeafe; border: 2px solid var(--c-o); }
.zd-legenda .g::before { border: 3px solid var(--c-g); } .zd-legenda .l::before { background: #dcfce7; border: 2px solid var(--c-l); }
.zd-zinvol { font-family: var(--lees); font-size: 21px; background: #f8fafc; border-radius: 12px; padding: 8px 12px; margin: 6px 0 4px; }
.zd-zinvol b { color: var(--goed); }
.zd-proef { font-family: var(--lees); background: #eef2ff; border-radius: 10px; padding: 6px 10px; margin-top: 6px; }
@media (max-width: 560px) {
  .zd-w { font-size: 21px; padding: 3px 8px 6px; min-width: 32px; }
  .zd-punt { font-size: 21px; }
  .zd-zin { gap: 14px 6px; }
  .zd-opdracht .tekst { font-size: 17px; }
  .zd-opdracht .ic { font-size: 26px; }
  .zd-papier { padding: 20px 8px 22px; }
  .zd-papier::before { left: 14px; }
  .zd-w .lab { font-size: 9px; bottom: -17px; }
}