/* Wereldklasse Studio, huisstijl afgeleid van taalklasse.nl */
:root{
  --tk-primary:#003e40; --tk-secondary:#fbff36; --tk-pink:#ffa4df; --tk-pink-dark:#c4419c;
  --tk-green:#006936; --tk-orange:#ffa350; --tk-brown:#a14e28; --tk-olive:#c1c599; --tk-cream:#ffefd9;
  --tk-bg:#ffffff; --tk-bg-soft:#f6f7f2; --tk-text:#003e40; --tk-muted:rgba(0,62,64,.62); --tk-line:rgba(0,62,64,.14);
  --tk-font-head:"Stabil Grotesk","Manrope",system-ui,sans-serif;
  --tk-font-body:"Tiempos Text","Source Serif 4",Georgia,serif;
  --tk-radius:15px; --tk-pill:9999px;
  --ok:#006936; --warn:#c77700; --bad:#b3261e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--tk-bg);color:var(--tk-text);font-family:var(--tk-font-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.head{font-family:var(--tk-font-head);font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:0}
h1{font-size:34px}h2{font-size:24px}h3{font-size:18px;font-weight:600}h4{font-size:15px;font-weight:600}
p{margin:.4em 0}
a{color:var(--tk-primary)}
button,input,select,textarea{font:inherit;color:inherit}
label{display:block;font-family:var(--tk-font-head);font-weight:600;font-size:13px;margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],select,textarea{width:100%;border:1px solid var(--tk-line);border-radius:10px;padding:10px 12px;background:#fff;font-family:var(--tk-font-body);font-size:15px}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--tk-secondary);outline-offset:1px;border-color:var(--tk-primary)}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--tk-primary);background:#fff;color:var(--tk-primary);border-radius:var(--tk-pill);padding:10px 18px 11px;font-family:var(--tk-font-head);font-weight:600;font-size:14px;letter-spacing:-.02em;cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:var(--tk-olive);border-color:var(--tk-olive)}
.btn-primary{background:var(--tk-primary);color:#fff}
.btn-primary:hover{background:var(--tk-green);border-color:var(--tk-green);color:#fff}
.btn-yellow{background:var(--tk-secondary);border-color:var(--tk-secondary);color:var(--tk-primary)}
.btn-yellow:hover{background:var(--tk-green);border-color:var(--tk-green);color:#fff}
.btn-sm{padding:6px 12px 7px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:progress}
.chip{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--tk-secondary);color:var(--tk-primary);font-size:13px}
.btn-primary .chip{background:var(--tk-secondary)}
.btn-yellow .chip{background:var(--tk-primary);color:var(--tk-secondary)}

/* login */
.login-body{min-height:100vh;display:grid;place-items:center;background:var(--tk-primary);background-image:radial-gradient(60% 50% at 80% 10%,rgba(255,164,223,.35),transparent 60%),radial-gradient(50% 40% at 10% 90%,rgba(193,197,153,.35),transparent 60%)}
.login-card{background:#fff;border-radius:var(--tk-radius);padding:36px 40px;max-width:440px;width:92vw}
.login-logo{height:26px;display:block;margin-bottom:26px}
.login-card h1 span{color:var(--tk-pink-dark)}
.lead{color:var(--tk-muted);font-style:italic}
.login-card form{margin-top:10px}
.login-card .btn{margin-top:18px;width:100%;justify-content:center}
.err{background:var(--tk-cream);color:var(--tk-brown);border-radius:10px;padding:10px 12px;font-family:var(--tk-font-head);font-weight:600;font-size:13px}
.foot{font-size:12px;color:var(--tk-muted);margin-top:22px}

/* app shell */
.topbar{display:flex;align-items:center;gap:22px;padding:14px 28px;border-bottom:1px solid var(--tk-line);position:sticky;top:0;background:#fff;z-index:5}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{height:22px}
.brand .word{font-family:var(--tk-font-head);font-weight:600;font-size:16px;letter-spacing:-.02em;padding-left:14px;border-left:1px solid var(--tk-line)}
.brand .word em{font-style:normal;color:var(--tk-pink-dark)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav button{border:1px solid var(--tk-line);background:#fff;border-radius:var(--tk-pill);padding:7px 14px 8px;font-family:var(--tk-font-head);font-weight:600;font-size:13px;cursor:pointer}
.nav button.active{background:var(--tk-primary);color:#fff;border-color:var(--tk-primary)}
.nav button:hover:not(.active){background:var(--tk-bg-soft)}
.topbar .spacer{flex:1}
.topbar .user{font-size:12px;color:var(--tk-muted)}
main{padding:26px 28px 60px;max-width:1500px;margin:0 auto}
.view{display:none}.view.active{display:block}
.grid{display:grid;grid-template-columns:380px 1fr;gap:26px;align-items:start}
@media (max-width:980px){.grid{grid-template-columns:1fr}}
.panel{border:1px solid var(--tk-line);border-radius:var(--tk-radius);padding:20px 22px;background:#fff}
.panel.soft{background:var(--tk-bg-soft);border-color:transparent}
.panel h2{margin-bottom:6px}
.sub{color:var(--tk-muted);font-size:13.5px;font-style:italic}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.pill{display:inline-block;border-radius:var(--tk-pill);padding:2px 10px 3px;font-family:var(--tk-font-head);font-weight:600;font-size:12px;background:var(--tk-bg-soft);border:1px solid var(--tk-line)}
.pill.tijd{background:#ffe3f4;border-color:transparent;color:var(--tk-pink-dark)}
.pill.ruimte{background:#e3f1e8;border-color:transparent;color:var(--tk-green)}
.pill.natuur{background:#ffe9d3;border-color:transparent;color:var(--tk-brown)}
.pill.integratie{background:#ecedd9;border-color:transparent;color:#5d6136}
.pill.groen{background:#e3f1e8;color:var(--ok);border-color:transparent}
.pill.oranje{background:#fff1d6;color:var(--warn);border-color:transparent}
.pill.rood{background:#fde2df;color:var(--bad);border-color:transparent}
.hero{border-radius:var(--tk-radius);background:var(--tk-primary);color:#fff;padding:26px 28px;margin-bottom:22px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:var(--tk-pink);opacity:.9}
.hero::before{content:"";position:absolute;right:120px;bottom:-120px;width:220px;height:220px;border-radius:50%;background:var(--tk-olive);opacity:.7}
.hero h1{color:#fff;position:relative;z-index:1}
.hero p{color:rgba(255,255,255,.75);position:relative;z-index:1;max-width:720px}
.hero .pills{position:relative;z-index:1;margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.hero .pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}

/* kerndoelen kiezer */
.kd-box{max-height:260px;overflow:auto;border:1px solid var(--tk-line);border-radius:10px;padding:8px 10px;background:#fff;font-size:13px}
.kd-box .lg{font-family:var(--tk-font-head);font-weight:700;font-size:12px;color:var(--tk-muted);margin:8px 0 4px;text-transform:none}
.kd-box label{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-family:var(--tk-font-body);font-size:13px;margin:3px 0}
.kd-box input{margin-top:3px}
.kd-box .code{font-family:var(--tk-font-head);font-weight:700;color:var(--tk-primary);min-width:34px}

/* stream */
.stream{border:1px dashed var(--tk-line);border-radius:var(--tk-radius);padding:16px 18px;background:var(--tk-bg-soft);display:none}
.stream.on{display:block}
.stream .status{display:flex;align-items:center;gap:12px;font-family:var(--tk-font-head);font-weight:600;font-size:14px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--tk-pink-dark);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
.stream pre{white-space:pre-wrap;word-break:break-word;font-size:11.5px;line-height:1.4;max-height:220px;overflow:auto;color:var(--tk-muted);margin:10px 0 0;font-family:ui-monospace,Menlo,monospace}
.err-box{background:#fde2df;color:var(--bad);border-radius:10px;padding:10px 12px;font-size:13.5px;margin-top:10px}

/* les-weergave */
.les-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.les-head .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.card{border:1px solid var(--tk-line);border-radius:var(--tk-radius);padding:16px 18px;background:#fff}
.card.wide{grid-column:1/-1}
.card h3{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.card h3 .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tk-secondary);font-size:12px}
.card ul,.card ol{margin:4px 0;padding-left:20px}
.card li{margin:3px 0}
.ed{border-radius:6px;padding:1px 4px;margin:0 -4px;transition:background .15s}
.editing .ed{background:#fffbd6;outline:1px dashed rgba(0,62,64,.25);min-height:1.4em}
.editing .ed:focus{background:#fff;outline:2px solid var(--tk-secondary)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:4px 12px;font-size:14px}
.kv b{font-family:var(--tk-font-head);font-size:13px}
table.schema{width:100%;border-collapse:collapse;font-size:13.5px}
table.schema th,table.schema td{border-top:1px solid var(--tk-line);padding:8px 8px;vertical-align:top;text-align:left}
table.schema th{font-family:var(--tk-font-head);font-size:12px;color:var(--tk-muted)}
.lbl{color:var(--tk-pink-dark);font-family:var(--tk-font-head);font-weight:600;font-size:12.5px}
.lemma{margin:2px 0}
.slide{border:1px solid var(--tk-line);border-radius:10px;padding:8px 10px;margin:6px 0;background:var(--tk-bg-soft);font-size:13.5px}
.slide b{font-family:var(--tk-font-head)}
.leestekst{font-size:15px;line-height:1.75;border:2px solid var(--tk-primary);border-radius:10px;padding:14px 18px;white-space:pre-wrap}
.check li{margin:4px 0}
.small{font-size:12.5px;color:var(--tk-muted)}
.note{background:var(--tk-cream);border-radius:10px;padding:10px 12px;font-size:13.5px}

/* review */
.review .bev{border-left:4px solid var(--tk-line);padding:8px 12px;margin:8px 0;background:var(--tk-bg-soft);border-radius:0 10px 10px 0;font-size:14px}
.review .bev.blokkeren{border-color:var(--bad)}.review .bev.voorwaarden{border-color:var(--warn)}.review .bev.waarschuwen{border-color:var(--tk-orange)}.review .bev.schrijfwijzer{border-color:var(--tk-pink-dark)}.review .bev.didactiek{border-color:var(--tk-green)}
.review .bev .q{font-style:italic;color:var(--tk-muted)}

/* bibliotheek */
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.lib .item{border:1px solid var(--tk-line);border-radius:var(--tk-radius);padding:14px 16px;cursor:pointer;background:#fff}
.lib .item:hover{border-color:var(--tk-primary)}
.lib .item h4{margin:6px 0 4px}
.lib .item .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* blokontwerp */
.blok-dom{border:1px solid var(--tk-line);border-radius:var(--tk-radius);padding:16px 18px;margin-top:14px;background:#fff}
.blok-dom.tijd{border-top:6px solid var(--tk-pink)}.blok-dom.ruimte{border-top:6px solid var(--tk-green)}.blok-dom.natuur{border-top:6px solid var(--tk-orange)}.blok-dom.integratie{border-top:6px solid var(--tk-olive)}
.lesrow{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--tk-line)}
.lesrow .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tk-secondary);font-family:var(--tk-font-head);font-weight:700;font-size:13px}
.lesrow .t{font-family:var(--tk-font-head);font-weight:600;font-size:14px}
.lesrow .d{font-size:13.5px;color:var(--tk-muted)}

/* kerndoelen tabel */
table.kd{width:100%;border-collapse:collapse;font-size:13px}
table.kd td,table.kd th{border-top:1px solid var(--tk-line);padding:5px 8px;text-align:left;vertical-align:top}
table.kd th{font-family:var(--tk-font-head);font-size:12px;position:sticky;top:64px;background:#fff}
table.kd tr.lg td{background:var(--tk-primary);color:#fff;font-family:var(--tk-font-head);font-weight:600}
table.kd tr.kd td{background:var(--tk-bg-soft);font-family:var(--tk-font-head);font-weight:600}
table.kd tr.sd td{font-family:var(--tk-font-head);font-weight:600;font-size:12.5px;color:var(--tk-pink-dark)}
table.kd td.x{text-align:center;font-family:var(--tk-font-head);font-weight:700;color:var(--tk-green)}
pre.regels{white-space:pre-wrap;font-family:var(--tk-font-body);font-size:14px;line-height:1.6}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--tk-primary);color:#fff;padding:10px 18px;border-radius:var(--tk-pill);font-family:var(--tk-font-head);font-weight:600;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
.toast.on{opacity:1}