:root {
  --achtergrond: #f6f5f1;
  --vlak: #ffffff;
  --tekst: #1e2430;
  --zacht: #5d6575;
  --rand: #dcdad3;
  --accent: #1f6f5c;
  --accent-tekst: #ffffff;
  --accent-zacht: #e3f0ec;
  --bot: #ffffff;
  --coachee: #1f6f5c;
  --coachee-tekst: #ffffff;
  --fout: #b3261e;
  --waarschuw: #fff6dd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --achtergrond: #14171c;
    --vlak: #1d2128;
    --tekst: #e8eaee;
    --zacht: #a3aab6;
    --rand: #343a45;
    --accent: #5cc4a6;
    --accent-tekst: #0f1a17;
    --accent-zacht: #1f3530;
    --bot: #1d2128;
    --coachee: #2a6b5a;
    --coachee-tekst: #f2fbf8;
    --fout: #ff8a80;
    --waarschuw: #3a3320;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }

.kop {
  display: flex; align-items: center; gap: 10px;
  max-width: 680px; margin: 0 auto; padding: 14px 16px;
}
.logo { font-weight: 700; font-size: 20px; text-decoration: none; color: var(--tekst); }
.label {
  font-size: 12px; color: var(--zacht); border: 1px solid var(--rand);
  border-radius: 999px; padding: 1px 8px;
}

main { max-width: 680px; margin: 0 auto; padding: 0 16px 80px; }

.start h1 { font-size: 28px; line-height: 1.2; margin: 24px 0 8px; }
.intro { color: var(--zacht); margin: 0 0 24px; }
.klein { font-size: 14px; color: var(--zacht); }

.upload, .akkoord {
  display: block; background: var(--vlak); border: 1px solid var(--rand);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.upload-titel { display: block; font-weight: 600; }
.upload-uitleg { display: block; font-size: 14px; color: var(--zacht); margin-bottom: 8px; }
.upload input { width: 100%; font-size: 15px; }
.akkoord { display: flex; gap: 10px; font-size: 14px; }
.akkoord input { margin-top: 4px; width: 18px; height: 18px; flex: none; }

.knop {
  font: inherit; border-radius: 10px; border: 1px solid var(--rand);
  background: var(--vlak); color: var(--tekst); padding: 10px 14px; cursor: pointer;
}
.knop.hoofd {
  width: 100%; background: var(--accent); color: var(--accent-tekst);
  border-color: var(--accent); font-weight: 600; padding: 13px;
}
.knop:disabled { opacity: .5; cursor: default; }
.fout { color: var(--fout); }

/* Gesprek */
.bericht {
  background: var(--bot); border: 1px solid var(--rand); border-radius: 14px 14px 14px 4px;
  padding: 12px 14px; margin: 16px 0 8px; max-width: 92%; white-space: pre-line;
}
.coachee {
  background: var(--coachee); color: var(--coachee-tekst);
  border-radius: 14px 14px 4px 14px; padding: 10px 14px;
  margin: 8px 0 8px auto; max-width: 85%; width: fit-content; white-space: pre-line;
}
.vraagkaart {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px; margin: 8px 0;
}
.vraagkaart + .vraagkaart { margin-top: 10px; }
.vraag { font-weight: 600; margin: 0 0 10px; white-space: pre-line; }
.hint { font-size: 13px; color: var(--zacht); margin: -6px 0 10px; }
.opties { display: flex; flex-wrap: wrap; gap: 8px; }
.optie {
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  background: var(--vlak); color: var(--tekst);
  border: 1.5px solid var(--rand); border-radius: 999px; padding: 8px 14px;
}
.optie[aria-pressed="true"] {
  background: var(--accent-zacht); border-color: var(--accent); font-weight: 600;
}
.optie-groep { display: inline-flex; align-items: center; gap: 4px; }
.info {
  flex: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--rand); background: var(--vlak); color: var(--zacht);
  font: italic 600 14px/1 Georgia, "Times New Roman", serif; padding: 0;
}
.info:hover, .info[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.tip {
  position: absolute; z-index: 10; background: var(--tekst); color: var(--achtergrond);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.tip strong { display: block; margin-bottom: 2px; }
.beurt[data-klaar] .optie-groep { display: none; }
.eigen {
  width: 100%; margin-top: 10px; font: inherit; font-size: 16px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rand);
  background: var(--achtergrond); color: var(--tekst);
}
.verder { margin-top: 12px; }
.beurt[data-klaar] .opties,
.beurt[data-klaar] .eigen,
.beurt[data-klaar] .hint { display: none; }
.beurt[data-klaar] .vraagkaart { background: none; border-style: dashed; padding: 10px 14px; }
.beurt[data-klaar] .vraag { margin: 0; font-weight: 500; color: var(--zacht); }

.duim {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zacht);
  margin: 2px 0 4px;
}
.duim button {
  font: inherit; background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 2px 6px; cursor: pointer; color: var(--zacht);
}
.duim button[aria-pressed="true"] { border-color: var(--rand); background: var(--vlak); }
.duim-opmerking { display: flex; gap: 6px; margin: 4px 0 8px; }
.duim-opmerking input { flex: 1; min-width: 0; }
.duim-opmerking .eigen { margin-top: 0; font-size: 14px; padding: 6px 10px; }
.duim-opmerking .knop { padding: 6px 10px; font-size: 14px; }

.typen { color: var(--zacht); font-size: 14px; margin: 12px 0; }
.typen::after { content: "…"; animation: puntjes 1.2s steps(3) infinite; }
@keyframes puntjes { 0% { content: "."; } 33% { content: ".."; } 66% { content: "..."; } }

.foutblok {
  background: var(--waarschuw); border-radius: 10px; padding: 12px; margin: 12px 0;
}

/* Resultaat */
.resultaat { margin-top: 24px; }
.resultaat h2 { font-size: 24px; margin: 0 0 8px; }
.resultaat h3 { font-size: 18px; margin: 0 0 6px; }
.blok {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px;
  padding: 14px 16px; margin: 12px 0;
}
.blok h4 { font-size: 14px; color: var(--zacht); margin: 12px 0 4px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--accent-zacht); border-radius: 999px; padding: 3px 10px; font-size: 14px;
}
.blok ul { margin: 4px 0; padding-left: 20px; }
.filters { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.filters dt { color: var(--zacht); }
.filters dd { margin: 0; }
.zoekprompt {
  white-space: pre-wrap; background: var(--achtergrond); border-radius: 10px;
  padding: 12px; font-size: 14px; max-height: 260px; overflow: auto; margin: 8px 0;
}
.tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; margin: 8px 0 4px;
  scrollbar-width: thin;
}
.tab {
  flex: none; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
  background: var(--achtergrond); color: var(--tekst);
  border: 1.5px solid var(--rand); border-radius: 999px; padding: 6px 12px;
}
.tab[aria-selected="true"] { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }
.vacature {
  border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px;
  margin: 12px 0; background: var(--vlak);
}
.vacature-kop { margin-bottom: 10px; }
.vacature-titel { font-weight: 650; font-size: 17px; line-height: 1.3; text-decoration: none; color: var(--tekst); }
.vacature-titel:hover { color: var(--accent); text-decoration: underline; }
.vacature-org { margin: 2px 0 0; color: var(--zacht); font-size: 15px; }
.feiten {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px;
}
.feit { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.35; }
.feit .icoon { flex: none; width: 18px; height: 18px; fill: var(--accent); margin-top: 1px; }
.feit.gedempt { color: var(--zacht); }
.feit.gedempt .icoon { fill: var(--zacht); opacity: .6; }
.feit-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.vacature-voet { display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; flex-wrap: wrap; }
.knop.bekijk {
  text-decoration: none; background: var(--accent); color: var(--accent-tekst);
  border-color: var(--accent); font-weight: 600; padding: 8px 14px; font-size: 15px;
}
.bronlabel { font-size: 12px; color: var(--zacht); }
.knop.beoordeel { font-size: 15px; padding: 8px 14px; border-color: var(--accent); color: var(--accent); background: none; }
.signalen { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 14px; }
.signaal { padding-left: 22px; position: relative; line-height: 1.45; }
.signaal::before { position: absolute; left: 2px; font-weight: 700; }
.signaal.past::before { content: "✓"; color: var(--accent); }
.signaal.let_op::before { content: "!"; color: #c27a00; left: 6px; }
.signaal.neutraal::before { content: "•"; color: var(--zacht); left: 5px; }
.skill { display: inline-block; font-size: 13px; padding: 1px 8px; margin: 2px 4px 2px 0; border-radius: 999px;
  background: var(--achtergrond); border: 1px solid var(--rand); }
.skill.ja { background: var(--accent-zacht); border-color: var(--accent); }
.skill.nee { color: var(--zacht); border-style: dashed; }
.oordeel { border-top: 1px solid var(--rand); margin-top: 10px; padding-top: 10px; font-size: 15px; }
.oordeel h4 { font-size: 14px; color: var(--zacht); margin: 10px 0 2px; }
.oordeel ul { margin: 2px 0; padding-left: 20px; }
.oordeel-kop { margin: 0 0 6px; }
.oordeel-label { font-weight: 700; font-size: 14px; border-radius: 999px; padding: 3px 10px; }
.oordeel-label.solliciteren { background: var(--accent-zacht); color: var(--accent); }
.oordeel-label.twijfel { background: var(--waarschuw); color: #a86a00; }
.oordeel-label.niet_doen { background: rgba(179, 38, 30, .12); color: var(--fout); }
.knop.meer { margin-top: 12px; }
.onbekend summary { cursor: pointer; color: var(--accent); margin: 12px 0 4px; font-size: 14px; }
.cijfers { display: flex; gap: 6px; margin: 8px 0; }
.cijfers .optie { flex: 1; text-align: center; padding: 8px 0; }
textarea.eigen { min-height: 90px; resize: vertical; }
.bedankt { color: var(--accent); font-weight: 600; }