/* ============================================================
   RecruiterIQ — gamified stijl
   Kleuren centraal aanpassen? Doe het hier bovenin.
   ============================================================ */
:root {
  --kleur: #2563eb;         /* oceaanblauw (hoofdkleur) */
  --kleur-donker: #1d4ed8;
  --kleur-diep: #1e40af;    /* knop-onderrand */
  --kleur-licht: #e8f0fe;   /* zachte blauwe tint */
  --groen: #22c55e;
  --groen-donker: #16a34a;
  --groen-fel: #16d05f;          /* fellere groen: start de quiz */
  --groen-fel-donker: #0ea54a;
  --amber: #f59e0b;
  --amber-licht: #fef3c7;
  --rood: #ef4444;
  --grijs: #64748b;
  --licht: #f4f7fb;         /* paginakleur */
  --rand: #e2e8f0;
  --tekst: #1f2937;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--licht);
  color: var(--tekst);
  line-height: 1.6;
}

/* ---------- Testomgeving-balk ---------- */
.testbalk {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(45deg, #b91c1c, #b91c1c 12px, #a31616 12px, #a31616 24px);
  color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .03em;
  padding: 8px 14px; text-align: center;
}
.testbalk i { font-size: 1.1rem; }

/* ---------- Navigatie ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  background: #fff; padding: 12px 22px;
  border-bottom: 2px solid var(--rand);
}
.topbar .logo {
  font-weight: 800; font-size: 1.2rem; text-decoration: none; color: var(--kleur);
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar nav a { text-decoration: none; color: var(--tekst); font-weight: 600; font-size: .95rem; }
.topbar nav a:hover { color: var(--kleur); }
.topbar .punten {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--amber-licht); color: #92600a;
  padding: 6px 12px; border-radius: 999px; font-size: .9rem; font-weight: 700;
}
.topbar .uitlog { color: var(--rood); font-size: 1.1rem; }
.viewswitch {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  background: var(--kleur-licht); color: var(--kleur-diep);
  padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700;
}
.viewswitch.actief { background: var(--amber-licht); color: #92600a; }
.topbar .level-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--kleur-licht); color: var(--kleur-diep);
  padding: 6px 12px; border-radius: 999px; font-size: .9rem; font-weight: 700;
}

/* Level-kaart op voortgangspagina */
.level-kaart { display: flex; align-items: center; gap: 18px; }
.level-badge {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--kleur); color: #fff; font-size: 30px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.level-titel { font-weight: 800; font-size: 1.2rem; margin-bottom: 6px; }

/* Badges */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.badge-item {
  background: #fff; border: 2px solid var(--rand); border-radius: 16px;
  padding: 18px 12px; text-align: center; transition: transform .15s;
}
.badge-item.behaald { border-color: var(--groen); background: #f0fdf4; }
.badge-item.behaald:hover { transform: translateY(-3px); }
.badge-cirkel {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: var(--kleur-licht); color: var(--kleur);
}
.badge-item.behaald .badge-cirkel { background: #dcfce7; color: var(--groen-donker); }
.badge-item.vergrendeld { opacity: .6; }
.badge-item.vergrendeld .badge-cirkel { filter: grayscale(1); }
.badge-naam { font-weight: 700; font-size: .95rem; }
.badge-status { font-size: .82rem; color: var(--grijs); margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.badge-item.behaald .badge-status { color: var(--groen-donker); font-weight: 700; }

.container { max-width: 960px; margin: 0 auto; padding: 28px 16px; }

h1 { margin-top: 0; font-weight: 800; }
h2 { font-weight: 700; }

/* ---------- Kaarten ---------- */
.kaart {
  background: #fff; border: 2px solid var(--rand); border-radius: 20px;
  padding: 22px; margin-bottom: 16px;
  transition: transform .15s, box-shadow .15s;
}
.kaart:hover { box-shadow: 0 8px 20px rgba(37,99,235,.08); }
.kaart.smal { max-width: 400px; margin: 40px auto; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.grid .kaart:hover { transform: translateY(-3px); }

/* Module-icoon in gekleurd blok */
.module-icoon {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kleur-licht); color: var(--kleur); font-size: 26px;
  margin-bottom: 10px;
}
.module h2 { margin: 8px 0 4px; font-size: 1.15rem; }
.module p { color: var(--grijs); font-size: .92rem; }

/* Voortgangsring op modulekaart */
.ring { position: relative; width: 54px; height: 54px; float: right; }
.ring svg { transform: rotate(-90deg); }
.ring span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--kleur);
}
.ring.ring-klaar span { color: var(--groen); font-size: 20px; }
.ring.slot span { color: #b0b8c9; font-size: 22px; }
.kaart.module.vergrendeld { opacity: .82; }
.kaart.module.vergrendeld .module-icoon { filter: grayscale(1); background: #eef2f7; color: var(--grijs); }
.badge.slot { background: #eef2f7; color: var(--grijs); }

/* ---------- Knoppen (drukbaar, Duolingo-stijl) ---------- */
.knop, button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--kleur); color: #fff;
  border: none; border-bottom: 4px solid var(--kleur-diep);
  padding: 11px 20px; border-radius: 14px;
  text-decoration: none; cursor: pointer;
  font-size: .98rem; font-weight: 700; font-family: inherit;
  transition: transform .1s, filter .15s;
}
.knop:hover, button:hover { filter: brightness(1.08); }
.knop:active, button:active { transform: translateY(2px); border-bottom-width: 2px; }
.knop.grijs { background: #eef2f7; color: var(--grijs); border-bottom-color: #d6dde8; }
.knop.groen { background: var(--groen); border-bottom-color: var(--groen-donker); }
/* Quiz-startknop: fellere groen, want dit is de eindstap van een module */
.knop.groen-fel { background: var(--groen-fel); border-bottom-color: var(--groen-fel-donker); color: #fff; }
/* Quiz-icoon: rood, als visueel signaal dat er getoetst wordt */
.quiz-icoon { color: var(--rood); }
.knop.groot { font-size: 1.08rem; padding: 13px 26px; }
.knop.klein { padding: 7px 14px; font-size: .85rem; border-bottom-width: 3px; }

/* Admin-testblok op de modulepagina */
.admin-test {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center;
  margin-top: 10px; padding: 10px; border: 1px dashed var(--rand); border-radius: 12px;
}
.admin-test-label { font-size: .8rem; font-weight: 800; color: var(--grijs); display: inline-flex; align-items: center; gap: 5px; }
.knop.uit { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ---------- Formulieren ---------- */
form label { display: block; margin-bottom: 14px; font-weight: 700; font-size: .95rem; }
form input[type=text], form input[type=email], form input[type=password],
form input[type=search], form textarea, form select {
  display: block; width: 100%; margin-top: 5px; padding: 11px 13px;
  border: 2px solid var(--rand); border-radius: 12px; font-size: 1rem;
  font-family: inherit; background: #fff;
}
form input:focus, form textarea:focus, form select:focus {
  outline: none; border-color: var(--kleur);
}
.optie {
  display: block; font-weight: 600; margin: 8px 0; cursor: pointer;
  padding: 12px 14px; border: 2px solid var(--rand); border-radius: 14px;
  transition: background .15s, border-color .15s;
}
.optie:hover { background: var(--kleur-licht); border-color: var(--kleur); }
.optie input { margin-right: 10px; }
.vraagtekst { font-weight: 700; font-size: 1.05rem; }

.fout { background: #fee2e2; color: var(--rood); padding: 12px; border-radius: 12px; font-weight: 600; }
.hint { color: var(--grijs); font-size: .9rem; }
code { background: #eef2f7; padding: 2px 6px; border-radius: 6px; font-size: .95rem; }

/* ---------- Badges & resultaat ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700;
}
.badge.klaar { background: #dcfce7; color: var(--groen-donker); }
.resultaat { text-align: center; }
.resultaat .knop { margin: 6px 4px 0; }
.niet-geslaagd { border-color: var(--rood); }
.fail-cirkel {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 6px;
  background: #fee2e2; color: var(--rood); font-size: 38px;
  display: flex; align-items: center; justify-content: center;
}
.score-groot { font-size: 2.3rem; font-weight: 800; color: var(--kleur); margin: 6px 0; }
.antwoord { border-radius: 0; border-left: 4px solid var(--rand); }
.antwoord.goed { border-left-color: var(--groen); }
.antwoord.mis  { border-left-color: var(--rood); }
.uitleg { color: var(--grijs); font-style: italic; }

/* ---------- Voortgang ---------- */
.balk { background: #e8ecf3; border-radius: 999px; height: 14px; overflow: hidden; margin: 12px 0; }
.balk-vol { background: var(--groen); height: 100%; border-radius: 999px; transition: width .4s; }
.punten-groot { font-size: 1.3rem; font-weight: 700; }
.voortgang-mini { margin-bottom: 12px; }
.stap-tekst { color: var(--grijs); font-size: .9rem; margin: 4px 0 0; font-weight: 600; }

/* ---------- Lessen ---------- */
.les-rij {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 2px solid var(--rand); border-radius: 16px;
  padding: 15px 17px; margin-bottom: 10px;
  text-decoration: none; color: var(--tekst); font-weight: 700;
  transition: transform .12s, border-color .15s;
}
a.les-rij:hover { transform: translateX(3px); border-color: var(--kleur); }
.les-rij.done { border-color: var(--groen); background: #f0fdf4; }
.les-rij.lock { opacity: .55; }
.les-rij .les-status { font-size: 1.4rem; color: var(--kleur); display: flex; }
.les-rij.done .les-status { color: var(--groen); }
.les-rij.lock .les-status { color: #b0b8c9; }
.les-rij .les-titel { flex: 1; }
.les-rij .chev { margin-left: auto; color: #b0b8c9; }
.les-rij.actief { border-color: var(--kleur); box-shadow: 0 4px 14px rgba(37,99,235,.12); }
.les-start-knop {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kleur); color: #fff; font-size: .85rem; font-weight: 700;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  border-bottom: 3px solid var(--kleur-diep);
}

.les-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.les-kop .module-icoon { width: 46px; height: 46px; font-size: 22px; margin: 0; }
.les-kop .sub { font-size: .8rem; color: var(--grijs); font-weight: 800; letter-spacing: .05em; }
.les-kop .titel { font-weight: 800; font-size: 1.2rem; }

.les-item {
  display: flex; gap: 14px; align-items: flex-start;
  border: 2px solid var(--rand); border-radius: 14px;
  padding: 13px 15px; margin: 10px 0;
}
.les-item > i, .les-item > strong { font-size: 1.3rem; color: var(--kleur); }
.les-item span { color: var(--grijs); font-size: .92rem; font-weight: 400; }
.les-tip {
  background: var(--amber-licht); border-radius: 12px; padding: 12px 14px;
  font-size: .95rem; display: flex; gap: 8px; align-items: flex-start;
}
.les-tip i { color: var(--amber); font-size: 1.2rem; }
.les-keten { text-align: center; padding: 6px 0; }
.les-laag {
  display: block; max-width: 300px; margin: 8px auto; padding: 11px;
  background: var(--kleur-licht); color: var(--kleur-diep);
  border-radius: 999px; font-weight: 600;
}
.les-laag i { vertical-align: -2px; }
.les-pijl { color: var(--grijs); font-size: .9rem; }

/* Rol-tegels (klik om open te klappen) */
.rol-groep { font-weight: 800; color: var(--kleur-diep); margin: 18px 0 8px; font-size: 1.05rem; }
.rol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-items: start; }
.rol-tegel {
  background: #fff; border: 2px solid var(--rand); border-radius: 14px;
  overflow: hidden; cursor: pointer; transition: border-color .15s, background .15s;
}
.rol-tegel:hover { border-color: var(--kleur); }
.rol-tegel.open { border-color: var(--kleur); box-shadow: 0 6px 16px rgba(37,99,235,.12); }
.rol-kop { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; }
.rol-kop > span { flex: 1; }
.rol-kop > i:first-child { color: var(--kleur); font-size: 1.2rem; }
.rol-chevron { color: #b0b8c9; transition: transform .2s; }
.rol-tegel.open .rol-chevron { transform: rotate(180deg); }
.rol-body { display: none; padding: 0 14px 13px; color: #334155; font-size: .92rem; line-height: 1.6; }
.rol-tegel.open .rol-body { display: block; }
.rol-body p { margin: 0 0 8px; }
.rol-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rol-tag {
  background: var(--kleur-licht); color: var(--kleur-diep);
  font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}

/* Interactieve applicatie-lagen (les 2) */
.app-keten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin: 8px 0 14px; }
.app-laag {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--rand); border-radius: 14px;
  padding: 13px 15px; font-weight: 700; cursor: pointer; transition: .15s;
}
.app-laag:hover { border-color: var(--kleur); }
.app-laag.actief { border-color: var(--kleur); background: var(--kleur-licht); }
.app-laag i { color: var(--kleur); font-size: 1.2rem; }
.app-pijl { color: #94a3b8; font-size: .82rem; text-align: center; margin: 4px 0; }
.app-detail {
  background: #f8fafc; border: 2px solid var(--rand); border-radius: 14px;
  padding: 16px; min-height: 150px;
  display: flex; flex-direction: column; justify-content: center;
}
.app-detail-leeg { color: #94a3b8; font-size: .9rem; margin: 0; text-align: center; }
.app-detail-naam { font-weight: 800; font-size: 1.05rem; color: var(--kleur-diep); margin-bottom: 6px; }
.app-detail-wat { margin: 0 0 10px; color: #334155; font-size: .95rem; line-height: 1.55; }
.app-detail-vb { background: var(--kleur-licht); border-radius: 10px; padding: 10px 12px; }
.app-detail-label { font-size: .72rem; font-weight: 800; color: var(--kleur-diep); text-transform: uppercase; letter-spacing: .04em; }
.app-detail-vb p { margin: 4px 0 0; font-size: .92rem; color: var(--tekst); }
.app-meer { margin: 6px 0 4px; }
.app-meer summary { cursor: pointer; color: var(--kleur); font-weight: 700; font-size: .95rem; list-style: none; padding: 6px 0; }
.app-meer summary::-webkit-details-marker { display: none; }
.app-meer summary::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform .2s; }
.app-meer[open] summary::before { transform: rotate(90deg); }
.app-meer p { color: #334155; font-size: .92rem; line-height: 1.6; background: #f8fafc; border-radius: 12px; padding: 12px 14px; margin: 6px 0 0; }
@media (max-width: 560px) { .app-keten { grid-template-columns: 1fr; } }

/* "Onthoud" — spraakbubbel van Iggy (afsluiting van elke les) */
.les-onthoud { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; }
.onthoud-avatar {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(37,99,235,.22);
}
.onthoud-bubbel {
  position: relative; flex: 1; background: #fff; border: 2px solid var(--rand);
  border-radius: 16px; padding: 16px 18px;
}
.onthoud-bubbel::before {
  content: ''; position: absolute; left: -9px; top: 18px; width: 16px; height: 16px;
  background: #fff; border-left: 2px solid var(--rand); border-bottom: 2px solid var(--rand);
  transform: rotate(45deg);
}
.onthoud-kop { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.05rem; color: #1e293b; margin-bottom: 12px; }
.onthoud-tag {
  display: inline-block;
  background: var(--kleur-licht); color: var(--kleur-diep);
  font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.onthoud-tekst { font-size: 1rem; line-height: 1.6; color: #1f2937; margin: 12px 0; }
.onthoud-tekst strong { color: #1e293b; }
.onthoud-rij { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.onthoud-rij:last-child { margin-bottom: 0; }
.onthoud-rij > i { color: var(--groen); font-size: 1.15rem; margin-top: 1px; flex-shrink: 0; }
.onthoud-rij span { font-size: .95rem; color: #334155; line-height: 1.5; }
.onthoud-rij strong { color: #1e293b; }
.onthoud-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.onthoud-chip { background: var(--kleur-licht); color: var(--kleur-diep); font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
@media (max-width: 560px) { .onthoud-avatar { width: 42px; height: 42px; } }

/* ---------- 4-staps-lessjabloon ---------- */
.stapbalk { display: flex; gap: 6px; margin-bottom: 6px; }
.stapdeel { flex: 1; height: 8px; border-radius: 999px; background: #e8ecf3; transition: background .3s; }
.stapdeel.actief { background: var(--groen); }
.staptitel { color: var(--grijs); font-size: .85rem; font-weight: 700; margin: 0 0 14px; }
.stap-inhoud { min-height: 210px; animation: infade .25s ease; }
.stap-inhoud p { font-size: .98rem; line-height: 1.6; margin: 0 0 12px; }
.stap-tag {
  display: inline-block; background: var(--kleur-licht); color: var(--kleur-diep);
  font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
.stap-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; align-items: center; }
.stap-hint { color: var(--grijs); font-size: .85rem; font-weight: 600; text-align: right; margin: 14px 0 0; min-height: 1.2em; }
.knop:disabled { cursor: not-allowed; }

/* Uitklaptegels in stap 1 */
.etegel { border: 2px solid var(--rand); border-radius: 14px; margin-bottom: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.etegel:hover { border-color: var(--kleur); }
.etegel.open { border-color: var(--kleur); }
.etegel .ekop { display: flex; align-items: center; gap: 9px; padding: 13px 15px; font-weight: 700; }
.etegel .ekop > i:first-child { color: var(--kleur); font-size: 1.2rem; }
.etegel .ekop > span { flex: 1; }
.etegel .chev { color: #b0b8c9; transition: transform .2s; }
.etegel.open .chev { transform: rotate(180deg); }
.etegel .ebody { display: none; padding: 0 15px 13px; color: #334155; font-size: .92rem; line-height: 1.55; }
.etegel.open .ebody { display: block; }

/* Keuzechips in stap 2 */
.chiprij { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  border: 2px solid var(--rand); border-radius: 999px; padding: 7px 15px;
  font-weight: 700; font-size: .9rem; cursor: pointer; user-select: none; transition: .15s;
}
.chip:hover { border-color: var(--kleur); }
.chip.sel { border-color: var(--kleur); background: var(--kleur-licht); color: var(--kleur-diep); }
.chip.goed { border-color: var(--groen); background: #f0fdf4; color: var(--groen-donker); cursor: default; }
.chip.fout { border-color: var(--rood); background: #fef2f2; color: #b91c1c; cursor: default; }
.fb { margin-top: 10px; padding: 10px 13px; border-radius: 10px; font-weight: 700; font-size: .92rem; }
.fb.goed { background: #dcfce7; color: var(--groen-donker); }
.fb.mis  { background: #fee2e2; color: #b91c1c; }

/* Gespreksvraag in stap 3 — rustig, zonder kader */
.zeg-introkop { color: var(--grijs); font-size: .85rem; font-weight: 600; margin: 4px 0 6px !important; }
.zeg-vraag {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 1.05rem; line-height: 1.55; color: var(--tekst); margin: 0 0 20px !important;
}
.zeg-vraag i { color: #cbd5e1; font-size: 1.3rem; flex-shrink: 0; }
.zeg-uitleg { color: #334155; font-size: .93rem; margin: 0 0 16px !important; }

/* Voorbeelden in stap 3: wat je hoort -> wat het betekent */
.zeg-kop { font-weight: 700; font-size: .93rem; color: #334155; margin: 16px 0 8px !important; }
.zeg-rij {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  border: 2px solid var(--rand); border-radius: 12px; padding: 11px 14px; margin-bottom: 8px;
}
.zeg-antwoord { flex: 1; min-width: 200px; font-size: .93rem; color: var(--tekst); font-style: italic; }
.zeg-antwoord i { color: #b0b8c9; margin-right: 4px; }
.zeg-betekenis {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--kleur-licht); color: var(--kleur-diep);
  font-size: .82rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}

/* Beeldkaarten in stap 3 */
.zeg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.zeg-kaart { background: #fff; border: 2px solid var(--rand); border-radius: 16px; padding: 12px; }
.zeg-beeld { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px; }
.zeg-quote { font-size: .92rem; font-style: italic; color: #334155; margin: 0 0 10px !important; line-height: 1.45; }
.zeg-quote i { color: #b0b8c9; font-style: normal; }
.zeg-label {
  display: inline-block; background: var(--kleur-licht); color: var(--kleur-diep);
  font-size: .8rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}

/* Module-afrondingsscherm (na een gehaalde quiz) */
.medaille {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto;
  background: var(--amber); color: #fff; font-size: 40px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px var(--amber-licht);
}
.stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.stat { background: #f8fafc; border-radius: 12px; padding: 10px 18px; min-width: 96px; }
.stat-nr { font-weight: 800; font-size: 1.3rem; color: var(--kleur); }
.stat-lb { font-size: .78rem; color: var(--grijs); font-weight: 600; }
.ontgrendeld {
  display: flex; align-items: center; gap: 12px; justify-content: center; text-align: left;
  background: #f0fdf4; border: 2px solid var(--groen); border-radius: 14px; padding: 12px 16px;
}
.ontgrendeld > i { font-size: 1.6rem; color: var(--groen-donker); flex-shrink: 0; }
.ontgr-titel { font-weight: 800; }

/* Afrondscherm */
.afrond { text-align: center; padding: 6px 0 10px; }
.afrond-titel { font-weight: 800; font-size: 1.15rem; }
.afrond-knoppen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

/* Stuiter om de volgende stap aan te wijzen: kort en kwiek, daarna rust */
@keyframes zachtstuiter {
  0%   { transform: translateY(0);    }
  12%  { transform: translateY(-8px); }
  24%  { transform: translateY(0);    }
  34%  { transform: translateY(-4px); }
  44%  { transform: translateY(0);    }
  100% { transform: translateY(0);    }   /* rustpauze */
}
.stuiter { animation: zachtstuiter 1.5s cubic-bezier(.3,.7,.4,1) infinite; }
/* Respecteer de voorkeur voor minder beweging */
@media (prefers-reduced-motion: reduce) { .stuiter { animation: none; } }

/* Bevestigingsvenster (bv. quiz verlaten) */
.bevestig-laag {
  position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; animation: infade .2s ease;
}
.bevestig-kaart {
  background: #fff; border-radius: 20px; padding: 26px; max-width: 340px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: levelpop .35s cubic-bezier(.2,1.3,.5,1);
}
.bevestig-icoon { font-size: 2rem; color: var(--amber); }
.bevestig-titel { font-weight: 800; font-size: 1.1rem; margin: 8px 0 4px; }
.bevestig-tekst { color: var(--grijs); font-size: .93rem; margin: 0 0 18px; }
.bevestig-knoppen { display: flex; gap: 10px; justify-content: center; }
.knop.rood { background: #fee2e2; color: #b91c1c; border-bottom-color: #fca5a5; }

/* Klikbare gespreksvragen (les 3) */
.les-vraag {
  background: #fff; border: 2px solid var(--rand); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s;
}
.les-vraag:hover { border-color: var(--kleur); }
.les-vraag.open { border-color: var(--kleur); }
.vraag-rij { display: flex; align-items: center; gap: 12px; }
.vraag-nr { color: var(--kleur); font-weight: 800; font-size: 1.1rem; }
.vraag-tekst { flex: 1; font-weight: 700; }
.vraag-hint { color: #94a3b8; font-size: .82rem; font-weight: 700; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.les-vraag.open .vraag-hint { display: none; }
.vraag-antwoord {
  display: none; color: #334155; font-size: .92rem; line-height: 1.55;
  margin: 10px 0 0; padding: 10px 12px; background: #f8fafc; border-radius: 10px;
}
.les-vraag.open .vraag-antwoord { display: block; }

/* ---------- Zwevende punten ---------- */
.vlieg-punt {
  position: fixed; z-index: 999; pointer-events: none;
  color: var(--amber); font-size: 24px; opacity: 1;
  transition: transform 1.5s cubic-bezier(.45,-.15,.55,1), opacity 1.5s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.punten-pop { animation: puntpop .5s ease; }
@keyframes puntpop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); background: #fde68a; }
  100% { transform: scale(1); }
}

/* ---------- Quiz ---------- */
.quiz-stap { animation: infade .25s ease; }
@keyframes infade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; align-items: center; }

/* Directe feedback per vraag */
.opties.vergrendeld { pointer-events: none; }
.optie.goed { background: #f0fdf4; border-color: var(--groen); }
.optie.goed::after { content: '✓'; float: right; color: var(--groen-donker); font-weight: 800; }
.optie.mis  { background: #fef2f2; border-color: var(--rood); }
.optie.mis::after { content: '✗'; float: right; color: var(--rood); font-weight: 800; }
.feedback {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 14px; border-radius: 12px; font-weight: 700;
}
.feedback.goed { background: #dcfce7; color: var(--groen-donker); }
.feedback.mis  { background: #fee2e2; color: var(--rood); }
.uitleg-box {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--amber-licht); font-size: .95rem;
}
.uitleg-box i { color: var(--amber); }

/* Afbeelding bij een quizvraag */
.vraag-fig { margin: 0 0 16px; }
.vraag-fig img { display: block; width: 100%; max-width: 620px; margin: 0 auto; border-radius: 14px; border: 1px solid var(--rand); }

/* "jouw antwoord"-label op de terugkijkpagina */
.jouw-keuze {
  float: right; font-size: .72rem; font-weight: 800; color: var(--grijs);
  background: #eef2f7; padding: 2px 8px; border-radius: 999px;
}
.optie.goed .jouw-keuze, .optie.mis .jouw-keuze { color: #fff; background: rgba(0,0,0,.18); }

/* ---------- Coach met tekstballon ---------- */
.coach { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 18px; }
.coach-figuur {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #eef4ff 0%, #dbe6fb 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(37,99,235,.18), 0 0 0 1px var(--rand);
  animation: wiebel 3s ease-in-out infinite;
}
@keyframes wiebel { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.tekstballon {
  position: relative; background: #fff; border: 2px solid var(--rand);
  border-radius: 18px; padding: 16px 20px; margin-left: 10px; flex: 1;
}
.tekstballon::before {
  content: ''; position: absolute; left: -12px; top: 30px;
  border: 8px solid transparent; border-right-color: #fff;
  filter: drop-shadow(-2px 0 0 var(--rand));
}
.ballon-naam { font-weight: 800; color: var(--kleur); font-size: .9rem; margin-bottom: 6px; }
.tekstballon p { font-size: 1.05rem; line-height: 1.7; margin: 0 0 10px; }
.tekstballon p:last-child { margin-bottom: 0; }
#coach-tekst { min-height: 1.7em; }

/* Meta-label (tijd + punten) */
.module-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.meta-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--rand); border-radius: 999px;
  padding: 5px 12px; font-size: .82rem; font-weight: 700; color: #334155;
}
.meta-chip i { color: var(--kleur); }
.meta-chip.goud { background: var(--amber-licht); border-color: transparent; color: #92600a; }
.meta-chip.goud i { color: #92600a; }

/* Leeruitkomsten (vinkjes in de coach-ballon) */
.coach-uitkomsten { border-top: 1px solid #eef1f6; margin-top: 12px; padding-top: 12px; }
.uitkomsten-kop { font-weight: 700; font-size: .9rem; color: #334155; margin-bottom: 8px; }
.uitkomst-rij { display: flex; align-items: center; gap: 8px; font-size: .98rem; margin: 5px 0; }
.uitkomst-rij i { color: var(--groen); font-size: 1.2rem; }

/* ---------- Video ---------- */
.video-wrap { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: var(--kleur-licht); border: 2px dashed #bcd0f5;
  border-radius: 14px; padding: 44px 16px; color: var(--grijs); text-align: center;
}
.video-placeholder i { font-size: 2.4rem; color: var(--kleur); }

/* ---------- Tabellen ---------- */
.tabel { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; }
.tabel th, .tabel td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--rand); }
.tabel th { background: var(--licht); font-weight: 700; }
.tabel form { display: inline; }

/* ---------- Level-up viering ---------- */
.levelup-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center;
  animation: infade .3s ease;
}
.levelup-kaart {
  position: relative; overflow: hidden; text-align: center;
  background: #fff; border-radius: 24px; padding: 34px 40px; max-width: 340px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: levelpop .45s cubic-bezier(.2,1.3,.5,1);
}
@keyframes levelpop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.levelup-kaart canvas { position: absolute; inset: 0; pointer-events: none; }
.levelup-badge {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--amber); color: #fff; font-size: 44px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px var(--amber-licht);
}
.levelup-titel { font-weight: 800; font-size: 1.5rem; color: var(--kleur); }
.levelup-level { font-weight: 800; font-size: 2.4rem; margin: 4px 0; }
.levelup-naam {
  display: inline-block; background: var(--kleur-licht); color: var(--kleur-diep);
  padding: 5px 16px; border-radius: 999px; font-weight: 700; margin-bottom: 18px;
}

.terug {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 12px; color: var(--grijs); text-decoration: none; font-weight: 600;
}
.terug:hover { color: var(--kleur); }
.voet { text-align: center; color: var(--grijs); padding: 26px; font-size: .9rem; }

/* ---------- Zoeken ---------- */
.zoekbalk { position: relative; }
.zoekbalk input {
  padding: 9px 14px; border: 2px solid var(--rand); border-radius: 999px;
  font-size: .9rem; width: 180px; background: var(--licht); font-family: inherit;
}
.zoekbalk input:focus { outline: none; border-color: var(--kleur); width: 220px; transition: width .2s; }
.zoek-dropdown {
  position: absolute; top: 115%; left: 0; z-index: 50;
  width: 340px; max-height: 420px; overflow-y: auto;
  background: #fff; border: 2px solid var(--rand); border-radius: 16px;
  box-shadow: 0 10px 28px rgba(30,40,80,.14); padding: 10px;
}
.zoek-dropdown .kaart { padding: 10px 12px; margin-bottom: 8px; border-width: 1px; border-radius: 12px; }
.zoek-dropdown .term { margin: 0 0 4px; }
.zoek-dropdown p { font-size: .9rem; margin: 0 0 4px; }
.zoekveld-groot {
  width: 100%; padding: 15px 20px; font-size: 1.1rem; font-family: inherit;
  border: 2px solid var(--kleur); border-radius: 16px; background: #fff;
}
.zoekveld-groot:focus { outline: none; }
.zoek-resultaat .term { font-weight: 800; font-size: 1.05rem; margin: 0 0 6px; }
mark { background: var(--amber-licht); border-radius: 4px; padding: 0 2px; }

/* ============================================================
   BEHEERPAGINA GEBRUIKERS
   ============================================================ */
.beheer-kop { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.beheer-kop h1 { margin: 0; }

.beheer-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 16px; }
.beheer-filter input[type="search"] { flex: 1 1 220px; min-width: 180px; margin: 0; }
.beheer-filter select { width: auto; min-width: 160px; margin: 0; }
.beheer-filter button { margin: 0; }

.gebruikerslijst td { vertical-align: top; }
.gebruikerslijst .sub { font-size: .8rem; color: var(--grijs); margin-top: 3px; }
.gebruikerslijst tr.rij-open > td { background: var(--kleur-licht); }

.statuslabel { display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap; }
.st-actief      { background: #f0fdf4; color: var(--groen-donker); }
.st-uitgenodigd { background: var(--amber-licht); color: #92400e; }
.st-geblokkeerd { background: #fef2f2; color: #b91c1c; }
.st-inactief    { background: #f1f5f9; color: #64748b; }

.chip.mini { padding: 2px 8px; font-size: .72rem; vertical-align: middle; }

.mini-balk { width: 110px; height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.mini-balk span { display: block; height: 6px; background: var(--kleur); }

.detailrij > td { background: var(--licht); padding: 0 !important; }
.detailpaneel { padding: 18px 16px 6px; }
.detailpaneel h3 { margin: 0 0 4px; }
.detailpaneel h3 .sub { font-size: .82rem; font-weight: 500; color: var(--grijs); margin-left: 8px; }
.detailpaneel h4 { margin: 0 0 8px; font-size: .95rem; }
.detail-blok { background: #fff; border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px; }
.detail-blok.gevaar { border-color: #fecaca; }
.detail-blok .hint { margin: 8px 0 0; }

.rij-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.rij-form label { display: block; margin: 0; font-size: .82rem; flex: 1 1 180px; }
.rij-form input { margin: 4px 0 0; }
.rij-form button { margin: 0; }

.actieknoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actieknoppen form { display: flex; gap: 6px; align-items: center; margin: 0; }
.actieknoppen input[type="date"] { margin: 0; width: auto; }

@media (max-width: 720px) {
  .gebruikerslijst th:nth-child(4), .gebruikerslijst td:nth-child(4) { display: none; }
}

/* Lessen en quizzen per module in het detailpaneel */
.modulerij { border-top: 1px solid var(--rand); padding: 10px 0 4px; }
.modulerij:first-of-type { border-top: 0; padding-top: 0; }
.modulerij-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modulerij-kop .sub { flex: 1; font-size: .8rem; color: var(--grijs); margin: 0; }
.modulerij-kop form { margin: 0; }

.leslijst { list-style: none; margin: 6px 0 0; padding: 0; }
.leslijst li { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 4px; }
.leslijst form { margin: 0; }
.lestitel { flex: 1; font-size: .86rem; }
.lesstatus { font-size: 1rem; line-height: 1; }
.lesstatus.af    { color: var(--groen); }
.lesstatus.bezig { color: var(--amber); }
.lesstatus.open  { color: #cbd5e1; }

.knop.mini { padding: 3px 8px; font-size: .78rem; border-bottom-width: 2px; }