/* ========== Base ==========: */
:root{
  --bg:#f6f7fb; --card:#fff; --txt:#222; --muted:#666; --pri:#2123BB; --b:#ddd;
}
*{ box-sizing:border-box; }
body{ margin:0; font:16px/1.5 system-ui,Segoe UI,Roboto,Arial; color:var(--txt); background:var(--bg); }
.container{ max-width:980px; margin:0 auto; padding:16px; }
.site-header{ background:#fff; border-bottom:1px solid var(--b); }
.site-header h1{ margin:0; font-size:20px; }
.site-header nav a, .site-header nav span{ margin-right:12px; text-decoration:none; color:var(--pri); }
.site-footer{ padding:16px; color:var(--muted); text-align:center; }

/* ========== Layout & UI ==========: */
h2{ margin-top:8px; }
.card{ background:var(--card); border:1px solid var(--b); border-radius:12px; padding:16px; margin:12px 0; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.grid-2{ display:grid; grid-template-columns:1fr 160px; gap:12px; }
.grid-3{ display:grid; grid-template-columns:1fr 160px 1fr; gap:12px; align-items:end; }
.question-list{ padding-left:18px; }
.q-card h3{ margin-top:4px; }
.muted{ color:var(--muted); }

.form label{ display:block; margin:8px 0; }
.form input[type=text], .form input[type=number], .form input[type=password], .form textarea, .text-input{
  width:100%; padding:8px; border:1px solid var(--b); border-radius:8px;
}

/* ========== Buttons & Alerts ==========: */
.btn{ display:inline-block; padding:8px 12px; border:1px solid var(--b); border-radius:10px; background:#fff; text-decoration:none; color:#222; cursor:pointer; }
.btn:hover{ background:#f1f1f1; }
.btn-primary{ background:var(--pri); border-color:transparent; color:#fff; }
.btn-secondary{ background:#e9ecff; border-color:#cdd4ff; color:#18206f; }
.btn-light{ background:#f4f4f8; }
.btn-danger{ background:#ffecec; border-color:#ffb3b3; color:#b00000; }
.btn-xs{ padding:4px 8px; font-size:12px; }
.btn + .btn{ margin-left:8px; }              /* spacing */
.opt-row .btn{ margin-top:4px; }             /* kleine ruimte in editor-rijen */

.alert{ background:#ffecec; border:1px solid #ffb3b3; border-radius:10px; padding:10px; }

/* ========== Multiple choice / opties editor ==========: */
.choice{ display:block; padding:6px 8px; margin:4px 0; border:1px solid var(--b); border-radius:8px; background:#fff; }
.opt-row{ display:grid; grid-template-columns:1fr 1fr 1fr 44px; gap:8px; align-items:end; margin-bottom:8px; }

/* ========== Login card ==========: */
.login-card{ max-width:420px; margin:24px auto; }

/* ========== MATCH (lijnen) ==========: */
.match2-cols{ display:grid; grid-template-columns:1fr 220px 1fr; gap:12px; align-items:stretch; }
.match2-col{ list-style:none; margin:0; padding:8px; min-height:260px; border:1px dashed var(--b); border-radius:10px; background:#fff; }
.match2-col li{ padding:8px; margin:6px 0; border:1px solid var(--b); border-radius:8px; background:#fafafa; cursor:pointer; }
.match2-col li.active{ outline:2px solid var(--pri); background:#eef1ff; }
.match2-col li .chosen{ float:right; color:var(--muted); }
.match2-canvas{ position:relative; }
.match2-canvas svg.lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.match2-canvas svg.lines path{ stroke-linecap:round; } /* nette afgeronde einden */

/* ========== Legacy match (drag&drop) – (laten staan voor oude vragen) ==========: */
.match-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.match-list{ list-style:none; margin:0; padding:0; min-height:200px; border:1px dashed var(--b); border-radius:10px; background:#fff; }
.draggable{ margin:6px; padding:8px; border:1px solid var(--b); border-radius:8px; background:#fafafa; cursor:grab; }
.dropzone{ margin:6px; padding:12px; border:2px dashed #bbb; border-radius:8px; background:#fff; min-height:44px; }
.dropzone.active{ border-color: var(--pri); background:#eef1ff; }

/* ========== CLASSIFY (sleep naar categorieën) ==========: */
.classify-wrap .class-cols{ display:grid; grid-template-columns:1fr 2fr; gap:12px; }
.classify-wrap .class-list{ list-style:none; margin:0; padding:8px; min-height:180px; border:1px dashed var(--b); border-radius:10px; background:#fff; }
.classify-wrap .class-list.active{ outline:2px solid var(--pri); background:#eef1ff; }
.classify-wrap .class-list li.drag{ padding:8px; margin:6px 0; border:1px solid var(--b); border-radius:8px; background:#fafafa; cursor:grab; }
.classify-wrap .class-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.classify-wrap .class-col{ background:#fff; border:1px solid var(--b); border-radius:10px; padding:8px; }
.classify-wrap .class-cat strong{ display:block; margin-bottom:6px; }