:root{--tg:#2D5F3F;--tgd:#1F3F2A;--tow:#8A3B43;--towh:#732f37;--gold:#C9A961;--tcr:#F5E6D0;--tpa:#F9F2E5;--ink:#1A1A1A;--grey:#5d5d5d}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--tpa);line-height:1.5}
header{background:#fff;color:var(--tgd);border-bottom:3px solid var(--gold);padding:.6rem 1.2rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between}
header a.brand{display:flex;align-items:center;gap:.7rem;font-family:Rokkitt,serif;font-weight:800;font-size:1.2rem;color:var(--tgd);text-decoration:none}
header a.brand img{height:52px;width:auto;display:block}
header a.brand span{border-left:1px solid var(--gold);padding-left:.7rem}
@media (max-width:520px){header a.brand span{display:none}header a.brand img{height:42px}}
header nav a{color:var(--tgd);font-weight:500;margin-right:1rem;text-decoration:none;font-size:.95rem}
header select{padding:.35rem;border-radius:6px;border:1px solid var(--gold);background:var(--tpa)}
main{max-width:960px;margin:0 auto;padding:1.5rem 1.2rem 3rem}
h1{font-family:"Playfair Display",Georgia,serif;color:var(--tgd);margin:.2rem 0 .3rem}
.flag{width:120px;height:5px;border-radius:3px;background:linear-gradient(90deg,#008C45 33%,#fff 33% 66%,#CD212A 66%);margin-bottom:1.2rem}
.card{background:#fff;border:1px solid var(--tcr);border-left:4px solid var(--gold);border-radius:8px;padding:1rem 1.2rem;margin-bottom:.8rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between}
.card h2{font-family:"Playfair Display",Georgia,serif;font-size:1.15rem;margin:0;color:var(--tgd)}
.meta{color:var(--grey);font-size:.85rem}
.btn{display:inline-block;background:var(--tow);color:#fff;border:0;border-radius:6px;padding:.5rem 1rem;text-decoration:none;font-size:.95rem;cursor:pointer}
.btn:hover{background:var(--towh)} .btn.ghost{background:transparent;color:var(--tow);border:1px solid var(--tow)}
.pill{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.8rem;font-weight:600}
.pill.todo{background:#eee;color:var(--grey)} .pill.busy{background:var(--tcr);color:#6b4e16}
.pill.done{background:#dcebe1;color:var(--tgd)} .pill.fail{background:#f3dfe1;color:var(--tow)}
.panel{background:var(--tcr);border-radius:8px;padding:1rem 1.2rem;margin-top:1.5rem}
.flash{padding:.6rem 1rem;border-radius:6px;margin-bottom:1rem} .flash.ok{background:#dcebe1} .flash.error{background:#f3dfe1}
table{width:100%;border-collapse:collapse;background:#fff} th,td{padding:.5rem .6rem;border-bottom:1px solid var(--tcr);text-align:left;font-size:.9rem}
.scroll{overflow-x:auto}
.player{position:fixed;inset:0;display:flex;flex-direction:column;background:#fff}
.player .bar{background:var(--tgd);color:#FBE7C8;padding:.5rem 1rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.player .bar a{color:#FBE7C8} .player iframe{flex:1;border:0;width:100%}
#log{font-family:ui-monospace,monospace;font-size:.75rem;max-height:6rem;overflow:auto;background:#111;color:#b8e0c4;padding:.3rem .6rem;display:none}
#log.show{display:block}
/* --- leeromgeving --- */
header .who{display:flex;gap:.6rem;align-items:center;font-size:.9rem}
header .who a{color:var(--tow)}
header form{margin:0} .linkbtn{background:none;border:0;color:var(--tgd);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
label{display:block;margin:.6rem 0 .2rem;font-weight:500;font-size:.9rem}
input[type=text],input[type=email],input[type=password],textarea,select.f{width:100%;padding:.55rem .7rem;border:1px solid #d8cbb4;border-radius:6px;font:inherit;background:#fff}
textarea{min-height:5rem}
.narrow{max-width:420px;margin:2rem auto}
.box{background:#fff;border:1px solid var(--tcr);border-radius:8px;padding:1.2rem 1.4rem;margin-bottom:1rem}
.box h2,.box h3{font-family:"Playfair Display",Georgia,serif;color:var(--tgd);margin:.1rem 0 .6rem}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.row > *{margin:0}
.inline{display:inline} .small{font-size:.85rem}
.btn.sm{padding:.3rem .6rem;font-size:.8rem}
.progress{height:8px;background:var(--tcr);border-radius:4px;overflow:hidden;margin:.4rem 0}
.progress span{display:block;height:100%;background:var(--tg)}
.chapter{margin-bottom:1.2rem}
.chapter h3{font-family:"Playfair Display",Georgia,serif;color:var(--tgd);margin:.2rem 0 .4rem}
.lesson{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem .8rem;background:#fff;border:1px solid var(--tcr);border-radius:6px;margin-bottom:.35rem}
.lesson a{color:var(--ink);text-decoration:none;font-weight:500}
.lesson a:hover{color:var(--tow)}
.admin-lesson{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.4rem 0;border-bottom:1px dashed var(--tcr)}
.admin-lesson .t{flex:1 1 220px}
details summary{cursor:pointer;color:var(--tow);font-size:.85rem;margin:.3rem 0}
a{color:var(--tow)}