:root{
  --bg:#f6f7f9; --panel:#fff; --ink:#1c2024; --muted:#6b7280; --line:#e3e6ea;
  --accent:#2f6feb; --accent-ink:#fff; --danger:#c0392b; --ok:#1e7a45;
  --okbg:#e8f5ee; --errbg:#fdecea; --radius:10px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14171a; --panel:#1c2024; --ink:#e6e9ed; --muted:#98a1ad; --line:#2b3138;
    --accent:#5a8dff; --accent-ink:#0d1015; --danger:#ef6b5c; --ok:#4ec98a;
    --okbg:#16301f; --errbg:#32191a;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:0 0 .6rem}
h2{font-size:1.15rem;margin:1.6rem 0 .5rem}
.muted{color:var(--muted)}
.small{font-size:.85em}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.num{text-align:right;white-space:nowrap}
.lead{color:var(--muted);margin-top:0}

/* topbar */
.topbar{display:flex;gap:1rem;align-items:center;padding:.6rem 1rem;
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:700;font-size:1.05rem;color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none}
.searchbar{display:flex;flex:1 1 320px;min-width:220px;gap:.4rem}
.searchbar input{flex:1;padding:.5rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg);color:var(--ink)}
.searchbar button{padding:.5rem .9rem;border:0;border-radius:var(--radius);
  background:var(--accent);color:var(--accent-ink);cursor:pointer}
.topnav{display:flex;gap:.9rem;align-items:center;white-space:nowrap}

/* layout */
.layout{display:flex;align-items:flex-start;gap:0}
.sidebar{width:250px;flex:0 0 250px;padding:1rem;border-right:1px solid var(--line);
  background:var(--panel);min-height:calc(100vh - 110px)}
.side-head{display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:1rem 0 .4rem}
.side-head:first-child{margin-top:0}
.mini{border:1px solid var(--line);border-radius:6px;width:20px;height:20px;
  display:grid;place-items:center;line-height:1}
.tree{list-style:none;margin:0;padding:0}
.tree li{padding:.18rem 0;padding-left:calc(var(--d,0) * 12px)}
.content{flex:1;padding:1.3rem 1.6rem;min-width:0;max-width:1100px}
.centered{max-width:420px;margin:8vh auto;padding:1rem}
body.bare{background:var(--bg)}

/* kaarten en knoppen */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.2rem;margin:0 0 1.2rem}
.card.auth h1{margin-top:0}
.btn{display:inline-block;padding:.42rem .8rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);color:var(--ink);cursor:pointer;
  font-size:.9rem}
.btn:hover{text-decoration:none;border-color:var(--accent)}
.btn.primary,button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{color:var(--danger);border-color:var(--line)}
.btn.active{border-color:var(--accent);color:var(--accent)}
button{font:inherit}
button.primary{padding:.5rem .95rem;border-radius:var(--radius);border:0;cursor:pointer}
.linkish{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font-size:.88em}
.linkish.danger{color:var(--danger)}
.inline{display:inline}
.actions,.formactions,.pageactions,.adminnav,.pager{display:flex;gap:.5rem;
  align-items:center;flex-wrap:wrap}
.actions{margin:1rem 0}
.adminnav{margin:0 0 1.2rem}
.pager{margin-top:1rem}
.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.rowactions{display:flex;gap:.6rem;flex-wrap:wrap}

/* meldingen */
.flash{padding:.65rem .9rem;border-radius:var(--radius);margin:0 0 .9rem;border:1px solid transparent}
.flash.ok{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.flash.error{background:var(--errbg);border-color:var(--danger);color:var(--danger)}

/* formulieren */
.form label{display:block;margin:0 0 .8rem}
.form input[type=text],.form input[type=email],.form input[type=password],
.form select,.form textarea,.card input,.card select{
  display:block;width:100%;margin-top:.25rem;padding:.5rem .65rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);color:var(--ink);font:inherit}
.form textarea{resize:vertical}
.form textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem}
.form.row{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.form.row label{flex:1 1 180px;margin-bottom:0}
.upload{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.6rem 0 1rem}

/* statistieken */
.stats{display:flex;gap:.8rem;flex-wrap:wrap;margin:1rem 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:.7rem 1rem;min-width:120px}
.stat b{display:block;font-size:1.35rem}
.stat span{color:var(--muted);font-size:.82rem}

/* lijsten */
.cols{display:flex;gap:1.6rem;flex-wrap:wrap}
.cols section{flex:1 1 320px;min-width:280px}
.list{list-style:none;margin:.4rem 0;padding:0}
.list li{padding:.45rem 0;border-bottom:1px solid var(--line)}
.meta{display:block;color:var(--muted);font-size:.83rem}
.tag{display:inline-block;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:0 .5rem;font-size:.78rem;margin-right:.3rem}
.crumbs{color:var(--muted);font-size:.87rem;margin-bottom:.5rem}

.filelist{list-style:none;margin:.4rem 0;padding:0}
.filelist li{padding:.5rem 0;border-bottom:1px solid var(--line);
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.filelist.compact li{padding:.25rem 0}
.thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--line);
  display:block}

/* zoekresultaten */
.results{list-style:none;margin:0;padding:0}
.results li{padding:.7rem 0;border-bottom:1px solid var(--line)}
.rtitle{font-weight:600}
.kind{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  border:1px solid var(--line);border-radius:4px;padding:0 .35rem;margin-right:.45rem;
  color:var(--muted)}
.snippet{color:var(--muted);font-size:.88rem;margin-top:.25rem}

/* tabellen */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg);font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

/* artikel */
.prose{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.2rem;overflow-wrap:break-word}
.prose img{max-width:100%;height:auto;border-radius:6px}
.prose pre{background:var(--bg);padding:.7rem .9rem;border-radius:6px;overflow-x:auto;
  border:1px solid var(--line)}
.prose code{background:var(--bg);padding:.1rem .3rem;border-radius:4px;font-size:.9em}
.prose pre code{background:none;padding:0}
.prose table{margin:.6rem 0}
.prose th,.prose td{border:1px solid var(--line)}
.prose blockquote{margin:.6rem 0;padding:.2rem 0 .2rem .9rem;border-left:3px solid var(--line);
  color:var(--muted)}

/* links in de tekst: duidelijk zichtbaar zonder de zin te breken */
.prose a{color:var(--accent);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);
  text-decoration-thickness:1px;text-underline-offset:2px;
  border-radius:3px;padding:0 1px;
  /* een lange URL mag afbreken in plaats van de pagina te verbreden */
  overflow-wrap:anywhere}
.prose a:hover,.prose a:focus-visible{
  text-decoration-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* externe link krijgt een pijltje, zodat je ziet dat je de site verlaat */
.prose a.ext::after{content:"↗";font-size:.78em;margin-left:.15em;
  vertical-align:.15em;opacity:.65;text-decoration:none;display:inline-block}
.prose a.int{text-decoration-style:solid}
.prose a.mail::after{content:"✉";font-size:.8em;margin-left:.2em;opacity:.65}
/* geen pijltje op een link die alleen een afbeelding omsluit */
.prose a:has(> img)::after{content:none}
.prose a img{vertical-align:middle}

/* taalwisselaar */
.langswitch{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;font-size:.78rem}
.langswitch a,.langswitch .on{padding:.2rem .45rem;line-height:1.4}
.langswitch .on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.langswitch a{color:var(--muted)}
.langswitch a:hover{background:var(--bg);text-decoration:none;color:var(--ink)}
.barelang{display:flex;justify-content:flex-end;margin-bottom:.6rem}
.langtag{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:0 .3rem;
  font-size:.68rem;color:var(--muted);margin-left:.35rem;vertical-align:middle}
.mtnote{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:.45rem .7rem;color:var(--muted);font-size:.85rem;
  margin:.2rem 0 .8rem}
.mtbadge{display:inline-block;background:var(--accent);color:var(--accent-ink);border-radius:4px;
  padding:0 .35rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  margin-right:.35rem;vertical-align:1px}
.mtdot{font-size:.62rem;border:1px solid var(--accent);color:var(--accent);border-radius:3px;
  padding:0 .2rem;vertical-align:2px;letter-spacing:.03em}
.fallbacknote{background:var(--bg);border:1px dashed var(--line);border-radius:var(--radius);
  padding:.45rem .7rem;color:var(--muted);font-size:.85rem;margin:.2rem 0 .8rem}

/* taaltabbladen in formulieren */
.tabs{display:flex;gap:.3rem;margin:.2rem 0 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{background:none;border:1px solid transparent;border-bottom:0;cursor:pointer;
  padding:.4rem .8rem;color:var(--muted);border-radius:var(--radius) var(--radius) 0 0;
  font-size:.9rem}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--panel);border-color:var(--line);color:var(--ink);font-weight:600;
  margin-bottom:-1px}
.tab .dot{color:var(--danger);font-size:1.1em;line-height:0}
.tabpane{display:none;border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);padding:.9rem;background:var(--panel);
  margin-bottom:.9rem}
.tabpane.on{display:block}
.tabpane label:last-child{margin-bottom:0}

/* markdown-knoppenbalk */
.editor{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bg);margin-top:.25rem}
.toolbar{display:flex;gap:.2rem;flex-wrap:wrap;padding:.35rem;background:var(--panel);
  border-bottom:1px solid var(--line)}
.toolbar button{background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;
  padding:.25rem .5rem;color:var(--ink);font-size:.85rem;min-width:30px}
.toolbar button:hover{background:var(--bg);border-color:var(--line)}
.toolbar button.strong{color:var(--accent);font-weight:600}
.editor textarea{display:block;width:100%;border:0;margin:0;border-radius:0;
  background:var(--bg);color:var(--ink)}
.editor textarea:focus{outline:2px solid var(--accent);outline-offset:-2px}
.checkline{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.checkline input{width:auto;display:inline;margin:0}

/* linkvenster */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;
  padding:1rem;z-index:50}
.modal[hidden]{display:none}
.modalbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem;width:min(480px,100%);box-shadow:0 10px 40px rgba(0,0,0,.3)}
.modalbox h2{margin-top:0}
.modalbox label{display:block;margin-bottom:.8rem}
.modalbox input,.modalbox select{display:block;width:100%;margin-top:.25rem;padding:.5rem .65rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  color:var(--ink);font:inherit}

.foot{padding:1rem;text-align:center;color:var(--muted);font-size:.8rem}

@media (max-width:820px){
  .layout{flex-direction:column}
  .sidebar{width:100%;flex:auto;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .content{padding:1rem}
}