/* Scholiervriendelijke laag: laadt als laatste en overschrijft alleen uiterlijk. */
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin-wght.woff2) format("woff2");font-weight:300 900;font-display:swap}
body.leer-app{--ui-bg:#f6f4ff;--ui-surface:#fff;--ui-text:#1f2547;--ui-muted:#5b6185;--ui-border:#e4e1f5;--ui-soft:#efeaff;--ui-accent:#0b766c;--ui-accent-text:#fff;
 --c-paars:#7c5cff;--c-paars-z:#f0ebff;--c-groen:#0d9488;--c-groen-z:#e0f6f2;--c-oranje:#f97316;--c-oranje-z:#fff0e3;--c-blauw:#3b82f6;--c-blauw-z:#e6f0ff;--c-roze:#ec4899;--c-roze-z:#fde8f3;--c-geel:#ffc93c;
 --schaduw:0 2px 0 #e4e1f5,0 10px 30px -18px #3b2f9466;--rond:22px;
 font-family:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5}
body.leer-app[data-thema="bos"]{--ui-bg:#f1f7ee;--ui-soft:#e3f0dc;--ui-accent:#2f6b3e;--ui-border:#d7e6d0}
body.leer-app[data-thema="oceaan"]{--ui-bg:#eef6fc;--ui-soft:#dcecf8;--ui-accent:#1e6a96;--ui-border:#cfe1ee}
body.leer-app[data-thema="lavendel"]{--ui-bg:#f6f2ff;--ui-soft:#ece4ff;--ui-accent:#6a46d8;--ui-border:#e2d8fa}
body.leer-app[data-thema="donker"]{--ui-bg:#141729;--ui-surface:#1f2340;--ui-text:#eef0ff;--ui-muted:#b7bce0;--ui-border:#343a63;--ui-soft:#2a2f55;--ui-accent:#5eead4;--ui-accent-text:#0b2723;
 --c-paars-z:#2d2856;--c-groen-z:#173b3b;--c-oranje-z:#3d2a1f;--c-blauw-z:#1d2d52;--c-roze-z:#3d2140;--schaduw:0 2px 0 #0d1022,0 10px 30px -18px #000}
.leer-app h1,.leer-app h2,.leer-app h3,.leer-app strong,.leer-app b{font-family:inherit;letter-spacing:-.01em}
.leer-app h2{font-weight:850}.leer-app h3{font-weight:800}
.leer-app .eyebrow{font-size:12px;letter-spacing:.06em;font-weight:800;color:var(--ui-accent);text-transform:none}
.leer-app main{max-width:860px;padding-bottom:110px}
/* Kaarten en knoppen */
.leer-app .kaart{border:2px solid var(--ui-border);border-radius:var(--rond);box-shadow:var(--schaduw)}
.leer-app button,.leer-app .linkbtn,.leer-app input,.leer-app select,.leer-app textarea{font-family:inherit}
.leer-app .primary,.leer-app .secondary,.leer-app main .linkbtn{border-radius:14px;font-weight:800;font-size:15px}
.leer-app .primary{box-shadow:0 4px 0 color-mix(in srgb,var(--ui-accent) 60%,#000);transform:translateY(0);transition:transform .08s,box-shadow .08s,filter .15s}
.leer-app .primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--ui-accent) 60%,#000)}
.leer-app .secondary,.leer-app main .linkbtn{border-width:2px;box-shadow:0 3px 0 var(--ui-border)}
.leer-app .secondary:active:not(:disabled),.leer-app main .linkbtn:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.leer-app input:not([type=checkbox]):not([type=radio]):not([type=file]),.leer-app select,.leer-app textarea{border-width:2px;border-radius:14px}
.leer-app :focus-visible{outline:3px solid var(--c-geel);outline-offset:2px}
/* Kopbalk */
.leer-app header{border-bottom:2px solid var(--ui-border);box-shadow:none;padding:10px 24px}
.leer-app h1{font-weight:900;font-size:21px}
.leer-app #nav .linkbtn{font-size:14px;font-weight:800;border:0;border-radius:12px;padding:9px 14px;background:transparent;box-shadow:none}
.leer-app #nav .linkbtn:hover{background:var(--ui-soft)}
.leer-app #nav .nav-actief{background:var(--ui-soft);color:var(--ui-accent)}
.avatar-knop{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:3px solid var(--ui-soft);transition:transform .15s}
.avatar-knop:hover{transform:scale(1.07) rotate(-4deg)}.avatar-knop img{width:38px;height:38px;border-radius:50%}
.avatar-knop:focus-visible{outline:3px solid var(--c-geel)}
.leer-app .account-rol{border-radius:99px;font-weight:800}
.leer-app #headerUitloggen{border-radius:12px;font-weight:800}
@media (min-width:701px){
 .leer-app #nav{position:relative}
 .leer-app #navMeer{display:inline-flex}
 .leer-app #navMeer{order:9}
 .leer-app #navExtra:not(.nav-open){display:contents}
 .leer-app #navExtra:not(.nav-open)>:not(#navOuderDashboard):not(#navKinderen):not(#navAdmin){display:none}
 .leer-app #navExtra:not(.nav-open)>.hidden{display:none}
 .leer-app #navExtra.nav-open{display:flex;flex-direction:column;position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--ui-surface);border:2px solid var(--ui-border);border-radius:18px;padding:8px;box-shadow:0 18px 40px -12px #1f254740;z-index:40}
 .leer-app #navExtra .linkbtn{text-align:left;justify-content:flex-start;width:100%}
 .leer-app #navUitloggen{display:none}
}
/* Startscherm */
.intro-hallo{display:flex;align-items:center;gap:18px;margin:6px 0 22px!important}
.intro-avatar{width:76px;height:76px;border-radius:50%;box-shadow:0 0 0 5px var(--ui-surface),0 0 0 7px var(--ui-border);flex:none;animation:zwaai 1.2s ease-out 1}
.intro-hallo h2{font-size:34px;margin:0}.intro-hallo p{margin:2px 0 0;font-size:18px}
@keyframes zwaai{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.start-keuzes-kop h2{font-size:22px;margin:0 0 12px}
.start-keuzes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.leer-app .start-keuze{position:relative;display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;padding:18px 44px 18px 18px;border-radius:var(--rond);border:2px solid transparent;background:var(--k-z);color:var(--ui-text);box-shadow:0 4px 0 color-mix(in srgb,var(--k) 35%,transparent);transition:transform .12s,box-shadow .12s;min-height:108px}
.leer-app .start-keuze:hover{transform:translateY(-3px);box-shadow:0 7px 0 color-mix(in srgb,var(--k) 35%,transparent);background:var(--k-z)}
.leer-app .start-keuze:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--k) 35%,transparent)}
.start-keuze .start-plaatje{grid-row:1/3;width:64px;height:64px;object-fit:contain}
.leer-app .start-keuze strong{font-size:18px;font-weight:850;align-self:end;margin:0}
.leer-app .start-keuze small{font-size:14px;color:var(--ui-muted);align-self:start;margin:2px 0 0}
.leer-app .start-keuze .start-pijl{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--k);color:#fff;font-weight:900}
.keuze-groen{--k:var(--c-groen);--k-z:var(--c-groen-z)}.keuze-oranje{--k:var(--c-oranje);--k-z:var(--c-oranje-z)}.keuze-blauw{--k:var(--c-blauw);--k-z:var(--c-blauw-z)}.keuze-paars{--k:var(--c-paars);--k-z:var(--c-paars-z)}
.leer-app .start-keuze.start-keuze-hoofd{border-color:var(--c-groen)}
.leer-app .taal-startkaart{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:16px;background:var(--c-roze-z);border-color:transparent;box-shadow:0 4px 0 color-mix(in srgb,var(--c-roze) 30%,transparent)}
.taal-startkaart img{width:64px;height:64px}.taal-startkaart h3{margin:0;font-size:19px}.taal-startkaart p{margin:2px 0 0}
.leer-app .taal-startkaart .primary{background:var(--c-roze);box-shadow:0 4px 0 #a3185f;color:#fff}
.dashboard-resume{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,var(--c-paars),#5b8cff)!important;border:0!important;color:#fff;box-shadow:0 6px 0 #3f2fb0!important}
.dashboard-resume h2,.dashboard-resume p,.dashboard-resume .eyebrow{color:#fff!important}.dashboard-resume h2{margin:4px 0}
.leer-app .dashboard-resume .primary{background:#fff;color:#3f2fb0;box-shadow:0 4px 0 #2b1f8a;flex:none}
.voortgang-balk{height:12px;border-radius:99px;background:#ffffff40;overflow:hidden;margin:8px 0 4px;max-width:340px}.voortgang-balk span{display:block;height:100%;background:var(--c-geel);border-radius:99px}
.dashboard-fouten{border-color:color-mix(in srgb,var(--c-oranje) 40%,var(--ui-border))!important}
.dashboard-stats{gap:12px}
.leer-app .dashboard-stats>div{border:0;border-radius:var(--rond);padding:16px 18px;background:var(--s-z);box-shadow:none}
.leer-app .dashboard-stats strong{font-size:30px;font-weight:900;color:var(--s)}.leer-app .dashboard-stats span{font-weight:700;color:var(--ui-muted)}
.stat-paars{--s:var(--c-paars);--s-z:var(--c-paars-z)}.stat-groen{--s:var(--c-groen);--s-z:var(--c-groen-z)}.stat-oranje{--s:var(--c-oranje);--s-z:var(--c-oranje-z)}
.vak-rij>span{flex:1}.vak-balk{display:block;height:10px;border-radius:99px;background:var(--ui-soft);margin-top:6px;overflow:hidden;max-width:420px}.vak-balk span{display:block;height:100%;border-radius:99px;background:var(--sc,var(--ui-accent))}
.score-top{--sc:#16a34a;color:#15803d}.score-ok{--sc:#f59e0b;color:#b45309}.score-laag{--sc:#ef4444;color:#dc2626}
.leer-app[data-thema="donker"] .score-top{color:#4ade80}.leer-app[data-thema="donker"] .score-ok{color:#fbbf24}.leer-app[data-thema="donker"] .score-laag{color:#f87171}
.score-pil{padding:4px 12px;border-radius:99px;background:color-mix(in srgb,var(--sc,var(--ui-accent)) 14%,transparent)}
/* Leerstreak */
.streak-kop{display:flex;align-items:center;gap:14px}.streak-kop img{width:56px;height:56px}.streak-kop h3{margin:0;font-size:22px}.streak-kop p{margin:0}
.streak-xp{margin-left:auto;background:#fff4d1;color:#8a5a00;border-radius:99px;padding:6px 14px;font-weight:800;white-space:nowrap}
.leer-app[data-thema="donker"] .streak-xp{background:#4a3a12;color:#ffd977}
.leer-app .streak-week li{border:2px solid var(--ui-border);border-radius:14px;font-weight:800}
.leer-app .streak-done{background:var(--c-oranje);border-color:var(--c-oranje);color:#fff}
.leer-app .streak-today{outline:3px solid var(--c-geel)}
.streak-uitleg summary{cursor:pointer;font-weight:800;color:var(--ui-muted);padding:6px 0}
.leer-app .streak-beloningen span{border-width:2px;font-weight:700}
.leer-app .streak-beloningen .badge-verdiend,.leer-app .streak-beloningen .badge-behaald{background:#fff4d1;border-color:#ffc93c;color:#7a4f00}
.leer-app[data-thema="donker"] .streak-beloningen .badge-verdiend{background:#4a3a12;color:#ffd977}
/* Lesstof-lijst */
.leer-app .stof-rij{border-radius:16px}
.leer-app .stof-rij:hover{background:var(--ui-soft)}
/* Avatar-dialoog */
.avatar-dialoog h2{margin-top:0}
.avatar-keuzes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.avatar-keuze{all:unset;cursor:pointer;display:grid;justify-items:center;gap:4px;padding:10px 4px;border-radius:16px;border:2px solid var(--ui-border);font-weight:800;font-size:13px;color:var(--ui-text);transition:transform .12s}
.avatar-keuze:hover{transform:translateY(-3px)}.avatar-keuze:focus-visible{outline:3px solid var(--c-geel)}
.avatar-keuze[aria-pressed=true]{border-color:var(--ui-accent);background:var(--ui-soft)}
.avatar-keuze img{width:64px;height:64px}
/* TJ-knop mag niets afdekken */
@media (max-width:700px){
 .tj-launcher-bubbel{display:none}
 #tjLauncher{width:52px;height:52px}
 #tjLauncher img{width:44px;height:44px}
 .start-keuzes-grid{grid-template-columns:1fr}
 .intro-hallo h2{font-size:27px}.intro-avatar{width:60px;height:60px}
 .leer-app .taal-startkaart{grid-template-columns:52px 1fr}.taal-startkaart img{width:52px;height:52px}.leer-app .taal-startkaart .primary{grid-column:1/-1}
 .dashboard-resume{flex-direction:column;align-items:stretch}
 .avatar-keuzes{grid-template-columns:repeat(4,1fr);gap:6px}.avatar-keuze img{width:52px;height:52px}
 .leer-app header{padding:8px 12px}.avatar-knop{width:38px;height:38px}.avatar-knop img{width:32px;height:32px}
 .leer-app #nav .linkbtn{font-size:11px;padding:6px 4px}
}
@media (prefers-reduced-motion:reduce){.intro-avatar{animation:none}.leer-app .start-keuze,.leer-app .primary{transition:none}}
/* Vaste kop en onderbalk mogen focus en scrolldoelen niet afdekken */
html:has(body.leer-app){scroll-padding-top:84px}
/* Op mobiel staat de TJ-knop tot ~140px boven de onderrand (quiz: ~202px); in beeld springen moet daarboven uitkomen */
@media (max-width:700px){html:has(body.leer-app){scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom))}html:has(body.leer-app .quiz-kaart){scroll-padding-bottom:calc(212px + env(safe-area-inset-bottom))}}
.leer-app .dashboard-result b.score-top,.leer-app .dashboard-result b.score-ok,.leer-app .dashboard-result b.score-laag{color:var(--sc)}
.leer-app[data-thema="donker"] .dashboard-result b[class*=score-]{filter:brightness(1.35)}
.leer-app .dashboard-fouten .primary{background:var(--c-oranje);box-shadow:0 4px 0 #b4530b;color:#fff}
.leer-app .dashboard-fouten .eyebrow{color:#c2410c}
.leer-app[data-thema="donker"] .dashboard-fouten .eyebrow{color:#fdba74}
@media (min-width:701px){.leer-app #navMeer{align-items:center;gap:4px}.leer-app #navMeer::after{content:"▾";font-size:11px}}
.leer-app .stof-bulk label{font-size:14px;font-weight:700}
.leer-app .stof-bulk input[type=checkbox]{width:20px;height:20px}
.dashboard-resume>div{flex:1 1 260px;min-width:0}
/* Uitslag */
.score-blok{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:16px;margin:14px 0;padding:18px 20px;border-radius:var(--rond);background:color-mix(in srgb,var(--sc) 12%,var(--ui-surface));border:2px solid color-mix(in srgb,var(--sc) 35%,transparent)}
.leer-app .score-blok .score-groot{all:unset;display:block;font-size:40px;font-weight:900;line-height:1.1;color:var(--sc)}
.score-blok .score-tekst{margin:2px 0 0;font-weight:800;font-size:17px;color:var(--ui-text)}
.score-ring{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--sc) calc(var(--p)*1%),var(--ui-soft) 0)}
.score-ring span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--ui-surface);font-weight:900;font-size:16px;color:var(--ui-text)}
.leer-app .resultaat-vraag,.leer-app .resultaat-item{border-radius:16px}
@media (max-width:700px){.score-blok{grid-template-columns:48px 1fr;}.score-blok img{width:48px;height:48px}.score-ring{display:none}.leer-app .start-keuze{padding-right:56px}}
@media (min-width:701px) and (max-width:980px){
 .leer-app header{flex-wrap:nowrap;gap:6px;padding:8px 14px}
 .leer-app .account-rol{display:none}
 .leer-app #nav .linkbtn{padding:8px 9px;font-size:13px}
 .leer-app h1{font-size:18px}
}
@media (min-width:701px){.leer-app #nav{flex-wrap:nowrap}.leer-app #nav .linkbtn{white-space:nowrap}.leer-app header h1 a{white-space:nowrap}}
@media (min-width:701px) and (max-width:980px){
 .leer-app #nav .linkbtn{padding:8px 7px}
 .leer-app #headerUitloggen{padding:8px 10px}
}
@media (min-width:701px) and (max-width:1100px){
 .leer-app header h1 a{font-size:0}
 .leer-app #navExtra:not(.nav-open)>#navOuderDashboard{display:none}
}
/* Moeilijkheid als kaarten */
.niveau-kaarten{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0 6px}
.leer-app .niveau-kaart{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 14px;border-radius:16px;border:2px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text);box-shadow:0 3px 0 var(--ui-border);transition:transform .1s}
.leer-app .niveau-kaart:hover{transform:translateY(-2px)}
.leer-app .niveau-kaart:focus-visible{outline:3px solid var(--c-geel)}
.niveau-icoon{grid-row:1/3;font-size:28px;line-height:1;text-align:center}
.leer-app .niveau-kaart strong{font-size:16px;font-weight:850}.leer-app .niveau-kaart small{font-size:13px;color:var(--ui-muted)}
.leer-app .niveau-kaart[aria-checked=true]{border-color:var(--c-paars);background:var(--c-paars-z);box-shadow:0 3px 0 var(--c-paars)}
@media (max-width:420px){.niveau-kaarten{grid-template-columns:1fr}}
/* Vraagscherm */
.leer-app .quiz-kaart{padding:26px 28px}
.leer-app .quiz-kaart .vooruitgang{font-weight:800;color:var(--ui-muted);font-size:14px}
.leer-app .quiz-kaart progress{appearance:none;-webkit-appearance:none;width:100%;height:14px;border:0;border-radius:99px;background:var(--c-paars-z);overflow:hidden}
.leer-app .quiz-kaart progress::-webkit-progress-bar{background:var(--c-paars-z);border-radius:99px}
.leer-app .quiz-kaart progress::-webkit-progress-value{background:linear-gradient(90deg,var(--c-paars),#5b8cff);border-radius:99px}
.leer-app .quiz-kaart progress::-moz-progress-bar{background:linear-gradient(90deg,var(--c-paars),#5b8cff);border-radius:99px}
.leer-app .quiz-kaart .vraag-kop{margin-top:14px;font-weight:800;color:var(--ui-accent)}
.leer-app .niveau-badge{display:inline-block;background:var(--ui-soft);border-radius:99px;padding:3px 12px;font-size:13px;margin:4px 0 0}
.leer-app .vraag-tekst{font-size:24px;font-weight:850;line-height:1.3;margin:14px 0 18px;color:var(--ui-text)}
.leer-app .optie{border-width:2px;border-radius:16px;font-size:17px;font-weight:700;box-shadow:0 3px 0 var(--ui-border);transition:transform .08s}
.leer-app .optie:hover{transform:translateY(-2px);border-color:var(--c-paars)}
.leer-app .optie.gekozen{border-color:var(--c-paars);background:var(--c-paars-z);box-shadow:0 3px 0 var(--c-paars)}
.leer-app .optie-letter{border-radius:10px;font-weight:900}
.leer-app .optie.gekozen .optie-letter{background:var(--c-paars);color:#fff}
.leer-app .quiz-kaart textarea{font-size:17px;min-height:130px}
.leer-app .quiz-kaart #volgendeBtn,.leer-app .quiz-kaart #afrondenBtn{width:100%;min-height:54px;font-size:17px;margin-top:8px}
.leer-app .quiz-kaart #overslaanBtn,.leer-app .quiz-kaart #overzichtBtn{width:calc(50% - 5px)!important;display:inline-flex;justify-content:center;font-size:14px;min-height:42px;color:var(--ui-muted)}
.leer-app .quiz-kaart #overzichtBtn{margin-left:10px}
.leer-app #navMeer.nav-actief{background:transparent;color:var(--ui-muted)}
@media (max-width:700px){.leer-app .quiz-kaart{padding:20px 16px}.leer-app .vraag-tekst{font-size:21px}}
/* Controle vóór nakijken: compacte rijen */
.controle-kaart .resultaat-vraag{display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center;padding:12px 14px;margin:0 0 8px;border:2px solid var(--ui-border);border-radius:16px}
.controle-kaart .resultaat-vraag>*{grid-column:1}
.controle-kaart .resultaat-vraag h3{font-size:16px;margin:0 0 2px}
.controle-kaart .resultaat-vraag p{margin:0;font-weight:700;color:var(--c-paars)}
.leer-app .controle-kaart .resultaat-vraag [data-aanpassen]{grid-column:2;grid-row:1/span 6;font-size:13px;min-height:38px;padding:6px 12px;margin:0}
.controle-kaart #definitiefNakijken{position:sticky;bottom:12px;width:100%;min-height:56px;font-size:17px;margin-top:10px;z-index:2}
@media (max-width:700px){.controle-kaart #definitiefNakijken{bottom:calc(82px + env(safe-area-inset-bottom))}}
/* Uitslag: goede antwoorden ingeklapt, acties klein */
.leer-app .resultaat-vraag.ingeklapt>:not(.resultaat-kop):not(.resultaat-vraagtekst):not(.uitklap){display:none}
.leer-app .resultaat-vraag.ingeklapt{padding-block:12px}
.leer-app .resultaat-vraag .uitklap{border:0;box-shadow:none;background:none;padding:4px 0;min-height:32px;font-size:14px;color:var(--ui-accent);text-decoration:underline;text-underline-offset:3px}
.leer-app .leer-vraag-acties{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.leer-app .leer-vraag-acties .linkbtn{font-size:13px;min-height:36px;padding:6px 12px;box-shadow:none}
.leer-app .resultaat-vraag{border-radius:18px}
.leer-app .leer-vraag-acties .linkbtn{width:auto;margin:0}
.leer-app .resultaat-antwoord,.leer-app .resultaat-correct,.leer-app .resultaat-uitleg{margin:8px 0;padding:10px 14px;border-radius:14px}
.leer-app .resultaat-vraag:not(.ingeklapt){padding-bottom:16px}
@media (min-width:701px){.leer-app .resultaat-vraag:has(.resultaat-correct){display:grid;grid-template-columns:1fr 1fr;column-gap:10px}.leer-app .resultaat-vraag:has(.resultaat-correct)>*{grid-column:1/-1}.leer-app .resultaat-vraag:has(.resultaat-correct)>.resultaat-antwoord{grid-column:1}.leer-app .resultaat-vraag:has(.resultaat-correct)>.resultaat-correct{grid-column:2}}
/* TJ snelkeuze */
.tj-snelkeuze{margin-top:14px;text-align:left}
.tj-snelkeuze h4{margin:14px 0 8px;font-size:14px;color:var(--ui-muted);font-weight:800}
.tj-chips{display:flex;flex-wrap:wrap;gap:8px}
.leer-app .tj-chip{all:unset;cursor:pointer;padding:8px 14px;border-radius:99px;font-weight:800;font-size:14px;background:var(--c-paars-z);color:var(--c-paars);border:2px solid transparent}
.leer-app .tj-chip:hover,.leer-app .tj-chip:focus-visible{border-color:var(--c-paars)}
.tj-lessen{display:grid;gap:8px}
.leer-app .tj-les{all:unset;cursor:pointer;display:grid;gap:2px;padding:10px 14px;border-radius:14px;border:2px solid var(--ui-border);background:var(--ui-surface)}
.leer-app .tj-les:hover,.leer-app .tj-les:focus-visible{border-color:var(--c-paars);background:var(--c-paars-z)}
.tj-les strong{font-size:15px}.tj-les small{color:var(--ui-muted);font-size:13px}
/* Taal-oefenvormen met icoon en niveaulabel */
.leer-app .taal-methode{position:relative;display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-content:start;text-align:left;border:2px solid var(--ui-border);border-radius:16px;box-shadow:0 3px 0 var(--ui-border);background:var(--ui-surface)}
.leer-app .taal-methode::before{grid-row:1/4;font-size:26px;line-height:1.1}
.leer-app .taal-methode>*{grid-column:2}
.leer-app .taal-methode:hover{border-color:var(--c-roze);transform:translateY(-2px)}
.taal-methode[data-methode=toets]::before{content:"📝"}.taal-methode[data-methode=woorden]::before{content:"🔤"}.taal-methode[data-methode=kaarten]::before{content:"🃏"}.taal-methode[data-methode=luisteren]::before{content:"🎧"}.taal-methode[data-methode=uitspraak]::before{content:"🎤"}.taal-methode[data-methode=aanvullen]::before{content:"🧩"}.taal-methode[data-methode=vertalen]::before{content:"🔁"}.taal-methode[data-methode=lezen]::before{content:"📖"}.taal-methode[data-methode=gesprek]::before{content:"💬"}
.methode-niveau{justify-self:start;margin-top:6px;font-style:normal;font-size:12px;font-weight:800;padding:2px 10px;border-radius:99px;background:var(--c-roze-z);color:#be185d}
.leer-app[data-thema=donker] .methode-niveau{color:#f9a8d4}
/* Planning als tijdlijn */
.leer-app .leer-sessies{list-style:none;padding:0 0 0 22px;margin:14px 0;position:relative}
.leer-app .leer-sessies::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--ui-border)}
.leer-app .leer-sessies li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin:0 0 10px;border:2px solid var(--ui-border);border-radius:16px;background:var(--ui-surface)}
.leer-app .leer-sessies li::before{content:"";position:absolute;left:-21px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--ui-surface);border:3px solid var(--ui-border)}
.leer-app .leer-sessies li>div{display:grid;gap:1px}
.leer-app .leer-sessies li strong{font-size:16px}
.leer-app .leer-sessies li.klaar{opacity:.75;background:var(--ui-soft)}
.leer-app .leer-sessies li.klaar::before{background:#16a34a;border-color:#16a34a}
.leer-app .leer-sessies li:first-child:not(.klaar),.leer-app .leer-sessies li.klaar+li:not(.klaar){border-color:var(--c-paars);background:var(--c-paars-z);box-shadow:0 3px 0 var(--c-paars)}
.leer-app .leer-sessies li:first-child:not(.klaar)::before,.leer-app .leer-sessies li.klaar+li:not(.klaar)::before{border-color:var(--c-paars);background:var(--c-geel)}
.leer-app .leer-sessies li:first-child:not(.klaar) [data-sessie],.leer-app .leer-sessies li.klaar+li:not(.klaar) [data-sessie]{background:var(--c-paars);color:#fff;border-color:transparent;box-shadow:0 3px 0 #3f2fb0}
.leer-app .leer-sessies button{width:auto;flex:none;min-height:42px;margin:0}
.leer-app #nieuwPlan{border:2px dashed var(--c-paars);background:var(--c-paars-z);border-radius:var(--rond)}
.leer-app #nieuwPlan>summary{cursor:pointer;font-weight:850;color:var(--c-paars);padding:4px 0}
/* Cijfertegels zonder eigen klasse (ouderoverzicht) krijgen dezelfde kleuren */
.leer-app .dashboard-stats>div:not([class]):nth-child(3n+1){--s:var(--c-paars);--s-z:var(--c-paars-z)}
.leer-app .dashboard-stats>div:not([class]):nth-child(3n+2){--s:var(--c-groen);--s-z:var(--c-groen-z)}
.leer-app .dashboard-stats>div:not([class]):nth-child(3n){--s:var(--c-oranje);--s-z:var(--c-oranje-z)}
.leer-app #ouderZelfOefenen{border-radius:99px;min-height:40px;padding:6px 16px;margin:6px 0 4px}
.leer-app .leer-sessies li{flex-direction:row;text-align:left;padding:12px 14px;grid-template-columns:none}
.leer-app .leer-sessies li>div{flex:1;min-width:0;padding:0;margin:0}
.leer-app #nieuwPlan{padding:12px 16px}
@media (max-width:420px){.leer-app .leer-sessies li{flex-wrap:wrap}.leer-app .leer-sessies li button{margin-left:auto}}
/* Vandaag oefenen */
.leer-app .leer-vandaag.heeft-herhaling{border-color:var(--c-blauw);background:var(--c-blauw-z)}
.leer-app .leer-vandaag.heeft-herhaling .eyebrow{color:var(--c-blauw)}
.leer-app .leer-vandaag.heeft-herhaling .primary{background:var(--c-blauw);box-shadow:0 4px 0 #1d4ed8;color:#fff}
.leer-app .leer-vandaag.is-bij{padding-block:16px}
.bij-regel{display:flex;align-items:center;gap:10px;margin:0;font-weight:700;color:var(--ui-text)!important}
.bij-vink{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#16a34a;color:#fff;font-weight:900}
.leer-vandaag .toets-weg{margin:14px 0 6px;font-size:17px}
.leer-app .leer-vandaag.is-bij [data-plan-open]{margin-top:10px}
/* Lesstoflijst: één compacte regel per les */
.leer-app .stof-rij .materiaal-tj{font-size:0;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:14px;background:var(--c-paars-z) url(/icons/tj.svg) center/30px no-repeat;border:2px solid transparent;box-shadow:none}
.leer-app .stof-rij .materiaal-tj:hover,.leer-app .stof-rij .materiaal-tj:hover:not(:disabled){border-color:var(--c-paars);background:var(--c-paars-z) url(/icons/tj.svg) center/30px no-repeat}
.leer-app .stof-meer summary{font-size:0;width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;border-radius:14px}
.leer-app .stof-meer summary::before{content:"⋯";font-size:22px;font-weight:900;line-height:1}
.leer-app .stof-meer summary::after{display:none}
@media (max-width:700px){
 .leer-app .stof-rij:not(:has(.materiaal-topografie)){grid-template-columns:22px minmax(0,1fr) auto auto auto;align-items:center;gap:6px 8px;padding:10px 12px}
 .leer-app .stof-rij:not(:has(.materiaal-topografie)) .stof-omschrijving{grid-column:2;grid-row:1}
 .leer-app .stof-rij:not(:has(.materiaal-topografie)) .materiaal-overhoren{grid-column:3;grid-row:1;min-height:44px;padding:8px 14px;font-size:14px}
 .leer-app .stof-rij:not(:has(.materiaal-topografie)) .materiaal-tj{grid-column:4;grid-row:1}
 .leer-app .stof-rij:not(:has(.materiaal-topografie)) .stof-meer{grid-column:5;grid-row:1}
 .leer-app .stof-omschrijving h3{font-size:15px;margin:0}
 .leer-app .stof-omschrijving p{font-size:12px;margin:0}
}
/* Snelle wissel licht/donker in de kop */
.thema-wissel{all:unset;cursor:pointer;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;border:2px solid var(--ui-border);background:var(--ui-surface);transition:transform .15s}
.thema-wissel:hover{transform:rotate(-12deg)}.thema-wissel:focus-visible{outline:3px solid var(--c-geel)}
.thema-wissel .icoon-zon{display:none}
body[data-thema="donker"] .thema-wissel .icoon-zon{display:inline}
body[data-thema="donker"] .thema-wissel .icoon-maan{display:none}
@media (max-width:700px){.thema-wissel{width:34px;height:34px;font-size:16px}}
/* TJ: les wisselen ingeklapt, contrast in donker thema */
.leer-app .tj-gekozen{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.leer-app .tj-wissel-knop{min-height:32px;padding:4px 12px;font-size:13px;border-radius:99px}
.leer-app .tj-wissel-vak{margin-top:6px}
.leer-app[data-thema="donker"] .tj-chip{color:#c4b5ff}
.leer-app .taal-startkaart .primary{background:#be185d;box-shadow:0 4px 0 #831843}

/* One starting point for saved lessons and new quizzes. */
.start-keuzes-grid .start-keuze-hoofd{grid-column:1/-1}
#stofUploadPaneel{scroll-margin-top:100px}
.stof-nieuw-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.stof-nieuw-kop h3{font-size:24px;margin:4px 0}
.stof-nieuw-kop p{margin:4px 0 20px}
.stof-nieuw-kop>button{flex:none}
.stof-upload-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px}
.stof-upload-grid>div{min-width:0}
/* Keep the upload choices compact without shrinking their touch targets. */
.stof-upload-grid .foto-upload{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 10px;padding:16px;margin:0;text-align:left}
.stof-upload-grid .upload-symbool{grid-column:1;grid-row:1/3;width:32px;height:32px;font-size:22px;margin:0}
.stof-upload-grid .foto-upload h3{grid-column:2;font-size:18px;line-height:1.3;margin:0}
.stof-upload-grid .foto-upload>p{grid-column:2;margin:0;line-height:1.4}
.stof-upload-grid .upload-acties,.stof-upload-grid .upload-extra-acties{grid-column:1/-1;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin:10px 0 4px}
.stof-upload-grid .upload-extra-acties{margin:4px 0}
.leer-app .stof-upload-grid .foto-upload button{width:auto;max-width:100%;min-height:44px;padding:8px 12px;margin:0;font-size:14px}
.stof-upload-grid .foto-upload>.upload-hint{grid-column:1/-1;margin:8px 0 0;font-size:12px!important}
@media(max-width:420px){.stof-upload-grid .foto-upload{padding:12px}.stof-upload-grid .upload-acties button{flex:1 1 100%}}
.stof-upload-niveau{margin:18px 0}
.stof-upload-niveau summary{cursor:pointer;font-weight:750}
.stof-upload-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.stof-upload-acties button{margin:0!important}
.stof-nieuw{border-color:var(--c-groen)!important}
.stof-kop{align-items:center}
@media(max-width:700px){.stof-upload-grid{grid-template-columns:1fr;gap:18px}.stof-upload-acties{flex-direction:column}.stof-upload-acties button{width:100%}.stof-nieuw-kop h3{font-size:21px}}

#stofUploadPaneel:not([hidden]) ~ .stof-leeg{display:none}

/* Invitations stay separate from the library until explicitly accepted. */
.leer-app #navMateriaal{position:relative}
.leer-app .nav-deelmelding{position:absolute;right:0;top:0;min-width:18px;padding:1px 4px;border-radius:99px;background:var(--c-oranje);color:#fff;font-size:11px;line-height:16px;text-align:center}
.leer-app .nav-deelmelding[hidden]{display:none}
.deel-notificatie{display:flex;align-items:center;justify-content:space-between;gap:16px;border-color:var(--c-paars)!important}
.deel-notificatie h3,.deel-inbox h3{margin:4px 0}.deel-notificatie p{margin:4px 0}
.deel-inbox .dashboard-heading{flex-wrap:wrap;gap:8px}
.deel-verzoeken{display:grid;gap:16px}.deel-verzoek{padding:16px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-soft)}
.deel-verzoek h4{margin:0;font-size:17px}.deel-verzoek p{margin:6px 0}
.deel-acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.deel-acties button{margin:0!important}
.deel-verstuurd{margin-top:16px}.deel-verstuurd summary{cursor:pointer;font-weight:800}
.deel-verstuurd ul{padding:0;list-style:none}.deel-verstuurd li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ui-border)}
.deel-verstuurd small{display:block}.deel-verzoek h4,.deel-verstuurd strong{overflow-wrap:anywhere}
@media(max-width:600px){.deel-notificatie{align-items:stretch;flex-direction:column}.deel-acties button{flex:1 1 auto}.deel-inbox .dashboard-heading{align-items:flex-start;flex-direction:column}}
/* Lesstof beheren: gegevens inline + uploadblok in app-stijl (2026-10-08) */
.stof-gegevens{margin:12px 0 20px;padding:16px;border:1px solid var(--lijn,#e2e8e0);border-radius:14px}
.stof-gegevens-velden{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:12px}
.stof-gegevens-velden>div{min-width:0}
.stof-gegevens-velden input,.stof-gegevens-velden select{width:100%}
.stof-gegevens-acties{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.pagina-upload{text-align:center;border-radius:14px}
.pagina-upload h3{margin:8px 0 4px}
@media(max-width:700px){.stof-gegevens-velden{grid-template-columns:1fr}}

.deel-stil{margin:28px 0 8px;padding:12px 4px;border-top:1px solid var(--ui-border);color:var(--ui-muted)}.deel-stil summary{cursor:pointer;font-weight:700;font-size:14px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.deel-stil summary small{font-weight:400;font-size:13px}.deel-stil .deel-verstuurd{margin-top:10px}

@media (max-width:700px){.dashboard-resume>div{flex:0 0 auto}.leer-app .dashboard-resume{gap:10px}.leer-app .dashboard-resume p{margin-bottom:4px}.leer-app .dashboard-resume .resume-acties .primary{margin-top:0}.leer-app .dashboard-resume .resume-acties{justify-content:center;gap:2px 16px}}
.meld-redenen{border:0;padding:0;margin:8px 0;display:grid;gap:8px}.meld-redenen .meld-reden{margin:0;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:12px;min-height:44px;font-weight:500}.meld-reden input{width:20px;height:20px;margin:0}#meldToelichting{width:100%;box-sizing:border-box}.deel-melden{color:var(--ui-danger,#b42318)}