:root{--creme: #f4f1e9;--ink: #211e19;--ink-zacht: #1f2633;--teal: #1b8a7a;--groen: #2f5a41;--goud: #ffc857;--amber: #e8b94a;--terracotta: #b6452c;--rood: #bc4126;--navy: #1b2a4a;--wit: #fffdf8;--schaduw: 0 4px 12px rgba(0, 0, 0, .12);--schaduw-diep: 0 8px 22px rgba(0, 0, 0, .18);--tegel-bg: var(--creme);--tegel-accent: var(--teal);--tegel-answer: var(--goud)}*{box-sizing:border-box}body{margin:0;background:var(--creme);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.app-header{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:var(--wit);border-bottom:3px solid var(--tegel-accent);box-shadow:var(--schaduw)}.app-header h1{margin:0;font-size:1.25rem;color:var(--teal)}.app-header .gebruiker{margin-left:auto;display:flex;align-items:center;gap:.75rem;font-size:.9rem}main{max-width:960px;margin:0 auto;padding:1.5rem 1rem 4rem}.scherm-melding{text-align:center;padding:4rem 1rem;font-size:1.1rem}.knop,.primair,.secundair{border-radius:8px;padding:.5rem 1.1rem;border:1px solid transparent}.primair{background:var(--teal);color:var(--wit);border:none;font-weight:600}.primair:hover:not(:disabled){background:var(--groen)}.secundair{background:transparent;color:var(--ink);border:1px solid rgba(33,30,25,.35)}.tegel-rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}.tegel{display:flex;flex-direction:column;text-align:left;padding:0;border:none;border-radius:12px;overflow:hidden;background:var(--wit);box-shadow:var(--schaduw);transition:box-shadow .15s ease,transform .15s ease}.tegel:hover:not(:disabled),.tegel:focus-visible{box-shadow:var(--schaduw-diep);transform:translateY(-2px)}.tegel:disabled{opacity:.65}.tegel .thumbnail,.tegel .paletkaart{height:120px;width:100%;object-fit:cover}.paletkaart{display:flex;flex-direction:column;justify-content:flex-end;padding:.75rem;background:var(--tegel-bg);border-bottom:6px solid var(--tegel-accent)}.paletkaart .paletkaart-titel{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.4rem}.paletkaart .paletkaart-accent{width:42px;height:8px;border-radius:4px;background:var(--tegel-answer);margin-bottom:.4rem}.tegel-body{padding:.75rem 1rem 1rem;display:flex;flex-direction:column;gap:.4rem}.tegel-titel{font-weight:700}.tegel-omschrijving{font-size:.85rem;color:#211e19bf}.tegel-labels{display:flex;align-items:center;gap:.5rem;margin-top:.25rem;font-size:.8rem}.chip{border-radius:999px;padding:.1rem .65rem;font-weight:600}.chip.oefening{background:#1b8a7a26;color:var(--groen)}.chip.toets{background:#b6452c26;color:var(--terracotta)}.chip.cursus{background:#1b2a4a1f;color:var(--navy)}.tegel-type-icoon{display:inline-flex;color:#211e1999}.vrij-oefenen-label{font-size:.75rem;color:#211e1999}.sessie{background:var(--tegel-bg);border-radius:12px;padding:1.25rem;box-shadow:var(--schaduw)}.sessie-kop{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}.sessie-kop .score{font-weight:600;color:var(--groen)}.sessie-kop .spacer{margin-left:auto}.progressbalk{display:flex;gap:4px;margin:.75rem 0 1.25rem}.segment{flex:1;height:10px;border-radius:5px;background:transparent;border:1px solid rgba(33,30,25,.25)}.segment.juist{background:var(--groen);border-color:var(--groen)}.segment.fout{background:var(--rood);border-color:var(--rood)}.segment.beantwoord{background:#c8c2b4;border-color:#c8c2b4}.oefening{background:var(--wit);border-radius:10px;border-top:5px solid var(--tegel-accent);padding:1.25rem;box-shadow:var(--schaduw)}.oefening h2{margin-top:0;font-size:1.15rem}.oefening .vraag-meta{font-size:.8rem;color:#211e1999}.oefening img{max-width:100%;border-radius:8px}.clue-banner{background:#ffc8574d;border-left:4px solid var(--amber);padding:.5rem .75rem;border-radius:6px;font-size:.9rem}.acties{margin-top:1.25rem;display:flex;gap:.75rem}.invulveld{position:relative;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;padding:.75rem 0;cursor:text}.woord{display:inline-flex;flex-direction:column;gap:.25rem}.vakjes{display:inline-flex;gap:3px}.vakje{width:1.7em;height:2em;display:inline-flex;align-items:center;justify-content:center;border:2px solid rgba(33,30,25,.35);border-radius:5px;background:var(--wit);font-size:1.05rem;font-weight:600;text-transform:none}.hint-letter{color:var(--tegel-accent);opacity:.8}.hint-knop{align-self:flex-start;font-size:.7rem;border:1px solid rgba(33,30,25,.3);background:transparent;border-radius:999px;padding:0 .5rem;color:#211e19b3}.hint-cap-nota{margin:.5rem 0 0;font-size:.85rem;color:var(--terracotta);background:#ffc85733;border-radius:6px;padding:.35rem .6rem;display:inline-block}.woordenbank{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}.woordenbank button{border:1px dashed var(--tegel-accent);background:#1b8a7a0f;border-radius:999px;padding:.2rem .8rem}.verborgen-invoer{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;border:none;width:100%}.anti-afkijk .invoer-teken,.anti-afkijk textarea,.anti-afkijk .verborgen-invoer{opacity:.55;font-size:.85em}.masker{font-size:1.4rem;letter-spacing:.35em;color:#211e19b3}.keuzelijst{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0}.keuzelijst label{display:flex;align-items:center;gap:.6rem;background:#211e190a;border-radius:8px;padding:.55rem .8rem}.matching-rij{display:flex;align-items:center;gap:.75rem;margin:.4rem 0}.matching-rij select{font:inherit;padding:.3rem .5rem;border-radius:6px}.sleep-items,.sleep-zones{display:flex;flex-wrap:wrap;gap:.6rem;margin:.75rem 0}.sleep-item{border:2px solid var(--tegel-accent);background:var(--wit);border-radius:8px;padding:.4rem .9rem;font-weight:600;touch-action:none}.sleep-item[aria-pressed=true]{background:var(--tegel-answer)}.sleep-zone{min-width:140px;border:2px dashed rgba(33,30,25,.35);border-radius:8px;padding:.5rem .75rem;background:#211e1908;cursor:pointer}.sleep-zone.over{border-color:var(--tegel-accent);background:#1b8a7a14}.sleep-zone .slot-label{display:block;font-size:.75rem;color:#211e1999}.sleep-zone .slot-item{font-weight:700}textarea.open-antwoord{width:100%;min-height:7rem;font:inherit;padding:.6rem;border-radius:8px;border:1px solid rgba(33,30,25,.35)}.feedback{margin-top:1rem;border-radius:10px;padding:1rem 1.25rem;box-shadow:var(--schaduw)}.feedback.juist{background:#2f5a411f;border-left:5px solid var(--groen)}.feedback.fout{background:#bc41261a;border-left:5px solid var(--rood)}.popups{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.75rem;z-index:50;max-width:320px}.popup{background:var(--wit);border-left:5px solid var(--goud);border-radius:10px;padding:.75rem 1rem;box-shadow:var(--schaduw-diep)}.popup p{margin:.25rem 0 .5rem}.dialoog-achtergrond{position:fixed;top:0;right:0;bottom:0;left:0;background:#211e1973;display:flex;align-items:center;justify-content:center;z-index:100}.dialoog{background:var(--wit);border-radius:12px;padding:1.25rem 1.5rem;max-width:420px;box-shadow:var(--schaduw-diep)}.dialoog .acties{margin-top:1rem}.duo-lijst{display:flex;flex-direction:column;gap:.35rem;max-height:40vh;overflow-y:auto;margin:.75rem 0}.bericht-vak{margin-top:1rem;background:var(--wit);border-radius:10px;padding:.75rem 1rem;box-shadow:var(--schaduw)}.bericht-vak textarea{width:100%;font:inherit;min-height:3.5rem;border-radius:8px;border:1px solid rgba(33,30,25,.35);padding:.5rem}.eindscherm{text-align:center;padding:1rem 0}