:root{--rand:#d5d2cb;--bg:#faf9f7;--accent:#4a6fa5;--waarschuw:#a5624a;--god:#2563eb;--papier:#fff}
 *{box-sizing:border-box}
 body{margin:0;font:15px/1.5 system-ui,sans-serif;background:var(--bg);color:#232323;
      height:100vh;display:flex;flex-direction:column;overflow:hidden}
 header{display:flex;gap:1.2rem;align-items:center;padding:.55rem 1rem;
        border-bottom:1px solid var(--rand);background:#fff;flex:0 0 auto}
 header h1{font-size:1rem;margin:0;font-weight:600}
 header .klein{margin-left:auto}
 nav button{background:none;border:none;font:inherit;cursor:pointer;padding:.25rem .2rem;
            border-bottom:2px solid transparent;color:#555}
 nav button.actief{border-color:var(--accent);color:#000}
 main{flex:1 1 auto;display:grid;min-height:0;gap:0;
   grid-template-columns:var(--chatbreedte,380px) 6px minmax(0,1fr) 6px var(--pdfbreedte,460px)}
 main.zonderpdf{grid-template-columns:var(--chatbreedte,380px) 6px minmax(0,1fr) 0 0}
 main.zonderpdf #splitser2,main.zonderpdf #kolomPdf{display:none}
 #kolomPdf iframe{width:100%;height:100%;border:none;display:block;background:#fff}
 #foutPaneel h3{font-size:.95rem;margin:0 0 .2rem;color:var(--waarschuw)}
 #foutPaneel .vakjenaam{font-weight:600;margin-bottom:.8rem}
 #foutPaneel .tip{background:#fdf6f3;border-left:3px solid var(--waarschuw);
   padding:.6rem .7rem;border-radius:0 4px 4px 0;margin-bottom:.9rem;font-size:.88rem}
 #foutPaneel .uitleg{margin-bottom:.9rem;font-size:.9rem}
 #foutPaneel pre{background:#f4f2ee;border:1px solid var(--rand);border-radius:5px;
   padding:.5rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
   white-space:pre-wrap;overflow-x:auto}
 @media(max-width:1100px){main{grid-template-columns:1fr}
   .splitser{display:none}#kolomPdf{display:none}}
 .splitser{cursor:col-resize;background:var(--rand);position:relative}
 .splitser:hover,.splitser.bezig{background:var(--accent)}
 .splitser::after{content:"";position:absolute;inset:0 -4px}   /* ruimere greep */
 /* zie sleep() in app.js: de iframe mag tijdens het slepen niets opvangen */
 body.sleept{user-select:none;cursor:col-resize}
 body.sleept iframe{pointer-events:none}
 .kolom{min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--rand)}
 .kolom:last-child{border-right:none}
 .kolomkop{padding:.4rem .8rem;font-size:.72rem;text-transform:uppercase;
   letter-spacing:.06em;color:#666;background:#f2f0ec;border-bottom:1px solid var(--rand);
   display:flex;justify-content:space-between;align-items:center;flex:0 0 auto;
   gap:.4rem;flex-wrap:wrap}
 .kolom{min-width:0}
 .kolomkop button{background:#e8e5e0;border:none;border-radius:3px;font:inherit;
   font-size:.7rem;padding:.15rem .45rem;cursor:pointer;text-transform:none}
 .schakelaar{font-size:.7rem;text-transform:none;color:#555;margin-right:.5rem;
   cursor:pointer;user-select:none}
 .schakelaar input{vertical-align:-1px;margin-right:.15rem}
 .rol{flex:1 1 auto;overflow:auto;padding:.8rem}

 /* ---------- chat ---------- */
 .bericht{margin-bottom:.9rem;font-size:.9rem}
 .bericht .van{font-size:.7rem;color:#888;margin-bottom:.15rem}
 .berichtknop{background:none;border:none;padding:0;margin-left:.5rem;font:inherit;
   font-size:.7rem;color:#aaa;cursor:pointer;text-decoration:underline dotted}
 .berichtknop:hover{color:var(--accent)}
 .bericht.gebruiker .bel{background:#eef2f8;border-radius:8px;padding:.45rem .6rem}
 .bericht.assistent .bel{background:transparent;padding:0}
 .bel p{margin:.35rem 0;white-space:pre-wrap}
 pre.code{background:#f4f2ee;border:1px solid var(--rand);border-radius:5px;
   padding:.5rem;margin:.4rem 0;font-family:ui-monospace,Menlo,Consolas,monospace;
   font-size:12px;white-space:pre-wrap;overflow-x:auto}
 .cursor{display:inline-block;width:.5em;height:1em;background:var(--accent);
   vertical-align:-2px;margin-left:2px;animation:knipper 1s steps(2) infinite}
 @keyframes knipper{50%{opacity:0}}
 .codeknoppen{display:flex;gap:.35rem;margin:-.2rem 0 .6rem}
 .codeknoppen button{background:#e8e5e0;border:none;border-radius:3px;font:inherit;
   font-size:.72rem;padding:.15rem .5rem;cursor:pointer}
 details.redenatie{margin:.2rem 0 .5rem;font-size:.8rem;color:#666}
 details.redenatie summary{cursor:pointer;color:#888;list-style:none}
 details.redenatie summary::before{content:"+ ";font-weight:700}
 details.redenatie[open] summary::before{content:"− "}
 details.redenatie div{white-space:pre-wrap;background:#f7f5f2;border-radius:5px;
   padding:.4rem;margin-top:.3rem;max-height:16rem;overflow:auto}
 .chatinvoer{flex:0 0 auto;height:var(--invoerhoogte,150px);border-top:1px solid var(--rand);
   padding:0 .6rem .6rem;background:#fff;display:flex;flex-direction:column;min-height:80px}
 .chatinvoer textarea{flex:1 1 auto;width:100%;border:1px solid var(--rand);border-radius:5px;
   padding:.45rem;font:inherit;font-size:.9rem;resize:none;min-height:2rem}
 .greep{height:10px;margin:0 -.6rem;cursor:row-resize;flex:0 0 auto;
   display:flex;align-items:center;justify-content:center}
 .greep::before{content:"";width:40px;height:3px;border-radius:2px;background:var(--rand)}
 .greep:hover::before,.greep.bezig::before{background:var(--accent)}
 .doelwit{font-size:.72rem;color:var(--accent);margin-bottom:.3rem}

 /* ---------- wysiwyg ---------- */
 .blad{background:var(--papier);border:1px solid var(--rand);border-radius:6px;
   padding:1.2rem 1.4rem;max-width:900px;margin:0 auto}
 .kopblok{display:flex;gap:1rem;align-items:center;border-bottom:2px solid #333;
   padding-bottom:.5rem;margin-bottom:1rem;cursor:pointer}
 .kopblok.gecentreerd{flex-direction:column-reverse;text-align:center}
 .kopblok .tekst{flex:2}.kopblok .logo{flex:1;text-align:right}
 .kopblok img{max-width:100%;max-height:52px}
 .koptitel{font-size:1.1rem;font-weight:700}
 .kopsub{font-size:.85rem;font-weight:600}.kopnorm{font-size:.75rem;color:#555}
 .kopblok.actief,.vak.actief{outline:2px solid var(--accent);outline-offset:2px}
 .opgave{margin:0 0 1.4rem}
 .opgavekop{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
 .blokje{display:inline-block;width:42px;height:15px;background:#000}
 .opgavenaam{font-size:1.05rem;font-weight:700}
 .gereedschap{margin-left:auto;display:flex;gap:.3rem;align-items:center}
 .gereedschap select{font-size:.7rem;padding:.1rem;border:1px solid var(--rand);
   border-radius:3px;background:#fff}
 .gereedschap span{cursor:pointer;color:#888;font-size:.85rem}
 .vak{padding:.25rem .4rem;border:1px dashed transparent;border-radius:4px;cursor:pointer}
 .vak:hover{border-color:var(--rand);background:#fbfaf8}
 .vak.leeg{color:#aaa;font-style:italic}
 .inleiding{margin-left:1.4cm}
 .vraagrij{display:flex;gap:.5rem;align-items:baseline}
 .marge{flex:0 0 auto;font-size:11px;white-space:nowrap;min-width:68px}
 .marge b{font-weight:700}
 .vraaginhoud{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
 .raster{display:grid;gap:.5rem 1rem;grid-auto-flow:column}
 .figuurvak{border:1px dashed var(--rand);border-radius:4px;padding:.5rem;
   font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#555}
 .plus{background:none;border:1px dashed var(--rand);border-radius:4px;color:#666;
   font:inherit;font-size:.8rem;padding:.2rem .6rem;cursor:pointer;margin:.3rem .3rem 0 0}
 .plus:hover{border-color:var(--accent);color:var(--accent)}
 .vak.bewerkt{background:#f7f5f2;border-color:var(--accent);cursor:default;padding:.4rem}
 .vak.bewerkt textarea{width:100%;border:1px solid var(--rand);border-radius:4px;padding:.4rem;
   font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;resize:vertical}
 .bewerker{margin:.4rem 0;padding:.5rem;background:#f7f5f2;border-radius:5px}
 .bewerker textarea{width:100%;border:1px solid var(--rand);border-radius:4px;padding:.4rem;
   font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;resize:vertical}
 .bewerker .rij,.vak.bewerkt .rij{display:flex;gap:.5rem;margin-top:.4rem}
 .bewerker .rij input,.bewerker .rij select,
 .vak.bewerkt .rij input,.vak.bewerkt .rij select{width:auto;flex:1;padding:.25rem;
   border:1px solid var(--rand);border-radius:4px;font:inherit;font-size:.8rem}
 .waarschuwing{color:var(--waarschuw);font-size:.78rem;white-space:pre-wrap;margin-top:.3rem}
 .waarschuwknop{background:none;border:none;padding:0;margin:0;font:inherit;
   color:inherit;text-align:left;cursor:pointer;text-decoration:underline dotted}
 .waarschuwknop:hover{text-decoration:underline}
 #verlengersBalk .balk{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
   padding:.5rem .7rem;border-radius:5px;font-size:.82rem}
 #verlengersBalk .open{background:#fdf6f3;border:1px solid var(--waarschuw)}
 #verlengersBalk .klaar{background:#f2f0ec;border:1px solid var(--rand);color:#555}
 #verlengersBalk label{margin:0;font-size:.82rem;color:inherit;cursor:pointer}
 #verlengersBalk input[type=checkbox]{width:auto;vertical-align:-1px;margin-right:.2rem}
 .vak .vmerk{font-size:.68rem;color:var(--waarschuw);font-weight:600}
 .cvmerk{font-size:.66rem;color:#4a7a58;font-weight:600}
 .cvmerk.leeg{color:#bbb;font-weight:400}
 .cvmerk.scheef{color:var(--waarschuw)}
 .plus.cv{border-style:solid;border-color:#c6cfd9;color:#4a6fa5}
 .uitwerking{margin:.1rem 0 .6rem 1.5cm;padding:.35rem .4rem;background:#f7f5f2;
   border-left:2px solid #dcd8d1;border-radius:0 4px 4px 0}
 .staprij{display:flex;gap:.3rem;margin-bottom:.25rem;align-items:center}
 .staprij input{border:1px solid var(--rand);border-radius:3px;padding:.15rem .3rem;
   font:inherit;font-size:12.5px;font-family:ui-monospace,Menlo,Consolas,monospace}
 .staprij input[type=number]{width:3.4rem;flex:0 0 auto;text-align:right}
 .staprij input[type=text]{flex:1;min-width:0}
 .staprij button{background:#e8e5e0;border:none;border-radius:3px;font:inherit;
   font-size:.7rem;padding:.1rem .4rem;cursor:pointer;flex:0 0 auto}
 .staprij .plus{margin:0}

 /* ---------- instellingen ---------- */
 .paneel{padding:1.2rem;max-width:640px}
 .paneel label{display:block;font-size:.8rem;color:#555;margin:.6rem 0 .15rem}
 .paneel input,.paneel select,.paneel textarea{width:100%;padding:.4rem .5rem;
   border:1px solid var(--rand);border-radius:4px;font:inherit;background:#fff}
 #sPreamble,#sPromptExtra{font-family:ui-monospace,Menlo,Consolas,monospace;
   font-size:12.5px;resize:vertical}
 button.knop{background:var(--accent);color:#fff;border:none;border-radius:4px;
   padding:.4rem .75rem;font:inherit;font-size:.85rem;cursor:pointer;margin:.5rem .4rem 0 0}
 button.knop.grijs{background:#e8e5e0;color:#333}
 .status{font-size:.8rem;margin-top:.5rem;white-space:pre-wrap}
 iframe{width:100%;height:100%;border:none;background:#fff}
 .verborgen{display:none !important}   /* wint van id-selectors die display zetten */
 /* ---------- instellingen als zijbalk ---------- */
 /* Geen apart scherm meer: zo blijft de toets zichtbaar terwijl je aan de
    ruimtes draait. Onder #dialoog (z-index 20), zodat een vraag erbovenop komt. */
 .zijbalk{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:15;
   background:var(--bg);border-left:1px solid var(--rand);
   box-shadow:-8px 0 24px rgba(0,0,0,.10);display:flex;flex-direction:column;
   transform:translateX(100%);transition:transform .18s ease-out}
 /* Twee secties in één paneel: de open sectie krijgt de ruimte en scrolt zelf.
    Bestanden gebruik je in stoten, instellingen houd je open terwijl je meekijkt
    -- vaste helften zouden allebei tekortdoen. */
 .sectie{display:flex;flex-direction:column;min-height:0;border-bottom:1px solid var(--rand)}
 .sectie.open{flex:1 1 auto}
 .sectiekop{display:flex;justify-content:space-between;align-items:center;width:100%;
   background:none;border:none;font:inherit;font-size:.78rem;font-weight:600;
   padding:.5rem .8rem;cursor:pointer;color:#444;text-align:left}
 .sectiekop:hover{color:var(--accent)}
 .sectie .pijl{transition:transform .15s;display:inline-block;color:#999}
 .sectie:not(.open) .pijl{transform:rotate(180deg)}
 .sectie:not(.open) .sectierol{display:none}
 .sectierol{overflow:auto;min-height:0}
 .boom{padding:0 .4rem .6rem}
 /* Het inlogscherm ligt over alles heen: zonder sessie is er niets te zien en
    niets te doen, en de server weigert elk verzoek toch al. */
 .inlogscherm{position:fixed;inset:0;z-index:50;background:#f2f0ec;
   display:flex;align-items:center;justify-content:center}
 .inlogvak{background:#fff;border:1px solid var(--rand);border-radius:8px;
   padding:1.4rem 1.6rem;width:min(22rem,92vw);display:flex;flex-direction:column;
   gap:.5rem;box-shadow:0 2px 12px rgba(0,0,0,.08)}
 .inlogvak h2{margin:0 0 .4rem;font-size:1.05rem}
 .inlogvak label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:#555}
 .inlogvak input{padding:.4rem .5rem;border:1px solid var(--rand);border-radius:4px}
 .boomlade{margin-bottom:.1rem}
 .ladekop{display:flex;gap:.35rem;align-items:baseline;padding:.3rem .45rem;cursor:pointer;
          border-radius:5px;user-select:none}
 .ladekop:hover{background:#fff}
 .ladekop b{font-size:.8rem;font-weight:600;color:#555}
 .ladekop .klein{font-size:.68rem;color:#aaa;margin-left:auto}
 .ladepijl{font-size:.6rem;color:#999;width:.7rem;flex:none}
 .ladeinhoud{padding-left:.5rem;border-left:1px solid var(--rand);margin-left:.55rem}
 .boomlade.dicht .ladeinhoud{display:none}
 .boomtoets{border:1px solid transparent;border-radius:5px;margin-bottom:.1rem}
 .boomtoets:hover{border-color:var(--rand);background:#fff}
 .boomtoets.open{border-color:var(--accent);background:#fff}
 .boomtoets.open .boomkop b{color:var(--accent)}
 .toetspunt{font-size:.6rem;color:#bbb;width:.7rem;flex:none}
 .boomtoets.open .toetspunt{color:var(--accent)}
 .boomactie{border:0;background:none;cursor:pointer;color:#bbb;font-size:.72rem;
            padding:0 .15rem;line-height:1}
 .boomactie:hover{color:var(--accent)}
 .boomkop .boomactie{align-self:center}
 .sleepdoel{outline:2px dashed var(--accent);outline-offset:-2px;background:#eef2f8}
 .boomkop{display:flex;gap:.35rem;align-items:baseline;padding:.3rem .45rem;cursor:pointer}
 .boomkop b{font-size:.82rem;font-weight:600}
 .boomkop .klein{font-size:.68rem;color:#888;margin-left:auto;white-space:nowrap}
 .boombestanden{padding:0 .5rem .4rem 1.55rem;display:flex;flex-direction:column;gap:.1rem}
 .boombestand{font-size:.74rem;color:var(--accent);cursor:pointer;text-decoration:none;
   padding:.1rem .2rem;border-radius:3px}
 .boombestand:hover{background:#eef2f8;text-decoration:underline}
 .zijbalk.open{transform:translateX(0)}
 @media(prefers-reduced-motion:reduce){.zijbalk{transition:none}}
 .zijbalkkop{position:sticky;top:0;z-index:1;background:#f2f0ec;
   border-bottom:1px solid var(--rand);padding:.4rem .8rem;display:flex;
   justify-content:space-between;align-items:center;font-size:.72rem;
   text-transform:uppercase;letter-spacing:.06em;color:#666}
 .zijbalkkop button{background:none;border:none;font:inherit;font-size:1.1rem;
   line-height:1;color:#666;cursor:pointer;padding:0 .2rem}
 .zijbalkkop button:hover{color:var(--accent)}
 .zijbalk .paneel{max-width:none}
 /* ---------- godmode: doel aanwijzen ---------- */
 /* De cirkeltjes staan in een marge links van het blad. Ze zetten alleen het
    doel en openen géén bewerker: dat is precies waarvoor ze bestaan, want een
    vakje aanklikken doet dat wel. */
 .blad{position:relative}
 .godcirkel{position:absolute;left:-1.45rem;width:.85rem;height:.85rem;margin-top:.15rem;
   border:2px solid var(--rand);border-radius:50%;background:var(--papier);
   cursor:pointer;z-index:2}
 .godcirkel:hover{border-color:var(--god)}
 .godcirkel.aan{border-color:var(--god);background:var(--god);
   box-shadow:0 0 0 3px color-mix(in srgb, var(--god) 25%, transparent)}
 .godrij{position:relative}
 .doel{outline:2px solid var(--god);outline-offset:3px;border-radius:4px}
 .godbalk{display:flex;gap:.4rem;align-items:center;padding:.3rem .5rem;
   border-top:1px solid var(--rand);background:#f4f7fb}
 .godbalk input{flex:1;font-size:.8rem;padding:.25rem .4rem;
   border:1px solid var(--rand);border-radius:4px}
 .goddoel{font-size:.7rem;color:var(--god);white-space:nowrap;font-weight:700}
 .godstatus{font-size:.75rem;color:var(--god);max-width:900px;margin:.4rem auto}
 #dialoog{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;
   align-items:center;justify-content:center;z-index:20}
 #dialoog .doos{background:#fff;border-radius:8px;padding:1.3rem;max-width:30rem;
   box-shadow:0 8px 30px rgba(0,0,0,.2)}
 #dialoog h3{margin:0 0 .6rem;font-size:1rem}
 #dialoog #dialoogTekst{font-size:.9rem;color:#444}
 #dialoog #dialoogKnoppen{margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
 .bestandenlijst{max-height:22rem;overflow:auto;margin:-.2rem -.3rem}
 .bestand{padding:.45rem .5rem;border-radius:5px;cursor:pointer;border:1px solid transparent}
 .bestand:hover{background:#eef2f8;border-color:var(--accent)}
 .bestand .klein{font-size:.72rem;color:#888;margin-left:.3rem}

/* ---------- ruimte tussen opgaven, zichtbaar en bedienbaar ---------- */
.tussenstrip{display:flex;align-items:center;gap:.5rem;margin:.2rem 0;
  font-size:.7rem;color:#aaa;opacity:.55;transition:opacity .15s}
.tussenstrip:hover{opacity:1}
.tussenstrip .lijn{flex:1;border-top:1px dashed var(--rand)}
.tussenstrip input{width:3.4rem;padding:.05rem .2rem;font-size:.7rem;
  border:1px solid var(--rand);border-radius:3px;background:#fff}
.tussenstrip button{background:none;border:1px solid var(--rand);border-radius:3px;
  color:#888;font:inherit;font-size:.68rem;padding:.05rem .35rem;cursor:pointer}
.tussenstrip button:hover{border-color:var(--accent);color:var(--accent)}
.tussenstrip button.aan{background:var(--accent);color:#fff;border-color:var(--accent)}
.tussenstrip.cvpagina{opacity:1}
.tussenstrip.cvpagina .lijn{border-top:2px dashed var(--accent)}
.tussenstrip.pagina{opacity:1;color:var(--accent)}
.tussenstrip.pagina .lijn{border-top:2px solid var(--accent)}
.tussenstrip.pagina button.aan{background:var(--accent);color:#fff;border-color:var(--accent)}