:root {
  --bg: #f6f7f9; --paneel: #fff; --tekst: #1b1f24; --zacht: #667085; --rand: #e3e6ea;
  --accent: #2f5bea; --accent-tekst: #fff; --groen: #13804b; --rood: #c0352b; --code: #f0f2f5;
  --gebruiker: #e8eefc; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171b; --paneel: #1c2026; --tekst: #e6e8eb; --zacht: #98a2b3; --rand: #2c323a;
    --accent: #5b82ff; --groen: #4cc38a; --rood: #ff6b5e; --code: #262b33; --gebruiker: #22304f; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--tekst); }
a { color: var(--accent); }
code { background: var(--code); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
pre { background: var(--code); padding: .75em 1em; border-radius: 8px; overflow-x: auto; }
pre code { background: none; padding: 0; }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.zacht { color: var(--zacht); }
.groen { color: var(--groen); }
.rood { color: var(--rood); }
input, select, textarea, button { font: inherit; }
input[type=checkbox], input[type=radio] { width: auto; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; padding: .55em .7em; border: 1px solid var(--rand); border-radius: 8px; background: var(--paneel); color: var(--tekst); }
button { background: var(--accent); color: var(--accent-tekst); border: 0; border-radius: 8px; padding: .55em 1em; cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
button.tweede { background: transparent; color: var(--accent); border: 1px solid var(--rand); }
button.link { background: none; color: var(--accent); padding: 0; }
button.link.rood { color: var(--rood); }
.melding { padding: .6em .8em; border-radius: 8px; background: var(--code); }
.melding.fout { background: color-mix(in srgb, var(--rood) 12%, transparent); color: var(--rood); }
.melding.ok { background: color-mix(in srgb, var(--groen) 12%, transparent); }
.stapel { display: grid; gap: .8rem; }
.stapel label { display: grid; gap: .3rem; }
.smal { max-width: 420px; }
.rij { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
.rij label { display: grid; gap: .3rem; min-width: 260px; }

/* losse pagina's (inloggen) */
body.los { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.kaartje { width: 100%; max-width: 420px; background: var(--paneel); border: 1px solid var(--rand); border-radius: 14px; padding: 28px; }
.merk { display: flex; align-items: center; gap: .5rem; font-weight: 650; color: var(--tekst); text-decoration: none; margin-bottom: 1.2rem; }
.qr { display: block; margin: 1rem auto; background: #fff; padding: 8px; border-radius: 8px; }
.sleutel { word-break: break-all; user-select: all; }
details { margin: .5rem 0 1rem; }

/* app */
body.app { height: 100vh; display: flex; flex-direction: column; }
.balk { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 52px; border-bottom: 1px solid var(--rand); background: var(--paneel); flex: none; }
.balk .merk { margin: 0; }
.balkmelding { flex: none; margin: 8px 16px 0; overflow-wrap: anywhere; }
.installatie .uitleg { margin: 0; }
.installatie input[name=code] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.balk .menu { display: flex; gap: .2rem; align-items: center; flex: 1; margin-left: 1.5rem; overflow-x: auto; }
.balk .menu a, .balk .wie a { text-decoration: none; color: var(--tekst); padding: .35em .7em; border-radius: 8px; white-space: nowrap; }
.balk .menu a:hover, .balk .wie a:hover { background: var(--code); }
.balk a.actief { background: var(--code); font-weight: 600; }
.balk .wie { display: flex; gap: .6rem; align-items: center; }
.balk form { margin: 0; }
.teller { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px; background: var(--accent); color: var(--accent-tekst); font-size: .78em; text-align: center; font-weight: 600; }
.chat { flex: 1; display: flex; min-height: 0; }
.zij { width: 260px; border-right: 1px solid var(--rand); background: var(--paneel); padding: 12px; overflow-y: auto; flex: none; }
.nieuw { width: 100%; margin-bottom: .75rem; }
.gesprekken { list-style: none; margin: 0; padding: 0; }
.gesprekken li { display: flex; align-items: center; border-radius: 8px; }
.gesprekken li a { flex: 1; padding: .45em .6em; color: var(--tekst); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .93em; }
.gesprekken li.actief, .gesprekken li:hover { background: var(--code); }
.gesprekken li button { background: none; color: var(--zacht); padding: 0 .5em; visibility: hidden; }
.gesprekken li:hover button { visibility: visible; }
.hoofd { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.berichten { flex: 1; overflow-y: auto; padding: 24px 16px; }
.berichten > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.welkom { text-align: center; margin-top: 8vh; }
.voorbeelden { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.voorbeeld { background: var(--paneel); color: var(--tekst); border: 1px solid var(--rand); }
.bericht { margin-bottom: 1.2rem; }
.bericht.user .inhoud { background: var(--gebruiker); padding: .6em .9em; border-radius: 12px; margin-left: auto; width: fit-content; max-width: 85%; white-space: pre-wrap; }
.bericht.assistant .inhoud > :first-child { margin-top: 0; }
.bericht.assistant .inhoud > :last-child { margin-bottom: 0; }
.bericht .inhoud table { border-collapse: collapse; margin: .5rem 0; }
.bericht .inhoud th, .bericht .inhoud td { border: 1px solid var(--rand); padding: .3em .6em; text-align: left; }
.stappen { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.stap { font-size: .82em; color: var(--zacht); background: var(--code); border-radius: 999px; padding: .15em .7em; }
.stap.bezig::before { content: "… "; }
.stap.fout { color: var(--rood); }
.denkt { color: var(--zacht); font-style: italic; }
.vraag { display: flex; gap: .6rem; padding: 12px 16px 16px; max-width: 812px; width: 100%; margin: 0 auto; }
.vraag textarea { resize: none; max-height: 220px; }
.pagina { padding: 24px 16px 48px; max-width: 980px; width: 100%; margin: 0 auto; overflow-y: auto; }
.blok { background: var(--paneel); border: 1px solid var(--rand); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.blok form { margin: .5rem 0 0; }
.feiten { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 .5rem; }
.feiten dt { color: var(--zacht); }
.feiten dd { margin: 0; overflow-wrap: anywhere; }
.tabel { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .93em; }
.tabel th, .tabel td { text-align: left; padding: .45em .5em; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabel th { color: var(--zacht); font-weight: 500; }
.tabel td form { margin: 0; }
.log td { overflow-wrap: anywhere; }

/* kennisbank en andere pagina's */
.twee { flex: 1; display: flex; min-height: 0; }
.twee .pagina { overflow-y: auto; }
.kennis-zij { width: 250px; }
.zoek input { margin-bottom: .75rem; }
.boom { list-style: none; margin: 0; padding: 0; }
.boom li a { display: flex; justify-content: space-between; gap: .5rem; padding: .35em .6em; border-radius: 8px; color: var(--tekst); text-decoration: none; font-size: .93em; }
.boom li a:hover, .boom li a.actief { background: var(--code); }
.boom li.d1 a { padding-left: 1.5em; } .boom li.d2 a { padding-left: 2.4em; } .boom li.d3 a, .boom li.d4 a, .boom li.d5 a { padding-left: 3.3em; }
.boom li.los { margin-top: .75rem; border-top: 1px solid var(--rand); padding-top: .5rem; }
.kopregel { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.kopregel h1, .kopregel h2 { margin: 0; }
.knoppen { display: flex; gap: .5rem; flex-wrap: wrap; }
a.knop { display: inline-block; background: var(--accent); color: var(--accent-tekst); border-radius: 8px; padding: .5em 1em; text-decoration: none; }
a.knop.tweede { background: transparent; color: var(--accent); border: 1px solid var(--rand); }
.lijst { list-style: none; padding: 0; margin: 0; }
.lijst li { padding: .7rem 0; border-bottom: 1px solid var(--rand); }
.fragment { color: var(--zacht); font-size: .92em; margin-top: .2rem; }
.label { display: inline-block; font-size: .78em; padding: .05em .55em; border-radius: 999px; background: var(--code); color: var(--zacht); }
.label.actief { background: color-mix(in srgb, var(--groen) 15%, transparent); color: var(--groen); }
.label.concept, .label.open { background: color-mix(in srgb, #d98a00 18%, transparent); color: #a86a00; }
.label.verouderd, .label.geheim { background: color-mix(in srgb, var(--rood) 14%, transparent); color: var(--rood); }
.leeg { color: var(--zacht); padding: 1.5rem 0; }
.pagina.smaller { max-width: 820px; }
.kruimel { color: var(--zacht); font-size: .9em; margin: 0 0 .5rem; }
.kruimel a { color: var(--zacht); }
.meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--zacht); font-size: .9em; align-items: center; }
.tag { color: var(--accent); }
.vertaalbalk { background: var(--code); border-radius: 8px; padding: .45em .8em; font-size: .9em; color: var(--zacht); }
.md { line-height: 1.65; overflow-wrap: anywhere; }
.md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; margin-top: 1.5rem; } .md h3 { font-size: 1rem; }
.md table { border-collapse: collapse; margin: .75rem 0; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--rand); padding: .35em .6em; text-align: left; }
.md blockquote { margin: .75rem 0; padding: .2rem 1rem; border-left: 3px solid var(--rand); color: var(--zacht); }
.md ul.contains-task-list { list-style: none; padding-left: 1rem; }
.md .task-list-item input { margin: 0 .5em 0 0; vertical-align: middle; }
.md img { max-width: 100%; }
article.md { background: var(--paneel); border: 1px solid var(--rand); border-radius: 12px; padding: 20px 24px; margin: 1rem 0; }
.onderaan { margin-top: 1.5rem; }
.bewerk { display: grid; gap: 1rem; }
.velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.velden label, .bewerk > label { display: grid; gap: .3rem; font-size: .92em; }
.velden .breed { grid-column: 1 / -1; }
.functies { border: 1px solid var(--rand); border-radius: 8px; padding: .5rem .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .92em; }
.functies legend { color: var(--zacht); padding: 0 .3rem; }
.hulp { color: var(--zacht); font-size: .88em; margin: 0; }
.claude { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; background: var(--code); padding: .8rem; border-radius: 10px; }
.claude label { flex: 1; min-width: 260px; display: grid; gap: .3rem; font-size: .92em; }
.claude span { flex-basis: 100%; }
.editor textarea { font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 420px; resize: vertical; border-top-left-radius: 0; }
.tabs { display: flex; gap: .25rem; }
.tab { background: var(--code); color: var(--zacht); border-radius: 8px 8px 0 0; padding: .35em .9em; }
.tab.actief { background: var(--paneel); color: var(--tekst); border: 1px solid var(--rand); border-bottom: 0; }
.voorbeeld { background: var(--paneel); border: 1px solid var(--rand); border-radius: 0 8px 8px 8px; padding: 16px 20px; min-height: 420px; }
pre.raw { white-space: pre-wrap; max-height: 420px; overflow-y: auto; font-size: .85em; }
.voortgang { appearance: none; -webkit-appearance: none; width: 90px; height: 7px; border: 0; border-radius: 99px; background: var(--code); vertical-align: middle; overflow: hidden; }
.voortgang::-webkit-progress-bar { background: var(--code); border-radius: 99px; }
.voortgang::-webkit-progress-value { background: var(--groen); border-radius: 99px; }
.voortgang::-moz-progress-bar { background: var(--groen); border-radius: 99px; }
.voortgang.groot { display: block; width: 100%; height: 9px; margin: .75rem 0 1rem; }
.stappen-lijst { list-style: none; padding: 0; margin: 0; counter-reset: stap; }
.stappen-lijst li { display: flex; gap: .9rem; align-items: flex-start; background: var(--paneel); border: 1px solid var(--rand); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .5rem; scroll-margin-top: 80px; }
.stappen-lijst li.gedaan .staptekst { color: var(--zacht); text-decoration: line-through; }
.stappen-lijst form { margin: 0; }
.vink { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--rand); background: var(--paneel); color: var(--groen); padding: 0; font-weight: 700; flex: none; }
.gedaan .vink { border-color: var(--groen); background: color-mix(in srgb, var(--groen) 12%, transparent); }
.staptekst p { margin: 0; }
.klein { font-size: .85em; }
.vragenlijst { list-style: none; padding: 0; margin: 0; }
.vragenlijst li { background: var(--paneel); border: 1px solid var(--rand); border-radius: 10px; padding: .7rem 1rem; margin-bottom: .5rem; }
.vragenlijst li.nieuw { border-color: var(--accent); }
.vragenlijst a { text-decoration: none; color: var(--tekst); }
.antwoord { border-color: color-mix(in srgb, var(--groen) 40%, var(--rand)); }
.vinkje { display: flex !important; gap: .5rem; align-items: center; }
.vinkje input { width: auto; }
tr.uit td { opacity: .55; }
.zijknop { display: none; }
@media (max-width: 900px) {
  .balk { height: auto; flex-wrap: wrap; padding: 6px 12px; gap: 4px; }
  .balk .menu { order: 3; flex-basis: 100%; margin: 0; }
  .balk .merk span { display: none; }
}
@media (max-width: 760px) {
  .zijknop { display: block; margin: 8px 16px 0; align-self: flex-start; }
  .twee .kennis-zij { display: block; position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--rand); max-height: 40vh; }
  .twee { flex-direction: column; overflow-y: auto; }
  article.md { padding: 14px 16px; }
  .zij { display: none; }
  .zij.open { display: block; position: fixed; inset: 52px 0 0 0; width: auto; z-index: 5; }
  .tabel { display: block; overflow-x: auto; }
}

.bron { border: 1px solid var(--rand); border-radius: 10px; padding: .6rem .9rem; margin: .5rem 0; }
.bron summary { cursor: pointer; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.bron form { margin-top: .8rem; }

.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; margin-top: 1rem; }
.tegel { display: grid; gap: .3rem; background: var(--paneel); border: 1px solid var(--rand); border-radius: 12px; padding: 1rem 1.1rem; text-decoration: none; color: var(--tekst); overflow-wrap: anywhere; }
.tegel:hover { border-color: var(--accent); }