:root{
  --navy:#0b234d; --green:#2f7d32; --teal:#0a9e9a; --blue:#1768b5;
  --paper:#ffffff; --bg:#f3f7f8; --soft:#eef6fb; --line:#d8e5e8;
  --ok:#1f7a3f; --bad:#a23b32;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Aptos,Segoe UI,Arial,sans-serif;color:var(--navy)}
.shell{max-width:760px;margin:0 auto;padding:0 16px 32px}
.brand{background:#fff;border-radius:0 0 18px 18px;overflow:hidden;box-shadow:0 3px 16px rgba(11,35,77,.08)}
.brand img{display:block;width:100%;height:auto}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px;margin-top:22px;box-shadow:0 8px 30px rgba(11,35,77,.06)}
.screen{display:none}.screen.active{display:block}
.eyebrow{font-weight:800;font-size:.78rem;color:var(--green);letter-spacing:.06em}
h1{font-size:2rem;margin:.2rem 0 .3rem} h2{font-size:1.35rem;line-height:1.3}
.sub{color:var(--blue);font-weight:700}
button{border:0;border-radius:12px;padding:13px 18px;font-size:1rem;font-weight:800;cursor:pointer}
.primary{background:linear-gradient(90deg,var(--green),var(--teal),var(--blue));color:#fff}
.secondary{background:#e9f1f5;color:var(--navy)}
label{display:block;font-weight:700;margin:18px 0 6px}
input{width:100%;font-size:1rem;padding:12px;border:1px solid #b8ccd1;border-radius:10px;margin-top:6px}
.optional{font-weight:400;color:#687b8c}
.progress-row{display:flex;justify-content:space-between;font-weight:800;font-size:.86rem}
.progress{height:8px;background:#e6eef1;border-radius:99px;overflow:hidden;margin:8px 0 18px}
#progressBar{height:100%;background:linear-gradient(90deg,var(--green),var(--blue));width:0}
.options{display:grid;gap:10px;margin:18px 0}
.option{display:flex;gap:10px;align-items:flex-start;border:1px solid #cbdcdf;border-radius:12px;padding:12px;cursor:pointer}
.option:hover{background:#f7fbfb}.option.selected{border-color:var(--blue);background:#eef6fb}
.option input{width:auto;margin:3px 0 0}
.feedback{border-radius:12px;padding:14px;margin:14px 0;font-weight:700;line-height:1.45}
.feedback.ok{background:#eaf6ee;color:var(--ok);border:1px solid #bdddc7}
.feedback.bad{background:#fff1ef;color:var(--bad);border:1px solid #e6c0bb}
.hidden{display:none!important}.actions{display:flex;gap:10px;flex-wrap:wrap}
.score{display:flex;align-items:end;gap:14px;margin:18px 0}
#scoreValue{font-size:2.6rem;color:var(--green)} #percentValue{font-size:1.3rem;font-weight:800;color:var(--blue)}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.result-grid>div{background:#f7fafb;border:1px solid var(--line);border-radius:12px;padding:14px}
footer{text-align:center;font-size:.8rem;color:#637788;padding:24px 0}
@media(max-width:620px){.card{padding:20px}.result-grid{grid-template-columns:1fr}h1{font-size:1.65rem}}

/* V5: onmiddellike nasien voordat die leerder aangaan */
.option.answer-correct{
  outline:2px solid rgba(35,132,63,.35);
  background:#eef8f0;
}
.option.answer-wrong{
  outline:2px solid rgba(183,54,45,.28);
  background:#fff1ef;
}
.option input:disabled + span{opacity:1;}


/* FASE 2 V8: Multi-les biblioteek */
.library-toolbar{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.library-toolbar label{min-width:180px;flex:1}
.library-toolbar select{width:100%;margin-top:6px;padding:10px 12px;border:1px solid #b8ccd1;border-radius:10px;font:inherit;background:white}
.lesson-list{display:grid;gap:12px;margin-top:16px}
.lesson-card{width:100%;text-align:left;border:1px solid #d8e5e8;background:#f9fcfd;border-radius:16px;padding:16px;cursor:pointer;color:#082d63;font:inherit;display:grid;gap:5px}
.lesson-card:hover{border-color:#4ba4b5;box-shadow:0 5px 16px rgba(8,45,99,.08)}
.lesson-card strong{font-size:1.08rem}
.lesson-card span:last-child{font-size:.84rem;color:#55717c}
.lesson-meta{font-size:.76rem;font-weight:800;color:#2f7d32;text-transform:uppercase;letter-spacing:.03em}
.text-link{border:0;background:transparent;color:#1768b5;font:inherit;font-weight:700;cursor:pointer;padding:0;margin-bottom:12px}

.secure-library-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.access-lock-note{display:flex;flex-direction:column;gap:3px;margin:16px 0;padding:13px 15px;border-radius:13px;background:#eef7f6;border-left:4px solid #2e7d32;color:#17324d}
.access-lock-note strong{color:#0b376b}
.secure-profile-summary{display:flex;flex-direction:column;gap:5px;padding:16px;margin:15px 0;background:#f4f8fa;border:1px solid #d7e4e8;border-radius:14px}
.secure-profile-summary strong{font-size:1.12rem;color:#0b376b}.secure-profile-summary span{color:#2e7d32;font-weight:800}
@media(max-width:620px){.secure-library-head{flex-direction:column}.secure-library-head .secondary{width:100%}}