/* Knowledge Vault -- designsysteem (redesign fase 1, 2026-10-02).

   Eén bron voor tokens en componenten. Alle waarden komen letterlijk uit
   studie-referentie.dc.html. Lettertypes zelf gehost via fonts.css (nooit
   Google Fonts, zie test_privacy_followups).

   Bewust GEEN algemene element-regels (a, button, h1 ...) buiten de shell
   en buiten .kv-page: de pagina's die nog niet herontworpen zijn laden hun
   eigen CSS en mogen daar niets van merken. */
@import url("fonts.0573d0ca5607.css");

:root {
  /* Font */
  --kv-font: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  --kv-mono: 'Geist Mono', ui-monospace, monospace;

  /* Achtergronden */
  --kv-bg: #F4F5F7;
  --kv-surface: #FFFFFF;
  --kv-subtle: #F9FAFB;
  --kv-muted: #F2F4F7;
  --kv-raised: #FAFAFB;

  /* Randen */
  --kv-border: #E4E7EC;
  --kv-border-strong: #D0D5DD;
  --kv-border-dashed: #C4C9D4;
  --kv-border-hover: #C7CCF5;

  /* Tekst */
  --kv-text: #101828;
  --kv-text-2: #344054;
  --kv-text-3: #475467;
  --kv-text-4: #667085;
  --kv-text-disabled: #98A2B3;

  /* Accent */
  --kv-accent: #2E3FD1;
  --kv-accent-hover: #2433B8;
  --kv-accent-soft: #EEF0FD;
  --kv-link-hover: #1F2DA3;
  --kv-accent-mid: #7C8BF0;    /* verdelingsbalk, tweede tint */
  --kv-accent-light: #C7CCF5;  /* verdelingsbalk, derde tint */
  --kv-choice-bg: #F5F6FE;     /* geselecteerde keuzekaart */

  /* Gevaar */
  --kv-danger: #D92D20;
  --kv-danger-text: #B42318;
  --kv-danger-soft: #FEF3F2;
  --kv-danger-line: #FECDCA;   /* rand van een rode tekstknop */

  /* Waarschuwing / bezig (statusbadge "in wachtrij") */
  --kv-warn-text: #B54708;
  --kv-warn-soft: #FFFAEB;
  --kv-warn-line: #FEDF89;

  /* Succes (voor toasts en verbeterde antwoorden in latere fases) */
  --kv-success: #067647;
  --kv-success-soft: #ECFDF3;

  /* Vakkleuren: tegel-achtergrond / tegel-tekst / zijbalk-dot */
  --kv-c1-bg: #E8EEFD; --kv-c1-fg: #2741B8; --kv-c1-dot: #2E3FD1;
  --kv-c2-bg: #FDEFE3; --kv-c2-fg: #9A4A12; --kv-c2-dot: #E07A2F;
  --kv-c3-bg: #E1F4F1; --kv-c3-fg: #146B5E; --kv-c3-dot: #1F9A86;
  --kv-c4-bg: #F1EAFD; --kv-c4-fg: #5F33AE; --kv-c4-dot: #8A5CE0;

  /* Radius */
  --kv-r-sm: 6px;
  --kv-r: 8px;
  --kv-r-md: 10px;
  --kv-r-bar: 12px;
  --kv-r-lg: 14px;
  --kv-r-xl: 16px;

  /* Schaduwen */
  --kv-shadow-xs: 0 1px 2px rgba(16,24,40,.04);
  --kv-shadow-tab: 0 1px 3px rgba(16,24,40,.1);
  --kv-shadow-card-hover: 0 6px 20px rgba(16,24,40,.07);
  --kv-shadow-tile-hover: 0 4px 14px rgba(16,24,40,.06);
  --kv-shadow-menu: 0 12px 28px rgba(16,24,40,.12);
  --kv-shadow-bar: 0 16px 36px rgba(16,24,40,.25);
  --kv-shadow-dialog: 0 24px 60px rgba(16,24,40,.25);
  --kv-overlay: rgba(16,24,40,.45);
}

/* ---------------------------------------------------------------
   Basis
   --------------------------------------------------------------- */
body.kv-app {
  margin: 0;
  padding: 0;
}

.kv-shell,
.kv-shell *,
.kv-shell *::before,
.kv-shell *::after,
.kv-dialog,
.kv-dialog *,
.kv-selectbar,
.kv-selectbar *,
.kv-toasts,
.kv-toasts * {
  box-sizing: border-box;
}

/* Een designsysteem-element met het hidden-attribuut is altijd weg, ook
   als zijn klasse een display zet (.kv-field is flex). */
[class*="kv-"][hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Zichtbare focus overal waar het designsysteem komt. */
.kv-side :focus-visible,
.kv-top :focus-visible,
.kv-page :focus-visible,
.kv-dialog :focus-visible,
.kv-selectbar :focus-visible {
  outline: 2px solid var(--kv-accent);
  outline-offset: 2px;
}

/* De herontworpen inhoud (enkel pagina's met body.kv-page-designed). */
.kv-page {
  font-family: var(--kv-font);
  color: var(--kv-text);
  font-size: 14px;
  line-height: normal;
}
/* Kale links in de inhoud; links die een component zijn (knop, tegel,
   menu-item) houden hun eigen kleur -- vandaar :not(). */
.kv-page a:not([class*="kv-"]) { color: var(--kv-accent); }
.kv-page a:not([class*="kv-"]):hover { color: var(--kv-link-hover); }
.kv-page button,
.kv-page input,
.kv-page select,
.kv-page textarea { font-family: inherit; }
.kv-page button { cursor: pointer; }
.kv-page button:disabled,
.kv-page select:disabled,
.kv-page input:disabled { cursor: not-allowed; }

body.kv-page-designed {
  background: var(--kv-bg);
  /* Ook onderdelen buiten de shell (laadscherm, dialogen, meldingen)
     staan zo in Geist i.p.v. het standaardlettertype van de browser. */
  font-family: var(--kv-font);
  color: var(--kv-text);
  /* Gedeelde onderdelen van voor de redesign (AI-laadscherm, hulpmelding,
     groepschat-overzicht) lezen de --vault-*-variabelen van de pagina. Op
     een herontworpen pagina wijzen die naar het nieuwe palet. */
  --vault-bg: var(--kv-surface);
  --vault-panel: var(--kv-surface);
  --vault-border: var(--kv-border);
  --vault-border-strong: var(--kv-border-strong);
  --vault-text: var(--kv-text);
  --vault-muted: var(--kv-text-4);
  --vault-gold: var(--kv-accent);
  --vault-gold-strong: var(--kv-accent-hover);
  --vault-danger: var(--kv-border);
  --vault-danger-strong: var(--kv-danger);
  --vault-shadow: var(--kv-shadow-menu);
  --vault-font-heading: var(--kv-font);
  --vault-font-body: var(--kv-font);
}
/* Het AI-laadscherm (partials/_ai_loading.html) op een herontworpen pagina. */
body.kv-page-designed .ai-loading { background: var(--kv-overlay); z-index: 1100; }
body.kv-page-designed .ai-loading__card { border-radius: var(--kv-r-xl); box-shadow: var(--kv-shadow-dialog); border-color: var(--kv-border); }
body.kv-page-designed .ai-loading__orb { background: var(--kv-accent-soft); }

/* ---------------------------------------------------------------
   App-shell
   --------------------------------------------------------------- */
.kv-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  /* Geen eigen achtergrond, kleur of lettertype: een nog niet herontworpen
     pagina erft zo die van haar eigen body. Zijbalk, topbalk en .kv-page
     zetten ze zelf. */
  background: transparent;
}

/* Zijbalk */
.kv-side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  /* Laag 20: onder elk bestaand paneel en elke dialoog van de oude pagina's
     (die beginnen bij 37), boven hun inhoud. */
  z-index: 20;
  background: var(--kv-surface);
  border-right: 1px solid var(--kv-border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 24px;
  font-family: var(--kv-font);
  color: var(--kv-text);
  line-height: normal;
}

.kv-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  color: var(--kv-text);
  text-decoration: none;
}
.kv-brand:hover { color: var(--kv-text); }
.kv-brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--kv-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kv-brand__text { display: flex; flex-direction: column; }
.kv-brand__name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.kv-brand__by {
  font-size: 12px;
  color: var(--kv-text-4);
}

.kv-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.kv-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--kv-r);
  border: 0;
  background: transparent;
  color: var(--kv-text-2);
  font-family: var(--kv-font);
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  text-decoration: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.kv-nav:hover {
  background: var(--kv-muted);
  color: var(--kv-text-2);
}
.kv-nav svg { flex-shrink: 0; }
.kv-nav.is-active,
.kv-nav.is-active:hover {
  background: var(--kv-accent-soft);
  color: var(--kv-accent);
  font-weight: 600;
}

.kv-side-courses {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kv-side-courses__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kv-text-4);
  padding: 0 10px 6px;
}
.kv-nav--course {
  padding: 7px 10px;
  font-size: 13.5px;
  font-weight: 400;
  min-width: 0;
}
.kv-nav--course.is-active,
.kv-nav--course.is-active:hover {
  font-weight: 600;
}
.kv-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--kv-c1-dot);
}
.kv-dot--c1 { background: var(--kv-c1-dot); }
.kv-dot--c2 { background: var(--kv-c2-dot); }
.kv-dot--c3 { background: var(--kv-c3-dot); }
.kv-dot--c4 { background: var(--kv-c4-dot); }
.kv-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.kv-side__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kv-side__foot form { margin: 0; }

.kv-founder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--kv-r-md);
  border: 1px solid var(--kv-border);
  background: var(--kv-raised);
  color: var(--kv-text);
  text-decoration: none;
}
.kv-founder:hover {
  color: var(--kv-text);
  background: var(--kv-muted);
}
.kv-founder svg { flex-shrink: 0; }
.kv-founder__text { display: flex; flex-direction: column; }
.kv-founder__title { font-size: 13.5px; font-weight: 600; }
.kv-founder__sub { font-size: 12px; color: var(--kv-text-4); }

/* Hoofdkolom */
.kv-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Topbalk */
.kv-top {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  background: var(--kv-surface);
  border-bottom: 1px solid var(--kv-border);
  font-family: var(--kv-font);
  color: var(--kv-text);
  line-height: normal;
}
.kv-top__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kv-back {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--kv-r);
  border: 1px solid var(--kv-border);
  background: var(--kv-surface);
  color: var(--kv-text-2);
  font-family: var(--kv-font);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
}
.kv-back:hover {
  background: var(--kv-muted);
  color: var(--kv-text-2);
}

.kv-search {
  flex-grow: 1;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--kv-r);
  border: 1px solid var(--kv-border);
  background: var(--kv-subtle);
}
.kv-search[hidden] { display: none; }
.kv-search input {
  flex-grow: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--kv-font);
  font-size: 14px;
  color: var(--kv-text);
  outline: none;
}
.kv-kbd {
  font-family: var(--kv-mono);
  font-size: 11px;
  color: var(--kv-text-4);
  border: 1px solid var(--kv-border);
  border-radius: 5px;
  padding: 2px 6px;
  background: var(--kv-surface);
  white-space: nowrap;
}

.kv-iconbtn {
  width: 40px;
  height: 40px;
  border-radius: var(--kv-r);
  border: 1px solid var(--kv-border);
  background: var(--kv-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kv-text-2);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.kv-iconbtn:hover { background: var(--kv-muted); }

.kv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--kv-text);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  text-transform: uppercase;
}

.kv-hamburger { display: none; }
.kv-side-overlay { display: none; }

/* Afgeschermd tegen de oude pagina's: die zetten met een paginaklasse
   kleur en lettertype op ELKE knop of link (bv. .flashcards-page button,
   0-1-1), wat van een gewone klasse wint. Met de id van de shell erbij
   blijven zijbalk en topbalk altijd zichzelf. */
#kv-shell .kv-side,
#kv-shell .kv-top,
#kv-shell .kv-side button,
#kv-shell .kv-side a,
#kv-shell .kv-top button,
#kv-shell .kv-top a,
#kv-shell .kv-top input {
  font-family: var(--kv-font);
  letter-spacing: normal;
  text-transform: none;
}
#kv-shell .kv-brand,
#kv-shell .kv-founder { color: var(--kv-text); }
#kv-shell .kv-nav,
#kv-shell .kv-back,
#kv-shell .kv-iconbtn { color: var(--kv-text-2); }
#kv-shell .kv-nav.is-active { color: var(--kv-accent); }
#kv-shell .kv-search input { color: var(--kv-text); }
#kv-shell .kv-avatar { color: #FFFFFF; }

/* Het Studie-scherm: de referentie toont daar een zoekveld van 40px + 2px
   rand, dus is de topbalk 71px. Het veld is verborgen tot er een
   zoekfunctie is; de hoogte blijft. Andere schermen (fase 2) hebben in hun
   referentie geen zoekveld: 69px. */
body.kv-topbar-search .kv-top { min-height: 71px; }

/* Inhoud */
.kv-content {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 32px 120px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
}

/* De schermen van fase 2 (kisten, flashcards, examen, quiz, ...): minder
   ruimte onderaan en tussen de blokken dan het Studie-scherm. */
.kv-content--screen {
  padding-bottom: 96px;
  gap: 24px;
}

/* Pagina's die nog niet herontworpen zijn: hun eigen opmaak, volle
   breedte van de kolom, geen extra padding. */
.kv-legacy {
  position: relative;
  min-width: 0;
  flex-grow: 1;
}

/* ---------------------------------------------------------------
   Typografie
   --------------------------------------------------------------- */
.kv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.kv-head__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kv-head__text--screen { gap: 8px; }
.kv-subtitle--narrow { max-width: 640px; }
.kv-head__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kv-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kv-accent);
}
.kv-h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--kv-text);
}
.kv-subtitle {
  margin: 0;
  font-size: 15px;
  color: var(--kv-text-3);
}
.kv-h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--kv-text);
}
.kv-h3 {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--kv-text);
  overflow-wrap: anywhere;
}
.kv-meta { font-size: 13px; color: var(--kv-text-4); }
.kv-hint { font-size: 12.5px; color: var(--kv-text-4); }
.kv-count {
  font-family: var(--kv-mono);
  font-size: 12px;
  color: var(--kv-text-4);
}

/* ---------------------------------------------------------------
   Knoppen
   --------------------------------------------------------------- */
.kv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--kv-r-md);
  border: 1px solid var(--kv-border-strong);
  background: var(--kv-surface);
  color: var(--kv-text);
  font-family: var(--kv-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.kv-btn:hover { background: var(--kv-muted); color: var(--kv-text); }
.kv-page a.kv-btn:hover { color: var(--kv-text); }

.kv-btn--sm {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--kv-r);
  border-color: var(--kv-border);
  color: var(--kv-text-2);
  font-size: 13px;
  font-weight: 500;
}
.kv-btn--sm:hover,
.kv-page a.kv-btn--sm:hover { color: var(--kv-text-2); }

.kv-btn--primary {
  background: var(--kv-accent);
  color: #FFFFFF;
  border: 0;
  font-weight: 600;
}
.kv-btn--primary:not(:disabled):hover,
.kv-page a.kv-btn--primary:hover {
  background: var(--kv-accent-hover);
  color: #FFFFFF;
}
.kv-btn--primary:disabled {
  background: #E4E7EC;
  color: var(--kv-text-4);
  cursor: not-allowed;
}

.kv-btn--soft {
  background: var(--kv-accent-soft);
  color: var(--kv-accent-hover);
  border: 0;
}
.kv-btn--soft:hover,
.kv-page a.kv-btn--soft:hover {
  background: #E2E6FC;
  color: var(--kv-accent-hover);
}

.kv-btn--danger {
  background: var(--kv-danger);
  color: #FFFFFF;
  border: 0;
}
.kv-btn--danger:hover { background: var(--kv-danger-text); color: #FFFFFF; }

.kv-btn--ghost {
  background: transparent;
  border: 0;
  color: var(--kv-text-4);
}
.kv-btn--ghost:hover { background: var(--kv-muted); }

/* ---------------------------------------------------------------
   Formulieren
   --------------------------------------------------------------- */
.kv-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kv-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kv-text-2);
}
.kv-label--strong { font-weight: 600; }
.kv-label.is-disabled { color: var(--kv-text-4); }

/* De referentie zet 48px op het AI-vraagveld, een <input type=text> zonder
   box-sizing: de rand komt erbij, 50px in beeld. Zoekvelden en <select>
   zijn in browsers al border-box en blijven 44px. Wij rekenen border-box en schrijven daarom de
   maat die je ziet. */
.kv-input,
.kv-select {
  height: 44px;
  padding: 0 12px;
  border-radius: var(--kv-r);
  border: 1px solid var(--kv-border-strong);
  background: var(--kv-surface);
  color: var(--kv-text);
  font-family: var(--kv-font);
  font-size: 14px;
  outline: none;
  width: 100%;
  min-width: 0;
}
/* Alleen in dialogen: de Studie-referentie zet daar 44px op een tekstveld
   zonder box-sizing (dus 46px in beeld). De fase-2-referenties gebruiken
   border-box en blijven op 44px. */
.kv-dialog .kv-input[type="text"] { height: 46px; }
.kv-select { border-radius: var(--kv-r-md); }
.kv-input:focus,
.kv-select:focus { border-color: var(--kv-accent); }
.kv-input:disabled,
.kv-select:disabled {
  background: var(--kv-muted);
  cursor: not-allowed;
}
.kv-input.kv-input--lg {
  height: 50px;
  padding: 0 14px;
  border-radius: var(--kv-r-md);
  font-size: 15px;
}

/* Twee keuzevelden naast elkaar (vak / document); onder 700px gestapeld. */
.kv-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kv-step {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--kv-text);
  color: #FFFFFF;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kv-step.is-disabled { background: var(--kv-text-disabled); }

.kv-checkbox {
  width: 20px;
  height: 20px;
  margin: 10px 4px 0 0;
  accent-color: var(--kv-accent);
  cursor: pointer;
}

/* ---------------------------------------------------------------
   Panelen, tegels, kaarten
   --------------------------------------------------------------- */
.kv-panel {
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--kv-shadow-xs);
}
.kv-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kv-panel__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--kv-r);
  background: var(--kv-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kv-panel__title { font-size: 15px; font-weight: 600; }
.kv-panel__sub { font-size: 13px; color: var(--kv-text-4); }

.kv-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.kv-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: var(--kv-r-lg);
  border: 1px solid var(--kv-border);
  background: var(--kv-surface);
  text-align: left;
  color: var(--kv-text);
  text-decoration: none;
  font-family: var(--kv-font);
  cursor: pointer;
}
.kv-tile:hover {
  border-color: var(--kv-border-hover);
  box-shadow: var(--kv-shadow-tile-hover);
  color: var(--kv-text);
}
.kv-tile__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--kv-r-md);
  background: var(--kv-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kv-tile__text { display: flex; flex-direction: column; gap: 2px; }
.kv-tile__title { font-size: 15px; font-weight: 600; }
.kv-tile__sub { font-size: 13px; color: var(--kv-text-4); }

.kv-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kv-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kv-section__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.kv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--kv-r-lg);
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  min-height: 196px;
}
.kv-card:hover { box-shadow: var(--kv-shadow-card-hover); }
.kv-card.is-selected { border: 1.5px solid var(--kv-accent); }
.kv-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.kv-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.kv-card__actions {
  display: flex;
  gap: 8px;
}
.kv-card__actions > .kv-cardbtn { flex-grow: 1; }

/* Knoppen onderaan een vakkaart: 40px, radius 8px, 13.5px/600. */
.kv-cardbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border-radius: var(--kv-r);
  border: 1px solid var(--kv-border-strong);
  background: var(--kv-surface);
  color: var(--kv-text);
  font-family: var(--kv-font);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
.kv-page a.kv-cardbtn:hover,
.kv-cardbtn:hover { background: var(--kv-muted); color: var(--kv-text); }
.kv-cardbtn--soft {
  border: 0;
  background: var(--kv-accent-soft);
  color: var(--kv-accent-hover);
}
.kv-page a.kv-cardbtn--soft:hover,
.kv-cardbtn--soft:hover { background: #E2E6FC; color: var(--kv-accent-hover); }

.kv-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--kv-accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.kv-initials {
  width: 40px;
  height: 40px;
  border-radius: var(--kv-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.kv-c1 { background: var(--kv-c1-bg); color: var(--kv-c1-fg); }
.kv-c2 { background: var(--kv-c2-bg); color: var(--kv-c2-fg); }
.kv-c3 { background: var(--kv-c3-bg); color: var(--kv-c3-fg); }
.kv-c4 { background: var(--kv-c4-bg); color: var(--kv-c4-fg); }

.kv-kebab {
  width: 36px;
  height: 36px;
  border-radius: var(--kv-r);
  border: 0;
  background: transparent;
  color: var(--kv-text-4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.kv-kebab:hover { background: var(--kv-muted); }

.kv-add-card {
  min-height: 196px;
  border-radius: var(--kv-r-lg);
  border: 1.5px dashed var(--kv-border-dashed);
  background: transparent;
  color: var(--kv-text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--kv-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.kv-add-card:hover { border-color: var(--kv-text-disabled); }
.kv-add-card__plus {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv-empty-note {
  margin: 0;
  font-size: 14px;
  color: var(--kv-text-3);
}

/* ---------------------------------------------------------------
   Kruimelpad (fase 2)
   --------------------------------------------------------------- */
.kv-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}
.kv-crumbs a,
.kv-page .kv-crumbs a {
  color: var(--kv-text-3);
  text-decoration: none;
}
.kv-crumbs a:hover,
.kv-page .kv-crumbs a:hover { color: var(--kv-text); text-decoration: underline; }
.kv-crumbs__sep {
  color: var(--kv-text-disabled);
  display: inline-flex;
}
.kv-crumbs__current {
  color: var(--kv-text);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Lege toestand: wit paneel met een grijze icooncirkel
   --------------------------------------------------------------- */
.kv-panel--empty { padding: 8px; gap: 18px; }
.kv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 56px 24px;
}
.kv-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--kv-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kv-text-3);
}
.kv-empty__title {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--kv-text);
}
.kv-empty__text {
  margin: 0;
  font-size: 14px;
  color: var(--kv-text-3);
  max-width: 440px;
  line-height: 1.5;
}
.kv-empty__action { margin-top: 8px; }

/* ---------------------------------------------------------------
   Groepskop boven een raster (bv. sets per vak)
   --------------------------------------------------------------- */
.kv-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kv-group__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Kaart zonder vaste minimumhoogte (sets, vakkeuze): de knop onderaan
   staat in elke rij op dezelfde hoogte doordat het lichaam meegroeit. */
.kv-card--auto { min-height: 0; }
.kv-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.kv-card__head .kv-kebab { margin: -6px -8px 0 0; flex-shrink: 0; }
.kv-card__head .kv-card__body { min-width: 0; }
.kv-card > .kv-menu--head { top: 50px; right: 14px; }
.kv-btn--block { width: 100%; }
/* Een gemarkeerde set ("moeilijke kaarten"): zachte accentrand. */
.kv-card--marked { border-color: var(--kv-border-hover); }
.kv-card .kv-btn--soft { height: 40px; border-radius: var(--kv-r); font-size: 13.5px; }

/* ---------------------------------------------------------------
   Formulierschermen (fase 2): hoofdpaneel + zijpaneel van 340px
   --------------------------------------------------------------- */
/* Een formulier dat de hele inhoud omvat (ook de knoppen in de kop)
   zonder zelf een vak in de indeling te zijn. */
.kv-contents { display: contents; }

.kv-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}
.kv-g2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.kv-panel--form { padding: 24px; gap: 18px; }
.kv-panel--side {
  padding: 20px;
  gap: 18px;
  position: sticky;
  top: 24px;
}
.kv-panel__h {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--kv-text);
}
.kv-field--tight { gap: 6px; }

.kv-textarea {
  height: 380px;
  padding: 12px;
  border-radius: var(--kv-r);
  border: 1px solid var(--kv-border-strong);
  background: var(--kv-surface);
  color: var(--kv-text);
  font-family: var(--kv-font);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  width: 100%;
}
.kv-textarea:focus { border-color: var(--kv-accent); }

/* Keuzekaart (radio met titel en uitleg). Geselecteerd via :has(), dus
   zonder JavaScript. */
.kv-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kv-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  min-height: 48px;
  border-radius: var(--kv-r-md);
  border: 1px solid var(--kv-border);
  background: var(--kv-surface);
  cursor: pointer;
}
.kv-choice:has(input:checked) {
  border: 1.5px solid var(--kv-accent);
  background: var(--kv-choice-bg);
}
.kv-choice input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--kv-accent);
  flex-shrink: 0;
}
.kv-choice__text { display: flex; flex-direction: column; gap: 2px; }
.kv-choice__title { font-size: 14px; font-weight: 600; color: var(--kv-text); }
.kv-choice__sub { font-size: 12.5px; color: var(--kv-text-4); font-weight: 400; }

/* Segmenten met echte (verborgen) radio's erin. Lopen door naar een
   tweede rij als ze niet passen: in de referentie (FlashcardsNieuw) staken
   vier segmenten 37px buiten hun paneel van 340px. */
.kv-seg {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border-radius: var(--kv-r-md);
  background: var(--kv-muted);
}
.kv-seg__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--kv-r);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--kv-text-3);
  white-space: nowrap;
  flex: 1 0 auto;
}
.kv-seg__opt:has(input:checked) {
  background: var(--kv-surface);
  color: var(--kv-text);
  box-shadow: var(--kv-shadow-tab);
}
.kv-seg__opt:has(input:focus-visible) {
  outline: 2px solid var(--kv-accent);
  outline-offset: 2px;
}
/* Zichtbaar maar uitgeschakeld (bv. scheidingsteken bij twee kolommen). */
.kv-field.is-inactive {
  opacity: .5;
  pointer-events: none;
}

.kv-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--kv-text-4);
  padding-top: 14px;
  border-top: 1px solid var(--kv-border);
}

/* ---------------------------------------------------------------
   Genummerde secties (examen): elk een eigen paneel
   --------------------------------------------------------------- */
.kv-two--320 { grid-template-columns: minmax(0, 1fr) 320px; }
.kv-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kv-sec-head { display: flex; flex-direction: column; gap: 4px; }
.kv-sec-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--kv-text);
}
.kv-sec-num {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--kv-text);
  color: #FFFFFF;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kv-sec-desc { margin: 0; font-size: 13.5px; color: var(--kv-text-4); }

.kv-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kv-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kv-gap-10 { gap: 10px; }

.kv-choice__icon { color: var(--kv-text-3); flex-shrink: 0; margin-top: 1px; }
.kv-choice__title { overflow-wrap: anywhere; }

.kv-input.kv-input--mono { font-family: var(--kv-mono); }
.kv-input.is-inactive,
.kv-input.is-inactive:focus {
  background: var(--kv-muted);
  color: var(--kv-text-4);
  border-color: var(--kv-border-strong);
}
.kv-label.is-inactive { color: var(--kv-text-4); }

/* Gestippeld blok (bv. geen documenten) met een actie rechts. */
.kv-dropzone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
  border-radius: var(--kv-r-md);
  border: 1.5px dashed var(--kv-border-strong);
  background: var(--kv-raised);
}
.kv-dropzone__text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--kv-text-3);
}
.kv-btn--md {
  height: 40px;
  padding: 0 12px;
  border-radius: var(--kv-r);
}
.kv-btn--lg { height: 48px; }

/* Pil (badge) met icoon: totaal, geslaagd, ... */
.kv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.kv-pill--ok { background: var(--kv-success-soft); color: var(--kv-success); }
.kv-pill--bad { background: var(--kv-danger-soft); color: var(--kv-danger-text); }
.kv-pill--info { background: var(--kv-accent-soft); color: var(--kv-accent-hover); }
.kv-pill [data-icon-bad] { display: none; }
.kv-pill--bad [data-icon-ok] { display: none; }
.kv-pill--bad [data-icon-bad] { display: inline; }
.kv-row-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Subvak met een veld en uitleg (cesuur). */
.kv-subpanel {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 14px;
  border-radius: var(--kv-r-md);
  background: var(--kv-subtle);
  border: 1px solid var(--kv-border);
  flex-wrap: wrap;
}
.kv-subpanel .kv-field { width: 180px; gap: 6px; }
.kv-subpanel__hint { font-size: 12.5px; color: var(--kv-text-4); padding-bottom: 12px; }

/* Vraag met Ja/Nee-segmenten. */
.kv-qrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--kv-r-md);
  border: 1px solid var(--kv-border);
}
.kv-qrow__text { font-size: 14px; font-weight: 500; color: var(--kv-text); max-width: 520px; }
.kv-qrow .kv-seg { flex-wrap: nowrap; }

/* Overzicht (zijpaneel). */
.kv-summary { display: flex; flex-direction: column; gap: 10px; }
.kv-summary--split { padding-top: 14px; border-top: 1px solid var(--kv-border); }
.kv-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}
.kv-summary__label { color: var(--kv-text-4); flex-shrink: 0; }
.kv-summary__value { font-weight: 600; color: var(--kv-text); text-align: right; overflow-wrap: anywhere; }
.kv-summary__value.is-empty { color: var(--kv-text-disabled); }
.kv-dist { display: flex; flex-direction: column; gap: 8px; }
.kv-dist__label { font-size: 13.5px; color: var(--kv-text-4); }
.kv-dist__bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
}
.kv-dist__bar > span { display: block; transition: width .2s ease; }
.kv-dist__bar > span:nth-child(1) { background: var(--kv-accent); }
.kv-dist__bar > span:nth-child(2) { background: var(--kv-accent-mid); }
.kv-dist__bar > span:nth-child(3) { background: var(--kv-accent-light); }
.kv-dist__legend {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  color: var(--kv-text-3);
}
.kv-center-hint { font-size: 12.5px; color: var(--kv-text-4); text-align: center; }

/* Informatieve melding met een actie (bv. "je examen wordt gemaakt"). */
.kv-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--kv-r-md);
  border: 1px solid var(--kv-accent-light);
  background: var(--kv-accent-soft);
  color: var(--kv-text);
  font-size: 14px;
}
.kv-callout p { margin: 0; }
.kv-callout--bad { border-color: #FDA29B; background: var(--kv-danger-soft); color: var(--kv-danger-text); }

/* ---------------------------------------------------------------
   Wachten (spinner, voortgang) en het examen zelf
   --------------------------------------------------------------- */
.kv-empty__icon--bad { background: var(--kv-danger-soft); color: var(--kv-danger-text); }
.kv-spinner {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2.5px solid var(--kv-accent-light);
  border-top-color: var(--kv-accent);
  animation: kv-spin .9s linear infinite;
}
@keyframes kv-spin { to { transform: rotate(360deg); } }
.kv-progress {
  width: min(320px, 100%);
  height: 6px;
  border-radius: 999px;
  background: var(--kv-muted);
  overflow: hidden;
}
.kv-progress > span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: var(--kv-accent);
  animation: kv-progress 1.6s ease-in-out infinite;
}
@keyframes kv-progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .kv-spinner, .kv-progress > span { animation: none; }
}

.kv-timer {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--kv-r-md);
  border: 1px solid var(--kv-border-strong);
  background: var(--kv-surface);
  font-family: var(--kv-mono);
  font-size: 16px;
  color: var(--kv-text);
  font-variant-numeric: tabular-nums;
}
.kv-timer.is-warning {
  border-color: #FDA29B;
  background: var(--kv-danger-soft);
  color: var(--kv-danger-text);
}

.kv-result {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.kv-result__main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.kv-result__score {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--kv-text);
}
.kv-result__score span { color: var(--kv-text-4); font-weight: 600; }

.kv-qnav { display: flex; flex-wrap: wrap; gap: 8px; }
.kv-qnav__btn {
  width: 40px;
  height: 40px;
  border-radius: var(--kv-r);
  border: 1px solid var(--kv-border);
  background: var(--kv-surface);
  color: var(--kv-text-2);
  font-family: var(--kv-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.kv-qnav__btn:hover { background: var(--kv-muted); }
.kv-qnav__btn.is-answered { background: var(--kv-accent-soft); color: var(--kv-accent-hover); border-color: var(--kv-accent-light); }
.kv-qnav__btn.is-active { border: 1.5px solid var(--kv-accent); color: var(--kv-accent); }

.kv-question { gap: 16px; }
.kv-question:hover { box-shadow: none; }
.kv-question__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--kv-text-4);
}
.kv-question__text {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kv-text);
  white-space: pre-wrap;
}

/* Antwoordoptie: gekozen = accentrand + --kv-accent-soft. */
.kv-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 52px;
  border-radius: var(--kv-r-md);
  border: 1px solid var(--kv-border);
  background: var(--kv-surface);
  cursor: pointer;
}
.kv-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--kv-accent);
  flex-shrink: 0;
}
.kv-option:has(input:checked) {
  border: 1.5px solid var(--kv-accent);
  background: var(--kv-accent-soft);
}
.kv-option__letter {
  width: 28px;
  height: 28px;
  border-radius: var(--kv-r);
  background: var(--kv-muted);
  color: var(--kv-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.kv-option__text { flex-grow: 1; font-size: 14px; color: var(--kv-text); }
.kv-option__mark { flex-shrink: 0; }
.kv-option:has(input:disabled) { cursor: default; }
/* Na verbetering: juist groen, fout rood -- altijd met een icoon. */
.kv-option.is-correct,
.kv-option.is-correct:has(input:checked) {
  border: 1.5px solid var(--kv-success);
  background: var(--kv-success-soft);
}
.kv-option.is-correct .kv-option__mark,
.kv-option.is-correct .kv-option__letter { color: var(--kv-success); }
.kv-option.is-wrong,
.kv-option.is-wrong:has(input:checked) {
  border: 1.5px solid var(--kv-danger-text);
  background: var(--kv-danger-soft);
}
.kv-option.is-wrong .kv-option__mark,
.kv-option.is-wrong .kv-option__letter { color: var(--kv-danger-text); }

.kv-textarea--answer { height: 200px; }

.kv-verdict {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--kv-r-md);
  border: 1px solid var(--kv-border);
  background: var(--kv-subtle);
  font-size: 14px;
  color: var(--kv-text);
}
.kv-verdict__icon { flex-shrink: 0; display: inline-flex; margin-top: 1px; color: var(--kv-text-3); }
.kv-verdict__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kv-verdict__body p { margin: 0; line-height: 1.5; }
.kv-verdict--ok { border-color: #ABEFC6; background: var(--kv-success-soft); }
.kv-verdict--ok .kv-verdict__icon, .kv-verdict--ok strong { color: var(--kv-success); }
.kv-verdict--bad { border-color: #FDA29B; background: var(--kv-danger-soft); }
.kv-verdict--bad .kv-verdict__icon, .kv-verdict--bad strong { color: var(--kv-danger-text); }

.exam-controls .exam-controls__submit { margin-left: auto; }

/* ---------------------------------------------------------------
   Quiz: formulierrij, infobalk, resultaatzone
   --------------------------------------------------------------- */
.kv-formrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px auto;
  gap: 12px;
  align-items: end;
  margin: 0;
}
.kv-select:disabled { color: var(--kv-text-4); }
/* In de quizreferentie hebben de keuzelijsten 8px radius (Studie: 10px). */
.kv-formrow .kv-select { border-radius: var(--kv-r); }
.kv-infobar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--kv-r-md);
  background: var(--kv-subtle);
  border: 1px solid var(--kv-border);
}
.kv-infobar__text { font-size: 13.5px; color: var(--kv-text-3); }
.kv-btn--h36 { height: 36px; padding: 0 12px; border-radius: var(--kv-r); }
.kv-btn--start { align-self: flex-start; }

/* Gestippelde plaatshouder ("Je quiz verschijnt hier"). */
.kv-placeholder {
  border-radius: var(--kv-r-lg);
  border: 1.5px dashed var(--kv-border-strong);
}

/* Knop met laadtoestand: spinner + "Bezig...". */
.kv-spinner--btn {
  display: none;
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-color: rgba(255,255,255,.45);
  border-top-color: #FFFFFF;
}
.kv-btn.is-loading .kv-spinner--btn { display: inline-block; }
.kv-btn--primary.is-loading,
.kv-btn--primary.is-loading:disabled {
  background: var(--kv-accent);
  color: #FFFFFF;
  cursor: progress;
}

/* Quizvraag: opties van 48px, status en uitleg. */
.kv-option--quiz { min-height: 48px; padding: 9px 14px; }
.kv-option__mark--ok,
.kv-option__mark--bad { display: none; }
.kv-option.is-correct .kv-option__mark--ok { display: inline; }
.kv-option.is-wrong .kv-option__mark--bad { display: inline; }
.kv-question__status:empty { display: none; }
.kv-question__status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.kv-question.is-correct .kv-question__status { background: var(--kv-success-soft); color: var(--kv-success); }
.kv-question.is-wrong .kv-question__status { background: var(--kv-danger-soft); color: var(--kv-danger-text); }
/* Het icoon via een masker: het script vervangt de tekst van de pil. */
.kv-question.is-correct .kv-question__status::before,
.kv-question.is-wrong .kv-question__status::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-right: 6px;
  background: currentColor;
  -webkit-mask: var(--kv-icon) center / contain no-repeat;
  mask: var(--kv-icon) center / contain no-repeat;
}
.kv-question.is-correct .kv-question__status::before {
  --kv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.kv-question.is-wrong .kv-question__status::before {
  --kv-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.kv-explain {
  padding: 14px 16px;
  border-radius: var(--kv-r-md);
  background: var(--kv-subtle);
  border: 1px solid var(--kv-border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--kv-text-2);
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------
   Eenvoudige formulieren (vraag toevoegen, bewerken, verwijderen)
   --------------------------------------------------------------- */
.kv-panel--760 { max-width: 760px; width: 100%; }
.kv-panel--520 { max-width: 520px; width: 100%; }
.kv-panel > form:not(.kv-form-actions) { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.kv-panel > form.kv-form-actions { margin: 0; }
.kv-textarea--200 { height: 200px; }
.kv-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--kv-border);
}
.kv-help { margin: 0; font-size: 12.5px; color: var(--kv-text-4); }
.kv-field-error ul, ul.errorlist { margin: 0; padding: 0; list-style: none; }

/* Verwijderen bevestigen: rode icooncirkel, titel, uitleg, knoppen. */
.kv-confirm__icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--kv-danger-soft);
  color: var(--kv-danger-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kv-confirm__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--kv-text);
  overflow-wrap: anywhere;
}
.kv-confirm__text { margin: -10px 0 0; font-size: 14px; color: var(--kv-text-3); line-height: 1.5; }

/* ---------------------------------------------------------------
   Raster van drie (kisten) -- 2 kolommen onder 1100px, 1 onder 900px
   --------------------------------------------------------------- */
.kv-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Kist: een witte kaart die als geheel een link is. */
.kv-crate {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  padding: 20px;
  border-radius: var(--kv-r-lg);
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  text-decoration: none;
  color: var(--kv-text);
}
.kv-page a.kv-crate,
.kv-page a.kv-crate:hover { color: var(--kv-text); }
.kv-crate:hover { box-shadow: var(--kv-shadow-card-hover); }
.kv-crate__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--kv-accent-soft);
  color: var(--kv-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kv-crate__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}
.kv-crate__name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.kv-crate__meta { font-size: 13px; color: var(--kv-text-4); }
.kv-crate__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kv-accent);
}

/* Vergrendelde plaats. */
.kv-crate--locked {
  /* Zoals de referentie: 200px plus de gestippelde rand (1,5px). */
  box-sizing: content-box;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  border: 1.5px dashed var(--kv-border-strong);
  background: var(--kv-raised);
}
.kv-crate--locked:hover { box-shadow: none; }
.kv-crate__lock {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--kv-muted);
  color: var(--kv-text-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kv-crate__locked-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--kv-text-3);
}

/* Verwijdermodus (home.js zet .delete-mode op de wortel): elke kist wordt een doelwit. */
.kv-crates.delete-mode .kv-crate:not(.kv-crate--locked) {
  border-color: var(--kv-danger);
  box-shadow: 0 0 0 1px var(--kv-danger);
}
.kv-crates.delete-mode .kv-crate:not(.kv-crate--locked) .kv-crate__open { color: var(--kv-danger-text); }
.kv-crate__delete-label { display: none; }
.kv-crates.delete-mode .kv-crate__delete-label { display: inline; }
.kv-crates.delete-mode .kv-crate__open-label { display: none; }

/* Meldingsbalk (bv. "Verwijdermodus actief"). */
.kv-notice {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--kv-r-md);
  border: 1px solid #FDA29B;
  background: var(--kv-danger-soft);
  color: var(--kv-danger-text);
  font-size: 13.5px;
}

/* Foutmelding onder een veld (fase 2): rode tekst, rode rand op het veld. */
.kv-field-error {
  margin: 0;
  font-size: 12.5px;
  color: var(--kv-danger-text);
}
.kv-input.is-invalid,
.kv-select.is-invalid,
.kv-textarea.is-invalid { border-color: #FDA29B; }
/* Het bestaande validatiescript (form-validation.js) markeert velden met
   .field-invalid en zet .field-error-message eronder. Op een herontworpen
   pagina in de nieuwe stijl: rode tekst, rode rand. */
body.kv-page-designed .field-invalid { border-color: #FDA29B !important; }
body.kv-page-designed .field-error-message {
  margin: 0;
  font-size: 12.5px;
  color: var(--kv-danger-text);
}

/* ---------------------------------------------------------------
   Menu
   --------------------------------------------------------------- */
.kv-menu {
  position: absolute;
  z-index: 5;
  width: 180px;
  padding: 6px;
  border-radius: var(--kv-r-md);
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  box-shadow: var(--kv-shadow-menu);
  display: flex;
  flex-direction: column;
}
.kv-menu[hidden] { display: none; }
.kv-card > .kv-menu { top: 58px; right: 14px; }
.kv-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--kv-r-sm);
  background: transparent;
  color: var(--kv-text);
  font-family: var(--kv-font);
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.kv-menu__item:hover { background: var(--kv-muted); color: var(--kv-text); }
.kv-menu__item--danger,
.kv-menu__item--danger:hover { color: var(--kv-danger-text); }

/* ---------------------------------------------------------------
   Selectiebalk
   --------------------------------------------------------------- */
.kv-selectbar {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 18px;
  border-radius: var(--kv-r-bar);
  background: var(--kv-text);
  color: #FFFFFF;
  box-shadow: var(--kv-shadow-bar);
  font-family: var(--kv-font);
  max-width: calc(100vw - 32px);
}
.kv-selectbar[hidden] { display: none; }
.kv-selectbar__text { font-size: 14px; font-weight: 500; white-space: nowrap; }
.kv-selectbar__btn {
  height: 38px;
  padding: 0 14px;
  border-radius: var(--kv-r);
  font-family: var(--kv-font);
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.kv-selectbar__btn--ghost {
  border: 1px solid var(--kv-text-3);
  background: transparent;
  color: #FFFFFF;
  font-weight: 500;
}
.kv-selectbar__btn--ghost:hover { background: rgba(255,255,255,.08); }
.kv-selectbar__btn--danger {
  border: 0;
  background: var(--kv-danger);
  color: #FFFFFF;
  font-weight: 600;
}
.kv-selectbar__btn--danger:hover:not(:disabled) { background: var(--kv-danger-text); }
.kv-selectbar__btn--danger:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------
   Dialoog
   --------------------------------------------------------------- */
.kv-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--kv-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 140px;
  overflow-y: auto;
  font-family: var(--kv-font);
  color: var(--kv-text);
}
.kv-dialog[hidden] { display: none; }
.kv-dialog__box {
  width: 520px;
  max-width: calc(100% - 32px);
  background: var(--kv-surface);
  border-radius: var(--kv-r-xl);
  box-shadow: var(--kv-shadow-dialog);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}
.kv-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}
.kv-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kv-dialog__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.kv-dialog__text { margin: 0; font-size: 14px; color: var(--kv-text-3); }
.kv-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.kv-dialog__foot .kv-btn { font-weight: 500; color: var(--kv-text-2); }
.kv-dialog__foot .kv-btn--primary,
.kv-dialog__foot .kv-btn--danger { font-weight: 600; color: #FFFFFF; padding: 0 18px; }
.kv-close {
  width: 36px;
  height: 36px;
  border-radius: var(--kv-r);
  border: 0;
  background: transparent;
  color: var(--kv-text-4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.kv-close:hover { background: var(--kv-muted); }

/* Segmented control */
.kv-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--kv-r-md);
  background: var(--kv-muted);
}
.kv-segmented__tab {
  height: 38px;
  border-radius: var(--kv-r);
  border: 0;
  background: transparent;
  color: var(--kv-text-3);
  font-family: var(--kv-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.kv-segmented__tab.is-active {
  background: var(--kv-surface);
  color: var(--kv-text);
  box-shadow: var(--kv-shadow-tab);
}

/* ---------------------------------------------------------------
   Toasts (Django-messages, partials/_kv_toasts.html)
   --------------------------------------------------------------- */
.kv-toasts {
  position: fixed;
  /* Net onder de topbalk (69px): het tandwiel en de profielknop blijven
     bereikbaar zolang er een melding staat. */
  top: 84px;
  right: 16px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
}
.kv-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--kv-r-md);
  border: 1px solid var(--kv-border);
  background: var(--kv-surface);
  box-shadow: var(--kv-shadow-menu);
  font-family: var(--kv-font);
  font-size: 13.5px;
  color: var(--kv-text);
}
.kv-toast__icon { flex-shrink: 0; color: var(--kv-accent); }
.kv-toast--success .kv-toast__icon { color: var(--kv-success); }
.kv-toast--error .kv-toast__icon { color: var(--kv-danger-text); }
.kv-toast__text { flex-grow: 1; line-height: 1.5; padding-top: 1px; }
.kv-toast--warning .kv-toast__icon { color: var(--kv-warn-text); }
.kv-toast__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--kv-r-sm);
  background: transparent;
  color: var(--kv-text-4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kv-toast__close:hover { background: var(--kv-muted); color: var(--kv-text); }

/* ---------------------------------------------------------------
   Tabellen -- voor latere fases
   --------------------------------------------------------------- */
.kv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--kv-font);
  font-size: 13.5px;
  color: var(--kv-text);
}
.kv-table th {
  height: 40px;
  padding: 0 14px;
  background: var(--kv-muted);
  color: var(--kv-text-3);
  font-weight: 600;
  font-size: 12.5px;
  text-align: left;
}
.kv-table td {
  height: 48px;
  padding: 0 14px;
  border-top: 1px solid var(--kv-border);
}
.kv-num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   Vak-overzicht (topic detail, fase 3)
   --------------------------------------------------------------- */
.kv-vak__headtext { gap: 10px; }
.kv-vak__title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kv-initials--52 {
  width: 52px;
  height: 52px;
  border-radius: var(--kv-r-bar);
  font-size: 16px;
}
.kv-vak__titletext {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kv-h1--30 { font-size: 30px; overflow-wrap: anywhere; }
.kv-vak__meta { font-size: 14px; color: var(--kv-text-4); }

.kv-vak__tiles { gap: 12px; }
.kv-tile--compact {
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--kv-r-bar);
}
.kv-tile--compact .kv-tile__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--kv-r-md);
  color: var(--kv-text);
}
.kv-tile--compact .kv-tile__text { gap: 1px; }
.kv-tile--compact .kv-tile__title { font-size: 14px; }
.kv-tile--compact .kv-tile__sub { font-size: 12.5px; }

.kv-vak__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.kv-panel--vak { padding: 20px; gap: 18px; }
.kv-vak__panelhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kv-vak__paneltitle {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--kv-text);
}
.kv-vak__paneltitle .kv-count { font-weight: 500; }

/* Zoekveld in een paneel: grijs vlak met vergrootglas. */
.kv-findbox {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px; /* referentie: 40px inhoud + rand (geen box-sizing) */
  padding: 0 12px;
  border-radius: var(--kv-r);
  border: 1px solid var(--kv-border);
  background: var(--kv-subtle);
  color: var(--kv-text-4);
}
.kv-findbox:focus-within { border-color: var(--kv-accent); }
.kv-findbox svg { flex-shrink: 0; }
.kv-findbox input {
  flex-grow: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--kv-font);
  font-size: 14px;
  color: var(--kv-text);
  outline: none;
  padding: 0;
}
.kv-findbox input::placeholder { color: var(--kv-text-4); }

/* Documentkaart */
.kv-doclist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kv-doc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--kv-r-bar);
  border: 1px solid var(--kv-border);
}
.kv-doc[hidden] { display: none; }
.kv-doc__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.kv-doc__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--kv-r-md);
  background: var(--kv-muted);
  color: var(--kv-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kv-doc__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  min-width: 0;
}
.kv-doc__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--kv-text);
  overflow-wrap: anywhere;
}
.kv-doc__note {
  font-size: 13px;
  color: var(--kv-text-4);
  line-height: 1.5;
}
.kv-doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 52px;
}
.kv-doc__actions .kv-btn--h36 { border-color: var(--kv-border-strong); }

/* Statusbadge: in wachtrij/bezig oranje, mislukt rood. Een verwerkt
   document krijgt geen badge -- de grijze regel eronder zegt genoeg. */
.kv-status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--kv-warn-soft);
  color: var(--kv-warn-text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.kv-status__alert { display: none; }
[data-doc-state="failed"] .kv-status {
  background: var(--kv-danger-soft);
  color: var(--kv-danger-text);
}
[data-doc-state="failed"] .kv-status__clock { display: none; }
[data-doc-state="failed"] .kv-status__alert { display: inline; }
[data-doc-state="done"] .kv-status { display: none; }
/* Bij "bezig" en "mislukt" zegt de badge al alles wat de regel zegt. */
[data-doc-state="processing"] .kv-doc__note,
[data-doc-state="failed"] .kv-doc__note { display: none; }

/* Rode tekstknop met lichtrode rand (Verwijderen naast andere acties). */
.kv-btn--danger-line,
.kv-doc__actions .kv-btn--danger-line,
.kv-page a.kv-btn--danger-line:hover {
  color: var(--kv-danger-text);
  border-color: var(--kv-danger-line);
}
.kv-btn--danger-line:hover { background: var(--kv-danger-soft); }

/* Lege toestand in een paneel: gestippeld vak. */
.kv-dashed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 36px 16px;
  border-radius: var(--kv-r-bar);
  border: 1.5px dashed var(--kv-border-strong);
}
.kv-dashed-empty__icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--kv-muted);
  color: var(--kv-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kv-dashed-empty__title { font-size: 14.5px; font-weight: 600; color: var(--kv-text); }
.kv-dashed-empty__text {
  font-size: 13px;
  color: var(--kv-text-4);
  max-width: 300px;
  line-height: 1.5;
}

/* Vragen & antwoorden: inklapbare rijen met een ⋯-menu. */
.kv-qalist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kv-qa {
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-r-bar);
  background: var(--kv-surface);
}
.kv-qa[hidden] { display: none; }
.kv-qa__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 6px;
}
.kv-qa__toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 8px 12px 14px;
  border: 0;
  background: transparent;
  border-radius: var(--kv-r-bar);
  text-align: left;
  cursor: pointer;
  color: var(--kv-text);
}
.kv-qa__q {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.kv-qa__chev {
  flex-shrink: 0;
  color: var(--kv-text-4);
  transition: transform .15s ease;
}
.kv-qa.is-open .kv-qa__chev { transform: rotate(180deg); }
.kv-qa__kebab { flex-shrink: 0; }
.kv-qa__menu { top: 44px; right: 6px; }
.kv-qa__answer { padding: 0 14px 14px; }
.kv-qa__answer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--kv-text-3);
  overflow-wrap: anywhere;
}

/* Statusmelding van het testexamen boven de kolommen. */
.kv-callout__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-callout__main { font-weight: 600; }
.kv-callout__note { font-size: 13px; color: var(--kv-text-3); }
.kv-callout__actions { display: flex; align-items: center; gap: 8px; }
.kv-callout__dismiss { margin: 0; }
.kv-callout[hidden] { display: none; }
.kv-callout--ok { border-color: #ABEFC6; background: var(--kv-success-soft); }
.kv-callout--bad .kv-callout__main { color: var(--kv-danger-text); }

@media (max-width: 1100px) {
  .kv-vak__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .kv-doc__actions { padding-left: 0; }
}

/* ---------------------------------------------------------------
   Statuspaneel: succes, wachten, info, limiet (fase 3, groep 2)
   Gecentreerd paneel met een icooncirkel van 56px, titel, uitleg en
   één primaire knop naar de logische volgende pagina.
   --------------------------------------------------------------- */
.kv-content--center { justify-content: center; min-height: calc(100vh - 69px); }
.kv-statuspanel {
  margin: 0 auto;
  width: 100%;
  max-width: 520px;
  align-items: center;
  text-align: center;
  padding: 32px;
  gap: 14px;
}
.kv-statuspanel--wide { max-width: 600px; }
.kv-statuspanel__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kv-accent-soft);
  color: var(--kv-accent);
}
.kv-statuspanel__icon--ok { background: var(--kv-success-soft); color: var(--kv-success); }
.kv-statuspanel__icon--wait { background: var(--kv-warn-soft); color: var(--kv-warn-text); }
.kv-statuspanel__icon--bad { background: var(--kv-danger-soft); color: var(--kv-danger-text); }
.kv-statuspanel__spinner {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  animation: kv-statuspanel-spin .9s linear infinite;
}
@keyframes kv-statuspanel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kv-statuspanel__spinner { animation: none; } }
.kv-statuspanel__title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--kv-text);
}
.kv-statuspanel__text {
  margin: 0;
  max-width: 440px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--kv-text-3);
}
.kv-statuspanel__text strong { color: var(--kv-text); font-weight: 600; }
.kv-statuspanel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.kv-statuspanel__actions form { margin: 0; }
.kv-statuspanel__foot {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kv-text-4);
}
/* Stappen in een wachtscherm (betaling in verwerking) */
.kv-steplist {
  list-style: none;
  margin: 4px 0;
  padding: 14px 16px;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  border-radius: var(--kv-r-md);
  border: 1px solid var(--kv-border);
  background: var(--kv-subtle);
}
.kv-steplist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--kv-text-3);
}
.kv-steplist li::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--kv-warn-text);
}
.kv-steplist li.is-done::before { background: var(--kv-success); }
.kv-steplist strong { color: var(--kv-text); font-weight: 600; }
.catchup-choice { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Doorzoekbare keuzelijst (searchable-select.js) op een herontworpen
   pagina: zelfde maten als .kv-select. Het script injecteert zijn eigen
   basisstijl; deze regels zijn specifieker en winnen. */
.kv-page .searchable-select__input {
  height: 44px;
  padding: 0 12px;
  border-radius: var(--kv-r);
  border: 1px solid var(--kv-border-strong);
  background: var(--kv-surface);
  color: var(--kv-text);
  font-family: var(--kv-font);
  font-size: 14px;
  box-shadow: none;
}
.kv-page .searchable-select__input:focus { border-color: var(--kv-accent); box-shadow: none; }
.kv-page .searchable-select__input::placeholder { color: var(--kv-text-4); }
.kv-page .searchable-select--plain::after { right: 14px; border-top-color: var(--kv-text-4); }
.kv-page .searchable-select__list {
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  border-radius: var(--kv-r-md);
  box-shadow: var(--kv-shadow-menu);
}
.kv-page .searchable-select__option { color: var(--kv-text); }
.kv-page .searchable-select__option--active { background: var(--kv-accent-soft); }
.kv-page .searchable-select__option--empty { color: var(--kv-text-4); }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 1240px) {
  .kv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .kv-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-formrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-two { grid-template-columns: minmax(0, 1fr); }
  .kv-g3, .kv-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-panel--side { position: static; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kv-shell { grid-template-columns: minmax(0, 1fr); }
  .kv-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 252px;
    height: 100%;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .2s ease;
    visibility: hidden;
  }
  .kv-shell.is-side-open .kv-side {
    transform: none;
    visibility: visible;
  }
  .kv-side-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: var(--kv-overlay);
  }
  .kv-shell.is-side-open .kv-side-overlay { display: block; }
  .kv-hamburger { display: flex; }
  .kv-search { display: none; }
  .kv-top { padding: 14px 16px; }
  .kv-content { padding: 24px 16px 120px; }
  .kv-tiles { grid-template-columns: minmax(0, 1fr); }
  .kv-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .kv-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .kv-g2, .kv-g3, .kv-g4 { grid-template-columns: minmax(0, 1fr); }
  .kv-formrow { grid-template-columns: minmax(0, 1fr); }
  .kv-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .kv-scope { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .kv-selectbar { gap: 8px; padding: 8px 8px 8px 14px; }
  .kv-dialog { padding-top: 72px; }
}

/* ---------------------------------------------------------------
   Bestaande panelen binnen de shell
   --------------------------------------------------------------- */
/* Het instellingenpaneel wacht buiten beeld en wierp zijn schaduw naar
   binnen -- op het oude donkere thema onzichtbaar, op het lichte een
   grijze band langs de rechterrand. */
body.kv-app .settings-panel:not(.is-open) {
  box-shadow: none;
}

/* Afdrukken (o.a. het testexamen en het vakdetail): zonder zijbalk en
   topbalk, de pagina's eigen printopmaak blijft gelden. */
@media print {
  .kv-side,
  .kv-top,
  .kv-side-overlay,
  .kv-selectbar {
    display: none !important;
  }
  .kv-shell {
    display: block;
    min-height: 0;
  }
}

/* ---------------------------------------------------------------
   Nog niet herontworpen pagina's binnen de shell
   --------------------------------------------------------------- */
/* Hun hoofdkolom is min(<max>, 94vw) breed: 94% van het VENSTER. Binnen
   de shell is de kolom 252px smaller dan het venster, dus begrenzen we
   die op 94% van de kolom -- anders schuift de pagina horizontaal. */
.kv-legacy .qa__shell,
.kv-legacy .vault-create__panel,
.kv-legacy .workspace__shell,
.kv-legacy .quiz__shell,
.kv-legacy .vault-home__shell,
.kv-legacy .simple-form-card,
.kv-legacy .test-exam__shell,
.kv-legacy .upload__shell {
  max-width: 94%;
}

/* Knoppenrijen die vroeger VAST naast het zwevende tandwiel stonden
   (top: 18px; right: 20px + 40px + 0.7rem). Binnen de shell staat het
   tandwiel in de topbalk, en zo'n rij viel er bovenop. Ze krijgen hier
   dezelfde behandeling die hun eigen stylesheet op een smal scherm al gaf:
   terug in de gewone indeling. */
.kv-legacy .workspace__header-actions,
.kv-legacy .qa__back,
.kv-legacy .quiz__back,
.kv-legacy .chat-header-actions,
.kv-legacy .test-exam__header .test-exam-btn--ghost,
.kv-legacy .upload__header .upload-btn--ghost {
  position: static;
  z-index: auto;
}
.kv-legacy .workspace__header-actions {
  height: auto;
  flex-wrap: wrap;
}
.kv-legacy .exam-header-tools,
.kv-legacy .flashcard-stage__top {
  padding-right: 0;
}

/* Schermen op volle hoogte (de groepschat): de body scrolt niet, alleen
   de berichtenlijst. Binnen de shell neemt de inhoudskolom die rol over. */
body.kv-fullheight .kv-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  flex: 1 1 auto;
}
body.kv-fullheight .kv-main {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
body.kv-fullheight .kv-legacy,
body.kv-fullheight .kv-chat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}