:root{
  --bg:#f4f7fb;--card:#fff;--text:#152033;--muted:#6f7b8f;--line:#e5eaf2;
  --primary:#6657f5;--primary2:#8f6bff;--accent:#20c997;--danger:#ef5b6a;
  --shadow:0 18px 55px rgba(37,48,77,.10);--radius:24px
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#f8faff 0,#f3f6fb 100%);color:var(--text)}
a{color:inherit;text-decoration:none}.container{max-width:1180px;margin:auto;padding:34px 22px 70px}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:15px max(22px,calc((100vw - 1180px)/2 + 22px));background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(229,234,242,.8)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px}.bolt{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 8px 20px #6657f544}
.topbar nav{display:flex;gap:18px;font-size:14px;font-weight:700;color:#536079}.topbar nav a:hover{color:var(--primary)}
.hero{min-height:75vh;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero-copy h1{font-size:clamp(48px,7vw,86px);line-height:.95;letter-spacing:-4px;margin:12px 0 24px}.hero-copy h1 span{background:linear-gradient(135deg,var(--primary),#9e68ff);-webkit-background-clip:text;color:transparent}
.hero-copy p{font-size:20px;color:var(--muted);max-width:620px;line-height:1.6}
.glass,.card{background:rgba(255,255,255,.92);border:1px solid #edf0f6;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{padding:34px}.hero-card h2,.card h2{margin-top:0;font-size:26px}
.stack{display:grid;gap:16px}.stack label,.form-grid label,.filterbar label{display:grid;gap:7px;font-size:13px;font-weight:800;color:#48556b}
input,select,textarea{width:100%;border:1px solid #dfe5ef;background:#fbfcff;border-radius:14px;padding:13px 14px;font:inherit;color:var(--text);outline:none;transition:.2s}
input:focus,select:focus,textarea:focus{border-color:#9288fb;box-shadow:0 0 0 4px #6657f514;background:white}
.btn{border:0;border-radius:14px;padding:12px 18px;font-weight:900;font-size:14px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:8px}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:white;box-shadow:0 10px 24px #6657f533}.btn-light{background:white;color:var(--primary);border:1px solid #e6e9f4}.btn-success{background:#e7f8f1;color:#087a55}.btn-danger{background:#fff0f1;color:#b92b39}.btn-lg{padding:15px 20px;font-size:16px}
.teacher-link{text-align:center;margin-top:16px;font-size:13px;color:var(--muted)}.teacher-link a{text-decoration:underline}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:900;color:var(--primary)}.muted{color:var(--muted)}
.welcome{display:flex;justify-content:space-between;align-items:center;margin:12px 0 30px}.welcome h1,.page-title h1{font-size:42px;letter-spacing:-1.5px;margin:7px 0}.welcome p,.page-title p{color:var(--muted);margin:0}
.progress-ring{--p:0;width:118px;height:118px;border-radius:50%;background:conic-gradient(var(--primary) calc(var(--p)*1%),#e7eaf2 0);display:grid;place-items:center;position:relative}
.progress-ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:#f8faff}.progress-ring strong,.progress-ring span{position:relative;z-index:2;text-align:center}.progress-ring strong{font-size:26px}.progress-ring span{font-size:11px;color:var(--muted);margin-top:-45px}
.grid{display:grid;gap:22px}.grid.two{grid-template-columns:1.35fr .65fr}.grid.three{grid-template-columns:repeat(3,1fr)}
.card{padding:26px;margin-bottom:22px}.accent-card{background:linear-gradient(145deg,#6657f5,#8967fb);color:white}.accent-card .muted{color:#e8e4ff}
.big-number{font-size:64px;font-weight:900;letter-spacing:-3px;margin-top:30px}.big-number span{font-size:25px;opacity:.7}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:18px}.timeline{display:grid}.timeline-item{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--line)}.timeline-item:first-child{border-top:0}
.date-badge{background:#f1efff;color:var(--primary);border-radius:16px;width:56px;height:56px;display:grid;place-items:center;font-size:20px;font-weight:900;line-height:1}.date-badge small{font-size:10px;text-transform:uppercase;margin-top:-8px}
.timeline-item h3{margin:0 0 6px}.timeline-item p{margin:0 0 8px;color:var(--muted)}.homework{background:#fff8e8;border:1px solid #ffe7ae;padding:10px 12px;border-radius:12px;font-size:13px}
.page-title{margin:12px 0 28px}.concept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.concept-card{display:grid;grid-template-columns:62px 1fr 34px;align-items:center;gap:16px;background:white;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 30px #25304d0a;transition:.2s}
.concept-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#dcd7ff}.concept-icon{width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,#f0edff,#e9f8ff);display:grid;place-items:center;font-size:26px}
.concept-card h2{margin:7px 0 5px;font-size:20px}.concept-card p{margin:0;color:var(--muted);font-size:14px}.arrow{font-size:26px;color:var(--primary)}
.pill{display:inline-flex;padding:5px 9px;border-radius:999px;background:#f0edff;color:var(--primary);font-size:11px;font-weight:900}
.question-shell{max-width:820px;margin:auto}.question-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.back{font-weight:800;color:var(--muted)}
.question-card{background:white;border-radius:28px;padding:34px;box-shadow:var(--shadow);border:1px solid var(--line)}.question-card h1{font-size:31px;line-height:1.25;margin:10px 0 25px}.question-image{max-width:100%;border-radius:18px;margin-bottom:22px}
.video-wrap{position:relative;padding-top:56.25%;margin-bottom:22px;border-radius:18px;overflow:hidden;background:#111}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.answer-panel{margin-top:8px;background:#f8f9fe;border:1px solid #e6e8f3;border-radius:18px;padding:20px}.correct-answer{font-size:18px;font-weight:900;margin:8px 0}.hidden{display:none}.result-buttons{display:flex;gap:12px;margin:14px 0}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}.check input{width:auto}
.celebrate{text-align:center;max-width:650px;margin:60px auto;padding:50px}.celebrate-icon{font-size:70px}.celebrate h1{font-size:44px;margin:10px}.button-row{display:flex;justify-content:center;gap:12px;margin-top:25px}
.login-wrap{min-height:70vh;display:grid;place-items:center}.login-card{width:min(460px,100%);padding:34px}.alert,.notice{padding:12px 14px;border-radius:13px;margin-bottom:18px}.alert{background:#fff0f1;color:#a92d39}.notice{background:#e9f8f1;color:#147452}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat{background:white;border:1px solid var(--line);border-radius:18px;padding:20px}.stat span{display:block;color:var(--muted);font-weight:700;font-size:13px}.stat strong{font-size:34px;display:block;margin-top:6px}
.admin-card{background:white;border:1px solid var(--line);border-radius:22px;padding:25px;transition:.2s}.admin-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.admin-card>span{font-size:32px}.admin-card h2{margin:14px 0 6px}.admin-card p{color:var(--muted);margin:0}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.span2{grid-column:span 2}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}td{font-size:14px}.icon-btn{border:0;background:#f6f7fb;border-radius:10px;padding:8px;cursor:pointer}.filterbar{display:flex;justify-content:flex-end;margin-bottom:16px}.filterbar select{min-width:180px}
.concept-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.concept-stats div{background:#f8f9fd;border-radius:15px;padding:16px}.concept-stats strong,.concept-stats span,.concept-stats small{display:block}.concept-stats span{color:var(--danger);font-weight:900;margin-top:8px}.concept-stats small{color:var(--muted);margin-top:4px}.empty{text-align:center;color:var(--muted);padding:25px}
@media(max-width:850px){.hero,.grid.two,.grid.three,.concept-grid,.stats{grid-template-columns:1fr}.hero{gap:20px}.hero-copy h1{font-size:54px}.topbar nav{display:none}.form-grid{grid-template-columns:1fr}.span2{grid-column:span 1}.concept-stats{grid-template-columns:1fr}.welcome{align-items:flex-start;gap:20px}.progress-ring{width:92px;height:92px}.question-card{padding:23px}.question-card h1{font-size:25px}}

/* Algemene Natuurkundelab-identiteit */
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(circle at 12% 15%,#6b5cf61a 0 2px,transparent 3px),radial-gradient(circle at 82% 26%,#20c99716 0 2px,transparent 3px);background-size:72px 72px,96px 96px;z-index:-1}
.science-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 280px;align-items:center;background:linear-gradient(135deg,#151c3b,#3b347f 55%,#166f76);color:white;border-radius:32px;padding:44px 48px;margin-bottom:28px;box-shadow:var(--shadow)}
.science-hero h1{font-size:48px;letter-spacing:-2px;margin:8px 0 14px}.science-hero h1 span{color:#9df3dc}.science-hero p{max-width:650px;color:#dce5ff;font-size:17px;line-height:1.6}.science-hero .eyebrow{color:#9df3dc}
.atom-art{position:relative;width:210px;height:210px;margin:auto;display:grid;place-items:center}.atom-art .nucleus{width:42px;height:42px;border-radius:50%;background:#9df3dc;color:#173b43;display:grid;place-items:center;box-shadow:0 0 38px #9df3dc88;z-index:2}.atom-art i{position:absolute;width:190px;height:72px;border:2px solid #ffffff88;border-radius:50%;transform:rotate(0)}.atom-art i:nth-child(3){transform:rotate(60deg)}.atom-art i:nth-child(4){transform:rotate(120deg)}
.chapter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.chapter-card{position:relative;background:white;border:1px solid var(--line);border-radius:24px;padding:24px;min-height:280px;box-shadow:0 10px 32px #25304d0a;transition:.22s;overflow:hidden}.chapter-card:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-55px;top:-55px;background:#6657f50c}.chapter-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d8d4ff}.chapter-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#efedff,#e8fbf5);font-size:29px;margin-bottom:18px}.chapter-meta{display:flex;justify-content:space-between;gap:12px;color:var(--primary);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.chapter-meta small{color:var(--muted);letter-spacing:0;text-transform:none}.chapter-card h2{font-size:22px;margin:10px 0 8px}.chapter-card p{color:var(--muted);line-height:1.5;font-size:14px}.chapter-go{position:absolute;left:24px;right:24px;bottom:22px;color:var(--primary);font-weight:900;font-size:13px;display:flex;justify-content:space-between}.chapter-heading{position:relative;padding-left:82px}.chapter-title-icon{position:absolute;left:0;top:38px;width:62px;height:62px;border-radius:19px;background:linear-gradient(135deg,#efedff,#e7faf5);display:grid;place-items:center;font-size:30px}.manage-row{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.manage-row small{display:block;color:var(--muted);margin-top:3px}.mini-icon{width:42px;height:42px;border-radius:12px;background:#f0edff;display:grid;place-items:center;font-size:20px}
@media(max-width:850px){.science-hero{grid-template-columns:1fr;padding:30px}.science-hero h1{font-size:38px}.atom-art{display:none}.chapter-grid{grid-template-columns:1fr}.chapter-heading{padding-left:0}.chapter-title-icon{position:static;margin:14px 0}}

/* Homepage met openbare planning */
.home-science-hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;min-height:520px;background:linear-gradient(135deg,#111936,#332a75 58%,#126c76);border-radius:34px;padding:54px;color:white;position:relative;overflow:hidden;box-shadow:var(--shadow);margin-bottom:28px}
.home-science-hero:before{content:"";position:absolute;width:520px;height:520px;border:1px solid #ffffff16;border-radius:50%;right:-230px;top:-210px;box-shadow:0 0 0 70px #ffffff07,0 0 0 140px #ffffff04}
.home-hero-copy{position:relative;z-index:2}.home-hero-copy .eyebrow{color:#9df3dc}.home-hero-copy h1{font-size:clamp(46px,6vw,72px);line-height:.98;letter-spacing:-3px;margin:10px 0 20px}.home-hero-copy h1 span{color:#9df3dc}.home-hero-copy p{font-size:18px;line-height:1.65;color:#dce4ff;max-width:680px}
.home-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.physics-tags{display:flex;flex-wrap:wrap;gap:8px}.physics-tags span{background:#ffffff12;border:1px solid #ffffff1c;padding:8px 10px;border-radius:999px;font-size:12px;font-weight:800;color:#e9eeff}
.home-visual{position:relative;height:340px}.formula-card{position:absolute;background:#ffffff12;border:1px solid #ffffff25;backdrop-filter:blur(8px);padding:13px 16px;border-radius:15px;font-weight:900;box-shadow:0 10px 28px #0002}.f1{left:0;top:35px;transform:rotate(-6deg)}.f2{right:10px;top:75px;transform:rotate(5deg)}.f3{left:40px;bottom:35px;transform:rotate(3deg)}.orbit{position:absolute;left:50%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%);display:grid;place-items:center}.orbit b{font-size:46px;color:#9df3dc;text-shadow:0 0 28px #9df3dc}.orbit i{position:absolute;width:205px;height:74px;border:2px solid #ffffff5c;border-radius:50%}.orbit i:nth-child(2){transform:rotate(60deg)}.orbit i:nth-child(3){transform:rotate(120deg)}
.home-paths{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:start}.path-card{background:white;border:1px solid var(--line);border-radius:26px;padding:30px;box-shadow:0 12px 32px #25304d0a}.public-path{background:linear-gradient(145deg,#f5f3ff,#effbf8);transition:.2s}.public-path:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.path-icon{width:58px;height:58px;border-radius:18px;background:white;display:grid;place-items:center;font-size:28px;box-shadow:0 8px 20px #25304d12;margin-bottom:18px}.path-card h2{font-size:28px;margin:8px 0}.path-card p{color:var(--muted);line-height:1.6}.public-path>strong{display:block;color:var(--primary);margin-top:28px}.name-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Openbare hoofdstukplanning */
.planning-hero{grid-template-columns:1fr 220px}.planning-illustration{font-size:82px;position:relative;text-align:center}.planning-illustration span{position:absolute;font-size:38px;right:22px;bottom:8px;background:#9df3dc;color:#142f36;border-radius:50%;width:64px;height:64px;display:grid;place-items:center;box-shadow:0 10px 28px #0002}
.public-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;background:white;border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-bottom:24px}.public-toolbar>div strong,.public-toolbar>div span{display:block}.public-toolbar>div span{color:var(--muted);font-size:13px;margin-top:3px}.public-toolbar select{min-width:240px}
.planning-chapter{margin:34px 0 46px}.planning-chapter-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}.chapter-title-icon.static{position:static;flex:0 0 auto}.planning-chapter-head h2{font-size:30px;margin:3px 0}
.week-block{display:grid;grid-template-columns:86px 1fr;gap:18px;margin-bottom:22px}.week-label{height:86px;border-radius:22px;background:linear-gradient(145deg,#6657f5,#8d6df9);color:white;display:grid;place-items:center;align-content:center;box-shadow:0 10px 25px #6657f52a}.week-label span{font-size:10px;font-weight:900;letter-spacing:.15em}.week-label strong{font-size:32px;line-height:1}.week-lessons{display:grid;gap:14px}
.public-lesson-card{background:white;border:1px solid var(--line);border-radius:22px;padding:22px 24px;box-shadow:0 8px 26px #25304d08}.lesson-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.lesson-number{background:#eef0ff;color:var(--primary);font-size:11px;font-weight:900;padding:6px 10px;border-radius:999px}.updated{font-size:11px;color:#99a1b0}.public-lesson-card h3{font-size:21px;margin:12px 0 7px}.lesson-description{color:var(--muted);line-height:1.6;margin:0 0 13px}.planning-notice{background:#fff7df;border:1px solid #ffe8a3;border-radius:12px;padding:10px 12px;margin:12px 0;font-size:13px}.planning-homework{display:flex;gap:12px;align-items:flex-start;background:#f7f9fd;border-radius:14px;padding:13px 14px;margin-top:12px}.planning-homework>span{font-size:22px}.planning-homework small,.planning-homework strong{display:block}.planning-homework small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900;margin-bottom:3px}.planning-homework strong{font-size:13px;line-height:1.5}
.resource-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.resource-link{display:inline-flex;align-items:center;gap:8px;background:#eefaf6;color:#14765d;border:1px solid #d9f0e8;border-radius:11px;padding:9px 11px;font-size:12px;font-weight:900}.resource-link span{opacity:.65}.planning-footer-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#161f3d;color:white;padding:28px 30px;border-radius:24px;margin-top:38px}.planning-footer-cta h2{margin:5px 0}.planning-footer-cta .eyebrow{color:#9df3dc}

/* Docentplanning */
.planning-admin-grid{grid-template-columns:.82fr 1.18fr}.sticky-editor{position:sticky;top:92px;align-self:start}.help-text{color:var(--muted);font-size:11px;line-height:1.4}.admin-plan-list{display:grid}.admin-chapter-divider{font-size:17px;font-weight:900;padding:18px 0 9px;border-bottom:2px solid #eceefa}.admin-week-divider{font-size:11px;font-weight:900;color:var(--primary);text-transform:uppercase;letter-spacing:.1em;padding:14px 0 6px}.admin-lesson{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.admin-lesson h3{margin:7px 0 4px;font-size:16px}.admin-lesson p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.admin-lesson-actions{display:flex;align-items:flex-start;gap:7px}.action-link{display:inline-grid;place-items:center}.change-note{display:block;color:#9a6b00;background:#fff8e5;border-radius:8px;padding:6px 8px;margin-top:8px}

@media(max-width:850px){
 .home-science-hero{grid-template-columns:1fr;padding:32px}.home-visual{display:none}.home-paths{grid-template-columns:1fr}.name-grid{grid-template-columns:1fr}
 .public-toolbar,.planning-footer-cta{align-items:flex-start;flex-direction:column}.public-toolbar form,.public-toolbar select{width:100%}.week-block{grid-template-columns:1fr}.week-label{height:auto;width:max-content;padding:10px 16px;display:flex;gap:7px;align-items:center}.week-label strong{font-size:22px}.planning-admin-grid{grid-template-columns:1fr}.sticky-editor{position:static}.planning-hero{grid-template-columns:1fr}.planning-illustration{display:none}
}

/* Datums en automatische afvinkstatus in openbare planning */
.week-label{min-height:104px;padding:10px 8px}
.week-label small{display:block;font-size:10px;line-height:1.25;text-align:center;color:#ece9ff;font-weight:700;margin-top:5px}
.planning-legend{display:flex;justify-content:flex-end;gap:16px;margin:-8px 0 14px;font-size:12px;font-weight:800;color:var(--muted)}
.planning-legend span{display:flex;align-items:center;gap:6px}.legend-dot,.lesson-status{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-style:normal;font-weight:900}
.legend-dot.done,.lesson-status.done{background:#e5f8ef;color:#13845b;border:1px solid #c8eedf}.legend-dot.planned,.lesson-status.planned{background:#f0efff;color:var(--primary);border:1px solid #dfdbff}
.lesson-meta-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.lesson-date{font-size:12px;font-weight:900;color:#49566f;background:#f3f5f9;padding:6px 9px;border-radius:999px}
.public-lesson-card.lesson-completed{background:#f7faf9;border-color:#dcebe5;opacity:.86}.public-lesson-card.lesson-completed h3{color:#6e7a75}.public-lesson-card.lesson-completed .lesson-description{color:#8a9490}.public-lesson-card.lesson-completed .planning-homework{opacity:.72}.public-lesson-card.lesson-completed .resource-links{opacity:.78}
.admin-lesson-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.admin-date{font-size:11px;font-weight:800;color:var(--muted);background:#f3f5f8;padding:5px 8px;border-radius:999px}
@media(max-width:850px){.planning-legend{justify-content:flex-start;flex-wrap:wrap}.week-label small{margin-left:6px}.week-label{min-height:auto}}

/* =========================================================
   KLASVRAGEN EN SOCIOGRAMMEN
   ========================================================= */
.privacy-chip{display:inline-flex;align-items:center;gap:6px;background:#f1efff;color:#5b4de1;border:1px solid #e2defe;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:900;white-space:nowrap}.privacy-chip-strong{padding:11px 14px}
.class-questions-section{margin:0 0 24px}.class-questions-section>.section-head{margin-bottom:12px}.class-questions-section h2{margin:4px 0 0;font-size:24px}.class-questions-card{display:grid;grid-template-columns:58px 1fr auto;gap:17px;align-items:center;background:white;border:2px solid #7769f7;border-radius:22px;padding:20px 22px;box-shadow:0 12px 34px #6657f512}.class-questions-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.class-questions-card.is-complete{border-color:#b9e8d7;background:#f8fffc}.class-questions-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:#def7ee;font-size:27px}.class-questions-copy p{margin:5px 0 10px;color:var(--muted)}.class-questions-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.class-questions-title>strong{font-size:20px}.class-questions-title>span{font-size:10px;font-weight:900;background:#e8f8f1;color:#15795b;padding:5px 8px;border-radius:999px}.class-questions-meta{display:flex;gap:8px;flex-wrap:wrap}.class-questions-meta span{font-size:11px;font-weight:800;color:#5e687b;background:#f4f6fa;border-radius:9px;padding:6px 8px}.class-questions-go{color:var(--primary);font-size:13px;font-weight:900;white-space:nowrap}
.class-question-shell{max-width:900px;margin:0 auto}.class-question-shell>.back{display:inline-block;margin:0 0 14px}.class-question-card{padding:32px}.class-question-card h1{margin:6px 0;font-size:34px}.class-question-progress{margin:22px 0 30px}.class-question-progress>div{display:flex;justify-content:space-between;font-size:12px;font-weight:900;color:#596579;margin-bottom:8px}.class-question-progress{height:auto;background:#eceef4;border-radius:999px;overflow:hidden}.class-question-progress>div{background:white}.class-question-progress>i{display:block;height:7px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary2))}.class-question-form h2{font-size:27px;margin:0 0 7px}.classmate-search{margin:13px 0 17px}.classmate-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.classmate-choice{display:grid;grid-template-columns:42px 1fr 24px;align-items:center;gap:10px;border:1px solid #dfe5ef;border-radius:15px;padding:12px;background:white;cursor:pointer}.classmate-choice:hover,.classmate-choice.is-selected{border-color:#7667f7;box-shadow:0 0 0 2px #6657f510}.classmate-choice input{position:absolute;opacity:0;pointer-events:none}.classmate-avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#efedff;color:#5144c8;font-weight:900}.classmate-choice strong,.classmate-choice small{display:block}.classmate-choice small{color:var(--muted);margin-top:2px}.classmate-choice i{width:22px;height:22px;border:1px solid #d8deea;border-radius:7px;display:grid;place-items:center;color:transparent;font-style:normal}.classmate-choice.is-selected i{background:var(--primary);border-color:var(--primary);color:white}.class-question-actions{display:flex;justify-content:space-between;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}.class-questions-finished .celebrate-icon{width:78px;height:78px;display:grid;place-items:center;margin:0 auto 12px;border-radius:25px;background:#e2f8ee;color:#16815f}
.sociogram-title{display:flex;justify-content:space-between;align-items:center;gap:24px}.sociogram-title>div{max-width:780px}.sociogram-admin-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}.sociogram-class-overview,.sociogram-new-session{margin:0}.sociogram-new-session{position:sticky;top:90px}.sociogram-class-table td{vertical-align:middle}.sociogram-class-table td small{display:block;color:var(--muted);margin-top:3px}.sociogram-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:900}.sociogram-status i{width:32px;height:18px;border-radius:999px;background:#dfe3eb;position:relative}.sociogram-status i:after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002}.sociogram-status.is-open{color:#594bd5}.sociogram-status.is-open i{background:var(--primary)}.sociogram-status.is-open i:after{left:17px}.sociogram-row-actions{display:flex;gap:7px;flex-wrap:wrap}.sociogram-row-actions form{margin:0}.sociogram-row-actions .btn{padding:9px 11px;font-size:11px}
.sociogram-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.sociogram-stats>div{background:white;border:1px solid var(--line);border-radius:18px;padding:17px;box-shadow:0 8px 22px #25304d08}.sociogram-stats span,.sociogram-stats strong{display:block}.sociogram-stats span{color:var(--muted);font-size:12px;font-weight:800}.sociogram-stats strong{font-size:29px;margin-top:5px}.sociogram-result-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px}.sociogram-network-card,.sociogram-insights{margin:0}.sociogram-filters{display:flex;gap:7px;flex-wrap:wrap}.sociogram-filters a{border:1px solid #dfe4ed;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:900;color:#566175}.sociogram-filters a.active{background:var(--primary);border-color:var(--primary);color:white}.sociogram-svg-wrap{max-width:820px;margin:10px auto}.sociogram-svg-wrap svg{display:block;width:100%;height:auto}.sociogram-legend{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:13px;font-size:11px;font-weight:800;color:var(--muted)}.sociogram-legend span{display:flex;align-items:center;gap:6px}.sociogram-legend i{width:24px;height:3px;border-radius:99px}.sociogram-legend .purple{background:#6657f5}.sociogram-legend .green{background:#20a978}.sociogram-legend .red{background:#ef7d8d}.insight-item{padding:16px 0;border-top:1px solid var(--line)}.insight-item:first-of-type{border-top:0}.insight-item p{color:var(--muted);font-size:13px;line-height:1.5;margin:6px 0 0}.insight-item.warning strong{color:#bb3041}.sociogram-code-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.sociogram-code-grid>div{display:flex;gap:9px;align-items:center;background:#f7f8fb;border-radius:11px;padding:10px}.sociogram-code-grid strong{color:var(--primary)}.sociogram-code-grid span{font-size:13px}
.sociogram-title-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.sociogram-method-warning{margin-bottom:18px}.sociogram-method-card{margin-bottom:18px}.sociogram-method-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}.sociogram-method-grid>div{background:#f7f8fb;border:1px solid #e8ebf2;border-radius:13px;padding:13px}.sociogram-method-grid .wide{grid-column:1/-1}.sociogram-method-grid dt{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--muted)}.sociogram-method-grid dd{margin:5px 0 0;font-size:13px;font-weight:750;line-height:1.45}.sociogram-question-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 0 18px;padding:2px 1px 8px}.sociogram-question-tabs a{min-width:145px;border:1px solid #dfe4ed;background:white;border-radius:13px;padding:10px 13px;color:#556176;font-size:12px;font-weight:850;box-shadow:0 5px 14px #25304d08}.sociogram-question-tabs a span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#8993a5;margin-bottom:3px}.sociogram-question-tabs a.active{background:var(--primary);border-color:var(--primary);color:white}.sociogram-question-tabs a.active span{color:#ddd9ff}.sociogram-table-card{margin-top:20px}.sociogram-matrix th,.sociogram-matrix td{text-align:center;min-width:44px;padding:9px}.sociogram-matrix th:first-child{text-align:left;position:sticky;left:0;background:white;z-index:1}.sociogram-matrix td.is-choice{background:#efedff;color:#5547d9;font-weight:900}.sociogram-matrix td.is-mutual{background:#dcf7eb;color:#147b59;font-weight:900}.sociogram-evidence-card,.sociogram-check-card,.sociogram-code-section{margin-top:20px}.sociogram-evidence-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sociogram-evidence-form label{font-weight:850}.sociogram-evidence-form textarea{margin-top:7px;min-height:110px;resize:vertical;line-height:1.5}.sociogram-evidence-form button{grid-column:1/-1;justify-self:start}.sociogram-proof-list{display:grid;gap:9px;margin:16px 0 0;padding-left:22px}.sociogram-proof-list li{padding-left:4px;line-height:1.45}.sociogram-consent{display:flex!important;align-items:flex-start;gap:10px;background:#f5f3ff;border:1px solid #ddd8ff;border-radius:13px;padding:12px!important}.sociogram-consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}.sociogram-consent span{font-size:12px;line-height:1.45}
@media(max-width:1000px){.sociogram-admin-layout,.sociogram-result-layout{grid-template-columns:1fr}.sociogram-new-session{position:static}.sociogram-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.class-questions-card{grid-template-columns:50px 1fr}.class-questions-go{grid-column:1/-1}.classmate-choice-grid{grid-template-columns:1fr}.sociogram-title{align-items:flex-start;flex-direction:column}.sociogram-stats,.sociogram-code-grid,.sociogram-method-grid,.sociogram-evidence-form{grid-template-columns:1fr}.sociogram-method-grid .wide{grid-column:auto}.sociogram-evidence-form button{grid-column:auto}.class-question-card{padding:22px}}
@media print{.no-print,header,footer,.sociogram-code-section{display:none!important}body{background:white!important}.container{max-width:none!important;padding:0!important}.card{box-shadow:none!important;break-inside:avoid}.sociogram-result-layout{grid-template-columns:minmax(0,1fr) 270px}.sociogram-evidence-form textarea{border:1px solid #bbb;min-height:90px;overflow:visible}.sociogram-question-tabs{display:none}.sociogram-table-card,.sociogram-evidence-card,.sociogram-check-card{break-before:page}.sociogram-method-card{break-inside:avoid}.sociogram-stats{grid-template-columns:repeat(4,1fr)}}

/* Algemene lesperiode: datum staat naast Les 1/Les 2, niet meer bij het weeknummer */
.week-label small{display:none!important}
.lesson-period{font-size:12px;font-weight:900;color:#5b6478;background:#f3f5f9;padding:6px 10px;border-radius:999px}
.lesson-completed .lesson-period{background:#e7f5ef;color:#477364}

/* Klasgestuurde omgeving */
.class-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 12px}.class-check-grid label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:700}.class-check-grid input{width:auto}.chapter-map-row{grid-template-columns:46px 1fr auto;align-items:flex-start}.class-link-form{margin-top:10px}
@media(max-width:850px){.class-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Taken en sessielog */
.task-alert-banner{display:grid;grid-template-columns:54px 1fr 30px;gap:14px;align-items:center;background:#fff9e8;border:1px solid #ffe2a0;border-radius:20px;padding:16px 18px;margin-bottom:20px}
.task-alert-icon{font-size:25px}.task-summary{display:grid;grid-template-columns:repeat(2,minmax(0,190px));gap:12px;margin-bottom:20px}.task-summary div{background:white;border:1px solid var(--line);border-radius:17px;padding:16px}.task-summary span,.task-summary strong{display:block}.task-summary strong{font-size:28px}
.student-task-list{display:grid;gap:14px}.student-task-card{display:grid;grid-template-columns:44px 1fr;gap:15px;background:white;border:1px solid var(--line);border-radius:20px;padding:20px}.task-state{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff1d1;font-weight:900}.student-task-card.done{opacity:.7;background:#f7faf8}.student-task-card.done .task-state{background:#daf4e6;color:#167c5a}.task-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.task-due{font-size:11px;font-weight:800;background:#f3f4f7;padding:5px 8px;border-radius:999px}.task-due.late{background:#ffe9ed;color:#b72d42}.teacher-task-list{display:grid}.teacher-task-row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}.teacher-task-actions{display:flex;gap:7px}.task-admin-grid{grid-template-columns:.8fr 1.2fr}.session-filters{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr auto;gap:10px;align-items:end}.session-proof{color:#16805c;font-weight:900}.privacy-note{margin-top:15px;background:#eef5ff;border:1px solid #dce8ff;padding:14px 16px;border-radius:14px;color:#53627b}
@media(max-width:900px){.task-admin-grid{grid-template-columns:1fr}.session-filters{grid-template-columns:1fr 1fr}}@media(max-width:600px){.student-task-card,.teacher-task-row{grid-template-columns:1fr}.session-filters,.task-summary{grid-template-columns:1fr}}


/* =========================================================
   MOTIVATIE-EFFECT BIJ OEFENVRAGEN
   ========================================================= */
.motivation-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  background:rgba(245,248,255,.10);
  backdrop-filter:blur(0px);
  transition:opacity .22s ease, backdrop-filter .22s ease;
  overflow:hidden;
}

.motivation-overlay.show{
  opacity:1;
  backdrop-filter:blur(2px);
}

.motivation-overlay.hide{
  opacity:0;
}

.motivation-card{
  position:relative;
  z-index:3;
  min-width:min(360px,calc(100vw - 40px));
  max-width:440px;
  padding:27px 30px 25px;
  border-radius:27px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    0 24px 70px rgba(31,45,90,.22),
    0 4px 16px rgba(31,45,90,.08);
  text-align:center;
  transform:translateY(20px) scale(.82);
  opacity:0;
}

.motivation-overlay.show .motivation-card{
  animation:motivation-pop .48s cubic-bezier(.18,.89,.32,1.28) forwards;
}

.motivation-icon{
  width:74px;
  height:74px;
  margin:0 auto 13px;
  display:grid;
  place-items:center;
  border-radius:24px;
  font-size:38px;
  transform:rotate(-4deg);
}

.motivation-correct .motivation-icon{
  background:linear-gradient(145deg,#e7fff4,#dcf5ff);
  box-shadow:0 10px 30px rgba(39,187,139,.16);
}

.motivation-incorrect .motivation-icon{
  background:linear-gradient(145deg,#fff5d9,#fffbe9);
  box-shadow:0 10px 30px rgba(230,174,39,.16);
}

.motivation-unknown .motivation-icon{
  background:#eef3ff;
}

.motivation-card strong{
  display:block;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.03em;
  color:#172238;
}

.motivation-card span{
  display:block;
  margin-top:7px;
  font-size:14px;
  line-height:1.5;
  color:#6d788e;
  font-weight:650;
}

.motivation-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.motivation-confetti{
  position:absolute;
  left:var(--x);
  top:-30px;
  width:var(--size);
  height:calc(var(--size) * 1.45);
  border-radius:3px;
  background:currentColor;
  animation:motivation-fall var(--duration) ease-in var(--delay) forwards;
  opacity:.95;
}

.motivation-confetti:nth-child(5n+1){color:#635bff}
.motivation-confetti:nth-child(5n+2){color:#25b986}
.motivation-confetti:nth-child(5n+3){color:#ffbd3e}
.motivation-confetti:nth-child(5n+4){color:#ff6f91}
.motivation-confetti:nth-child(5n){color:#39a8ff}

.motivation-spark{
  position:absolute;
  left:var(--x);
  top:52%;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:#ffbd3e;
  box-shadow:0 0 18px rgba(255,189,62,.8);
  opacity:0;
  animation:motivation-rise var(--duration) ease-out var(--delay) forwards;
}

.motivation-spark:nth-child(3n+2){
  background:#7668ff;
  box-shadow:0 0 18px rgba(118,104,255,.55);
}

.motivation-spark:nth-child(3n){
  background:#55c7aa;
  box-shadow:0 0 18px rgba(85,199,170,.55);
}

@keyframes motivation-pop{
  0%{transform:translateY(24px) scale(.78);opacity:0}
  68%{transform:translateY(-4px) scale(1.035);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}

@keyframes motivation-fall{
  0%{
    transform:translate3d(0,-30px,0) rotate(0deg);
    opacity:0;
  }
  12%{opacity:1}
  100%{
    transform:translate3d(calc((var(--x) - 50vw) * -.16),110vh,0) rotate(var(--rotate));
    opacity:.9;
  }
}

@keyframes motivation-rise{
  0%{
    transform:translateY(45px) scale(.3);
    opacity:0;
  }
  25%{opacity:.95}
  100%{
    transform:translateY(-170px) scale(1.4);
    opacity:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .motivation-overlay,
  .motivation-card,
  .motivation-confetti,
  .motivation-spark{
    animation:none !important;
    transition:none !important;
  }
  .motivation-overlay.show{opacity:1}
  .motivation-overlay.show .motivation-card{
    opacity:1;
    transform:none;
  }
  .motivation-particles{display:none}
}


/* =========================================================
   DOCENT - LEERLINGANTWOORDEN EN WAARSCHUWINGEN
   ========================================================= */

.teacher-warning-panel{
  display:grid;
  grid-template-columns:58px 1fr auto;
  gap:16px;
  align-items:center;
  background:linear-gradient(135deg,#fff7e3,#fffdf7);
  border:1px solid #ffd983;
  border-radius:22px;
  padding:18px 20px;
  margin-bottom:20px;
  box-shadow:0 8px 26px rgba(178,116,0,.08);
}

.warning-panel-icon{
  width:52px;
  height:52px;
  border-radius:17px;
  background:white;
  display:grid;
  place-items:center;
  font-size:25px;
  box-shadow:0 8px 20px rgba(148,100,0,.08);
}

.teacher-warning-panel h2{
  margin:2px 0 4px;
  font-size:22px;
}

.teacher-warning-panel p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}

.btn-warning-outline{
  background:white;
  border:1px solid #f2c554;
  color:#805700;
}

.teacher-success-panel{
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 17px;
  margin-bottom:20px;
  background:#effbf5;
  border:1px solid #cfeee0;
  border-radius:18px;
}

.teacher-success-panel>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  background:#d9f5e8;
  border-radius:50%;
  color:#167957;
  font-weight:900;
}

.teacher-success-panel strong,
.teacher-success-panel small{
  display:block;
}

.teacher-success-panel small{
  color:var(--muted);
  margin-top:2px;
}

.answer-filters{
  display:grid;
  grid-template-columns:1fr 1.45fr 1fr 1fr auto auto auto;
  gap:10px;
  align-items:end;
}

.warning-checkbox{
  min-height:43px;
  display:flex;
  gap:7px;
  align-items:center;
  font-size:12px;
  font-weight:800;
}

.warning-checkbox input{
  width:auto;
}

.warning-card{
  border-color:#ffd9a2;
}

.warning-count{
  min-width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff0d2;
  color:#8a5b00;
  font-weight:900;
}

.no-attempt-list,
.blank-answer-list{
  display:grid;
}

.no-attempt-row{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:13px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}

.no-attempt-row:last-child{
  border-bottom:0;
}

.warning-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff0d8;
  color:#9a5f00;
  display:grid;
  place-items:center;
  font-weight:1000;
}

.no-attempt-row strong,
.no-attempt-row span,
.no-attempt-meta small{
  display:block;
}

.no-attempt-row>div:nth-child(2)>span,
.no-attempt-meta{
  color:var(--muted);
  font-size:12px;
}

.no-attempt-meta{
  text-align:right;
}

.no-attempt-meta strong{
  color:var(--ink);
  font-size:13px;
}

.blank-answer-row{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

.blank-answer-row:last-child{
  border-bottom:0;
}

.blank-answer-row small{
  color:var(--muted);
  display:block;
  margin-bottom:3px;
}

.blank-answer-badge{
  display:inline-block;
  padding:6px 9px;
  border-radius:999px;
  background:#fff0e7;
  color:#b25020;
  font-size:11px;
  font-weight:900;
  margin-bottom:5px;
}

.teacher-answer-list{
  display:grid;
  gap:13px;
}

.teacher-answer-card{
  border:1px solid var(--line);
  border-radius:19px;
  padding:18px;
  background:white;
}

.teacher-answer-card.needs-attention{
  border-color:#ffd8ae;
  background:linear-gradient(135deg,#fff,#fffdf9);
}

.teacher-answer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.teacher-answer-head>div:first-child{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.answer-time{
  color:var(--muted);
  text-align:right;
  font-size:11px;
}

.answer-time strong{
  display:block;
  color:var(--ink);
  font-size:13px;
  margin-top:2px;
}

.answer-context{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:11px;
  font-size:11px;
  color:var(--muted);
}

.answer-context strong{
  color:#4f5c78;
}

.answer-question{
  margin-bottom:12px;
}

.answer-question small,
.answer-box small{
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:5px;
}

.answer-question p{
  margin:0;
  font-weight:750;
  line-height:1.45;
}

.answer-comparison{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}

.answer-box{
  border-radius:14px;
  padding:13px 14px;
  background:#f7f8fb;
  border:1px solid #edf0f5;
}

.answer-box.blank{
  background:#fff6f2;
  border-color:#ffd9c8;
}

.correct-answer-box{
  background:#f2faf6;
  border-color:#daeee4;
}

.blank-text{
  color:#b34d25;
}

.answer-status-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}

.answer-result,
.answer-not-understood,
.answer-missing{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}

.answer-good{
  background:#e4f7ed;
  color:#147553;
}

.answer-practice{
  background:#fff0d7;
  color:#956000;
}

.answer-neutral{
  background:#edf0f6;
  color:#68738a;
}

.answer-not-understood{
  background:#eeeafe;
  color:#6554bb;
}

.answer-missing{
  background:#ffece6;
  color:#ac4f2b;
}

.dashboard-answer-warning{
  display:grid;
  grid-template-columns:46px 1fr 24px;
  gap:13px;
  align-items:center;
  background:#fff7e6;
  border:1px solid #ffdc91;
  border-radius:18px;
  padding:14px 16px;
  margin-bottom:18px;
  box-shadow:0 7px 22px rgba(150,95,0,.07);
}

.dashboard-warning-icon{
  width:40px;
  height:40px;
  background:white;
  display:grid;
  place-items:center;
  border-radius:13px;
  font-size:20px;
}

.dashboard-answer-warning strong,
.dashboard-answer-warning small{
  display:block;
}

.dashboard-answer-warning small{
  color:var(--muted);
  margin-top:3px;
}

@media(max-width:1000px){
  .answer-filters{
    grid-template-columns:1fr 1fr 1fr;
  }

  .teacher-warning-panel{
    grid-template-columns:52px 1fr;
  }

  .teacher-warning-panel .btn{
    grid-column:1/-1;
  }
}

@media(max-width:700px){
  .answer-filters,
  .answer-comparison,
  .blank-answer-row{
    grid-template-columns:1fr;
  }

  .no-attempt-row{
    grid-template-columns:42px 1fr;
  }

  .no-attempt-meta{
    grid-column:2;
    text-align:left;
  }

  .teacher-answer-head{
    flex-direction:column;
  }

  .answer-time{
    text-align:left;
  }
}


/* =========================================================
   DOCENT - AANDACHTSOVERZICHT
   ========================================================= */

.attention-stats{
  display:grid;
  grid-template-columns:1.35fr repeat(4,1fr);
  gap:12px;
  margin-bottom:18px;
}

.attention-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:15px 16px;
  box-shadow:0 6px 20px rgba(38,51,87,.045);
}

.attention-stat.main{
  background:linear-gradient(135deg,#fff7e7,#fffdf7);
  border-color:#ffdda0;
}

.attention-stat span,
.attention-stat strong,
.attention-stat small{
  display:block;
}

.attention-stat span{
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.attention-stat strong{
  font-size:29px;
  margin-top:4px;
  color:var(--ink);
}

.attention-stat small{
  color:var(--muted);
  margin-top:2px;
  font-size:11px;
}

.attention-filter-card{
  margin-bottom:17px;
}

.attention-filters{
  display:grid;
  grid-template-columns:1fr 2fr auto auto;
  gap:11px;
  align-items:end;
}

.attention-list{
  display:grid;
  gap:11px;
}

.attention-student-card{
  display:grid;
  grid-template-columns:54px 1fr 78px;
  gap:15px;
  align-items:center;
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px 17px;
  box-shadow:0 6px 22px rgba(42,53,88,.045);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.attention-student-card:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 31px rgba(42,53,88,.09);
  border-color:#d7d4ff;
}

.attention-avatar,
.student-detail-avatar{
  display:grid;
  place-items:center;
  border-radius:17px;
  background:linear-gradient(145deg,#eeeaff,#f4f2ff);
  color:#5c50ba;
  font-weight:950;
  letter-spacing:.02em;
}

.attention-avatar{
  width:50px;
  height:50px;
  font-size:17px;
}

.attention-name-line{
  display:flex;
  gap:9px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.attention-name-line h2{
  font-size:18px;
  margin:0;
}

.attention-badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.attention-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 8px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:900;
}

.attention-badge.red{
  background:#ffe9e7;
  color:#a94238;
}

.attention-badge.orange{
  background:#fff1d9;
  color:#8a5c00;
}

.attention-badge.purple{
  background:#eeeaff;
  color:#6352b8;
}

.attention-activity{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:11px;
}

.attention-activity span{
  display:block;
}

.attention-activity small{
  display:block;
  color:var(--muted);
  font-size:9.5px;
  font-weight:800;
  text-transform:uppercase;
}

.attention-activity strong{
  display:block;
  font-size:12px;
  margin-top:2px;
}

.attention-score{
  min-height:66px;
  display:grid;
  place-items:center;
  align-content:center;
  border-left:1px solid var(--line);
  color:#6e778c;
}

.attention-score small{
  font-size:9px;
  text-transform:uppercase;
  font-weight:900;
}

.attention-score strong{
  font-size:23px;
  color:#b26719;
}

.attention-score>span{
  margin-top:1px;
  font-size:17px;
  color:#7469cf;
}

.attention-all-good{
  text-align:center;
  padding:40px 24px;
}

.attention-all-good>div{
  font-size:40px;
}

.attention-all-good h2{
  margin-bottom:5px;
}

/* Detailpagina */

.detail-back{
  margin-bottom:13px;
}

.detail-back a{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.student-attention-hero{
  display:flex;
  align-items:center;
  gap:17px;
  background:white;
  border:1px solid var(--line);
  border-radius:23px;
  padding:20px;
  margin-bottom:14px;
}

.student-detail-avatar{
  width:66px;
  height:66px;
  font-size:21px;
}

.student-attention-hero h1{
  margin:3px 0 7px;
}

.student-detail-sub{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.attention-detail-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:15px;
}

.attention-detail-stats>div{
  padding:14px;
  border-radius:16px;
  background:white;
  border:1px solid var(--line);
}

.attention-detail-stats span{
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
}

.attention-detail-stats strong{
  display:block;
  margin-top:3px;
  font-size:24px;
}

.student-major-warning{
  display:grid;
  grid-template-columns:50px 1fr;
  gap:13px;
  padding:17px;
  border-radius:19px;
  background:#fff4e7;
  border:1px solid #ffd49a;
  margin-bottom:16px;
}

.student-major-warning>div:first-child{
  width:45px;
  height:45px;
  border-radius:14px;
  background:white;
  display:grid;
  place-items:center;
  font-size:22px;
}

.student-major-warning h2{
  font-size:17px;
  margin:3px 0 5px;
}

.student-major-warning p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.student-issues-section{
  margin-top:20px;
}

.student-issue-list{
  display:grid;
  gap:13px;
}

.student-issue-card{
  background:white;
  border:1px solid #e7e5f2;
  border-radius:20px;
  padding:18px;
  box-shadow:0 6px 22px rgba(45,52,84,.04);
}

.issue-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}

.issue-card-head>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.issue-chapter{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}

.issue-card-head time{
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
}

.issue-flags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:13px;
}

.issue-question{
  padding:12px 13px;
  border-radius:14px;
  background:#f8f8fb;
  margin-bottom:10px;
}

.issue-question small,
.issue-answer-box small{
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.055em;
  font-size:9px;
  font-weight:900;
  margin-bottom:4px;
}

.issue-question p{
  margin:0;
  font-weight:760;
}

.issue-answer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.issue-answer-box{
  border-radius:14px;
  padding:12px 13px;
}

.issue-answer-box p{
  margin:0;
  line-height:1.5;
}

.issue-answer-box.student-answer{
  background:#fff8f3;
  border:1px solid #f7ded0;
}

.issue-answer-box.student-answer.blank{
  color:#ad4f2d;
}

.issue-answer-box.model-answer{
  background:#f2faf6;
  border:1px solid #d9eee4;
}

.issue-explanation{
  margin-top:10px;
  border-top:1px solid var(--line);
  padding-top:10px;
}

.issue-explanation summary{
  cursor:pointer;
  font-size:11px;
  font-weight:850;
  color:#5b6476;
}

.issue-explanation p{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.session-history-card{
  margin-top:18px;
}

.student-session-list{
  display:grid;
}

.student-session-row{
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

.student-session-row:last-child{
  border-bottom:0;
}

.session-number{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#f0effa;
  color:#685bc1;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:900;
}

.student-session-row strong,
.student-session-row small{
  display:block;
}

.student-session-row small{
  color:var(--muted);
  font-size:10px;
}

.latest-session{
  background:#e7f7ef;
  color:#177455;
  border-radius:999px;
  padding:4px 7px;
  font-size:9px;
  font-weight:900;
}

.detail-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:15px;
}

@media(max-width:950px){
  .attention-stats{
    grid-template-columns:repeat(3,1fr);
  }

  .attention-filters{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:680px){
  .attention-stats,
  .attention-detail-stats,
  .issue-answer-grid{
    grid-template-columns:1fr 1fr;
  }

  .attention-student-card{
    grid-template-columns:48px 1fr;
  }

  .attention-score{
    grid-column:1/-1;
    grid-template-columns:auto auto auto;
    gap:7px;
    min-height:auto;
    padding-top:10px;
    border-left:0;
    border-top:1px solid var(--line);
    justify-content:start;
  }

  .attention-filters{
    grid-template-columns:1fr;
  }

  .attention-activity{
    gap:11px;
  }
}

@media(max-width:450px){
  .attention-stats,
  .attention-detail-stats{
    grid-template-columns:1fr;
  }

  .student-attention-hero{
    align-items:flex-start;
  }
}


/* =========================================================
   UITBREIDING: planning per klas, cursus, leerlingen, IP
   ========================================================= */

.student-admin-grid,.course-admin-grid{grid-template-columns:.8fr 1.2fr}
.student-manage-list,.course-admin-list{display:grid}
.student-manage-row,.course-admin-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.student-manage-row small{display:block;color:var(--muted);margin-top:4px}
.student-manage-actions{display:flex;gap:6px}
.course-admin-row{grid-template-columns:42px 1fr auto}
.course-admin-number{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#f0edff;color:var(--primary);font-weight:900}
.course-admin-row h3{margin:4px 0}
.course-admin-row p{margin:0;color:var(--muted);font-size:12px}
.course-admin-row small{color:var(--muted)}
.course-media-flags{margin-top:6px;font-size:11px;color:#68758b}
.course-existing-media{padding:10px;border:1px solid var(--line);border-radius:14px}
.course-existing-media img{display:block;max-width:100%;max-height:220px;border-radius:10px;margin-bottom:5px}

.course-reader{max-width:900px;margin:10px auto 60px}
.course-reader-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.course-page-counter{font-size:12px;color:var(--muted);font-weight:800}
.course-progress{height:7px;background:#e7e9f1;border-radius:999px;overflow:hidden;margin-bottom:20px}
.course-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:999px;transition:.3s}
.course-book-page{min-height:540px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:45px 52px;box-shadow:var(--shadow);position:relative}
.course-book-page:after{content:"";position:absolute;right:16px;top:16px;bottom:16px;width:1px;background:linear-gradient(transparent,#ececf2,transparent)}
.course-book-heading h1{font-size:38px;letter-spacing:-1.2px;margin:8px 0 4px}
.course-book-heading small{color:var(--muted);font-weight:800}
.course-body{font-size:18px;line-height:1.8;margin:30px 0;color:#28344a}
.course-figure{margin:28px 0;text-align:center}
.course-figure img{max-width:100%;max-height:520px;border-radius:18px;box-shadow:0 8px 28px #25304d14}
.course-reader-nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}

.schoolmail-card{margin-top:22px}.mail-icon{font-size:28px}
.ip-note{margin-bottom:18px}.ip-note strong{display:block;color:#34425a;margin-bottom:3px}
.ip-shared-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#fff0d9;color:#8b5900;font-size:10px;font-weight:900}
.ip-filters{grid-template-columns:1fr 1fr 1fr 1.2fr 1.2fr auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#f3f4f7;padding:4px 6px;border-radius:7px}

@media(max-width:850px){
  .student-admin-grid,.course-admin-grid{grid-template-columns:1fr}
  .course-book-page{padding:28px 24px;min-height:460px}
  .course-book-heading h1{font-size:30px}
  .course-body{font-size:16px}
  .ip-filters{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){
  .course-reader-nav{flex-direction:column}
  .course-reader-nav .btn{width:100%}
  .student-manage-row{grid-template-columns:1fr}
  .course-admin-row{grid-template-columns:34px 1fr}
  .course-admin-row .admin-lesson-actions{grid-column:2}
  .ip-filters{grid-template-columns:1fr}
}


/* =========================================================
   NIEUWE CURSUSERVARING
   ========================================================= */

.learning-shell{
  max-width:1180px;
  margin:18px auto 70px;
}

.learning-course-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  margin-bottom:17px;
}

.course-back-link{
  color:#66748c;
  font-weight:850;
  font-size:13px;
}

.course-header-center{
  text-align:center;
}

.course-header-center strong{
  display:block;
  margin-top:3px;
  font-size:15px;
  color:#172338;
}

.course-chapter-label{
  color:#685cff;
  font-size:10px;
  font-weight:950;
  letter-spacing:1.7px;
  text-transform:uppercase;
}

.course-page-pill{
  justify-self:end;
  padding:8px 12px;
  border-radius:999px;
  background:#f0eeff;
  color:#6558ec;
  font-size:12px;
  font-weight:900;
}

.course-progress-wrap{
  margin-bottom:19px;
}

.course-progress-info{
  display:flex;
  justify-content:space-between;
  margin-bottom:7px;
  color:#718099;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.course-progress-modern{
  height:8px;
  border-radius:999px;
  background:#e9ecf4;
  overflow:hidden;
}

.course-progress-modern i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#6255f4,#8c63ff);
  box-shadow:0 3px 12px rgba(98,85,244,.24);
}

.course-stage{
  display:grid;
  grid-template-columns:245px minmax(0,1fr);
  gap:22px;
  align-items:start;
}

.course-index{
  background:rgba(255,255,255,.75);
  border:1px solid #e5e8f1;
  border-radius:22px;
  padding:17px;
  box-shadow:0 12px 30px rgba(34,45,70,.05);
  backdrop-filter:blur(10px);
}

.course-index-title{
  display:block;
  margin:3px 5px 12px;
  color:#7b879b;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:1.25px;
}

.course-index-item,
.course-index-final{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:10px;
  align-items:center;
  padding:10px 8px;
  border-radius:13px;
  margin-bottom:4px;
}

.course-index-item>span,
.course-index-final>span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#f0f2f6;
  color:#7b8798;
  font-size:11px;
  font-weight:950;
}

.course-index-item strong,
.course-index-final strong{
  display:block;
  font-size:11px;
  line-height:1.25;
  color:#334158;
}

.course-index-item small,
.course-index-final small{
  display:block;
  margin-top:2px;
  font-size:9px;
  color:#9ba4b3;
}

.course-index-item.current{
  background:#f2f0ff;
}

.course-index-item.current>span{
  background:#6758f2;
  color:white;
  box-shadow:0 5px 13px rgba(103,88,242,.2);
}

.course-index-item.current strong{
  color:#5144d1;
}

.course-index-item.done>span{
  background:#e9f8f1;
  color:#238161;
}

.course-index-item.locked{
  opacity:.48;
}

.course-index-final{
  margin-top:10px;
  border-top:1px solid #edf0f5;
  border-radius:0;
  padding-top:15px;
}

.course-index-final>span{
  background:#fff5dd;
}

.course-content-card{
  min-height:570px;
  display:grid;
  grid-template-columns:82px 1fr;
  overflow:hidden;
  background:white;
  border:1px solid #e3e7ef;
  border-radius:28px;
  box-shadow:0 22px 55px rgba(35,45,68,.08);
}

.course-content-number{
  padding-top:37px;
  text-align:center;
  background:linear-gradient(180deg,#f5f3ff,#fbfbfe);
  border-right:1px solid #ececf5;
}

.course-content-number span{
  display:block;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
  color:#8a84b7;
  text-transform:uppercase;
}

.course-content-number strong{
  display:block;
  margin-top:7px;
  font-size:31px;
  letter-spacing:-1px;
  color:#6557ec;
}

.course-content-main{
  max-width:790px;
  padding:48px 58px 55px;
}

.course-content-main h1{
  margin:8px 0 25px;
  font-size:39px;
  line-height:1.08;
  letter-spacing:-1.3px;
  color:#162238;
}

.course-reading-text{
  color:#344159;
  font-size:17px;
  line-height:1.85;
}

.course-media-card{
  margin-top:30px;
  border:1px solid #e5e7ee;
  border-radius:20px;
  overflow:hidden;
  background:#f8f9fb;
}

.course-media-card.image-media{
  padding:12px;
}

.course-media-card img{
  display:block;
  max-width:100%;
  max-height:500px;
  margin:auto;
  border-radius:13px;
}

.video-label{
  padding:11px 15px;
  font-size:11px;
  font-weight:900;
  color:#5146c7;
  background:#f0eeff;
}

.course-bottom-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin-top:17px;
  padding:14px 17px;
  background:white;
  border:1px solid #e5e8ef;
  border-radius:19px;
  box-shadow:0 12px 34px rgba(35,45,68,.06);
}

.course-bottom-right{
  justify-self:end;
}

.course-bottom-hint{
  color:#8a95a7;
  font-size:10px;
  font-weight:750;
}

.course-nav-primary,
.course-nav-secondary{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:0 18px;
  border-radius:13px;
  border:none;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.course-nav-primary{
  background:linear-gradient(135deg,#6254f4,#8862ff);
  color:white;
  box-shadow:0 9px 23px rgba(101,84,244,.22);
}

.course-nav-primary span{
  font-size:16px;
}

.course-nav-secondary{
  background:#f4f5f8;
  color:#58677e;
}

.course-finish-btn{
  background:linear-gradient(135deg,#1ea675,#45c48d);
}

.course-empty-state{
  max-width:650px;
  margin:80px auto;
  text-align:center;
  padding:42px;
  background:white;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}

.course-empty-icon{
  font-size:52px;
  margin-bottom:15px;
}

/* Login password */

.password-input-wrap{
  position:relative;
}

.password-input-wrap input{
  padding-right:90px;
}

.password-toggle{
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:#f0eeff;
  color:#5c4fdb;
  padding:7px 10px;
  border-radius:9px;
  font:inherit;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.student-password-code{
  user-select:all;
  background:#f0eeff;
  color:#5447ce;
  font-weight:900;
}

.field-help{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:500;
}

@media(max-width:900px){
  .course-stage{
    grid-template-columns:1fr;
  }

  .course-index{
    display:none;
  }

  .course-content-main{
    padding:38px 34px 45px;
  }

  .course-content-main h1{
    font-size:34px;
  }
}

@media(max-width:620px){
  .learning-course-header{
    grid-template-columns:1fr auto;
  }

  .course-header-center{
    display:none;
  }

  .course-content-card{
    grid-template-columns:1fr;
    min-height:0;
  }

  .course-content-number{
    padding:12px 20px;
    display:flex;
    gap:6px;
    align-items:center;
    text-align:left;
    border-right:0;
    border-bottom:1px solid #ececf5;
  }

  .course-content-number span,
  .course-content-number strong{
    display:inline;
    margin:0;
  }

  .course-content-number strong{
    font-size:19px;
  }

  .course-content-main{
    padding:27px 22px 34px;
  }

  .course-content-main h1{
    font-size:29px;
  }

  .course-reading-text{
    font-size:16px;
  }

  .course-bottom-bar{
    grid-template-columns:1fr 1fr;
  }

  .course-bottom-hint{
    display:none;
  }

  .course-nav-primary,
  .course-nav-secondary{
    width:100%;
  }
}


/* =========================================================
   PLANNING - DIRECT KLIKBARE LINKS + NAVIGATIE
   ========================================================= */

.planning-page-nav{
  max-width:1180px;
  margin:0 auto 16px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:10px 4px;
}

.planning-home-link,
.planning-switch-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#65738a;
  font-size:12px;
  font-weight:850;
}

.planning-switch-link{
  justify-self:end;
  padding:8px 11px;
  border-radius:10px;
  background:#f0eeff;
  color:#5d50df;
}

.planning-page-nav-center{
  text-align:center;
}

.planning-page-nav-center span,
.planning-page-nav-center strong{
  display:block;
}

.planning-page-nav-center span{
  color:#8792a5;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}

.planning-page-nav-center strong{
  margin-top:2px;
  color:#1d2940;
  font-size:15px;
}

.planning-resources{
  margin-top:15px;
  padding-top:13px;
  border-top:1px solid #eceef3;
}

.planning-resources>small{
  display:block;
  margin-bottom:8px;
  color:#8792a5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.resource-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.resource-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 12px;
  border-radius:11px;
  border:1px solid #deddf7;
  background:#f8f7ff;
  color:#5548d3;
  font-size:11px;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

.resource-link:hover{
  transform:translateY(-1px);
  background:#f0edff;
  border-color:#cfc9ff;
}

.resource-link-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:white;
  color:#6558ec;
  box-shadow:0 3px 10px rgba(80,69,196,.10);
}

@media(max-width:620px){
  .planning-page-nav{
    grid-template-columns:1fr 1fr;
  }

  .planning-page-nav-center{
    display:none;
  }

  .resource-links{
    display:grid;
  }

  .resource-link{
    width:100%;
  }
}


/* =========================================================
   MIJN OVERZICHT - DIRECTE LESLINKS
   ========================================================= */

.student-overview-resource-links{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid #deddf7;
  border-radius:14px;
  background:linear-gradient(135deg,#f8f7ff,#f5fbff);
}

.student-resource-label{
  display:block;
  margin-bottom:8px;
  color:#68758a;
  font-size:10px;
  font-weight:900;
  letter-spacing:.3px;
}

.student-overview-resource-links .resource-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.student-overview-resource-links .resource-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 13px;
  border-radius:11px;
  background:white;
  border:1px solid #dcd8ff;
  color:#584bd9;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 5px 14px rgba(76,65,178,.07);
  transition:transform .15s ease, box-shadow .15s ease;
}

.student-overview-resource-links .resource-link:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(76,65,178,.12);
}

.student-overview-resource-links .resource-link-icon{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#efedff;
  color:#6154e8;
}

@media(max-width:620px){
  .student-overview-resource-links .resource-links{
    display:grid;
  }

  .student-overview-resource-links .resource-link{
    width:100%;
  }
}


/* =========================================================
   CURSUS 2026 - FOCUS MODE
   ========================================================= */

.course-app{
  max-width:1440px;
  margin:18px auto 60px;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.course-sidebar{
  position:sticky;
  top:82px;
  background:#fff;
  border:1px solid #e5e8f0;
  border-radius:22px;
  padding:20px;
  box-shadow:0 10px 30px rgba(35,45,70,.05);
}

.course-sidebar-back{
  display:block;
  margin-bottom:24px;
  color:#67758c;
  font-size:12px;
  font-weight:850;
}

.course-sidebar-chapter{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:20px;
}

.course-sidebar-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,#f0f1ff,#eef8ff);
  font-size:23px;
}

.course-sidebar-chapter small{
  display:block;
  margin-bottom:2px;
  color:#8a95a8;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
}

.course-sidebar-chapter strong{
  display:block;
  color:#152139;
  font-size:15px;
  line-height:1.25;
}

.course-sidebar-current{
  overflow:hidden;
  border:1px solid #e5e7ef;
  border-radius:17px;
  background:#fff;
}

.course-sidebar-current-title{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border:0;
  background:#fff;
  color:#5549d5;
  font:inherit;
  font-size:12px;
  font-weight:900;
  text-align:left;
}

.course-sidebar-pages{
  padding:0 10px 10px;
}

.course-side-page{
  display:grid;
  grid-template-columns:29px 1fr;
  gap:9px;
  align-items:center;
  padding:9px 10px;
  border-radius:11px;
  margin-bottom:3px;
}

.course-side-page.active{
  background:#f0eeff;
}

.course-side-page.locked{
  opacity:.48;
}

.course-side-page-number{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#f3f4f7;
  color:#7f8999;
  font-size:10px;
  font-weight:950;
}

.course-side-page.active .course-side-page-number{
  background:#6456ef;
  color:#fff;
  box-shadow:0 5px 12px rgba(100,86,239,.18);
}

.course-side-page.done .course-side-page-number{
  background:#e7f8f1;
  color:#258467;
}

.course-side-page-text strong{
  display:block;
  color:#344159;
  font-size:10px;
  line-height:1.28;
}

.course-side-page-text small{
  display:block;
  margin-top:1px;
  color:#9aa3b2;
  font-size:8px;
}

.course-side-page.active .course-side-page-text strong{
  color:#5144d1;
}

.course-side-questions{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:10px;
  align-items:center;
  margin-top:12px;
  padding:13px 12px;
  border-radius:13px;
  background:#fafafa;
  border:1px solid #eceef3;
  opacity:.65;
}

.course-side-questions.unlocked{
  background:#f2fbf7;
  border-color:#d8efe5;
  opacity:1;
}

.course-side-questions strong{
  display:block;
  color:#3a465c;
  font-size:10px;
}

.course-side-questions small{
  display:block;
  color:#98a2b1;
  font-size:8px;
}

.course-main{
  min-width:0;
}

.course-topbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
  padding:19px 24px;
  margin-bottom:18px;
  background:#fff;
  border:1px solid #e5e8ef;
  border-radius:20px;
  box-shadow:0 9px 27px rgba(35,45,68,.05);
}

.course-topbar-info{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:14px;
  align-items:center;
}

.course-topbar-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,#f1efff,#f4f9ff);
  font-size:23px;
}

.course-breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  color:#66728a;
  font-size:11px;
  font-weight:800;
}

.course-breadcrumbs i{
  color:#b1b7c3;
  font-style:normal;
}

.course-top-progress{
  display:grid;
  grid-template-columns:auto minmax(180px,420px) auto;
  gap:10px;
  align-items:center;
  margin-top:9px;
}

.course-top-progress>span{
  color:#748097;
  font-size:10px;
  font-weight:850;
}

.course-progress-track{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#eceef4;
}

.course-progress-track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#6455ef,#8b63ff);
  box-shadow:0 2px 8px rgba(100,85,239,.25);
  transition:width .3s ease;
}

.course-top-progress>strong{
  min-width:47px;
  padding:5px 9px;
  border-radius:999px;
  background:#f5f4ff;
  border:1px solid #e2dfff;
  color:#5549d7;
  font-size:11px;
  text-align:center;
}

.course-topbar-page{
  min-width:92px;
  text-align:right;
}

.course-topbar-page>span{
  display:block;
  color:#8490a4;
  font-size:9px;
  font-weight:850;
}

.course-topbar-page>strong{
  display:block;
  margin-top:4px;
  color:#18233a;
  font-size:18px;
}

.course-topbar-page small{
  color:#929cab;
  font-size:11px;
}

.course-focus-card{
  background:#fff;
  border:1px solid #e4e7ee;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(35,45,68,.07);
}

.course-focus-content{
  min-height:510px;
  display:grid;
  gap:36px;
  padding:42px 40px 44px;
  align-items:start;
}

.course-focus-content.has-media{
  grid-template-columns:minmax(0, .95fr) minmax(380px,1.05fr);
}

.course-focus-content.no-media{
  grid-template-columns:minmax(0,800px);
}

.course-text-column{
  min-width:0;
}

.course-text-column .eyebrow{
  font-size:9px;
}

.course-text-column h1{
  margin:7px 0 25px;
  color:#152139;
  font-size:37px;
  line-height:1.08;
  letter-spacing:-1.1px;
}

.course-text-body{
  color:#2f3c53;
  font-size:16px;
  line-height:1.86;
}

.course-media-column{
  min-width:0;
  display:grid;
  gap:18px;
}

.course-image-frame,
.course-video-frame{
  margin:0;
  overflow:hidden;
  border-radius:18px;
  border:1px solid #e4e6ec;
  background:#f7f8fa;
}

.course-image-frame{
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
}

.course-image-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.course-image-zoom{
  position:relative;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
}

.course-image-zoom-hint{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:8px 11px;
  border-radius:999px;
  color:#fff;
  background:rgba(20,29,49,.82);
  font-size:11px;
  font-weight:850;
  box-shadow:0 5px 18px rgba(0,0,0,.2);
}

.course-lightbox[hidden]{display:none}
.course-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8,13,26,.94);
  opacity:0;
  transition:opacity .16s ease;
}
.course-lightbox.is-open{opacity:1}
.course-lightbox img{
  max-width:96vw;
  max-height:92vh;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.course-lightbox-close{
  position:fixed;
  top:16px;
  right:20px;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.18);
  font:700 32px/1 sans-serif;
  cursor:pointer;
}
body.course-lightbox-open{overflow:hidden}

.course-submission-card{
  margin-top:28px;
  padding:18px;
  border:1px solid #dcd8ff;
  border-radius:16px;
  background:#f8f7ff;
}
.course-submission-card.is-submitted{
  border-color:#b9e8d4;
  background:#f3fcf8;
}
.course-submission-heading{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.course-submission-heading>div{display:grid;gap:2px}
.course-submission-heading strong{color:#17233b;font-size:15px}
.course-submission-heading small,.course-submission-meta{color:#6d7890;font-size:11px}
.course-submission-icon{font-size:24px}
.course-submission-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.course-file-picker{display:grid;gap:6px;flex:1;min-width:220px;color:#33415a;font-size:11px;font-weight:800}
.course-file-picker input{padding:10px;border:1px solid #d7dbe6;border-radius:10px;background:#fff;font:inherit}
.course-submission-preview{display:inline-flex;margin:2px 0 6px;color:#584bd9;font-size:12px;font-weight:850}
.course-submission-meta{display:block}
.course-upload-message{margin:10px 0;padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.45}
.course-upload-message.success{color:#176848;background:#ddf7e9}
.course-upload-message.error{color:#9b2f37;background:#ffe9eb}

.submission-review-grid{display:grid;gap:20px}
.submission-review-card{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);overflow:hidden;border:1px solid #e2e6ee;border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(35,45,68,.07)}
.submission-review-image{position:relative;min-height:320px;display:grid;place-items:center;padding:14px;background:#edf1f7;text-decoration:none}
.submission-review-image img{max-width:100%;max-height:440px;object-fit:contain;border-radius:8px;background:#fff}
.submission-review-image span{position:absolute;right:18px;bottom:18px;padding:8px 11px;border-radius:999px;color:#fff;background:rgba(20,29,49,.82);font-size:11px;font-weight:850}
.submission-review-copy{padding:24px}
.submission-review-copy h2{margin:10px 0 4px;color:#17233b}
.submission-review-copy p{margin:0 0 4px;color:#56637a}
.submission-review-copy>small{color:#7a8598}
.submission-review-form{display:grid;gap:12px;margin-top:20px}
.submission-review-form label{display:grid;gap:5px;color:#33415a;font-size:12px;font-weight:800}
.submission-review-form select,.submission-review-form textarea{width:100%;padding:10px;border:1px solid #d8dde7;border-radius:10px;background:#fff;font:inherit}
@media(max-width:800px){.submission-review-card{grid-template-columns:1fr}.submission-review-image{min-height:230px}}

.assignment-page-head{max-width:920px;margin:0 auto 24px}
.assignment-page-head .back{display:inline-flex;margin-bottom:24px;color:#5d50dc;font-weight:800;text-decoration:none}
.assignment-page-head h1{margin:8px 0 10px;color:#17233b;font-size:42px;letter-spacing:-1.2px}
.assignment-page-head p{color:#617087;font-size:17px}
.assignment-submit-shell{max-width:920px;margin:0 auto;padding:30px;border:1px solid #dfe3ec;border-radius:24px;background:#fff;box-shadow:0 18px 46px rgba(35,45,68,.08)}
.assignment-submit-shell.is-complete{border-color:#ace1ca;background:linear-gradient(180deg,#f5fff9,#fff)}
.assignment-status-row{display:flex;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid #e8ebf1}
.assignment-status-row h2{margin:4px 0 0;color:#17233b}
.assignment-status-check{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#6957ef,#8b66ff);font-size:22px;font-weight:900}
.assignment-submit-shell.is-complete .assignment-status-check{background:linear-gradient(135deg,#229b70,#45c891)}
.assignment-instructions{margin:24px 0;padding:18px 20px;border-radius:16px;background:#f5f7fb;color:#39475e}
.assignment-instructions ul{margin:10px 0 0;padding-left:20px;line-height:1.8}
.assignment-current-submission{display:grid;gap:5px;margin:16px 0;padding:14px;border:1px solid #dfe3ec;border-radius:12px;background:#fff}
.assignment-current-submission a{color:#584bd9;font-weight:850}
.assignment-current-submission small{color:#758096}
.assignment-upload-form{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-top:20px}
.assignment-upload-form .course-file-picker{max-width:540px}
.assignment-back-button{margin-top:20px}
@media(max-width:680px){.assignment-page-head h1{font-size:32px}.assignment-submit-shell{padding:20px}.assignment-upload-form{display:grid}.assignment-upload-form .btn{width:100%}}

.workshop-dropzone{display:grid;place-items:center;gap:6px;min-height:190px;width:100%;padding:24px;border:2px dashed #a9a2ef;border-radius:18px;background:#faf9ff;color:#3d4960;text-align:center;cursor:pointer;transition:.18s ease}
.workshop-dropzone:hover,.workshop-dropzone.is-dragging{border-color:#6254f3;background:#efedff;transform:translateY(-1px)}
.workshop-dropzone.has-file{border-color:#26a878;background:#effbf5}
.workshop-dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.workshop-dropzone strong{font-size:16px;color:#222d45}
.workshop-dropzone small{color:#69758b}
.workshop-dropzone em{margin-top:8px;color:#5c4edf;font-size:12px;font-style:normal;font-weight:850;word-break:break-all}
.workshop-drop-icon{font-size:32px}
.workshop-waiting{margin:12px 0;padding:13px;border-radius:12px;color:#735b15;background:#fff4c9;font-size:12px;font-weight:750;line-height:1.5}
.workshop-approval-required{display:inline-flex;padding:12px 15px;border-radius:12px;color:#735b15;background:#fff4c9;font-size:11px;font-weight:900}
.workshop-app .course-submission-card{margin-top:24px}
.workshop-app .assignment-upload-form{display:grid;align-items:stretch}
.coach-video-current{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:14px;align-items:center;margin:14px 0;padding:12px;border:1px solid #cce7db;border-radius:14px;background:#fff}
.coach-video-current video{width:100%;max-height:190px;border-radius:10px;background:#111}
.coach-video-current>div{display:grid;gap:6px;min-width:0}
.coach-video-current strong{overflow:hidden;text-overflow:ellipsis;color:#1e2940}
.coach-video-current small{color:#69758b}
.coach-video-current a{color:#584bd9;font-size:12px;font-weight:850}
.coach-video-check{min-height:20px;padding:0 4px;font-size:12px;font-weight:800}
.coach-video-check.success{color:#16724d}.coach-video-check.error{color:#a6323b}
.coach-video-upload .btn:disabled{cursor:not-allowed;opacity:.45}
@media(max-width:620px){.coach-video-current{grid-template-columns:1fr}}
.workshop-class-list{display:grid;gap:26px}
.workshop-class-section{overflow:hidden;border:1px solid #e0e4ec;border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(35,45,68,.06)}
.workshop-class-heading{padding:20px 24px;border-bottom:1px solid #e8ebf1;background:#f8f9fc}
.workshop-class-heading h2{margin:5px 0 0;color:#17233b}
.workshop-student-list{display:grid}
.workshop-student-row{display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(380px,1.5fr);align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid #edf0f4}
.workshop-student-row:last-child{border-bottom:0}
.workshop-student-row.is-approved{background:#f4fcf8}
.workshop-student-row.is-rejected{background:#fff7f7}
.workshop-student-name{display:grid;gap:4px}
.workshop-student-name strong{color:#1e2940}
.workshop-student-name span{color:#707c91;font-size:11px;font-weight:750}
.workshop-inline-review{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.workshop-inline-review textarea{width:100%;padding:9px;border:1px solid #d8dde7;border-radius:9px;resize:vertical;font:inherit}
.workshop-inline-review>div{display:flex;gap:7px}
.workshop-reject{color:#a0323b;background:#fff;border:1px solid #efbdc1}
.workshop-no-file{color:#a3abba;text-align:center}
@media(max-width:1050px){.workshop-student-row{grid-template-columns:1fr auto}.workshop-inline-review{grid-column:1/-1}}
@media(max-width:650px){.workshop-student-row{grid-template-columns:1fr}.workshop-inline-review{grid-template-columns:1fr}.workshop-inline-review>div{flex-wrap:wrap}}

.course-video-frame{
  background:#fff;
}

.course-video-label{
  padding:10px 14px;
  background:#f0eeff;
  color:#5649d6;
  font-size:10px;
  font-weight:900;
}

.course-video-frame .video-wrap{
  margin:0;
  border-radius:0;
}

.course-card-footer{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:17px 28px;
  border-top:1px solid #eceef2;
  background:#fff;
}

.course-card-footer>div:last-child{
  justify-self:end;
}

.course-footer-primary,
.course-footer-secondary{
  min-height:45px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 18px;
  border-radius:12px;
  border:1px solid transparent;
  font:inherit;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}

.course-footer-primary{
  background:linear-gradient(135deg,#6254f3,#8560ff);
  color:#fff;
  box-shadow:0 8px 20px rgba(98,84,243,.22);
}

.course-footer-secondary{
  background:#fff;
  border-color:#dde1e8;
  color:#55647a;
}

.course-finish-btn{
  background:linear-gradient(135deg,#239f76,#43c38d);
}

.course-footer-mini-progress{
  text-align:center;
}

.course-footer-mini-progress>span{
  display:block;
  margin-bottom:7px;
  color:#6f7c91;
  font-size:9px;
  font-weight:850;
}

.mini-progress-dots{
  display:flex;
  gap:7px;
  justify-content:center;
}

.mini-progress-dots i{
  width:34px;
  height:6px;
  border-radius:999px;
  background:#e2e4eb;
}

.mini-progress-dots i.active{
  background:#6b59ee;
}

.course-lock-note{
  margin-top:12px;
  text-align:center;
  color:#7d889b;
  font-size:9px;
  font-weight:750;
}

@media(max-width:1050px){
  .course-app{
    grid-template-columns:230px minmax(0,1fr);
  }

  .course-focus-content.has-media{
    grid-template-columns:1fr;
  }

  .course-media-column{
    grid-row:2;
  }

  .course-image-frame{
    max-height:430px;
  }
}

@media(max-width:780px){
  .course-app{
    display:block;
  }

  .course-sidebar{
    display:none;
  }

  .course-topbar{
    padding:15px 16px;
  }

  .course-breadcrumbs{
    display:none;
  }

  .course-top-progress{
    grid-template-columns:auto 1fr auto;
  }

  .course-focus-content{
    padding:30px 22px 34px;
  }

  .course-text-column h1{
    font-size:31px;
  }

  .course-text-body{
    font-size:15px;
  }

  .course-card-footer{
    grid-template-columns:1fr 1fr;
    padding:14px 16px;
  }

  .course-footer-mini-progress{
    display:none;
  }

  .course-footer-primary,
  .course-footer-secondary{
    width:100%;
  }
}

@media(max-width:520px){
  .course-topbar-page{
    display:none;
  }

  .course-topbar{
    grid-template-columns:1fr;
  }

  .course-top-progress{
    grid-template-columns:1fr auto;
  }

  .course-top-progress>span{
    grid-column:1/-1;
  }

  .course-focus-content{
    min-height:0;
  }

  .course-text-column h1{
    font-size:28px;
  }
}


/* =========================================================
   CURSUSTEKST ALS ALINEA'S
   ========================================================= */
.course-text-body p{
  margin:0 0 18px;
}
.course-text-body p:last-child{
  margin-bottom:0;
}
.course-text-body ul{
  margin:0 0 18px 20px;
  padding:0;
}
.course-text-body li{
  margin:7px 0;
}

/* =========================================================
   OEFENKEUZE
   ========================================================= */
.practice-choice-shell{
  max-width:1000px;
  margin:35px auto 70px;
}
.practice-choice-head{
  margin-bottom:22px;
}
.practice-choice-head h1{
  margin:6px 0 8px;
  font-size:36px;
}
.practice-choice-head p{
  color:var(--muted);
}
.practice-choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.practice-mode-card{
  display:block;
  padding:26px;
  border-radius:22px;
  border:1px solid #e4e6ee;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:0 12px 34px rgba(35,45,68,.06);
}
.practice-mode-card.mc{
  background:linear-gradient(145deg,#fff,#f7f5ff);
}
.practice-mode-card.open{
  background:linear-gradient(145deg,#fff,#f4fbf6);
}
.practice-mode-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  font-size:25px;
  margin-bottom:18px;
}
.practice-mode-card.mc .practice-mode-icon{
  background:#ebe7ff;
  color:#6354ed;
}
.practice-mode-card.open .practice-mode-icon{
  background:#e8f7ec;
  color:#2ea764;
}
.practice-mode-card h2{
  margin:0 0 9px;
  font-size:22px;
}
.practice-mode-card p{
  color:#667389;
  line-height:1.6;
}
.practice-mode-card ul{
  margin:18px 0 22px;
  padding-left:20px;
  color:#47546b;
}
.practice-mode-card li{
  margin:8px 0;
}
.practice-mode-button{
  display:block;
  padding:13px 16px;
  border-radius:12px;
  text-align:center;
  font-weight:900;
  color:#fff;
}
.practice-mode-card.mc .practice-mode-button{
  background:linear-gradient(135deg,#6455ef,#865fff);
}
.practice-mode-card.open .practice-mode-button{
  background:linear-gradient(135deg,#30a965,#52c779);
}

.student-stats-panel{
  margin-top:20px;
  padding:22px;
  border:1px solid #e4e6ee;
  border-radius:20px;
  background:#fff;
}
.student-stats-panel h3{
  margin:0 0 14px;
}
.student-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.student-stat-grid>div{
  padding:16px;
  border:1px solid #eceef3;
  border-radius:15px;
  background:#fafbfe;
}
.student-stat-grid span,
.student-stat-grid strong,
.student-stat-grid small{
  display:block;
}
.student-stat-grid strong{
  margin:7px 0 3px;
  font-size:22px;
}
.student-stat-grid small{
  color:#8a95a7;
}
.student-stat-grid .done{
  background:#f1fbf5;
  border-color:#d7efdf;
}

/* =========================================================
   MEERKEUZE
   ========================================================= */
.mc-shell{
  max-width:900px;
  margin:30px auto 70px;
}
.mc-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:start;
  margin-bottom:14px;
}
.mc-head h1{
  margin:5px 0 6px;
}
.mc-head p{
  color:var(--muted);
}
.mc-score-pill{
  padding:9px 12px;
  border-radius:999px;
  background:#f0eeff;
  color:#584bd8;
  font-weight:900;
}
.mc-progress{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:#e9ebf1;
  margin-bottom:20px;
}
.mc-progress i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#6254ef,#8761ff);
}
.mc-complete-banner{
  margin-bottom:18px;
  padding:14px 16px;
  border-radius:14px;
  background:#eaf9f1;
  color:#277b5e;
  font-weight:850;
}
.mc-question-list{
  display:grid;
  gap:16px;
}
.mc-question-card{
  position:relative;
  padding:24px;
  border:1px solid #e5e7ee;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 28px rgba(35,45,68,.05);
}
.mc-question-number{
  position:absolute;
  top:20px;
  right:20px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f2f0ff;
  color:#5b4edb;
  font-weight:900;
}
.mc-question-card h2{
  padding-right:45px;
  margin:0 0 18px;
  font-size:19px;
}
.mc-options{
  display:grid;
  gap:10px;
}
.mc-option{
  display:grid;
  grid-template-columns:auto 34px 1fr;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid #e6e8ef;
  border-radius:13px;
  cursor:pointer;
}
.mc-option:hover{
  background:#faf9ff;
  border-color:#d8d3ff;
}
.mc-letter{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#f0eeff;
  color:#5b4fd8;
  font-weight:900;
}
.mc-feedback{
  margin-top:12px;
  padding:10px 12px;
  border-radius:11px;
  font-weight:850;
}
.mc-feedback.correct{
  background:#eaf9f1;
  color:#26795c;
}
.mc-feedback.incorrect{
  background:#fff0f0;
  color:#b54444;
}

/* =========================================================
   DOCENT LEERSTATISTIEKEN
   ========================================================= */
.teacher-stats-shell{
  max-width:1300px;
  margin:30px auto 70px;
}
.teacher-stats-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  margin-bottom:20px;
}
.teacher-stats-head h1{
  margin:5px 0 4px;
}
.teacher-stats-head p{
  color:var(--muted);
}
.teacher-stats-table-wrap{
  overflow:auto;
  border:1px solid #e5e7ee;
  border-radius:18px;
  background:#fff;
}
.teacher-stats-table{
  width:100%;
  border-collapse:collapse;
  min-width:1050px;
}
.teacher-stats-table th,
.teacher-stats-table td{
  padding:13px 14px;
  border-bottom:1px solid #eceef3;
  text-align:left;
  font-size:12px;
}
.teacher-stats-table th{
  background:#f8f9fc;
  color:#66748a;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

@media(max-width:760px){
  .practice-choice-grid{
    grid-template-columns:1fr;
  }
  .student-stat-grid{
    grid-template-columns:1fr 1fr;
  }
  .mc-head{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   CURSUS LEESTIJD + XP
   ========================================================= */

.course-next-waiting{
  opacity:.38 !important;
  filter:saturate(.55);
  box-shadow:none !important;
  cursor:not-allowed !important;
  transform:none !important;
}
.course-next-ready{
  animation:courseButtonReady .35s ease both;
}
@keyframes courseButtonReady{
  from{opacity:.45;transform:translateY(2px)}
  to{opacity:1;transform:translateY(0)}
}
.course-xp-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:12px;
  background:#fff9e8;
  border:1px solid #f5e4ad;
}
.course-xp-pill>span{
  font-size:18px;
}
.course-xp-pill strong,
.course-xp-pill small{
  display:block;
}
.course-xp-pill strong{
  color:#725c18;
  font-size:11px;
}
.course-xp-pill small{
  margin-top:1px;
  color:#aa9142;
  font-size:8px;
  font-weight:800;
}

/* =========================================================
   MEERKEUZE - 1 VRAAG PER SCHERM
   ========================================================= */

.mc-focus-shell{
  max-width:1080px;
  margin:24px auto 65px;
}

.mc-focus-top{
  display:grid;
  grid-template-columns:170px minmax(0,1fr) 150px;
  gap:20px;
  align-items:center;
  margin-bottom:18px;
}

.mc-back-link{
  color:#64738a;
  font-size:11px;
  font-weight:850;
}

.mc-focus-progress-block{
  min-width:0;
}

.mc-focus-meta{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:7px;
  color:#6d7a8e;
  font-size:10px;
  font-weight:800;
}

.mc-focus-meta strong{
  color:#263249;
}

.mc-focus-progress{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#e7e9ef;
}

.mc-focus-progress i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#6355ef,#8862ff);
  transition:width .25s ease;
}

.mc-xp-badge{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:13px;
  background:#fff9e9;
  border:1px solid #f3e1aa;
}

.mc-xp-badge>span{
  font-size:18px;
}

.mc-xp-badge strong,
.mc-xp-badge small{
  display:block;
}

.mc-xp-badge strong{
  color:#725c18;
  font-size:11px;
}

.mc-xp-badge small{
  color:#a28c49;
  font-size:8px;
  font-weight:800;
}

.mc-single-card{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:54px 70px;
  border:1px solid #e3e6ee;
  border-radius:26px;
  background:#fff;
  box-shadow:0 20px 50px rgba(35,45,68,.07);
}

.mc-single-number{
  position:absolute;
  top:24px;
  right:26px;
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f1efff;
  color:#5e51df;
  font-size:16px;
  font-weight:950;
}

.mc-single-question{
  width:100%;
  max-width:780px;
}

.mc-single-question h1{
  margin:7px 0 28px;
  color:#17233a;
  font-size:31px;
  line-height:1.22;
  letter-spacing:-.6px;
}

.mc-single-options{
  display:grid;
  gap:11px;
}

.mc-single-option{
  position:relative;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 28px;
  gap:12px;
  align-items:center;
  min-height:62px;
  padding:10px 14px;
  border:2px solid #e5e8ee;
  border-radius:15px;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease;
}

.mc-single-option:hover{
  border-color:#d4d0ff;
  background:#faf9ff;
}

.mc-single-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.mc-single-letter{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#f1f2f6;
  color:#5e6a7d;
  font-weight:950;
  transition:.15s ease;
}

.mc-single-option-text{
  color:#354158;
  font-size:14px;
  font-weight:700;
}

.mc-checkmark{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid #dce0e8;
  color:transparent;
  font-size:11px;
  transition:.15s ease;
}

.mc-single-option.selected{
  border-color:#7668f3;
  background:#f5f3ff;
  box-shadow:0 7px 18px rgba(104,88,231,.10);
  transform:translateY(-1px);
}

.mc-single-option.selected .mc-single-letter{
  background:#6758ee;
  color:#fff;
}

.mc-single-option.selected .mc-checkmark{
  background:#6758ee;
  border-color:#6758ee;
  color:#fff;
}

.mc-single-feedback{
  display:flex;
  align-items:center;
  margin-top:18px;
  padding:13px 15px;
  border-radius:13px;
}

.mc-single-feedback strong,
.mc-single-feedback span{
  display:block;
}

.mc-single-feedback strong{
  margin-bottom:2px;
  font-size:12px;
}

.mc-single-feedback span{
  font-size:10px;
}

.mc-single-feedback.correct{
  background:#eaf9f1;
  color:#24775a;
}

.mc-single-feedback.incorrect{
  background:#fff0f0;
  color:#ad4545;
}

.mc-single-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:20px;
}

.mc-check-answer,
.mc-next-question{
  min-height:47px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 19px;
  border:0;
  border-radius:13px;
  font:inherit;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
}

.mc-check-answer{
  background:linear-gradient(135deg,#6254ef,#8861ff);
  color:#fff;
  cursor:pointer;
}

.mc-check-answer:disabled{
  opacity:.36;
  filter:saturate(.55);
  cursor:not-allowed;
}

.mc-next-question{
  background:linear-gradient(135deg,#6254ef,#8861ff);
  color:#fff;
  box-shadow:0 8px 20px rgba(98,84,239,.18);
}

.mc-next-question.finish{
  background:linear-gradient(135deg,#269f77,#43c38c);
}

.mc-focus-footer{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:13px;
  align-items:center;
  margin-top:14px;
  padding:0 10px;
  color:#788499;
  font-size:9px;
  font-weight:800;
}

.mc-overall-progress{
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:#e7e9ef;
}

.mc-overall-progress i{
  display:block;
  height:100%;
  background:#55b98a;
  border-radius:999px;
}

/* =========================================================
   LEERLING XP OVERZICHT
   ========================================================= */

.student-xp-summary{
  max-width:1180px;
  margin:0 auto 18px;
  display:grid;
  grid-template-columns:auto minmax(220px,360px);
  gap:18px;
  align-items:center;
  padding:14px 17px;
  border:1px solid #eee2b8;
  border-radius:17px;
  background:linear-gradient(135deg,#fffdf4,#fffaf0);
}

.student-xp-main{
  display:flex;
  align-items:center;
  gap:10px;
}

.student-xp-main>span{
  font-size:27px;
}

.student-xp-main small,
.student-xp-main strong{
  display:block;
}

.student-xp-main small{
  color:#aa9144;
  font-size:8px;
  font-weight:900;
  letter-spacing:.8px;
}

.student-xp-main strong{
  margin-top:2px;
  color:#6d571a;
  font-size:18px;
}

.student-xp-level>div:first-child{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
  color:#8e7b43;
  font-size:9px;
  font-weight:850;
}

.student-xp-track{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#eee5c9;
}

.student-xp-track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#e5b744,#f0c95b);
}

@media(max-width:760px){
  .mc-focus-top{
    grid-template-columns:1fr auto;
  }
  .mc-back-link{
    display:none;
  }
  .mc-single-card{
    min-height:0;
    padding:45px 22px 30px;
  }
  .mc-single-question h1{
    font-size:25px;
  }
  .student-xp-summary{
    grid-template-columns:1fr;
  }
}


/* MC direct feedback */
.mc-reward-burst{
  margin:8px 0 2px;
  font-size:28px;
  text-align:center;
  animation:rewardPop .55s ease both;
}
@keyframes rewardPop{
  0%{opacity:0;transform:scale(.65) translateY(8px)}
  65%{opacity:1;transform:scale(1.12) translateY(-2px)}
  100%{transform:scale(1)}
}
.mc-single-feedback.correct{
  animation:positiveGlow .7s ease both;
}
@keyframes positiveGlow{
  0%{box-shadow:0 0 0 rgba(72,190,130,0)}
  50%{box-shadow:0 0 0 8px rgba(72,190,130,.13)}
  100%{box-shadow:0 0 0 rgba(72,190,130,0)}
}
.mc-single-feedback.incorrect{
  animation:gentleShake .35s ease both;
}
@keyframes gentleShake{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-4px)}
  60%{transform:translateX(4px)}
}
.mc-waiting-hint{
  color:#8b95a6;
  font-size:10px;
  font-weight:800;
}

/* live docent */
.teacher-live-shell,
.suspicious-shell{
  max-width:1250px;
  margin:30px auto 70px;
}
.teacher-live-head,
.suspicious-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}
.teacher-live-head h1,
.suspicious-head h1{
  margin:5px 0 5px;
}
.teacher-live-head p,
.suspicious-head p{
  color:var(--muted);
}
.teacher-live-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.live-student-card{
  padding:18px;
  border:1px solid #e5e7ee;
  border-radius:18px;
  background:#fff;
}
.live-student-card.online{
  border-color:#cdebdc;
  box-shadow:0 8px 24px rgba(55,160,110,.07);
}
.live-student-top{
  display:grid;
  grid-template-columns:12px 1fr auto;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
.live-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#c6cbd4;
}
.online .live-dot{
  background:#2fba79;
  box-shadow:0 0 0 5px rgba(47,186,121,.12);
}
.live-student-top strong,
.live-student-top small{
  display:block;
}
.live-student-top small{
  color:#929cac;
}
.live-status{
  font-size:9px;
  font-weight:900;
  color:#7e8999;
}
.online .live-status{
  color:#26855d;
}
.live-metrics{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.live-metrics>div{
  padding:10px;
  border-radius:11px;
  background:#f8f9fc;
}
.live-metrics small,
.live-metrics strong{
  display:block;
}
.live-metrics small{
  color:#98a1b0;
  font-size:8px;
}
.live-metrics strong{
  margin-top:4px;
  color:#344158;
  font-size:10px;
}

/* suspicious */
.suspicious-count{
  padding:8px 11px;
  border-radius:999px;
  background:#fff0f0;
  color:#b44747;
  font-weight:900;
  font-size:10px;
}
.suspicious-list{
  display:grid;
  gap:12px;
}
.suspicious-card{
  display:grid;
  grid-template-columns:180px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:17px;
  border:1px solid #eadede;
  border-radius:17px;
  background:#fff;
}
.suspicious-student strong,
.suspicious-student span{
  display:block;
}
.suspicious-student span{
  margin-top:3px;
  color:#8b95a5;
  font-size:10px;
}
.suspicious-content small{
  color:#7666e6;
  font-weight:850;
}
.suspicious-content h3{
  margin:4px 0 8px;
  font-size:14px;
}
.suspicious-answer{
  padding:9px 11px;
  border-radius:10px;
  background:#fff6f6;
  color:#a94c4c;
  font-size:11px;
}
@media(max-width:850px){
  .teacher-live-grid{grid-template-columns:1fr}
  .live-metrics{grid-template-columns:1fr 1fr}
  .suspicious-card{grid-template-columns:1fr}
}


/* ===== Meerkeuze: nadenktijd, antwoordfeedback en beloning ===== */
.mc-answer-wait{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:20px;
  padding-top:17px;
  border-top:1px solid #edf0f5;
}
.mc-answer-wait-text{
  color:#8b95a6;
  font-size:10px;
  font-weight:800;
}
.mc-check-answer{
  min-width:155px;
  transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;
}
.mc-check-answer:disabled{
  opacity:.35;
  cursor:not-allowed;
  box-shadow:none;
}
.mc-check-answer.ready{
  animation:answerReady .4s ease both;
  box-shadow:0 8px 22px rgba(98,84,239,.22);
}
@keyframes answerReady{
  0%{transform:scale(.96);opacity:.45}
  70%{transform:scale(1.035);opacity:1}
  100%{transform:scale(1)}
}

.mc-single-option.answer-correct{
  border-color:#35b77a !important;
  background:#edf9f3 !important;
  box-shadow:0 7px 20px rgba(53,183,122,.12);
}
.mc-single-option.answer-correct .mc-single-letter,
.mc-single-option.answer-correct .mc-checkmark{
  background:#35b77a !important;
  border-color:#35b77a !important;
  color:#fff !important;
}
.mc-single-option.answer-wrong{
  border-color:#e88686 !important;
  background:#fff2f2 !important;
}
.mc-single-option.answer-wrong .mc-single-letter,
.mc-single-option.answer-wrong .mc-checkmark{
  background:#e56f6f !important;
  border-color:#e56f6f !important;
  color:#fff !important;
}

.mc-single-feedback{
  gap:12px;
  align-items:center;
}
.mc-feedback-icon{
  flex:0 0 auto;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:18px;
  font-weight:950;
}
.mc-single-feedback.correct .mc-feedback-icon{
  background:#37b87c;
  color:#fff;
  animation:feedbackIconPop .55s ease both;
}
.mc-single-feedback.incorrect .mc-feedback-icon{
  background:#fff;
  color:#c56a6a;
}
@keyframes feedbackIconPop{
  0%{transform:scale(.45) rotate(-15deg);opacity:0}
  70%{transform:scale(1.15) rotate(4deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}

.mc-card-correct{
  animation:correctCardGlow .8s ease both;
}
@keyframes correctCardGlow{
  0%{box-shadow:0 20px 50px rgba(35,45,68,.07)}
  45%{box-shadow:0 20px 60px rgba(53,183,122,.24)}
  100%{box-shadow:0 20px 50px rgba(35,45,68,.07)}
}
.mc-card-incorrect{
  animation:softWrongNudge .35s ease both;
}
@keyframes softWrongNudge{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-3px)}
  65%{transform:translateX(3px)}
}

.mc-celebration{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:26px;
}
.mc-celebration span{
  position:absolute;
  top:22%;
  font-size:26px;
  animation:celebrateFall 1.15s ease-out both;
}
.mc-celebration span:nth-child(1){left:14%;animation-delay:.02s}
.mc-celebration span:nth-child(2){left:31%;animation-delay:.10s}
.mc-celebration span:nth-child(3){left:50%;animation-delay:.03s}
.mc-celebration span:nth-child(4){left:68%;animation-delay:.14s}
.mc-celebration span:nth-child(5){left:84%;animation-delay:.06s}
@keyframes celebrateFall{
  0%{opacity:0;transform:translateY(-20px) scale(.55) rotate(-15deg)}
  35%{opacity:1}
  100%{opacity:0;transform:translateY(150px) scale(1.15) rotate(25deg)}
}


/* XP-verlies bij fout antwoord */
.mc-single-feedback.incorrect span{
  color:#9f5555;
}
.mc-single-feedback.incorrect{
  border:1px solid #f0caca;
  background:linear-gradient(135deg,#fff4f4,#fff8f8);
}


/* =========================================================
   HERHALEN OF OEFENEN
   ========================================================= */

.practice-choice-grid.three-options{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.practice-mode-card.course-repeat{
  background:linear-gradient(145deg,#fff,#f3f8ff);
}

.practice-mode-card.course-repeat .practice-mode-icon{
  background:#eaf2ff;
  color:#3975c7;
}

.practice-mode-card.course-repeat .practice-mode-button{
  background:linear-gradient(135deg,#4d83cf,#6ba1e7);
}

.practice-card-kicker{
  display:block;
  margin-bottom:5px;
  color:#8a95a8;
  font-size:8px;
  font-weight:950;
  letter-spacing:1.1px;
  text-transform:uppercase;
}

.practice-mode-card{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.practice-mode-card:hover{
  transform:translateY(-3px);
  box-shadow:0 17px 40px rgba(35,45,68,.10);
}

.course-repeat-badge{
  justify-self:end;
  padding:7px 10px;
  border:1px solid #dbe9fb;
  border-radius:11px;
  background:#f1f7ff;
  color:#4878b7;
  font-size:9px;
  font-weight:900;
}

@media(max-width:980px){
  .practice-choice-grid.three-options{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   DOCENT - WACHTWOORDEN LEERLINGEN
   ========================================================= */
.teacher-passwords-shell{max-width:1180px;margin:30px auto 70px}
.teacher-passwords-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:18px}
.teacher-passwords-head h1{margin:5px 0}
.teacher-passwords-head p{color:var(--muted);max-width:700px}
.teacher-password-filter{min-width:220px}
.teacher-password-filter label{
  display:block;margin-bottom:6px;color:#6f7b90;font-size:9px;font-weight:900;
  text-transform:uppercase;letter-spacing:.8px
}
.teacher-password-filter select{
  width:100%;min-height:44px;padding:0 12px;border:1px solid #dfe3eb;
  border-radius:11px;background:#fff;color:#263249;font:inherit;font-weight:750
}
.teacher-password-summary{display:flex;align-items:baseline;gap:7px;margin-bottom:12px;color:#7b879a}
.teacher-password-summary strong{color:#5749d7;font-size:22px}
.teacher-password-summary span{font-size:10px;font-weight:800}
.teacher-password-table-wrap{
  overflow:auto;border:1px solid #e4e7ee;border-radius:18px;background:#fff;
  box-shadow:0 12px 32px rgba(35,45,68,.05)
}
.teacher-password-table{width:100%;border-collapse:collapse;min-width:760px}
.teacher-password-table th,.teacher-password-table td{
  padding:14px 16px;border-bottom:1px solid #edf0f4;text-align:left
}
.teacher-password-table th{
  background:#f8f9fc;color:#788398;font-size:9px;font-weight:950;
  letter-spacing:.7px;text-transform:uppercase
}
.teacher-password-table td{color:#344158;font-size:12px}
.teacher-password-table tbody tr:last-child td{border-bottom:0}
.class-pill{
  display:inline-flex;padding:5px 9px;border-radius:999px;background:#f0eeff;
  color:#5b4fd8;font-size:9px;font-weight:900
}
.password-pill{
  display:inline-flex;min-width:64px;justify-content:center;padding:6px 10px;
  border-radius:9px;background:#fff8e4;border:1px solid #f1dfaa;color:#755d19;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:12px;font-weight:900;letter-spacing:1px
}
.mail-link{color:#4d67c9;font-weight:750}
.muted-empty{color:#adb4bf;font-style:italic}
.brand-home-link{text-decoration:none!important;color:inherit!important;cursor:pointer}

@media(max-width:760px){
  .teacher-passwords-head{display:block}
  .teacher-password-filter{margin-top:16px;min-width:0}
}


/* =========================================================
   KENNIS AVONTUUR
   ========================================================= */
.practice-mode-card.game{
  background:linear-gradient(145deg,#fff,#f6f0ff);
}
.practice-mode-card.game .practice-mode-icon{
  background:#eee5ff;
  color:#6b3ecc;
}
.practice-mode-card.game .practice-mode-button{
  background:linear-gradient(135deg,#6e3ccf,#8e55ed);
}

.game-shell{max-width:1180px;margin:24px auto 70px}
.game-top{
  display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;margin-bottom:16px
}
.game-top h1{margin:4px 0 0}
.game-back{font-weight:850;color:#65738a}
.game-xp{padding:8px 12px;border-radius:12px;background:#fff8e5;border:1px solid #efdca0;color:#6f5919}

.game-map{
  min-height:560px;padding:30px;border-radius:26px;border:1px solid #dce6dc;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.85),transparent 24%),
    linear-gradient(#bfe6ff 0 45%,#8fd37f 45% 100%);
  position:relative;overflow:hidden;box-shadow:0 18px 50px rgba(37,62,80,.10)
}
.game-map:after{
  content:"";position:absolute;inset:auto 0 0;height:48%;
  background:
    radial-gradient(circle at 10% 80%,#5ea45b 0 13%,transparent 14%),
    radial-gradient(circle at 28% 70%,#6fb463 0 14%,transparent 15%),
    radial-gradient(circle at 55% 75%,#669e52 0 18%,transparent 19%),
    radial-gradient(circle at 82% 74%,#7eb45f 0 18%,transparent 19%);
  opacity:.95;pointer-events:none
}
.game-map-title{position:relative;z-index:2}
.game-map-title strong{display:block;font-size:28px;color:#163051}
.game-map-title span{color:#60758c}
.map-path{position:relative;z-index:3;height:330px;margin-top:35px}
.map-level{
  position:absolute;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;
  background:#fff;border:5px solid #dfe5ea;text-decoration:none;color:#526172;
  box-shadow:0 10px 22px rgba(38,58,70,.12)
}
.map-level span{font-size:22px;font-weight:950}
.map-level small{position:absolute;top:82px;white-space:nowrap;font-weight:850}
.map-level.done{background:#f1fbf4;border-color:#65bc7d;color:#29834a}
.map-level.locked{opacity:.45;filter:grayscale(1)}
.map-level:nth-child(1){left:10%;top:180px}
.map-level:nth-child(2){left:27%;top:95px}
.map-level:nth-child(3){left:46%;top:170px}
.map-level:nth-child(4){left:65%;top:85px}
.map-level:nth-child(5){left:83%;top:155px}
.game-start-btn{
  position:absolute;z-index:5;right:28px;bottom:26px;border:0;border-radius:14px;padding:14px 20px;
  background:linear-gradient(135deg,#6e3ccd,#8b53eb);color:#fff;font-weight:950;cursor:pointer
}

.game-stage-wrap{border-radius:26px;overflow:hidden;border:1px solid #28455f;box-shadow:0 18px 50px rgba(19,45,72,.18)}
.game-hud{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:18px;align-items:center;padding:12px 18px;
  background:#164e87;color:#fff;font-weight:850
}
.game-level-title{text-align:center;font-weight:950}
.game-stage{
  height:540px;position:relative;overflow:hidden;background:linear-gradient(#429fe0 0 62%,#b8e2f7 62% 100%);
  touch-action:none
}
.game-sky:before,.game-sky:after{
  content:"☁️   ☁️";position:absolute;top:35px;color:#fff;font-size:42px;opacity:.8;letter-spacing:120px
}
.game-sky:before{left:70px}
.game-sky:after{right:20px;top:80px}
.game-mountains{
  position:absolute;left:0;right:0;bottom:95px;height:280px;
  background:
    linear-gradient(135deg,transparent 50%,#8cc3e5 50%) 0 100%/260px 220px repeat-x;
  opacity:.9
}
.game-ground{
  position:absolute;left:0;right:0;bottom:0;height:78px;
  background:linear-gradient(#203f57 0 13px,#152e42 13px 100%);
  border-top:7px solid #d9f3ff
}
.game-player{
  position:absolute;left:28px;bottom:68px;width:46px;height:46px;display:grid;place-items:center;
  font-size:40px;z-index:10;transition:filter .15s
}
.game-platform{
  position:absolute;height:28px;background:#18384f;border-top:8px solid #d9f3ff;border-radius:7px 7px 0 0
}
.game-platform.p1{left:190px;bottom:130px;width:95px}
.game-platform.p2{left:410px;bottom:175px;width:115px}
.game-platform.p3{left:650px;bottom:125px;width:90px}
.game-platform.p4{right:65px;bottom:175px;width:120px}
.game-coin{position:absolute;font-size:24px;z-index:9;transition:.2s}
.game-coin.taken{opacity:0;transform:scale(1.6)}
.game-coin.c1{left:220px;bottom:175px}.game-coin.c2{left:445px;bottom:220px}.game-coin.c3{left:520px;bottom:120px}.game-coin.c4{left:690px;bottom:170px}.game-coin.c5{right:100px;bottom:220px}
.game-question-gate{
  position:absolute;bottom:68px;width:44px;height:58px;display:grid;place-items:center;background:#7444c7;color:#fff;
  border-radius:10px 10px 0 0;font-size:26px;z-index:8;box-shadow:0 7px 15px rgba(56,31,90,.25)
}
.game-question-gate.q1{left:345px}.game-question-gate.q2{left:780px}
.game-flag{position:absolute;right:26px;bottom:68px;font-size:52px;z-index:8}
.game-controls{
  position:absolute;left:20px;bottom:18px;z-index:20;display:flex;gap:10px
}
.game-controls button{
  min-width:58px;height:52px;border:0;border-radius:11px;background:rgba(255,255,255,.22);color:#fff;
  backdrop-filter:blur(8px);font-weight:950;font-size:18px
}
.game-controls button:last-child{min-width:100px;font-size:12px}

.game-question-modal,.game-complete-modal{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(10,30,50,.68);backdrop-filter:blur(5px)
}
.game-question-card,.game-complete-card{
  width:min(520px,92vw);border-radius:22px;background:#fff;padding:25px;box-shadow:0 25px 70px rgba(0,0,0,.25)
}
.game-question-card h2{margin:7px 0 18px;font-size:21px}
.game-question-options{display:grid;gap:9px}
.game-answer-option{
  display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;text-align:left;padding:11px;
  border:1px solid #e2e5ea;border-radius:11px;background:#fff;cursor:pointer
}
.game-answer-option span{
  width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#f0f1f5;font-weight:950
}
.game-answer-option.correct{background:#eaf8ef;border-color:#72c38e}
.game-answer-option.correct span{background:#3aae67;color:#fff}
.game-answer-option.wrong{background:#fff0f0;border-color:#dc8a8a}
.game-answer-option.wrong span{background:#d85e5e;color:#fff}
.game-question-feedback{margin-top:13px;padding:11px;border-radius:10px;font-weight:850}
.game-question-feedback.correct{background:#eaf8ef;color:#267b4a}
.game-question-feedback.wrong{background:#fff2f2;color:#a74c4c}

.game-complete-card{text-align:center;position:relative;padding-top:48px}
.game-ribbon{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);padding:12px 28px;border-radius:8px;
  background:linear-gradient(135deg,#6a38c9,#934ee8);color:#fff;font-size:20px;font-weight:950;white-space:nowrap
}
.game-stars{font-size:45px;margin:8px 0 18px}
.game-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.game-result-grid div{padding:12px;border-radius:12px;background:#f7f8fb}
.game-result-grid small,.game-result-grid strong{display:block}
.game-result-grid small{color:#8994a5}
.game-result-grid strong{margin-top:5px;font-size:18px}
.game-xp-earned{margin:18px 0;color:#6c40c7;font-size:24px;font-weight:950}
.game-complete-actions{display:flex;justify-content:center;gap:10px}
.hidden{display:none!important}

@media(max-width:760px){
  .game-top{grid-template-columns:1fr auto}
  .game-back{display:none}
  .game-stage{height:460px}
  .map-level{transform:scale(.82)}
}


/* =========================================================
   KENNIS AVONTUUR - UITGEBREID
   ========================================================= */

.runner{
  position:relative;
  width:42px;
  height:48px;
  transform-origin:center bottom;
}
.runner-head{
  position:absolute;
  top:-2px;
  left:7px;
  font-size:24px;
  z-index:4;
}
.runner-body{
  position:absolute;
  top:20px;
  left:12px;
  width:19px;
  height:19px;
  border-radius:7px 7px 4px 4px;
  background:linear-gradient(#ef4747,#c92e2e);
  z-index:3;
}
.runner-arm,.runner-leg{
  position:absolute;
  width:7px;
  border-radius:999px;
  transform-origin:top center;
}
.runner-arm{
  top:22px;
  height:20px;
  background:#f0b485;
  z-index:2;
}
.runner-leg{
  top:36px;
  height:20px;
  background:#26384d;
  z-index:1;
}
.arm-left{left:8px;transform:rotate(18deg)}
.arm-right{right:7px;transform:rotate(-18deg)}
.leg-left{left:12px;transform:rotate(8deg)}
.leg-right{right:10px;transform:rotate(-8deg)}

.game-player.running .leg-left{animation:runLegLeft .24s linear infinite alternate}
.game-player.running .leg-right{animation:runLegRight .24s linear infinite alternate}
.game-player.running .arm-left{animation:runLegRight .24s linear infinite alternate}
.game-player.running .arm-right{animation:runLegLeft .24s linear infinite alternate}
.game-player.running .runner{animation:runnerBob .24s linear infinite alternate}
.game-player.facing-left .runner{transform:scaleX(-1)}
.game-player.hit{animation:playerHit .35s ease both}

@keyframes runLegLeft{from{transform:rotate(34deg)}to{transform:rotate(-34deg)}}
@keyframes runLegRight{from{transform:rotate(-34deg)}to{transform:rotate(34deg)}}
@keyframes runnerBob{from{margin-top:0}to{margin-top:-3px}}
@keyframes playerHit{
  0%,100%{filter:none}
  25%,75%{filter:brightness(1.8) saturate(.2);opacity:.4}
}

.game-enemy{
  position:absolute;
  bottom:68px;
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  font-size:34px;
  z-index:9;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.25));
  transition:filter .2s;
}
.game-enemy.e1{left:285px}
.game-enemy.e2{left:580px}
.game-enemy.e3{left:865px}

.game-spikes{
  position:absolute;
  bottom:68px;
  color:#c8e7f5;
  text-shadow:0 2px 0 #29485c;
  z-index:8;
  letter-spacing:-4px;
}
.game-spikes.s1{left:490px}
.game-spikes.s2{left:735px}

.game-boost{
  position:absolute;
  bottom:102px;
  left:625px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff3a8;
  border:3px solid #e9bf3c;
  z-index:8;
  animation:boostPulse 1s ease-in-out infinite alternate;
}
.game-boost.taken{display:none}
@keyframes boostPulse{from{transform:scale(.92)}to{transform:scale(1.08)}}

.game-goal-box{
  position:absolute;
  right:20px;
  bottom:18px;
  z-index:20;
  width:245px;
  padding:10px 12px;
  border-radius:11px;
  background:rgba(13,36,58,.78);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.game-goal-box strong,.game-goal-box span{display:block}
.game-goal-box strong{font-size:10px;margin-bottom:3px}
.game-goal-box span{font-size:9px;line-height:1.35;color:#dce8f3}

.game-difficulty{
  display:block;
  margin-top:2px;
  color:#d8e9f8;
  font-size:8px;
  letter-spacing:1px;
}

.answer-celebrate{
  animation:gameCorrectFlash .7s ease both;
}
@keyframes gameCorrectFlash{
  0%{box-shadow:inset 0 0 0 0 rgba(64,216,132,0)}
  45%{box-shadow:inset 0 0 0 12px rgba(64,216,132,.26)}
  100%{box-shadow:inset 0 0 0 0 rgba(64,216,132,0)}
}

.game-unlock-motivation{
  display:grid;
  grid-template-columns:50px 1fr auto;
  gap:14px;
  align-items:center;
  margin:0 0 18px;
  padding:15px 17px;
  border:1px solid #ded4fb;
  border-radius:16px;
  background:linear-gradient(135deg,#fbf9ff,#f5f0ff);
}
.game-unlock-icon{
  width:46px;height:46px;display:grid;place-items:center;border-radius:13px;
  background:#ebe2ff;font-size:23px
}
.game-unlock-motivation strong,.game-unlock-motivation span{display:block}
.game-unlock-motivation strong{color:#4f38a5;font-size:12px;margin-bottom:3px}
.game-unlock-motivation span{color:#746d84;font-size:10px}
.game-unlock-progress{text-align:right}
.game-unlock-progress span{color:#9b92ae;font-size:8px;text-transform:uppercase;font-weight:900}
.game-unlock-progress strong{margin-top:2px;color:#6b47c8;font-size:11px}

@media(max-width:760px){
  .game-goal-box{display:none}
  .game-enemy.e3{display:none!important}
  .game-unlock-motivation{grid-template-columns:45px 1fr}
  .game-unlock-progress{grid-column:2;text-align:left}
}


/* =========================================================
   KENNIS AVONTUUR - PLATFORMER UPGRADE
   ========================================================= */

/* platforms now form a real climbing route */
.game-platform{
  z-index:7;
  min-height:28px;
  background:
    linear-gradient(#d6f0ff 0 8px,#214760 8px 13px,#17364d 13px 100%);
  border-top:0;
  border-radius:8px 8px 2px 2px;
  box-shadow:0 8px 0 rgba(8,30,45,.18);
}

.game-platform.p1{left:150px;bottom:118px;width:120px}
.game-platform.p2{left:285px;bottom:172px;width:105px}
.game-platform.p3{left:410px;bottom:226px;width:110px}
.game-platform.p4{left:545px;bottom:165px;width:110px}
.game-platform.p5{left:675px;bottom:225px;width:120px}
.game-platform.p6{left:815px;bottom:285px;width:105px}
.game-platform.p7{right:105px;bottom:220px;width:110px}
.game-platform.p8{right:20px;bottom:325px;width:100px}

/* flag high up: you must climb */
.game-flag{
  right:38px!important;
  bottom:355px!important;
  font-size:48px!important;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.25));
}

/* enemy stays visually grounded instead of floating */
.game-enemy{
  bottom:68px!important;
  transition:left .03s linear;
  transform-origin:center bottom;
  animation:enemyBob .36s ease-in-out infinite alternate;
}
.game-enemy.e1{left:260px}
.game-enemy.e2{left:470px}
.game-enemy.e3{left:655px}
.game-enemy.e4{left:790px}
.game-enemy.e5{left:910px}

@keyframes enemyBob{
  from{margin-bottom:0}
  to{margin-bottom:2px}
}
.game-enemy.enemy-jump{
  animation:enemyLeap .42s ease-out both!important;
}
@keyframes enemyLeap{
  0%,100%{margin-bottom:0}
  50%{margin-bottom:38px}
}

/* depth */
.game-stage:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 32%,rgba(255,255,255,.18),transparent 15%),
    linear-gradient(to bottom,rgba(255,255,255,.04),rgba(0,0,0,.06));
  z-index:1;
}
.game-ground{
  background:
    repeating-linear-gradient(90deg,#17354a 0 48px,#1c3d54 48px 96px);
  border-top:8px solid #d5efff;
  box-shadow:inset 0 10px 0 rgba(255,255,255,.04);
}

/* player above environment */
.game-player{z-index:12}

/* reposition challenge elements to match climbing route */
.game-question-gate.q1{left:430px;bottom:254px}
.game-question-gate.q2{left:830px;bottom:313px}

.game-coin.c1{left:190px;bottom:160px}
.game-coin.c2{left:325px;bottom:213px}
.game-coin.c3{left:450px;bottom:268px}
.game-coin.c4{left:715px;bottom:267px}
.game-coin.c5{right:45px;bottom:368px}

.game-spikes.s1{left:575px;bottom:68px}
.game-spikes.s2{left:745px;bottom:68px}
.game-boost.b1{left:620px;bottom:207px}

/* make higher levels visually more intense */
.game-stage.level-hard{
  filter:saturate(1.08) contrast(1.02);
}

@media(max-width:900px){
  .game-platform.p8{right:10px}
  .game-flag{right:20px!important}
}


/* =========================================================
   KENNIS AVONTUUR - MARIO-ACHTIGE CANVASVERSIE
   ========================================================= */
.mario-game-shell{max-width:1180px;margin:24px auto 70px}
.mario-game-top{
  display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;margin-bottom:14px
}
.mario-game-top h1{margin:4px 0 0}
.mario-game-toolbar{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:10px 15px;border-radius:14px 14px 0 0;background:#163f72;color:#fff
}
.mario-game-toolbar>div:first-child span{color:#bcd4ec;font-size:10px}
.mario-help{text-align:center;color:#c9ddf0;font-size:10px;font-weight:800}
.mario-canvas-wrap{
  position:relative;background:#111;border:4px solid #163f72;border-top:0;border-radius:0 0 16px 16px;
  overflow:hidden;box-shadow:0 20px 55px rgba(14,35,58,.22)
}
#mario-canvas{
  display:block;width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated;background:#55b8ff
}
.mario-touch-controls{
  position:absolute;left:15px;right:15px;bottom:14px;display:flex;gap:9px;pointer-events:none
}
.mario-touch-controls button{
  pointer-events:auto;min-width:54px;height:48px;border:1px solid rgba(255,255,255,.28);
  border-radius:12px;background:rgba(13,31,52,.55);color:#fff;font-weight:950;backdrop-filter:blur(5px)
}
.mario-touch-controls button:nth-child(3){margin-left:auto;min-width:88px}
.mario-touch-controls button:nth-child(4){min-width:58px;background:rgba(181,69,33,.68)}
.mario-level-progress{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:11px;
  color:#758197;font-size:9px;font-weight:850
}
.mario-level-progress>div{height:7px;border-radius:999px;background:#e5e8ee;overflow:hidden}
.mario-level-progress i{
  display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#44b875,#7bc85d);
  transition:width .18s linear
}
.mario-level-select{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:17px
}
.mario-level-chip{
  width:36px;height:36px;display:grid;place-items:center;border-radius:9px;border:1px solid #dfe3ea;
  background:#fff;color:#667287;font-weight:900;text-decoration:none
}
.mario-level-chip.done{background:#eaf8ef;border-color:#bfe5cc;color:#277d49}
.mario-level-chip.active{background:#6754e8;border-color:#6754e8;color:#fff}
.mario-level-chip.locked{opacity:.38;filter:grayscale(1)}
.question-block-icon{
  width:50px;height:50px;display:grid;place-items:center;margin:-50px auto 14px;border-radius:10px;
  background:#eaa52f;border:4px solid #9a6324;color:#fff;font-size:28px;font-weight:950;
  box-shadow:0 8px 0 rgba(83,48,16,.18)
}

@media(max-width:760px){
  .mario-game-top{grid-template-columns:1fr auto}
  .mario-game-top .game-back{display:none}
  .mario-game-toolbar{grid-template-columns:1fr auto}
  .mario-help{display:none}
}


/* =========================================================
   KENNISCHECKPOINTS IN HET SPEL
   ========================================================= */
.mario-game-toolbar strong#hud-questions{
  color:#f1df7b;
}
.game-question-card{
  animation:quizCardIn .25s ease both;
}
@keyframes quizCardIn{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}


/* =========================================================
   KENNIS PACMAN - MADKHIX ADAPTATIE
   ========================================================= */
.practice-mode-card.pacman{
  background:linear-gradient(145deg,#fff,#fffbea);
}
.practice-mode-card.pacman .practice-mode-icon{
  background:#fff2a7;
  color:#8b6500;
}
.practice-mode-card.pacman .practice-mode-button{
  background:linear-gradient(135deg,#e8ae15,#ffc83d);
  color:#3d3000;
}

.pac-edu-shell{max-width:900px;margin:24px auto 70px}
.pac-edu-head{
  display:grid;grid-template-columns:100px 1fr auto;gap:18px;align-items:center;margin-bottom:15px
}
.pac-edu-head h1{margin:4px 0}
.pac-edu-head p{margin:5px 0 0;color:#738095;font-size:11px}
.pac-xp-pill{
  padding:9px 12px;border-radius:12px;background:#fff8dd;border:1px solid #efd989;color:#6d5700
}

.pac-stats-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px
}
.pac-stats-strip>div{
  padding:11px 13px;border:1px solid #e6e8ef;border-radius:12px;background:#fff
}
.pac-stats-strip small,.pac-stats-strip strong{display:block}
.pac-stats-strip small{color:#929cad;font-size:8px;text-transform:uppercase;font-weight:900}
.pac-stats-strip strong{margin-top:4px;color:#28344a;font-size:16px}

.pac-game-frame{
  position:relative;background:#02030b;border:5px solid #19244b;border-radius:20px;
  overflow:hidden;box-shadow:0 20px 55px rgba(6,14,34,.28)
}
.pac-hud{
  height:48px;display:flex;align-items:center;justify-content:center;gap:24px;
  padding:0 14px;background:#080b1a;color:#f8f8ff;font:900 11px ui-monospace,monospace;
  border-bottom:1px solid #202b59
}
.pac-hud strong{color:#ffe234}
.pac-power{color:#6fcaff}
#pac-canvas{
  display:block;width:100%;height:auto;image-rendering:pixelated;background:#02030b;margin:auto
}

.pac-start-overlay{
  position:absolute;inset:48px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;background:rgba(2,3,11,.91);color:#fff;z-index:10
}
.pac-logo{
  color:#ffe132;font:950 40px ui-monospace,monospace;letter-spacing:3px;text-shadow:0 4px 0 #7a5c00
}
.pac-logo span{color:#fff}
.pac-start-overlay h2{margin:8px 0 4px;color:#fff}
.pac-start-overlay p{max-width:430px;color:#b9c0d8;font-size:11px}
.pac-start-overlay button{
  margin-top:14px;border:0;border-radius:12px;padding:12px 22px;background:#ffe132;color:#1a1600;
  font-weight:950;cursor:pointer
}

.pac-touch{
  position:absolute;left:12px;bottom:12px;display:none;z-index:8
}
.pac-touch>button{margin-left:52px}
.pac-touch div{display:flex}
.pac-touch button{
  width:48px;height:44px;border:1px solid rgba(255,255,255,.25);background:rgba(26,38,79,.62);
  color:#fff;border-radius:8px;font-size:18px
}

.pac-question-modal,.pac-result-modal{
  position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:20px;
  background:rgba(2,4,13,.78);backdrop-filter:blur(6px)
}
.pac-question-card,.pac-result-card{
  width:min(540px,94vw);padding:27px;border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.35)
}
.pac-question-orb{
  width:54px;height:54px;display:grid;place-items:center;margin:-54px auto 13px;border-radius:50%;
  background:#9b5cff;border:5px solid #6c39c2;color:#fff;font-size:29px;font-weight:950;
  box-shadow:0 8px 20px rgba(89,44,155,.28)
}
.pac-question-card h2{margin:7px 0 18px;font-size:21px}
.pac-question-options{display:grid;gap:9px}
.pac-answer{
  display:grid;grid-template-columns:35px 1fr;gap:10px;align-items:center;text-align:left;
  padding:11px;border:2px solid #e4e6ed;border-radius:12px;background:#fff;cursor:pointer
}
.pac-answer span{
  width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#f1f2f5;font-weight:950
}
.pac-answer.correct{border-color:#43b978;background:#edf9f2}
.pac-answer.correct span{background:#39ac6b;color:#fff}
.pac-answer.wrong{border-color:#df7777;background:#fff1f1}
.pac-answer.wrong span{background:#d95c5c;color:#fff}
.pac-question-feedback{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:11px;font-weight:800}
.pac-question-feedback.correct{background:#eaf8f0;color:#25794b}
.pac-question-feedback.wrong{background:#fff1f1;color:#a44c4c}
.pac-question-feedback span{display:block;margin-top:4px;font-weight:600}

.pac-result-card{text-align:center}
.pac-result-icon{font-size:50px}
.pac-result-card h2{margin:7px 0 16px}
.pac-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pac-result-grid>div{padding:12px;border-radius:11px;background:#f7f8fb}
.pac-result-grid small,.pac-result-grid strong{display:block}
.pac-result-grid small{color:#8d97a7;font-size:8px;text-transform:uppercase;font-weight:900}
.pac-result-grid strong{margin-top:4px;font-size:18px}
.pac-result-actions{display:flex;justify-content:center;gap:9px;margin-top:18px}

@media(max-width:760px){
  .pac-edu-head{grid-template-columns:1fr auto}
  .pac-edu-head .game-back{display:none}
  .pac-stats-strip{grid-template-columns:1fr 1fr}
  .pac-touch{display:block}
}


/* =========================================================
   EXTRA ARCADEHAL
   ========================================================= */
.arcade-unlocked-section{margin:22px 0}
.arcade-unlocked-head h2{margin:5px 0}
.arcade-unlocked-head p{color:var(--muted);font-size:11px}
.arcade-unlocked-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.arcade-choice-card{
  display:block;padding:16px 12px;border:1px solid #e4e7ee;border-radius:15px;background:#fff;
  text-decoration:none;color:#344158;text-align:center;transition:.18s ease
}
.arcade-choice-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(35,45,68,.09)}
.arcade-choice-card>span{display:block;font-size:28px;margin-bottom:7px}
.arcade-choice-card strong,.arcade-choice-card small{display:block}
.arcade-choice-card strong{font-size:11px}
.arcade-choice-card small{margin-top:4px;color:#909aaa;font-size:8px}

.arcade-shell{max-width:980px;margin:24px auto 70px}
.arcade-head{display:grid;grid-template-columns:100px 1fr auto;gap:18px;align-items:center;margin-bottom:12px}
.arcade-head h1{margin:4px 0}
.arcade-head p{margin:4px 0;color:#7c8798;font-size:10px}
.arcade-xp{padding:8px 11px;border-radius:11px;background:#fff7dc;border:1px solid #ecd88d;color:#6c5600}
.arcade-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:10px}
.arcade-stats>div{padding:10px;border:1px solid #e5e7ed;border-radius:11px;background:#fff}
.arcade-stats small,.arcade-stats strong{display:block}.arcade-stats small{color:#929cad;font-size:8px;text-transform:uppercase;font-weight:900}.arcade-stats strong{margin-top:3px}
.arcade-frame{position:relative;overflow:hidden;border-radius:17px;border:4px solid #182847;background:#08111f;box-shadow:0 18px 50px rgba(10,24,45,.22)}
.arcade-hud{height:42px;display:flex;justify-content:center;align-items:center;gap:30px;background:#10192d;color:#fff;font:900 10px ui-monospace,monospace}
.arcade-hud strong{color:#ffe66c}
#arcade-canvas{display:block;width:100%;height:auto;background:#0a1321}
.arcade-overlay{position:absolute;inset:42px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,12,25,.90);color:#fff;text-align:center;z-index:10}
.arcade-big-icon{font-size:55px}.arcade-overlay h2{margin:8px 0}.arcade-overlay p{max-width:520px;color:#c1c9d8;font-size:11px}.arcade-overlay button{margin-top:14px;border:0;border-radius:11px;padding:12px 20px;background:#6e58ed;color:#fff;font-weight:950}
.arcade-touch{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;z-index:8}
.arcade-touch button{min-width:48px;height:42px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(18,31,54,.55);color:#fff;font-weight:900}
.arcade-touch button:last-child{margin-left:auto;min-width:70px}

.arcade-qmodal,.arcade-result{position:fixed;inset:0;z-index:1700;display:grid;place-items:center;background:rgba(5,10,22,.78);backdrop-filter:blur(6px);padding:20px}
.arcade-qcard,.arcade-result-card{width:min(530px,94vw);padding:26px;border-radius:20px;background:#fff;box-shadow:0 25px 70px rgba(0,0,0,.30)}
.arcade-qicon{width:52px;height:52px;display:grid;place-items:center;margin:-52px auto 13px;border-radius:50%;background:#6e58ed;color:#fff;font-size:28px;font-weight:950}
.arcade-qcard h2{margin:7px 0 17px}.arcade-qoptions{display:grid;gap:8px}.arcade-answer{display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center;padding:10px;border:2px solid #e5e7ed;border-radius:11px;background:#fff;text-align:left}
.arcade-answer span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#f1f2f5;font-weight:950}
.arcade-answer.correct{border-color:#47ba7b;background:#edf9f2}.arcade-answer.correct span{background:#3bad6d;color:#fff}.arcade-answer.wrong{border-color:#db7878;background:#fff1f1}.arcade-answer.wrong span{background:#d75d5d;color:#fff}
.arcade-qfeedback{margin-top:11px;padding:10px;border-radius:9px;font-weight:850}.arcade-qfeedback.correct{background:#eaf8ef;color:#247a49}.arcade-qfeedback.wrong{background:#fff1f1;color:#a44b4b}
.arcade-result-card{text-align:center}.arcade-result-icon{font-size:50px}.arcade-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.arcade-result-grid>div{padding:11px;border-radius:10px;background:#f7f8fb}.arcade-result-grid small,.arcade-result-grid strong{display:block}.arcade-result-grid small{font-size:8px;color:#919aa9}.arcade-result-actions{display:flex;gap:8px;justify-content:center;margin-top:17px}

@media(max-width:900px){.arcade-unlocked-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.arcade-head{grid-template-columns:1fr auto}.arcade-head .game-back{display:none}.arcade-stats{grid-template-columns:1fr 1fr}}


/* =========================================================
   ALLE SPELLEN IN DEZELFDE TEGELSTIJL
   ========================================================= */

.practice-mode-card.arcade-tile{
  background:linear-gradient(145deg,#fff,#f8f9ff);
}

.practice-mode-card.arcade-tile .practice-mode-icon{
  background:#f0eeff;
  color:#5f51df;
}

.practice-mode-card.arcade-tile .practice-mode-button{
  background:linear-gradient(135deg,#6254ef,#8861ff);
  color:#fff;
}

.practice-mode-card.arcade-tile.crashcar{
  background:linear-gradient(145deg,#fff,#fff7f1);
}
.practice-mode-card.arcade-tile.crashcar .practice-mode-icon{
  background:#fff0e5;
}

.practice-mode-card.arcade-tile.breakout{
  background:linear-gradient(145deg,#fff,#fff7fb);
}
.practice-mode-card.arcade-tile.breakout .practice-mode-icon{
  background:#fbeaf3;
}

/* meer tegels netjes responsief in hetzelfde grid */
.practice-choice-grid.three-options{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

@media(max-width:980px){
  .practice-choice-grid.three-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px){
  .practice-choice-grid.three-options{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   ROBUUSTE SPELLENTEGELS - voorkomt smalle/overlappende cards
   ========================================================= */

/* Laat CSS Grid zelf bepalen hoeveel kaarten verantwoord passen.
   Hierdoor wordt een kaart nooit kunstmatig extreem smal. */
.practice-choice-grid,
.practice-choice-grid.three-options{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  width:100% !important;
}

/* Iedere kaart mag de beschikbare kolom volledig gebruiken. */
.practice-choice-grid > .practice-mode-card{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:360px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
}

/* Tekst mag nooit door een extreem smalle interne kolom lopen. */
.practice-mode-card h2,
.practice-mode-card p,
.practice-mode-card ul,
.practice-mode-card li,
.practice-mode-card strong,
.practice-mode-card small{
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  white-space:normal !important;
}

/* Herstel eventuele oude position:absolute-regels uit bestaande kaarten. */
.practice-mode-card.arcade-tile .practice-card-kicker,
.practice-mode-card.arcade-tile h2,
.practice-mode-card.arcade-tile p,
.practice-mode-card.arcade-tile ul,
.practice-mode-card.arcade-tile .practice-mode-button{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  float:none !important;
}

.practice-mode-card.arcade-tile .practice-mode-icon{
  position:relative !important;
  inset:auto !important;
  flex:0 0 auto !important;
  width:64px !important;
  height:64px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 0 16px !important;
  border-radius:18px !important;
  font-size:30px !important;
}

.practice-mode-card.arcade-tile .practice-card-kicker{
  display:block !important;
  margin:0 0 6px !important;
  font-size:10px !important;
  line-height:1.2 !important;
  letter-spacing:.12em !important;
}

.practice-mode-card.arcade-tile h2{
  display:block !important;
  margin:0 0 10px !important;
  font-size:24px !important;
  line-height:1.08 !important;
}

.practice-mode-card.arcade-tile p{
  display:block !important;
  margin:0 0 14px !important;
  font-size:14px !important;
  line-height:1.55 !important;
  color:#69758a !important;
}

.practice-mode-card.arcade-tile ul{
  display:block !important;
  margin:0 0 18px 18px !important;
  padding:0 !important;
  font-size:13px !important;
  line-height:1.5 !important;
}

.practice-mode-card.arcade-tile .practice-mode-button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:46px !important;
  margin-top:auto !important;
  padding:11px 14px !important;
  border-radius:12px !important;
  line-height:1.2 !important;
  text-align:center !important;
}

/* Bescherm ook bestaande Kennis Avontuur/Pacman kaarten tegen overflow. */
.practice-mode-card{
  overflow:hidden !important;
}
.practice-mode-card *{
  box-sizing:border-box;
}
.practice-mode-card h2,
.practice-mode-card p{
  overflow-wrap:break-word;
}

/* Op tablets maximaal twee nette kolommen; mobiel altijd één. */
@media (max-width:900px){
  .practice-choice-grid,
  .practice-choice-grid.three-options{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:620px){
  .practice-choice-grid,
  .practice-choice-grid.three-options{
    grid-template-columns:1fr !important;
  }

  .practice-choice-grid > .practice-mode-card{
    min-height:0 !important;
  }
}

.practice-mode-card.arcade-tile.moto{background:linear-gradient(145deg,#fff,#f2f8ff)}
.practice-mode-card.arcade-tile.moto .practice-mode-icon{background:#e5f1ff}
.practice-mode-card.arcade-tile.tetris{background:linear-gradient(145deg,#fff,#f8f4ff)}
.practice-mode-card.arcade-tile.tetris .practice-mode-icon{background:#efe8ff}
/* =========================================================
   ORIGINELE GITHUB-GAMES + NATUURKUNDELAB QUIZLAAG
   ========================================================= */
.original-game-shell{max-width:1180px;margin:24px auto 70px}
.original-game-head{display:grid;grid-template-columns:100px 1fr auto;gap:18px;align-items:center;margin-bottom:14px}
.original-game-head h1{margin:4px 0}.original-game-head p{margin:4px 0;color:#7b8698;font-size:11px}
.original-game-frame-wrap{position:relative;overflow:hidden;border:1px solid #dfe4ec;border-radius:20px;background:#0c1322;box-shadow:0 20px 55px rgba(17,32,53,.15)}
.original-game-frame{display:block;width:100%;height:min(76vh,760px);min-height:600px;border:0;background:#0b1220}
.original-game-source-badge{position:absolute;right:12px;top:12px;z-index:5;padding:7px 10px;border-radius:999px;background:rgba(14,22,38,.72);color:#fff;font-size:8px;font-weight:900;backdrop-filter:blur(6px)}
.original-game-info{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;padding:12px 5px;color:#7c8797;font-size:9px;font-weight:850}
.original-quiz-modal{position:fixed;inset:0;z-index:1900;display:grid;place-items:center;padding:20px;background:rgba(5,10,22,.78);backdrop-filter:blur(6px)}
.original-quiz-card{width:min(560px,94vw);padding:28px;border-radius:21px;background:#fff;box-shadow:0 28px 85px rgba(0,0,0,.32)}
.original-quiz-icon{width:55px;height:55px;display:grid;place-items:center;margin:-55px auto 14px;border-radius:50%;background:#6754e8;color:#fff;font-size:29px;font-weight:950;box-shadow:0 8px 22px rgba(86,68,197,.28)}
.original-quiz-card h2{margin:7px 0 18px;font-size:21px}.original-q-options{display:grid;gap:9px}
.original-q-answer{display:grid;grid-template-columns:35px 1fr;gap:10px;align-items:center;padding:11px;border:2px solid #e4e7ed;border-radius:12px;background:#fff;text-align:left;cursor:pointer}
.original-q-answer span{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#f0f2f5;font-weight:950}
.original-q-answer.correct{border-color:#48ba7c;background:#edf9f2}.original-q-answer.correct span{background:#3bad6c;color:#fff}
.original-q-answer.wrong{border-color:#db7777;background:#fff1f1}.original-q-answer.wrong span{background:#d75c5c;color:#fff}
.original-q-feedback{margin-top:12px;padding:10px 12px;border-radius:10px;font-weight:850}.original-q-feedback.correct{background:#eaf8ef;color:#247a49}.original-q-feedback.wrong{background:#fff1f1;color:#a44c4c}.original-q-feedback small{display:block;margin-top:5px;font-weight:600}
@media(max-width:760px){.original-game-head{grid-template-columns:1fr auto}.original-game-head .game-back{display:none}.original-game-frame{min-height:520px;height:72vh}}


/* Super Mario JS Bros tegel */
.practice-mode-card.arcade-tile.mario{
  background:linear-gradient(145deg,#fff,#fff5f2);
}
.practice-mode-card.arcade-tile.mario .practice-mode-icon{
  background:#ffe8e1;
}
.practice-mode-card.arcade-tile.mario .practice-mode-button{
  background:linear-gradient(135deg,#e54635,#ff6a55);
  color:#fff;
}


/* Game Racer / Cyber Racer / FPS tegels */
.practice-mode-card.arcade-tile.gameracer{
  background:linear-gradient(145deg,#fff,#fff7ee);
}
.practice-mode-card.arcade-tile.gameracer .practice-mode-icon{
  background:#ffeedb;
}
.practice-mode-card.arcade-tile.gameracer .practice-mode-button{
  background:linear-gradient(135deg,#e77c26,#ff9c3d);
  color:#fff;
}

.practice-mode-card.arcade-tile.cyberracer{
  background:linear-gradient(145deg,#fff,#f1fbff);
}
.practice-mode-card.arcade-tile.cyberracer .practice-mode-icon{
  background:#e1f7ff;
}
.practice-mode-card.arcade-tile.cyberracer .practice-mode-button{
  background:linear-gradient(135deg,#1f9cc9,#36c6e8);
  color:#fff;
}

/* =========================================================
   OPTIMALE GAME-ERVARING
   ========================================================= */
.original-game-frame-wrap,
.arcade-frame,
.pac-game-frame,
.mario-canvas-wrap{
  overscroll-behavior:contain;
}

.original-game-frame{
  outline:none;
}

.original-game-frame:focus{
  box-shadow:inset 0 0 0 2px rgba(103,84,232,.25);
}

body:has(.original-game-shell),
body:has(.arcade-shell),
body:has(.pac-edu-shell),
body:has(.mario-game-shell){
  overscroll-behavior:none;
}


/* =========================================================
   AANTREKKELIJKE FULLSCREEN GAME-MODUS
   ========================================================= */
.original-game-actions{display:flex;align-items:center;gap:10px}
.game-fullscreen-btn,.game-fullscreen-floating{
 border:0;border-radius:12px;padding:10px 14px;background:linear-gradient(135deg,#5b50df,#7666f4);
 color:#fff;font-size:10px;font-weight:900;cursor:pointer;box-shadow:0 9px 22px rgba(86,76,215,.25);
 transition:transform .16s ease,box-shadow .16s ease
}
.game-fullscreen-btn:hover,.game-fullscreen-floating:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(86,76,215,.30)}
.game-fullscreen-floating{position:fixed;right:22px;bottom:22px;z-index:1300}
.original-game-frame-wrap{
 background:radial-gradient(circle at 50% 18%,rgba(92,84,232,.16),transparent 34%),#050912
}
.original-game-title-overlay{
 position:absolute;left:12px;top:12px;z-index:7;display:flex;align-items:center;gap:9px;padding:8px 11px;
 border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(6,13,25,.70);color:#fff;
 backdrop-filter:blur(8px);pointer-events:none
}
.original-game-title-overlay>span{font-size:22px}.original-game-title-overlay strong,.original-game-title-overlay small{display:block}
.original-game-title-overlay strong{font-size:10px}.original-game-title-overlay small{margin-top:2px;color:#b9c6d8;font-size:8px}
.original-game-frame-wrap:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;background:#000}
.original-game-frame-wrap:fullscreen .original-game-frame{width:100vw;height:100vh;min-height:100vh}
.original-game-frame-wrap:fullscreen .original-game-source-badge{right:18px;top:18px}
.original-game-frame-wrap:fullscreen .original-game-title-overlay{left:18px;top:18px}

.game-stage-wrap:fullscreen,.pac-game-frame:fullscreen,.arcade-frame:fullscreen,.mario-canvas-wrap:fullscreen,
.game-shell:fullscreen,.pac-edu-shell:fullscreen,.arcade-shell:fullscreen{
 width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;background:#050912!important
}
.game-stage-wrap:fullscreen .game-stage,.pac-game-frame:fullscreen #pac-canvas,.arcade-frame:fullscreen #arcade-canvas,
.mario-canvas-wrap:fullscreen #mario-canvas{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain}
body:has(:fullscreen){overflow:hidden!important}

.practice-mode-card{border:1px solid rgba(63,76,105,.10)!important;box-shadow:0 12px 30px rgba(36,48,72,.055)!important}
.practice-mode-card:hover{transform:translateY(-4px)!important;box-shadow:0 19px 40px rgba(36,48,72,.11)!important}
.practice-mode-card .practice-mode-button{transition:transform .16s ease,filter .16s ease}
.practice-mode-card:hover .practice-mode-button{filter:brightness(1.05)}

@media(max-width:760px){
 .original-game-actions{flex-direction:column;align-items:flex-end}
 .game-fullscreen-floating{right:14px;bottom:14px}
}


/* =========================================================
   KENNIS BREAKOUT - FULLSCREEN ARCADE
   ========================================================= */
.game-key-breakout{
  max-width:1380px;
}

.game-key-breakout .original-game-frame-wrap{
  min-height:760px;
  border-radius:26px;
  border:1px solid rgba(113,99,255,.22);
  background:
    radial-gradient(circle at 50% 34%,rgba(113,99,255,.13),transparent 34%),
    linear-gradient(180deg,#081020,#02050b);
  box-shadow:
    0 28px 80px rgba(10,18,35,.22),
    0 0 50px rgba(92,78,255,.07);
}

.game-key-breakout .original-game-frame{
  height:760px;
  min-height:760px;
}

.breakout-arcade-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 12px;
  padding:14px 16px;
  border:1px solid rgba(108,91,228,.15);
  border-radius:18px;
  background:linear-gradient(135deg,#faf9ff,#f5f3ff);
}

.breakout-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.breakout-logo-orb{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(145deg,#eeeaff,#e2ddff);
  font-size:29px;
}

.breakout-brand strong,
.breakout-brand small{
  display:block;
}

.breakout-brand strong{
  margin-top:2px;
  font-size:17px;
  color:#2c2750;
}

.breakout-brand small{
  margin-top:1px;
  color:#807b99;
  font-size:9px;
  font-weight:750;
}

.breakout-banner-stats{
  display:flex;
  gap:8px;
}

.breakout-banner-stats span{
  min-width:105px;
  padding:9px 11px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e7e3f2;
}

.breakout-banner-stats b,
.breakout-banner-stats small{
  display:block;
}

.breakout-banner-stats b{
  color:#6857d9;
  font-size:11px;
}

.breakout-banner-stats small{
  margin-top:2px;
  color:#9690a6;
  font-size:8px;
  font-weight:750;
}

.game-key-breakout .game-fullscreen-btn{
  background:linear-gradient(135deg,#6554dd,#8673ff);
  box-shadow:0 9px 24px rgba(97,81,214,.25);
}

.game-key-breakout .original-game-frame-wrap:fullscreen{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100vw;
  height:100vh;
  background:
    radial-gradient(circle at 50% 38%,rgba(109,93,255,.15),transparent 35%),
    #02050b;
}

.game-key-breakout .original-game-frame-wrap:fullscreen .original-game-frame{
  width:100vw;
  height:100vh;
  min-height:100vh;
}

.game-key-breakout .original-quiz-card{
  border:1px solid rgba(100,83,216,.16);
}

.game-key-breakout .original-quiz-icon{
  background:linear-gradient(135deg,#6554dd,#8874ff);
}

@media(max-width:760px){
  .breakout-arcade-banner{
    display:block;
  }

  .breakout-banner-stats{
    margin-top:12px;
    overflow:auto;
  }

  .game-key-breakout .original-game-frame,
  .game-key-breakout .original-game-frame-wrap{
    min-height:620px;
    height:620px;
  }
}



/* Lokale cursusafbeeldingen: nette foutmelding wanneer een bestand ontbreekt. */
.course-image-missing{
  padding:24px;
  max-width:34rem;
  text-align:center;
  color:#64748b;
  font-size:14px;
  line-height:1.5;
}

/* ==========================================================
   Nette breuknotatie in cursusinhoud
   Gebruik in de database: [[frac:teller|noemer]]
   ========================================================== */
.course-text-body .math-frac,
.course-body .math-frac,
.course-reading-text .math-frac {
  display:inline-grid;
  grid-template-rows:auto auto;
  align-items:center;
  justify-items:center;
  min-width:1.55em;
  margin:0 .16em;
  vertical-align:-.48em;
  line-height:1.02;
  font-variant-numeric:tabular-nums;
}

.course-text-body .math-frac-top,
.course-body .math-frac-top,
.course-reading-text .math-frac-top {
  display:block;
  width:100%;
  padding:0 .24em .11em;
  border-bottom:2px solid currentColor;
  text-align:center;
  white-space:nowrap;
}

.course-text-body .math-frac-bottom,
.course-body .math-frac-bottom,
.course-reading-text .math-frac-bottom {
  display:block;
  padding:.11em .24em 0;
  text-align:center;
  white-space:nowrap;
}

.course-text-body .course-formula-line,
.course-body .course-formula-line,
.course-reading-text .course-formula-line {
  display:flex;
  align-items:center;
  gap:.12em;
  margin:1.15em 0;
  font-size:1.12em;
  font-weight:700;
  line-height:1.55;
}

.course-text-body .course-formula-line .math-frac,
.course-body .course-formula-line .math-frac,
.course-reading-text .course-formula-line .math-frac {
  font-size:1.08em;
}


/* 2026-08: leerlingen spelen bewust binnen de leeromgeving, nooit fullscreen */
.game-fullscreen-btn,.game-fullscreen-floating,#game-fullscreen-btn,#local-game-fullscreen-btn,[data-fullscreen],.fullscreen-btn,.fullscreen-button{display:none!important}
.nav-task-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;background:#ef4444;color:white;font-size:11px;font-weight:900;vertical-align:middle;box-shadow:0 4px 12px #ef444455}
.course-task-grid{display:grid;gap:18px}.course-task-card{background:#fff;border:1px solid #e3e9f2;border-radius:20px;padding:20px;box-shadow:0 12px 32px #17233b0b}.course-task-card.done{border-color:#8bd8bc;background:#f6fffb}.course-task-progress{height:12px;background:#edf1f6;border-radius:999px;overflow:hidden;margin:12px 0}.course-task-progress i{display:block;height:100%;background:linear-gradient(90deg,#5c4fd8,#31b98b);border-radius:inherit}.course-task-parts{display:flex;gap:10px;flex-wrap:wrap}.course-task-parts span{background:#f3f5fa;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800}.course-task-parts .ok{background:#dcfce7;color:#166534}.assignment-admin{display:grid;gap:22px}.assignment-card{background:#fff;border:1px solid #e3e9f2;border-radius:18px;padding:18px}.assignment-students{width:100%;border-collapse:collapse;margin-top:14px}.assignment-students th,.assignment-students td{padding:10px;border-bottom:1px solid #eef1f6;text-align:left;vertical-align:middle}.mini-progress{width:120px;height:8px;background:#edf1f6;border-radius:999px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px}.mini-progress i{display:block;height:100%;background:#31b98b}.game-hub-shell{max-width:1100px;margin:0 auto}.edu-game-stage{position:relative;background:#08111f;border-radius:24px;overflow:hidden;border:1px solid #26364e;box-shadow:0 25px 60px #0b173833}.edu-game-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}.edu-game-stats{display:flex;gap:9px;flex-wrap:wrap}.edu-game-stats span{background:#fff;border:1px solid #e3e9f2;border-radius:12px;padding:8px 11px;font-weight:800}.edu-game-canvas{display:block;width:100%;height:auto;max-height:650px;aspect-ratio:16/9;background:#07111e}.edu-game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#07111ed9;z-index:5}.edu-game-overlay.hidden,.edu-quiz.hidden{display:none}.edu-game-panel{max-width:520px;text-align:center;background:#fff;color:#17233b;padding:28px;border-radius:22px;box-shadow:0 22px 60px #0006}.edu-quiz{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#07111eef;padding:20px}.edu-quiz-card{width:min(680px,96%);background:#fff;color:#17233b;border-radius:22px;padding:26px}.edu-q-options{display:grid;gap:10px;margin-top:18px}.edu-q-options button{border:1px solid #dce3ee;background:#f8faff;border-radius:14px;padding:13px;text-align:left;font-weight:750;cursor:pointer}.edu-q-options button.correct{background:#dcfce7;border-color:#59c58d}.edu-q-options button.wrong{background:#fee2e2;border-color:#f87171}.edu-game-credit{font-size:12px;color:#74819a;margin-top:10px}.mine-board-wrap{display:grid;place-items:center;padding:22px;min-height:520px;background:linear-gradient(#7ecbff,#d7f2ff 42%,#72ac4a 43%,#4b7c31)}.mine-board{display:grid;gap:3px;background:#3d5c2d;padding:8px;border:6px solid #6b4725;box-shadow:0 14px 40px #0005}.mine-cell{width:34px;height:34px;border:0;border-radius:2px;background:linear-gradient(135deg,#6fb24b,#4e8d34);box-shadow:inset 2px 2px #8cce69,inset -2px -2px #315d23;font-weight:950;font-size:15px;cursor:pointer}.mine-cell.open{background:#b58c5a;box-shadow:inset 1px 1px #d1ad7e}.mine-cell.flag{background:#5b963d}.mine-cell.mine{background:#d9534f}.game-controls-note{padding:11px 15px;color:#d9e7ff;background:#0d1b2f;font-size:13px}

/* 2026-08: cursustaken kunnen per hoofdstuk én per onderdeel worden toegewezen */
.field-help{display:block;color:#6b7890;margin-top:5px;line-height:1.45}.assignment-chapter-list{display:grid;gap:10px;max-height:460px;overflow:auto;padding:4px}.assignment-chapter{border:1px solid #e1e7f0;border-radius:15px;background:#fbfcff;overflow:hidden}.assignment-chapter-head{display:flex!important;align-items:center;gap:10px;padding:13px 14px;font-weight:850;cursor:pointer;margin:0!important}.assignment-chapter-head input{width:18px;height:18px}.assignment-concepts{padding:2px 14px 14px 42px;border-top:1px solid #edf0f5;background:#fff}.assignment-concepts label{display:flex!important;align-items:center;gap:9px;padding:7px 0;margin:0!important;font-weight:650}.assignment-concepts input{width:17px;height:17px}.assignment-concept-toolbar{display:flex;gap:12px;padding:9px 0 3px}.link-btn{border:0;background:transparent;color:#5146c9;font:inherit;font-size:12px;font-weight:850;padding:0;cursor:pointer}.link-btn:hover{text-decoration:underline}.assignment-scope{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:11px 0}.student-assignment-scope{padding:10px 12px;border-radius:13px;background:#f5f7fb;border:1px solid #e5eaf2}.student-assignment-scope .pill{background:white}

/* Gametijd en voortgang */
.game-time-pill{position:sticky;top:72px;z-index:40;width:max-content;margin:10px auto 14px;padding:9px 14px;border-radius:999px;background:#17233b;color:#fff;box-shadow:0 8px 24px rgba(23,35,59,.18);font-size:14px}.game-time-pill strong{font-variant-numeric:tabular-nums;font-size:16px}.game-time-earned{display:block;margin-top:8px;color:#147a46;font-weight:900}.game-unlock-motivation.unlocked{border-color:#b8e4ca;background:#f3fff7}.inline-form{display:flex;gap:14px;align-items:end;flex-wrap:wrap}.inline-form label{display:grid;gap:6px;font-weight:700}.inline-form select,.inline-form input{min-width:180px}

/* ===== Upgrade taken 5 t/m 8 ===== */
.practice-mode-card.completed-mode{background:linear-gradient(180deg,#fbfdfc,#f1f7f4);border-color:#c9dfd5;opacity:.84;position:relative}.practice-mode-card.completed-mode:hover{opacity:1}.practice-mode-card.completed-mode:after{content:"✓";position:absolute;right:16px;top:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dcfce7;color:#147a4e;font-size:19px;font-weight:950}.completion-xp{display:block;margin:11px 0 4px;padding:8px 10px;border-radius:10px;background:#fff7d6;color:#815c00;font-size:12px;font-weight:900;border:1px solid #f1df9b}
.game-hub-shell{max-width:960px}.edu-game-canvas{max-height:510px}.mine-board-wrap{min-height:450px;padding:14px}.original-game-shell{max-width:980px;margin:0 auto}.original-game-frame{height:min(61vh,560px);min-height:410px}.game-stage{height:min(60vh,520px)!important}@media(max-height:820px){.original-game-frame{height:500px;min-height:380px}.edu-game-canvas{max-height:460px}.mine-board-wrap{min-height:410px}.mine-cell{width:30px;height:30px;font-size:14px}}@media(max-width:1180px){.original-game-shell,.game-hub-shell{max-width:900px}.original-game-frame{height:500px;min-height:390px}}@media(max-width:760px){.original-game-frame{height:440px;min-height:360px}.edu-game-canvas{max-height:420px}}
.grade-overview-card{overflow:hidden}.grade-legend{font-size:12px;color:#66758d;font-weight:750}.grade-table{width:100%;border-collapse:collapse}.grade-table th,.grade-table td{padding:12px;border-bottom:1px solid #edf1f5;text-align:left;vertical-align:middle}.grade-table tr.row-complete{background:#f4fbf7}.grade-progress{display:inline-block;width:130px;height:9px;border-radius:99px;background:#edf1f5;overflow:hidden;margin-right:9px;vertical-align:middle}.grade-progress i{display:block;height:100%;background:#3cb889;border-radius:inherit}.grade-number{display:inline-grid;place-items:center;min-width:48px;padding:7px 10px;border-radius:11px;background:#eef2f8;font-weight:950}.grade-number.perfect{background:#dcfce7;color:#166534}.grade-done{font-weight:900;color:#16734d}.grade-open{font-weight:800;color:#7b879a}.grade-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}.grade-concept-card{border:1px solid #e5eaf1;border-radius:16px;padding:15px;background:#fbfcfe}.grade-concept-card table{width:100%;border-collapse:collapse}.grade-concept-card th,.grade-concept-card td{font-size:12px;padding:8px;border-bottom:1px solid #edf1f5;text-align:left}

/* Gamecenter + snelle leerlingzoeker */
.gamecenter-shell{max-width:1120px;margin:0 auto;padding-bottom:36px}.gamecenter-hero{display:flex;align-items:stretch;justify-content:space-between;gap:24px;margin:18px 0 16px;padding:26px;border-radius:24px;background:linear-gradient(135deg,#10243a,#173f58);color:#fff}.gamecenter-hero h1{margin:.3rem 0 .4rem;font-size:clamp(2rem,4vw,3.5rem)}.gamecenter-hero p{max-width:700px;margin:0;color:#dcebf4}.gamecenter-time-card{min-width:220px;border-radius:20px;padding:20px;background:rgba(255,255,255,.12);display:flex;flex-direction:column;justify-content:center;text-align:center}.gamecenter-time-card small,.gamecenter-time-card span{opacity:.85}.gamecenter-time-card strong{font-size:42px;line-height:1.1;margin:5px 0}.gamecenter-note{padding:14px 18px;border-radius:16px;background:#fff7d6;border:1px solid #f0d477;margin-bottom:18px}.gamecenter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.gamecenter-card{display:flex;gap:15px;align-items:center;padding:18px;border-radius:20px;background:#fff;border:1px solid #e3e9ef;box-shadow:0 8px 25px rgba(24,45,68,.07);text-decoration:none;color:inherit;transition:.15s ease}.gamecenter-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(24,45,68,.12)}.gamecenter-card h2{font-size:19px;margin:0 0 4px}.gamecenter-card p{font-size:14px;margin:0 0 7px;color:#5b6570}.gamecenter-card span{font-weight:800}.gamecenter-icon{font-size:35px;flex:0 0 48px}.gamecenter-open-banner{display:flex;align-items:center;gap:18px;padding:18px 20px;margin:18px 0 22px;border-radius:22px;background:linear-gradient(135deg,#f0fff6 0%,#f7fbff 55%,#eef7ff 100%);border:1px solid #b9e7cc;color:#142033;text-decoration:none;box-shadow:0 10px 30px rgba(24,120,78,.10);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.gamecenter-open-banner:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(24,120,78,.15);border-color:#88d9aa}.gamecenter-open-icon{display:grid!important;place-items:center;width:54px;height:54px;flex:0 0 54px;border-radius:16px;background:#fff;border:1px solid #d8eee1;box-shadow:0 6px 16px rgba(24,120,78,.08);font-size:30px!important}.gamecenter-open-copy{flex:1;min-width:0}.gamecenter-open-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:3px}.gamecenter-open-banner strong{display:block;font-size:20px;line-height:1.15;letter-spacing:-.01em}.gamecenter-open-subtitle{display:block;color:#5c6d64;font-size:14.5px;line-height:1.45}.gamecenter-open-time{display:inline-flex!important;align-items:center;width:max-content;padding:5px 9px;border-radius:999px;background:#daf6e5;color:#167249!important;font-size:13px!important;font-weight:800;line-height:1}.gamecenter-open-cta{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:11px 15px;border-radius:14px;background:#163f59;color:#fff!important;font-size:14px!important;font-weight:800;box-shadow:0 6px 14px rgba(22,63,89,.16)}.game-time-expired{font-weight:700}
.student-search-picker{position:relative;margin-top:6px}.student-search-picker input[type=search]{width:100%}.student-search-results{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 5px);max-height:330px;overflow:auto;background:#fff;border:1px solid #ccd7e0;border-radius:14px;box-shadow:0 14px 36px rgba(21,42,59,.18);padding:6px}.student-search-results button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;border:0;background:transparent;padding:10px 12px;border-radius:9px;text-align:left;cursor:pointer}.student-search-results button:hover{background:#eef6fb}.student-search-results button span{font-size:12px;font-weight:800;background:#edf2f6;padding:3px 7px;border-radius:99px}.student-search-empty{padding:12px;color:#6d7780}.student-search-selected{margin-top:7px;padding:8px 10px;border-radius:10px;background:#e9f9ee;color:#176b39}
@media(max-width:900px){.gamecenter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gamecenter-hero{flex-direction:column}.gamecenter-time-card{min-width:0}}@media(max-width:720px){.gamecenter-open-banner{align-items:flex-start;flex-wrap:wrap;gap:14px}.gamecenter-open-copy{min-width:calc(100% - 70px)}.gamecenter-open-cta{margin-left:68px}}@media(max-width:620px){.gamecenter-grid{grid-template-columns:1fr}.gamecenter-open-banner{padding:16px}.gamecenter-open-icon{width:48px;height:48px;flex-basis:48px;font-size:27px!important}.gamecenter-open-copy{min-width:calc(100% - 62px)}.gamecenter-open-title-row{gap:8px}.gamecenter-open-banner strong{font-size:18px}.gamecenter-open-subtitle{font-size:13.5px}.gamecenter-open-cta{width:100%;margin-left:0}}
\n\n/* ===== Duidelijke behaald-status + herleidbare oefenpogingen ===== */\n.completion-done-note{display:block;margin:10px 0 2px;padding:10px 12px;border-radius:12px;background:#e8f8ef;border:1px solid #bfe8cf;color:#187248;font-size:12px;line-height:1.4;font-weight:900}\n.practice-mode-card.completed-mode .practice-card-kicker{color:#147a4e!important;font-weight:950!important;letter-spacing:.15em}\n.practice-mode-card.completed-mode .practice-mode-button{opacity:.78;filter:saturate(.72)}\n.practice-mode-card.completed-mode:before{content:"BEHAALD";position:absolute;right:58px;top:20px;padding:5px 9px;border-radius:999px;background:#e3f9ea;color:#147a4e;font-size:9px;font-weight:950;letter-spacing:.13em}\n.concept-card-complete{background:linear-gradient(135deg,#f5fbf7,#eef8f2)!important;border-color:#bfe2cd!important;box-shadow:0 10px 26px rgba(25,120,76,.08)!important}\n.concept-card-complete .pill{background:#dcfce7!important;color:#147a4e!important;border-color:#b9ebca!important;font-weight:950!important}\n.concept-card-complete .arrow{background:#dcfce7!important;color:#147a4e!important}\n.concept-complete-note{display:inline-flex;margin-top:10px;padding:7px 10px;border-radius:10px;background:#e7f8ee;color:#187248;font-size:12px;font-weight:850}\n.attempt-source{display:block;margin-top:5px;color:#6d7890;font-size:11px;font-weight:800;letter-spacing:.02em}\n
/* Alle antwoorden in leerlingdetail: goede pogingen zichtbaar, aandachtspunten springen eruit */
.student-issue-card.answer-ok{
  border-color:#d9eee4;
  background:linear-gradient(180deg,#ffffff 0%,#fbfffd 100%);
}
.student-issue-card.needs-attention{
  border-color:#f1d6cf;
  box-shadow:0 16px 38px rgba(142,72,45,.08);
}
.attention-badge.green{
  background:#e9f8ef;
  color:#23764a;
  border:1px solid #ccebd8;
}
.student-answer-overview-note{
  margin:.4rem 0 0;
  color:#6d7890;
  max-width:760px;
}

/* Takenagenda, antwoordarchief en cijfers per onderdeel */
.task-agenda-list{display:grid;gap:10px;margin-top:16px}.task-agenda-row{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:start;border:1px solid #e6ebf3;border-radius:16px;padding:14px;background:#fbfcff}.task-agenda-date{border-radius:14px;background:#f0edff;color:#5545c9;text-align:center;padding:9px 6px;min-height:58px;display:grid;align-content:center}.task-agenda-date strong{font-size:24px;line-height:1}.task-agenda-date span{font-size:10px;font-weight:900;margin-top:5px}.task-agenda-main h3{margin:7px 0 4px}.task-agenda-main p{margin:0 0 7px;color:#68768c}.task-agenda-main small{color:#8792a5}.task-agenda-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}.agenda-status{font-weight:850;border-radius:999px;padding:4px 8px;background:#edf1f7}.agenda-status.afgerond{background:#dcfce7;color:#166534}.agenda-status.open,.agenda-status.actief{background:#e8f0ff;color:#315bb3}
.answer-list-tools{display:flex;gap:7px;align-items:center}.archive-answer-list{display:grid;gap:12px}.archive-answer-row{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(260px,1fr) minmax(360px,1.35fr) auto;gap:14px;align-items:center;padding:15px;border:1px solid #e6ebf3;border-radius:16px;background:#fbfdfc}.archive-answer-row.bad{border-color:#f3c9c2;background:#fff8f6}.archive-source{display:grid;gap:5px}.archive-source .pill{width:max-content}.archive-source small{color:#718096}.archive-answer-row>div:nth-child(2){display:grid;gap:5px}.archive-answer-row>div:nth-child(2) small{color:#7c879b}.archive-answer-values{display:grid;grid-template-columns:1fr 1fr;gap:9px}.archive-answer-values span{display:grid;gap:4px;padding:10px;border-radius:12px;background:#f1f5f9}.archive-answer-values small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#718096;font-weight:900}.archive-state{font-weight:900;display:grid;gap:4px;text-align:right}.archive-state.good{color:#16734d}.archive-state.bad{color:#b64338}.archive-state small{font-weight:600;color:#7a8799}
.grade-concept-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.grade-concept-summary{display:grid;gap:6px;text-decoration:none;color:inherit;border:1px solid #e5eaf1;border-radius:15px;padding:14px;background:#fbfcfe}.grade-concept-summary.active{border-color:#8374eb;background:#f5f2ff;box-shadow:0 0 0 2px #8374eb18}.grade-concept-summary span,.grade-concept-summary small{color:#738096}
@media(max-width:1000px){.archive-answer-row{grid-template-columns:1fr}.archive-state{text-align:left}.archive-answer-values{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.task-agenda-row{grid-template-columns:58px 1fr}.archive-answer-values{grid-template-columns:1fr}.answer-filters{grid-template-columns:1fr!important}}

/* Docentnavigatie: losse flexibele knoppenbalk tussen header en hoofdinhoud */
.teacher-topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:flex-start;
  min-height:78px;
  padding-top:13px;padding-bottom:13px;
}
.teacher-topbar .brand{width:max-content}
.teacher-nav-strip{
  position:relative;z-index:19;
  width:100%;
  padding:10px max(22px,calc((100vw - 1180px)/2 + 22px)) 12px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(229,234,242,.95);
  box-shadow:0 8px 24px rgba(37,48,77,.035);
}
.teacher-nav-strip .teacher-nav{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;
  font-size:13px;font-weight:800;color:#536079;
}
.teacher-nav-strip .teacher-nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:8px 12px;border:1px solid #e3e7f1;border-radius:11px;
  background:rgba(255,255,255,.98);box-shadow:0 3px 10px rgba(37,48,77,.05);
  white-space:nowrap;transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
}
.teacher-nav-strip .teacher-nav a:hover{
  color:var(--primary);border-color:#cfc9ff;background:#f8f7ff;transform:translateY(-1px);
}
.teacher-nav-strip .teacher-nav a:last-child{
  margin-left:auto;background:#fff6f7;color:#a93846;border-color:#f3dadd;
}
@media(max-width:850px){
  .teacher-topbar{min-height:68px}
  .teacher-nav-strip{padding-top:8px;padding-bottom:10px}
  .teacher-nav-strip .teacher-nav a{font-size:12px;padding:7px 10px;min-height:34px}
  .teacher-nav-strip .teacher-nav a:last-child{margin-left:0}
}
@media(max-width:520px){
  .teacher-nav-strip .teacher-nav a{flex:1 1 auto}
}


/* Cijfers: snelle voortgangsmail per leerling */
.grade-mail-col,.grade-mail-cell{width:72px;text-align:center!important;position:relative}
.grade-mail-button{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid #dce4f2;background:#f7f9ff;color:#6757f5;font-size:21px;text-decoration:none;cursor:pointer;box-shadow:0 4px 12px rgba(43,55,90,.06);transition:.16s ease}
.grade-mail-button:hover{transform:translateY(-1px);background:#eeeaff;border-color:#cfc6ff}
.grade-mail-button.missing{color:#9a6a15;background:#fff9e9;border-color:#f1db9c;list-style:none}
.grade-mail-button.missing::-webkit-details-marker{display:none}
.grade-mail-missing{position:relative;display:inline-block}
.grade-mail-missing[open]{z-index:30}
.grade-email-form{position:absolute;right:0;top:48px;width:285px;padding:14px;border:1px solid #dfe5ef;border-radius:15px;background:#fff;box-shadow:0 18px 45px rgba(27,38,67,.17);text-align:left;display:grid;gap:8px}
.grade-email-form small{color:#748198}.grade-email-form input[type=email]{width:100%;padding:10px 11px;border:1px solid #d9e0ea;border-radius:10px;font:inherit;box-sizing:border-box}
.grade-mail-done{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e9f8ef;color:#188453;font-weight:950}
.grade-mail-flash{margin:0 0 16px;padding:12px 15px;border-radius:12px;font-weight:750}.grade-mail-flash.success{background:#eaf8ef;color:#176a45;border:1px solid #cdebd8}.grade-mail-flash.error{background:#fff0f0;color:#a03b3b;border:1px solid #f2cccc}
@media(max-width:900px){.grade-email-form{right:-8px;width:min(280px,72vw)}}

/* Cijfers: compacte kolommen + status/vinkjes altijd op één regel */
.grade-table th:nth-child(3),.grade-table td:nth-child(3),
.grade-table th:nth-child(4),.grade-table td:nth-child(4),
.grade-table th:nth-child(5),.grade-table td:nth-child(5){white-space:nowrap;min-width:108px}
.grade-table th:nth-child(8),.grade-table td:nth-child(8){white-space:nowrap;width:126px;max-width:126px}
.grade-table th:nth-child(9),.grade-table td:nth-child(9){width:62px;max-width:62px}
.grade-done,.grade-open{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1.2}
.grade-mail-col,.grade-mail-cell{width:62px}
@media(max-width:1100px){
  .grade-table th,.grade-table td{padding-left:9px;padding-right:9px}
  .grade-progress{width:92px}
}


/* ===== Onderhoudsmodus ===== */
.maintenance-global-alert{position:relative;z-index:18;display:flex;align-items:center;gap:14px;width:100%;padding:13px max(22px,calc((100vw - 1180px)/2 + 22px));background:#fff4d6;border-bottom:1px solid #efd180;color:#654b08;box-shadow:0 5px 18px rgba(112,82,10,.06)}
.maintenance-alert-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#ffe8a3;font-size:23px}.maintenance-global-alert div{display:grid;gap:2px}.maintenance-global-alert strong{font-size:14px}.maintenance-global-alert div span{font-size:12.5px;line-height:1.45;color:#77601d}
.maintenance-control-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px;padding:16px 18px;border:1px solid #e3e8f0;border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(34,47,76,.05)}.maintenance-control-card.is-on{background:#fff9e8;border-color:#edd38b}.maintenance-control-copy{display:flex;align-items:center;gap:12px}.maintenance-control-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#f1efff;font-size:22px}.maintenance-control-copy div{display:grid;gap:3px}.maintenance-control-copy strong{font-size:15px}.maintenance-control-copy small{color:#748096}.maintenance-switch-form{display:flex;align-items:center;gap:9px}.maintenance-switch{position:relative;display:inline-block;width:54px;height:30px}.maintenance-switch input{opacity:0;width:0;height:0}.maintenance-slider{position:absolute;cursor:pointer;inset:0;background:#cbd3df;border-radius:999px;transition:.18s}.maintenance-slider:before{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.18s}.maintenance-switch input:checked+.maintenance-slider{background:#e3a918}.maintenance-switch input:checked+.maintenance-slider:before{transform:translateX(24px)}.maintenance-state{font-size:11px;font-weight:950;letter-spacing:.08em;color:#68758b}.maintenance-control-card.is-on .maintenance-state{color:#946d00}
@media(max-width:650px){.maintenance-global-alert{align-items:flex-start;padding-top:11px;padding-bottom:11px}.maintenance-control-card{align-items:flex-start;flex-direction:column}.maintenance-switch-form{align-self:flex-end}}

/* Takenagenda: deadline aanpassen en taak verwijderen */
.task-agenda-row{grid-template-columns:72px minmax(0,1fr) auto;align-items:center}
.task-agenda-actions{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.agenda-date-form{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.agenda-date-form label{display:grid;gap:4px;margin:0;font-size:11px;font-weight:850;color:#718096;text-transform:uppercase;letter-spacing:.06em}
.agenda-date-form input[type="date"]{min-width:150px;padding:9px 10px;border-radius:11px}
.btn-small{padding:9px 12px;min-height:40px}
.agenda-delete{min-width:40px;min-height:40px}
@media(max-width:900px){.task-agenda-row{grid-template-columns:62px minmax(0,1fr)}.task-agenda-actions{grid-column:2;justify-content:flex-start;margin-top:8px}}
@media(max-width:560px){.task-agenda-row{grid-template-columns:1fr}.task-agenda-date{width:62px}.task-agenda-actions{grid-column:1}.agenda-date-form{width:100%}.agenda-date-form label{flex:1}.agenda-date-form input[type="date"]{width:100%;min-width:0}}

/* Aandachtsoverzicht: statistiektegels zijn ook filters */
.attention-stat-link{
  position:relative;
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.attention-stat-link:hover{
  transform:translateY(-2px);
  border-color:#c9c2ff;
  box-shadow:0 12px 28px rgba(71,58,170,.10);
}
.attention-stat-link.active{
  border-color:#7564ff;
  box-shadow:0 0 0 3px rgba(117,100,255,.10), 0 10px 28px rgba(71,58,170,.08);
}
.attention-stat-link.main.active{
  border-color:#f2bd59;
  box-shadow:0 0 0 3px rgba(242,189,89,.12), 0 10px 28px rgba(71,58,170,.07);
}
.attention-stat-action{
  display:block;
  margin-top:8px;
  color:#6555e8;
  font-size:11px;
  font-weight:850;
}


/* ===== Leerling: duidelijke huiswerkstatus per onderdeel ===== */
.student-work-status{margin:18px 0 20px;padding:18px;border:1px solid #dfe5f0;border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(37,49,79,.06)}
.student-work-status.is-complete{background:linear-gradient(135deg,#f2fff8,#fff);border-color:#bfead1}
.student-work-status-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}.student-work-status-head h2{margin:4px 0 0;font-size:22px}.student-work-status-percent{white-space:nowrap;padding:9px 12px;border-radius:999px;background:#f1efff;color:#604be8;font-size:13px}
.student-work-status.is-complete .student-work-status-percent{background:#ddf8e8;color:#197a4b}.student-work-checks{display:flex;flex-wrap:wrap;gap:9px}.student-work-checks a,.student-work-checks>span{display:inline-flex;align-items:center;text-decoration:none;padding:10px 13px;border-radius:13px;font-weight:800;font-size:14px;border:1px solid #e3e8f0}.student-work-checks .done{background:#effbf4;border-color:#c9edd8;color:#177b4c}.student-work-checks .todo{background:#fff8e8;border-color:#f3d68b;color:#8c6500}.student-finish-now{display:inline-flex;margin-top:13px;padding:11px 14px;border-radius:13px;background:#6f5cf6;color:#fff;text-decoration:none;font-weight:900}.student-task-links-status{display:grid;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid #edf0f5}.student-task-links-status>div{display:grid;gap:2px;padding:10px 12px;border-radius:13px}.student-task-links-status .task-done{background:#effbf4;color:#176f48}.student-task-links-status .task-open{background:#fff7e5;color:#795900}.student-task-links-status span,.student-task-links-status small{font-size:13px;color:inherit;opacity:.82}
/* ===== Instelbare schoolafteller ===== */
.student-countdown-card,.public-countdown-card{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#fff7e8,#fff);border:1px solid #f0d5a2;border-radius:22px;padding:16px 18px;box-shadow:0 10px 26px rgba(67,50,20,.06);margin:0 0 20px}.student-countdown-icon,.public-countdown-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#fff0d0;font-size:25px}.student-countdown-card>div:nth-child(2),.public-countdown-card>div:nth-child(2){display:grid;gap:2px}.student-countdown-card small,.public-countdown-card p{margin:0;color:#788399}.student-countdown-days,.public-countdown-number{margin-left:auto;text-align:right;display:grid}.student-countdown-days strong,.public-countdown-number strong{font-size:28px;color:#6249e8}.student-countdown-days span,.public-countdown-number span{font-size:12px;font-weight:800;color:#7a8497}.student-countdown-card.is-close{border-color:#efb96f;background:#fff5dc}.public-countdown-card{max-width:1180px;margin:18px auto 28px}.public-countdown-card h2{margin:0;font-size:20px}
.countdown-admin-card{display:flex;align-items:end;gap:18px;margin:0 0 20px;padding:16px 18px;border:1px solid #e3e8f0;border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(34,47,76,.05)}.countdown-admin-head{display:flex;align-items:center;gap:12px;min-width:270px}.countdown-admin-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#fff0d0;font-size:22px}.countdown-admin-head div{display:grid;gap:3px}.countdown-admin-head small{color:#748096}.countdown-admin-form{display:flex;align-items:end;gap:10px;flex:1}.countdown-admin-form label{flex:1;font-size:12px;font-weight:850}.countdown-admin-form input{margin-top:5px}.countdown-saved{font-size:12px;font-weight:850;color:#188055;white-space:nowrap}
@media(max-width:800px){.student-work-status-head,.countdown-admin-card,.countdown-admin-form{align-items:stretch;flex-direction:column}.student-work-status-percent{align-self:flex-start}.student-countdown-card,.public-countdown-card{align-items:flex-start}.student-countdown-days,.public-countdown-number{margin-left:auto}.countdown-admin-form{display:grid;grid-template-columns:1fr 1fr}.countdown-admin-form .btn{grid-column:1/-1}}
@media(max-width:540px){.student-work-checks{display:grid}.student-work-checks a,.student-work-checks>span{width:100%}.student-countdown-card,.public-countdown-card{display:grid;grid-template-columns:auto 1fr}.student-countdown-days,.public-countdown-number{grid-column:1/-1;margin:0;text-align:left}.countdown-admin-form{grid-template-columns:1fr}}

/* ===== Aandacht: algemene Outlook-herinnering voor lege antwoorden / niets gemaakt ===== */
.attention-bulk-mail-card{margin:0 0 17px;padding:20px;border:1px solid #dedafc;background:linear-gradient(135deg,#fbfaff,#fff);box-shadow:0 10px 28px rgba(61,50,133,.06)}
.attention-bulk-mail-head{display:flex;gap:14px;align-items:flex-start}.attention-bulk-mail-head h2{margin:3px 0 4px;font-size:21px}.attention-bulk-mail-head p{margin:0;color:var(--muted);max-width:900px}.attention-bulk-mail-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:14px;background:#eeeaff;color:#6555e8;font-size:23px}
.attention-mail-flash{margin:14px 0 0;padding:11px 13px;border-radius:12px;font-weight:800}.attention-mail-flash.success{background:#ebfaf2;color:#16754a;border:1px solid #c9edd8}.attention-mail-flash.error{background:#fff0ee;color:#af3c32;border:1px solid #f2cbc6}
.attention-mail-warning{display:flex;gap:7px;flex-direction:column;margin:16px 0 12px;padding:13px 15px;border-radius:14px;background:#fff8e8;border:1px solid #f1d58f;color:#7c5b06}.attention-mail-warning span{font-size:13px}
.attention-email-grid{display:grid;gap:9px}.attention-email-row{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(260px,1.25fr);gap:14px;align-items:center;padding:10px 12px;border:1px solid #e6e9f2;border-radius:14px;background:#fff}.attention-email-row>span{display:flex;align-items:center;gap:9px}.attention-email-row small{padding:4px 8px;border-radius:999px;background:#f0edff;color:#6654e6;font-weight:850}.attention-email-row input{margin:0}.attention-email-grid>.btn{justify-self:start;margin-top:3px}
.attention-mail-ready{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding:14px 15px;border-radius:15px;background:#effbf4;border:1px solid #c8ecd7;color:#176f48}.attention-mail-ready>div{display:grid;gap:3px}.attention-mail-ready span{font-size:13px}.attention-outlook-btn{white-space:nowrap}.attention-mail-preview{margin-top:10px}.attention-mail-preview summary{cursor:pointer;color:#6252df;font-weight:850}.attention-mail-preview pre{white-space:pre-wrap;margin:10px 0 0;padding:13px;border-radius:13px;background:#f7f8fb;color:#40506a;font-family:inherit;font-size:13px;line-height:1.55}.attention-mail-empty{margin-top:14px;color:var(--muted)}
@media(max-width:800px){.attention-mail-ready{align-items:stretch;flex-direction:column}.attention-outlook-btn{align-self:flex-start}.attention-email-row{grid-template-columns:1fr}.attention-email-row>span{justify-content:space-between}}


/* ===== Opeenvolgende onderdelen: volgende onderdeel pas na volledig behalen ===== */
.sequence-learning-note{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:15px 18px;border:1px solid #e2defd;border-radius:17px;background:linear-gradient(135deg,#faf9ff,#f4f7ff);color:#34405a}
.sequence-learning-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:#ece9ff;font-size:21px}
.sequence-learning-note div{display:flex;flex-direction:column;gap:3px}.sequence-learning-note strong{font-size:14px;color:#28255d}.sequence-learning-note span:not(.sequence-learning-icon){font-size:12px;line-height:1.5;color:#6d7890}
.sequence-lock-alert{margin:0 0 18px!important}
.concept-card-locked{cursor:not-allowed;opacity:.68;background:linear-gradient(135deg,#f7f8fb,#f0f2f6)!important;border-color:#dfe3ea!important;box-shadow:none!important;filter:saturate(.45)}
.concept-card-locked:hover{transform:none!important;box-shadow:none!important;border-color:#dfe3ea!important}
.concept-card-locked .pill{background:#e7eaf0!important;color:#667085!important;border-color:#d9dde5!important;font-weight:950!important}
.concept-card-locked .arrow{color:#8a94a6!important}.concept-lock-note{display:inline-block;margin-top:9px;padding:7px 10px;border-radius:10px;background:#e9ecf2;color:#596579;font-size:12px;font-weight:800}
@media(max-width:700px){.sequence-learning-note{align-items:flex-start}.concept-card-locked{grid-template-columns:52px 1fr 28px}}


/* ===== Docentmodule: lessen, lesdoelen, notities en PDF-reader ===== */
.teacher-lessons-title{margin-bottom:18px}.lesson-class-tabs{display:flex;gap:9px;overflow-x:auto;padding:5px 2px 14px;margin-bottom:14px;scrollbar-width:thin}.lesson-class-btn{flex:0 0 auto;min-width:70px;padding:11px 15px;border:1px solid #dfe5ef;border-radius:13px;background:#fff;color:#43516a;text-decoration:none;text-align:center;font-weight:900;box-shadow:0 4px 12px rgba(34,47,76,.04);transition:.16s}.lesson-class-btn:hover{transform:translateY(-1px);border-color:#b9b0ff}.lesson-class-btn.active{background:#6555e8;color:#fff;border-color:#6555e8;box-shadow:0 8px 20px rgba(101,85,232,.22)}
.lesson-overview-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:9px 0 12px}.lesson-overview-head h2{margin:2px 0 0;font-size:28px}.lesson-count{padding:8px 12px;border-radius:999px;background:#f1efff;color:#6555e8;font-size:12px;font-weight:900}.teacher-lesson-list{display:grid;gap:10px}.teacher-lesson-row{display:grid;grid-template-columns:38px 62px minmax(0,1fr) 110px 28px;gap:14px;align-items:center;padding:13px 15px;background:#fff;border:1px solid #e3e8f1;border-radius:17px;text-decoration:none;color:inherit;box-shadow:0 6px 18px rgba(38,49,75,.045);transition:.16s}.teacher-lesson-row:hover{transform:translateY(-1px);border-color:#c9c1ff;box-shadow:0 10px 25px rgba(55,48,120,.08)}.lesson-index{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#f3f5f9;color:#788399;font-size:12px;font-weight:900}.lesson-date-badge{width:58px;min-height:62px;display:grid;place-items:center;align-content:center;border-radius:13px;background:#f3f0ff;color:#5f50dc;line-height:1}.lesson-date-badge strong{font-size:20px}.lesson-date-badge span{font-size:11px;font-weight:900;text-transform:uppercase;margin-top:3px}.lesson-date-badge small{font-size:9px;margin-top:4px;opacity:.72}.lesson-row-copy h3{margin:0 0 6px;font-size:17px}.lesson-row-meta{display:flex;gap:13px;flex-wrap:wrap;color:#748097;font-size:11px;font-weight:750}.lesson-progress-mini{height:7px;border-radius:999px;background:#edf0f5;overflow:hidden}.lesson-progress-mini span{display:block;height:100%;background:#6d5df1;border-radius:inherit}.lesson-open-arrow{font-size:20px;color:#7767f1}.lesson-empty{padding:42px 20px;text-align:center;background:#fff;border:1px dashed #d9dfe9;border-radius:18px;color:#69758b}.lesson-empty span{font-size:38px}.lesson-empty h3{margin:8px 0 3px;color:#29344a}.lesson-empty p{margin:0}.add-lesson-card{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(440px,1.25fr);gap:24px;align-items:end;margin-top:24px;padding:20px;border:1px solid #dedafc;border-radius:20px;background:linear-gradient(135deg,#fbfaff,#fff);box-shadow:0 8px 24px rgba(50,43,112,.05)}.add-lesson-card h2{margin:3px 0 5px}.add-lesson-card p{margin:0;color:#788399}.add-lesson-form{display:grid;grid-template-columns:160px minmax(220px,1fr) auto;gap:10px;align-items:end}.add-lesson-form label,.lesson-info-form label{display:grid;gap:5px;font-size:11px;font-weight:900;color:#6f7b90;text-transform:uppercase;letter-spacing:.05em}.add-lesson-form input,.lesson-info-form input{margin:0}.lesson-detail-top{margin:8px 0 16px}.lesson-back{display:inline-flex;margin:0 0 14px;color:#6656e5;text-decoration:none;font-weight:850;font-size:13px}.lesson-detail-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.lesson-detail-heading h1{margin:3px 0 0;font-size:clamp(28px,4vw,46px)}.lesson-goal-score{display:grid;text-align:right;padding:11px 14px;border-radius:15px;background:#f1efff;color:#6050dc}.lesson-goal-score strong{font-size:24px;line-height:1}.lesson-goal-score span{font-size:10px;font-weight:900;margin-top:4px}.lesson-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}.lesson-detail-main{display:grid;gap:18px}.lesson-detail-side{display:grid;gap:14px}.teacher-module-card{background:#fff;border:1px solid #e1e6ef;border-radius:20px;padding:19px;box-shadow:0 7px 22px rgba(34,47,76,.05)}.module-card-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:16px}.module-card-head>div:first-child{display:flex;gap:12px;align-items:flex-start}.module-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:#f2efff;font-size:21px}.module-card-head h2{margin:1px 0 3px;font-size:20px}.module-card-head p{margin:0;color:#7a8599;font-size:12px}.goal-pill{white-space:nowrap;padding:7px 10px;border-radius:999px;background:#f1efff;color:#6655e5;font-size:11px;font-weight:900}.objective-list{display:grid;gap:8px}.objective-item{display:grid;grid-template-columns:38px minmax(0,1fr) 36px;align-items:center;gap:8px;padding:7px;border:1px solid #e4e8ef;border-radius:13px;background:#fff}.objective-item.done{background:#f1fbf5;border-color:#c7ead5}.objective-check{position:relative;width:34px;height:34px}.objective-check input{position:absolute;opacity:0}.objective-check span{display:grid;place-items:center;width:34px;height:34px;border:2px solid #cdd4df;border-radius:10px;color:transparent;font-weight:1000;cursor:pointer;background:#fff}.objective-check input:checked+span{background:#24a66a;border-color:#24a66a;color:#fff}.objective-text{border:0!important;box-shadow:none!important;background:transparent!important;padding:9px 5px!important;margin:0!important;font-weight:750}.objective-item.done .objective-text{text-decoration:line-through;color:#5f7b6d}.objective-delete{border:0;background:transparent;color:#a1a9b7;font-size:23px;cursor:pointer}.objective-delete:hover{color:#c13d3d}.objective-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #eef1f5}.objective-add input{margin:0}.objective-empty{padding:18px;border:1px dashed #dfe4eb;border-radius:13px;text-align:center;color:#7a8598;font-size:13px}.hidden-form{display:none}.teacher-notes{width:100%;min-height:260px;resize:vertical;border:1px solid #dfe5ef;border-radius:14px;padding:15px;font:inherit;line-height:1.6;background:#fffdf6}.teacher-notes:focus{outline:3px solid rgba(101,85,232,.10);border-color:#9184ee}.notes-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}.notes-actions small{color:#8a94a6}.pdf-file-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding:10px 12px;border-radius:12px;background:#f6f7fa;font-size:12px;font-weight:800}.lesson-pdf-reader{width:100%;height:720px;border:1px solid #dce2eb;border-radius:14px;background:#f4f5f7}.pdf-upload-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.pdf-upload-form label{display:flex;align-items:center;gap:10px;flex:1;min-width:280px;padding:10px 12px;border:1px dashed #cbd3df;border-radius:12px;background:#fafbfc;font-size:12px;font-weight:850}.pdf-upload-form input{margin:0;min-width:0}.pdf-upload-form small{color:#8a94a6}.sticky-card{position:sticky;top:16px}.sticky-card h2{margin-top:0}.lesson-info-form{display:grid;gap:12px}.lesson-side-meta{display:grid;gap:8px;color:#69768c;font-size:12px}.danger-zone{border-color:#f0d3d0;background:#fffafa}.danger-zone h3{margin:0 0 4px;color:#a3413a}.danger-zone p{margin:0 0 12px;color:#8a6b68;font-size:12px}.btn-danger-soft{background:#fff0ee!important;color:#ae3c34!important;border:1px solid #efc9c5!important}.teacher-module-card hr{border:0;border-top:1px solid #edf0f4;margin:17px 0}.alert.success{background:#edf9f2;border-color:#c9ecd8;color:#17764b}
@media(max-width:980px){.lesson-detail-grid{grid-template-columns:1fr}.sticky-card{position:static}.add-lesson-card{grid-template-columns:1fr}.add-lesson-form{grid-template-columns:150px 1fr auto}.teacher-lesson-row{grid-template-columns:34px 58px minmax(0,1fr) 28px}.lesson-progress-mini{display:none}}
@media(max-width:660px){.add-lesson-form{grid-template-columns:1fr}.teacher-lesson-row{grid-template-columns:54px minmax(0,1fr) 24px}.lesson-index{display:none}.lesson-date-badge{grid-row:1}.lesson-row-copy{grid-column:2}.lesson-open-arrow{grid-column:3}.lesson-row-meta{gap:6px}.lesson-detail-heading{align-items:flex-start;flex-direction:column}.lesson-goal-score{text-align:left}.objective-add{grid-template-columns:1fr}.notes-actions{align-items:stretch;flex-direction:column}.lesson-pdf-reader{height:520px}.pdf-upload-form{align-items:stretch;flex-direction:column}.pdf-upload-form label{min-width:0}.module-card-head{align-items:flex-start;flex-direction:column}}

/* Klassikale overhoorsessie bij docentlessen */
.quiz-term-list{display:grid;gap:14px}.quiz-term-card,.quiz-term-add{display:grid;gap:11px;padding:16px;border:1px solid #dfe4ee;border-radius:16px;background:#fafbfe}.quiz-term-card label,.quiz-term-add label{display:grid;gap:6px;color:#66738a;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.quiz-term-card input,.quiz-term-card textarea,.quiz-term-add input,.quiz-term-add textarea{width:100%;box-sizing:border-box;margin:0;text-transform:none;letter-spacing:normal;font:inherit;color:#273349}.quiz-term-card textarea,.quiz-term-add textarea{resize:vertical;line-height:1.5}.quiz-term-card-head,.quiz-term-actions,.quiz-order-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.quiz-term-card-head strong{color:#5e50d7;font-size:14px}.quiz-order-actions{justify-content:flex-end}.btn-small{min-width:38px;padding:7px 11px!important}.quiz-image-current{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:12px;padding:10px;border-radius:12px;background:#f0f2f7;color:#66738a;font-size:12px}.quiz-image-current img{width:110px;height:78px;object-fit:contain;border-radius:9px;background:#fff}.quiz-image-current label{grid-column:2;text-transform:none;letter-spacing:normal}.quiz-image-current input{width:auto}.quiz-file-label{padding:10px 12px;border:1px dashed #cbd3df;border-radius:12px;background:#fff}.quiz-term-actions small{color:#8590a2}.quiz-term-add{margin-top:15px;border-style:dashed;background:#fff}.quiz-term-add h3{margin:0}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(max-width:660px){.quiz-image-current{grid-template-columns:1fr}.quiz-image-current label{grid-column:1}.quiz-term-actions{align-items:stretch;flex-direction:column}}

/* ===== Klassenplattegrond docent ===== */
.teacher-private-banner{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:12px 14px;border:1px solid #dcd8ff;border-radius:14px;background:#f7f5ff;color:#5549bd;font-size:12px}.teacher-private-banner strong{color:#3f348f}
.seating-toolbar{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:8px 0 15px}.seating-toolbar h2{margin:3px 0 3px;font-size:27px}.seating-toolbar p{margin:0;color:#7a8599;font-size:12px}.seating-page-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}.seating-main-col,.seating-side-col{display:grid;gap:18px}.seating-side-col{position:relative}.seating-board-card{overflow:hidden}.classroom-board-label{max-width:72%;margin:0 auto 20px;padding:9px 16px;border:2px solid #cfd7e5;border-radius:8px;background:#f7f8fb;color:#667289;text-align:center;font-size:11px;font-weight:950;letter-spacing:.08em;box-shadow:inset 0 -3px 0 #e7ebf1}.seating-grid{display:grid;grid-template-columns:repeat(6,minmax(92px,1fr));gap:13px;padding:10px 0 16px}.seat-slot{position:relative;min-height:132px;padding:6px;border:1px dashed #d7dee9;border-radius:14px;background:#f8f9fb;transition:.15s}.seat-slot:before{content:"";position:absolute;left:18%;right:18%;bottom:-5px;height:7px;border-radius:0 0 7px 7px;background:#e3e7ee}.seat-slot.drag-over{border-color:#7d6ff0;background:#f1efff;box-shadow:0 0 0 3px rgba(101,85,232,.08)}.empty-seat-number{position:absolute;inset:0;display:grid;place-items:center;color:#c0c7d2;font-size:11px;font-weight:900}.seating-student-card{position:relative;z-index:2;display:flex;height:100%;min-height:118px;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:9px;border:1px solid #e1e5ed;border-radius:12px;background:#fff;text-decoration:none;color:#263249;text-align:center;box-shadow:0 6px 16px rgba(35,46,69,.07);cursor:grab;transition:.15s}.seating-student-card:hover{transform:translateY(-2px);border-color:#c8c0ff;box-shadow:0 10px 22px rgba(55,48,120,.10)}.seating-student-card.dragging{opacity:.45}.seating-student-card strong{display:block;font-size:12px;line-height:1.2}.student-photo{display:grid;place-items:center;width:64px;height:64px;overflow:hidden;border-radius:50%;background:linear-gradient(135deg,#ebe8ff,#f8f7ff);color:#6254d5;font-size:24px;font-weight:950;border:3px solid #fff;box-shadow:0 0 0 1px #e1e4ec}.student-photo img{width:100%;height:100%;object-fit:cover}.student-photo.large{width:84px;height:84px;font-size:31px}.seating-student-card.compact{width:108px;min-height:118px;height:auto;flex:0 0 108px}.unseated-wrap{margin-top:18px;padding:14px;border:1px dashed #d9dfe8;border-radius:16px;background:#fbfcfd}.unseated-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.unseated-head strong{font-size:13px}.unseated-head span{font-size:10px;color:#8993a5}.unseated-pool{display:flex;gap:10px;min-height:74px;overflow-x:auto;padding:2px}.add-seating-student{background:linear-gradient(135deg,#fbfaff,#fff)}.seating-add-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(230px,1fr) auto;gap:10px;align-items:end}.seating-add-form label,.seating-profile-form label,.observation-form label{display:grid;gap:6px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:#6f7a8e}.seating-add-form input,.seating-profile-form input,.observation-form input,.observation-form select,.observation-form textarea{margin:0}.seating-profile-card{position:sticky;top:16px}.seating-profile-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}.seating-profile-head h2{margin:3px 0 1px;font-size:22px}.seating-profile-head small{color:#8791a3}.seating-profile-form,.observation-form{display:grid;gap:11px}.inline-danger-form{margin-top:10px}.observation-form textarea{resize:vertical;min-height:110px}.observation-history{display:grid;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid #edf0f4}.observation-item{padding:12px 13px;border:1px solid #e4e8ef;border-radius:14px;background:#fcfcfd}.observation-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:7px}.observation-meta strong{font-size:11px;color:#4d43b0;background:#f0eeff;padding:5px 8px;border-radius:999px}.observation-meta span{font-size:10px;color:#7a8597;font-weight:800}.observation-item p{margin:0;color:#354158;font-size:12px;line-height:1.55}.observation-delete{margin-top:8px;padding:0;border:0;background:transparent;color:#b14a42;font-size:10px;font-weight:850;cursor:pointer}.observation-empty{padding:15px;border:1px dashed #dde2ea;border-radius:12px;text-align:center;color:#8993a4;font-size:11px}.seating-help-card{text-align:center;padding:34px 22px}.seating-help-card>span{font-size:38px}.seating-help-card h2{margin:9px 0 4px}.seating-help-card p{margin:0;color:#7b8799;font-size:12px;line-height:1.55}
@media(max-width:1180px){.seating-page-grid{grid-template-columns:1fr}.seating-profile-card{position:static}.seating-grid{grid-template-columns:repeat(5,minmax(92px,1fr))}}
@media(max-width:820px){.seating-grid{grid-template-columns:repeat(3,minmax(88px,1fr))}.seating-add-form{grid-template-columns:1fr}.seating-toolbar{align-items:stretch;flex-direction:column}.seating-toolbar form{align-self:flex-start}}
@media(max-width:520px){.seating-grid{grid-template-columns:repeat(2,minmax(80px,1fr))}.classroom-board-label{max-width:100%}.student-photo{width:56px;height:56px}.seat-slot{min-height:122px}.unseated-head{align-items:flex-start;flex-direction:column}}
/* Klassenplattegrond: foto slepen/uploaden */
.student-photo-dropzone{display:grid;place-items:center;gap:6px;margin:10px 0;padding:22px 14px;border:2px dashed #d7dcec;border-radius:16px;background:#fafbfe;text-align:center;cursor:pointer;transition:.15s;color:#6f7a8e}.student-photo-dropzone:hover,.student-photo-dropzone.is-dragover{border-color:#7466e8;background:#f2f0ff;box-shadow:0 0 0 4px rgba(101,85,232,.07)}.student-photo-dropzone .drop-icon{font-size:31px}.student-photo-dropzone strong{font-size:13px;color:#39445a}.student-photo-dropzone span:last-of-type{font-size:10px}.student-photo-dropzone+button{width:100%}

/* ===== Klassenplattegrond v3: klaskeuze + vaste 5-rijenopstellingen ===== */
.seating-hero{margin-bottom:14px}
.seating-control-card{padding:14px 16px;margin-bottom:16px}
.seating-control-grid{display:grid;grid-template-columns:minmax(270px,1.25fr) minmax(180px,.75fr) minmax(170px,.7fr) auto;gap:14px;align-items:center}
.seating-control-block{display:flex;align-items:center;gap:11px;padding-right:14px;border-right:1px solid #edf0f5}
.control-step{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#6656ee,#8d7cff);color:#fff;font-size:12px;font-weight:950;box-shadow:0 6px 14px rgba(101,85,232,.18)}
.control-label{display:block;margin-bottom:5px;color:#6d61e8;font-size:10px;font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.class-select-wrap{display:flex;align-items:center;gap:8px;min-width:220px;padding:0 11px;border:1px solid #dde3ee;border-radius:12px;background:#fff;box-shadow:0 3px 9px rgba(35,46,69,.035)}
.class-select-wrap>span{font-size:15px;opacity:.7}.class-select-wrap select{width:100%;min-width:0;height:42px;margin:0;padding:0 30px 0 0;border:0!important;background:transparent;color:#1f2b43;font-size:14px;font-weight:900;box-shadow:none!important;outline:none}
.seating-stat{display:flex;align-items:center;gap:9px;min-height:48px}.seating-stat-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#f3f1ff;font-size:16px}.seating-stat strong,.seating-stat span{display:block}.seating-stat strong{font-size:12px;color:#263249}.seating-stat div>span{margin-top:3px;color:#8a94a7;font-size:9.5px}.seating-save-form{justify-self:end}
.seating-board-card{padding:0;overflow:hidden}.seating-board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;padding:18px 20px 13px;border-bottom:1px solid #edf0f5;background:linear-gradient(180deg,#fff,#fdfdff)}.seating-board-head h2{margin:3px 0 3px;font-size:23px}.seating-board-head p{margin:0;max-width:620px;color:#7c8799;font-size:11px;line-height:1.45}
.layout-switch{display:flex;align-items:stretch;gap:7px;padding:5px;border:1px solid #e6e9f1;border-radius:14px;background:#f8f9fc}.layout-switch form{margin:0}.layout-tab{min-width:126px;padding:9px 13px;border:0;border-radius:10px;background:transparent;color:#7d8798;text-align:left;cursor:pointer;transition:.16s}.layout-tab strong,.layout-tab span{display:block}.layout-tab strong{font-size:12px}.layout-tab span{margin-top:2px;font-size:8.5px;font-weight:700;opacity:.82}.layout-tab:hover{background:#fff;color:#594bd3}.layout-tab.active{background:#fff;color:#5e50dc;box-shadow:0 4px 12px rgba(45,50,78,.09),inset 0 0 0 1px #ddd8ff}
.classroom-board-label{max-width:none;width:calc(100% - 80px);margin:18px auto 12px;padding:9px 14px;border:1px solid #dfe4ed;border-radius:11px;background:#f7f8fb;color:#7c8798;box-shadow:inset 0 -3px 0 #ebedf3;font-size:9px}.classroom-board-label span{margin-right:7px;color:#6c5be8}
.seating-rows{display:grid;gap:12px;padding:8px 20px 20px}.seating-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center}.row-number{display:grid;place-items:center;width:26px;height:26px;border:1px solid #e1e5ee;border-radius:50%;background:#fff;color:#7f899a;font-size:9px;font-weight:950;box-shadow:0 3px 8px rgba(35,46,69,.05)}.seat-groups{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;align-items:stretch;gap:28px}.seat-group{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(92px,112px);gap:7px;padding:7px 8px;border:1px solid #eceef5;border-radius:14px;background:linear-gradient(180deg,#fafaff,#f7f8fc);box-shadow:inset 0 -2px 0 rgba(64,74,96,.025)}
.seat-slot{min-height:114px;padding:5px;border:1px dashed #dce1ea;border-radius:11px;background:#fff}.seat-slot:before{left:22%;right:22%;bottom:-4px;height:5px}.empty-seat-number{font-size:8px;color:#c2c8d2}.seating-student-card{min-height:102px;padding:7px;gap:6px;border-radius:10px;box-shadow:0 4px 12px rgba(35,46,69,.06)}.seating-student-card strong{font-size:10px}.seat-slot .student-photo{width:52px;height:52px;font-size:20px}
.seating-board-card .unseated-wrap{margin:0 20px 20px}.seating-board-card .unseated-head span{font-size:9px}
@media(max-width:1320px){.seating-control-grid{grid-template-columns:minmax(250px,1fr) 170px 160px}.seating-save-form{grid-column:1/-1;justify-self:start}.seat-groups{gap:16px}.seat-group{grid-auto-columns:minmax(78px,98px)}}
@media(max-width:1050px){.seating-control-grid{grid-template-columns:1fr 1fr}.seating-control-block{grid-column:1/-1;border-right:0;border-bottom:1px solid #edf0f5;padding:0 0 12px}.seating-save-form{grid-column:1/-1}.seating-board-head{align-items:stretch;flex-direction:column}.layout-switch{align-self:flex-start}.seat-groups{gap:10px;overflow-x:auto;padding-bottom:4px}.seat-group{grid-auto-columns:84px}}
@media(max-width:720px){.seating-control-grid{grid-template-columns:1fr}.seating-stat{border-top:1px solid #f0f2f6;padding-top:10px}.class-select-wrap{min-width:0;width:100%}.seating-control-block{align-items:flex-start}.seating-control-block>div{flex:1}.layout-switch{width:100%}.layout-switch form{flex:1}.layout-tab{min-width:0;width:100%}.classroom-board-label{width:calc(100% - 30px)}.seating-rows{padding-left:10px;padding-right:10px}.seating-row{grid-template-columns:24px minmax(0,1fr)}.seat-groups{justify-content:flex-start}.seating-board-card .unseated-wrap{margin-left:10px;margin-right:10px}}

/* Klassenplattegrond v3: volledige breedte + uitschuifbaar leerlingpaneel */
.seating-page-grid{display:block!important}
.seating-main-col{display:block!important;width:100%;min-width:0}
.seating-board-card{width:100%;overflow:visible}
.seating-side-col{display:block!important;position:static!important}
.seating-side-col .seating-help-card{display:none}
.seating-side-col:has(.seating-profile-card){position:fixed!important;inset:0;z-index:1200;pointer-events:none;background:rgba(18,25,43,.12)}
.seating-side-col:has(.seating-profile-card)::before{content:"";position:absolute;inset:0;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.seating-side-col .seating-profile-card,
.seating-side-col #observaties{position:relative;z-index:1;width:min(440px,94vw);margin-left:auto;border-radius:0;pointer-events:auto;background:#fff}
.seating-side-col .seating-profile-card{height:auto;max-height:45vh;overflow:auto;margin-top:0;padding-top:58px;border-bottom:1px solid #e8ebf2}
.seating-side-col #observaties{height:55vh;overflow:auto;margin-top:0;border-top:0}
.seating-drawer-close{position:fixed;z-index:1300;right:18px;top:18px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #e1e5ee;border-radius:12px;background:#fff;color:#566176;text-decoration:none;font-size:22px;font-weight:800;box-shadow:0 8px 24px rgba(31,40,65,.12);pointer-events:auto}
.seating-drawer-close:hover{background:#f5f3ff;color:#6555e8}
.seating-rows{width:100%;overflow:visible}
.seating-row{width:100%}
.seat-groups{width:100%;grid-template-columns:2fr 4fr 2fr}
.seat-group{min-width:0}
.seat-slot{min-width:0}
@media(max-width:1050px){.seating-board-card{overflow-x:auto}.seating-rows{min-width:1040px}}

/* Klassenplattegrond: middelste tafelgroep centreren binnen het middenvak.
   Aantal tafels blijft ongewijzigd (2-3-2 / 2-4-2). */
.seat-groups > .seat-group.group-2{justify-content:center}

/* Klassenplattegrond: niet-geplaatste leerlingen zonder horizontaal schuiven */
.unseated-pool{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  gap:10px;
  overflow-x:visible;
  overflow-y:visible;
  align-items:stretch;
}
.unseated-pool .seating-student-card.compact{
  width:100%;
  min-width:0;
  max-width:none;
  height:auto;
  flex:none;
}

/* Zitplaatsvoorkeuren */
.seat-rule-legend{display:flex;flex-wrap:wrap;gap:9px 14px;margin:8px 0 10px;font-size:10px;font-weight:800;color:#657086}
.seat-rule-legend span{display:flex;align-items:center;gap:6px}
.rule-dot{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid #d8dee8;background:#fff}
.rule-dot.allowed{background:#daf6e6;border-color:#64b989}.rule-dot.blocked{background:#ffe0de;border-color:#d86c65}.rule-dot.neutral{background:#f1f3f6;border-color:#cbd2de}
.seat-rule-help{margin:0 0 11px;color:#7a8496;font-size:10px;line-height:1.45}
.seat-rule-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:12px}
.seat-rule-button{min-width:0;padding:7px 4px;border:1px solid #dfe4ec;border-radius:10px;background:#f8f9fb;color:#7b8596;cursor:pointer;transition:.15s;text-align:center}
.seat-rule-button span{display:block;font-size:7px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.seat-rule-button strong{display:block;font-size:12px;margin-top:1px}
.seat-rule-button.allowed{background:#eaf8f0;border-color:#6fbe90;color:#257149;box-shadow:inset 0 0 0 1px rgba(50,145,90,.06)}
.seat-rule-button.blocked{background:#fff0ef;border-color:#df746e;color:#a43c36;box-shadow:inset 0 0 0 1px rgba(180,66,58,.05)}
.seat-rule-button:hover{transform:translateY(-1px)}
.seat-slot.seat-rule-allowed{border:2px solid #68bd8a;background:#f1fbf5}
.seat-slot.seat-rule-blocked{border:2px solid #dc716b;background:#fff3f2}
.seat-slot.seat-rule-allowed:after,.seat-slot.seat-rule-blocked:after{position:absolute;right:5px;top:5px;z-index:4;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:950;background:#fff;box-shadow:0 2px 7px rgba(28,37,52,.10)}
.seat-slot.seat-rule-allowed:after{content:'✓';color:#2d8a57}.seat-slot.seat-rule-blocked:after{content:'×';color:#bd4f48}
.seat-rule-denied-flash{animation:seatDenied .65s ease}
@keyframes seatDenied{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media(max-width:720px){.unseated-pool{grid-template-columns:repeat(3,minmax(0,1fr))}.seat-rule-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:460px){.unseated-pool{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Klassenplattegrond: lege stoelen kunnen klassikaal worden geblokkeerd. */
.empty-seat-toggle{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:inherit;
  background:transparent;
  cursor:pointer;
}
.empty-seat-toggle .empty-seat-number{pointer-events:none}
.blocked-seat-cross{
  display:none;
  position:absolute;
  inset:0;
  place-items:center;
  font-size:44px;
  line-height:1;
  filter:drop-shadow(0 2px 3px rgba(120,20,20,.12));
  pointer-events:none;
}
.seat-slot.seat-globally-blocked{
  border:2px solid #e16963;
  background:#fff3f2;
}
.seat-slot.seat-globally-blocked .blocked-seat-cross{display:grid}
.seat-slot.seat-globally-blocked .empty-seat-number{opacity:.18}
.seat-slot.seat-globally-blocked:before{background:#efcfcc}
.seat-slot.seat-globally-blocked.drag-over{box-shadow:none;background:#fff3f2;border-color:#e16963}
.empty-seat-toggle:hover{background:rgba(217,72,65,.035)}

/* Foto's vergroten bij hover zonder de indeling te verschuiven. */
.student-photo{
  position:relative;
  z-index:3;
  transition:transform .18s ease, box-shadow .18s ease;
  transform-origin:center;
}
.student-photo:hover{
  z-index:20;
  transform:scale(1.28);
  box-shadow:0 8px 24px rgba(31,40,65,.20),0 0 0 1px #d8ddec;
}
@media (prefers-reduced-motion: reduce){.student-photo{transition:none}}

/* Klassenplattegrond: snelle leerlingacties bij hover/focus. */
.seating-student-card{position:relative;cursor:pointer;overflow:visible!important}
.student-hover-menu{
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  z-index:80;
  display:flex;
  gap:5px;
  padding:6px;
  border:1px solid #dfe4ee;
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 30px rgba(31,40,65,.18);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,8px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  white-space:nowrap;
  pointer-events:none;
}
.seating-student-card:hover .student-hover-menu,
.seating-student-card:focus-within .student-hover-menu{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
  pointer-events:auto;
}
.student-hover-menu:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:10px;height:10px;
  background:#fff;
  border-right:1px solid #dfe4ee;
  border-bottom:1px solid #dfe4ee;
  transform:translateX(-50%) rotate(45deg);
}
.student-menu-btn{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:5px;
  min-height:30px;padding:5px 8px;
  border:0;border-radius:8px;
  background:#f5f7fb;color:#3f4a60;
  font:inherit;font-size:9px;font-weight:850;
  cursor:pointer;
}
.student-menu-btn:hover{background:#eceffc;color:#4037a7}
.student-menu-btn:disabled{opacity:.55;cursor:wait}
.seating-student-card.student-attention{
  background:#fff0ef!important;
  border-color:#e16b65!important;
  box-shadow:inset 0 0 0 2px rgba(209,74,67,.16),0 5px 15px rgba(174,62,55,.08)!important;
}
.seating-student-card.student-attention>strong{color:#a73934}
.seating-student-card.student-attention:after{
  content:"🔴";
  position:absolute;
  right:5px;top:5px;
  z-index:5;
  font-size:10px;
}
.seat-slot:has(.seating-student-card.student-attention){overflow:visible}
.unseated-pool{padding-top:42px;margin-top:-32px}
@media (hover:none){
  .student-hover-menu{opacity:1;visibility:visible;pointer-events:auto;position:static;transform:none;margin:0 auto 5px;box-shadow:none;padding:2px;border:0;background:transparent;white-space:normal}
  .student-hover-menu:after{display:none}
  .student-menu-btn span{display:none}
}
@media (prefers-reduced-motion: reduce){.student-hover-menu{transition:none}}

/* Opleiding Natuurkunde */
.study-pin-shell{max-width:560px;margin:70px auto}.study-pin-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:38px;text-align:center;box-shadow:0 18px 55px rgba(46,58,88,.08)}.study-pin-icon{font-size:50px;margin-bottom:12px}.study-pin-card h1{margin:8px 0}.study-pin-card p{color:var(--muted);max-width:420px;margin:0 auto 22px}.study-pin-form{max-width:280px;margin:0 auto;display:grid;gap:9px;text-align:left}.study-pin-form label{font-size:12px;font-weight:900;color:#68758a}.study-pin-form input{font-size:28px;letter-spacing:12px;text-align:center;padding:13px;border:1px solid #dfe4ed;border-radius:14px}.study-pin-error{background:#fff0f1;color:#b62c3e;border:1px solid #ffd6dc;border-radius:12px;padding:10px;margin:0 auto 15px;max-width:280px;font-weight:800}.study-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:32px 0 18px}.study-head h1{margin:5px 0 4px}.study-head p{margin:0;color:var(--muted)}.study-progress-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px;margin-bottom:16px}.study-progress-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.study-progress-top>div{display:flex;gap:15px;align-items:baseline;flex-wrap:wrap}.study-progress-top strong{font-size:16px}.study-progress-top span{font-size:12px;color:var(--muted);font-weight:800}.study-progress-top b{font-size:25px;color:#6555e8}.study-progress-bar{height:12px;background:#eef0f5;border-radius:999px;overflow:hidden;margin-top:13px}.study-progress-bar i{display:block;height:100%;background:#6555e8;border-radius:inherit;transition:width .25s}.study-period-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.study-period-tabs a{padding:10px 15px;border:1px solid #dfe4ed;border-radius:999px;background:#fff;color:#4c5870;text-decoration:none;font-size:12px;font-weight:900}.study-period-tabs a.active{background:#6555e8;color:#fff;border-color:#6555e8}.study-period-banner{display:flex;gap:13px;align-items:center;background:#f2f0ff;border:1px solid #ded9ff;border-radius:16px;padding:14px 17px;margin-bottom:16px}.study-period-banner>span{font-size:27px}.study-period-banner strong,.study-period-banner small{display:block}.study-period-banner small{color:#716e8b;margin-top:2px}.study-years{display:grid;gap:18px;margin-bottom:60px}.study-year-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}.study-year-card>header{padding:18px 21px;border-bottom:1px solid #edf0f5;display:flex;justify-content:space-between;align-items:center;background:#fafbfe}.study-year-card>header span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#6555e8}.study-year-card>header h2{font-size:15px;margin:3px 0 0}.study-year-card>header b{font-size:12px;background:#eef0f6;padding:7px 10px;border-radius:999px}.study-item{border-bottom:1px solid #eef1f5}.study-item:last-child{border-bottom:0}.study-item.is-done{background:#f7fcf9}.study-item-form{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:15px 18px;align-items:start}.study-check{width:38px;height:38px;display:block}.study-check input{position:absolute;opacity:0;pointer-events:none}.study-check span{width:38px;height:38px;border:2px solid #d9deea;border-radius:12px;display:grid;place-items:center;color:transparent;font-weight:1000;font-size:19px;cursor:pointer;background:#fff}.study-check input:checked+span{background:#dff5e9;color:#14845d;border-color:#88d6b5}.study-item-main{min-width:0}.study-item-title{display:flex;justify-content:space-between;gap:16px;align-items:start}.study-item-title small{display:block;color:#8490a3;font-size:10px;font-weight:800;margin-bottom:3px}.study-item-title strong{font-size:14px;color:#26324a}.study-code{font-size:10px;font-weight:900;background:#f0efff;color:#5e51d4;padding:5px 8px;border-radius:8px;white-space:nowrap}.study-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.study-meta span{font-size:10px;background:#f5f6f9;color:#667289;padding:5px 8px;border-radius:999px;font-weight:800}.study-note-row{display:flex;gap:7px;margin-top:10px}.study-note-row input{flex:1;min-width:0;border:1px solid #e0e4ec;border-radius:10px;padding:9px 10px;font-size:12px}.study-note-save{border:0;border-radius:10px;background:#eef0f5;color:#505d73;font-size:11px;font-weight:900;padding:0 12px;cursor:pointer}.study-item.is-done .study-item-title strong{text-decoration:line-through;color:#7e899a}.study-dashboard-card{border-color:#ded9ff!important;background:linear-gradient(145deg,#fff,#f7f5ff)!important}
@media(max-width:700px){.study-head{display:block}.study-head .btn{margin-top:14px}.study-item-form{grid-template-columns:40px 1fr;padding:13px}.study-item-title{display:block}.study-code{display:inline-block;margin-top:6px}.study-note-row{display:grid}.study-note-save{min-height:38px}}
.workshop-app .course-sidebar-pages a.course-side-page{color:inherit;text-decoration:none;cursor:pointer}
.workshop-app .course-sidebar-pages a.course-side-page:hover{transform:translateX(3px);filter:brightness(1.05)}

/* Snel inloggen en taakherinneringen */
.quick-student-list,.reminder-student-list{display:grid;gap:9px;margin-top:18px}.quick-student-row,.reminder-student-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 15px;border:1px solid var(--line);border-radius:16px;background:#fff}.quick-student-row>div,.reminder-student-row>div{min-width:0}.quick-student-row strong,.quick-student-row small,.reminder-student-row strong,.reminder-student-row small{display:block}.quick-student-row small,.reminder-student-row small{color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-student-avatar{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#efedff;color:#5e50dc;font-weight:950}.teacher-return-link{background:#fff1c7!important;color:#684d00!important;border-radius:10px;font-weight:950!important}.reminder-selection-form{display:grid;gap:15px}.reminder-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:11px 13px;background:#f6f7fb;border-radius:12px;font-size:12px;font-weight:850}.reminder-student-row{grid-template-columns:auto minmax(0,1fr) auto minmax(150px,auto);cursor:pointer}.reminder-student-row.has-open:hover{border-color:#bbb4ff;background:#faf9ff}.reminder-student-row.is-complete{opacity:.58;cursor:default}.reminder-student-row>input{width:19px;height:19px}.reminder-count{font-size:11px;font-weight:900;background:#fff0dd;color:#9a5700;border-radius:999px;padding:6px 9px}.reminder-student-row.is-complete .reminder-count{background:#e4f7ec;color:#16704b}.reminder-email{font-size:11px;color:#667289;text-align:right}.reminder-compose-card{margin-top:22px}.reminder-missing-head{padding:14px 16px;background:#fff8e7;border:1px solid #f5dda4;border-radius:14px;margin:14px 0}.reminder-missing-head p{margin:4px 0 0;color:#77633d}.reminder-email-form{display:grid;gap:10px}.reminder-email-form label{display:grid;grid-template-columns:minmax(170px,1fr) minmax(230px,2fr);gap:12px;align-items:center}.reminder-ready{display:flex;gap:13px;align-items:center;padding:16px;border:1px solid #a7dfc3;background:#effbf5;border-radius:15px;margin:15px 0}.reminder-ready>span{font-size:25px;color:#138556}.reminder-ready strong,.reminder-ready small{display:block}.reminder-ready small{color:#557064;margin-top:3px}
@media(max-width:760px){.quick-student-row{grid-template-columns:auto 1fr}.quick-student-row .btn{grid-column:1/-1}.reminder-toolbar{align-items:flex-start;flex-direction:column}.reminder-student-row{grid-template-columns:auto 1fr auto}.reminder-email{grid-column:2/-1;text-align:left}.reminder-email-form label{grid-template-columns:1fr}}

/* Vernieuwde beoordeling van workshopinzendingen */
.workshop-review-page{max-width:1280px;margin:0 auto 70px}.workshop-review-title{margin-bottom:22px}.workshop-review-title h1{font-size:clamp(38px,5vw,62px);letter-spacing:-.045em;margin:8px 0}.workshop-filter-card{display:grid;grid-template-columns:auto minmax(170px,.55fr) minmax(300px,1.45fr) auto;gap:14px;align-items:end;padding:18px;background:#fff;border:1px solid #e4e7ef;border-radius:20px;box-shadow:0 14px 40px rgba(35,45,68,.07);margin-bottom:18px}.workshop-filter-icon{width:44px;height:44px;display:grid;place-items:center;align-self:end;border-radius:13px;background:#efedff;color:#5d4fe0;font-size:25px;font-weight:950}.workshop-filter-card label{display:grid;gap:6px}.workshop-filter-card label>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#778298;font-weight:950}.workshop-filter-card select{width:100%;height:44px;padding:0 38px 0 13px;border:1px solid #dfe3eb;border-radius:12px;background:#f9fafc;color:#202c43;font:inherit;font-size:13px;font-weight:750}.workshop-filter-card .btn{height:44px;white-space:nowrap}.workshop-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 26px}.workshop-summary-grid>div{position:relative;min-height:90px;padding:16px 18px 14px 68px;background:#fff;border:1px solid #e5e8ef;border-radius:17px}.workshop-summary-grid p{margin:3px 0;color:#768196;font-size:11px;font-weight:800}.workshop-summary-grid strong{font-size:25px;color:#17233a}.summary-icon{position:absolute;left:16px;top:18px;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;font-weight:950}.summary-icon.neutral{background:#edf1f7}.summary-icon.waiting{background:#fff2ce;color:#926500}.summary-icon.approved{background:#dcf7e8;color:#168254}.summary-icon.rejected{background:#ffe5e8;color:#b23b48}.workshop-class-list{gap:20px}.workshop-class-section{border-radius:22px;box-shadow:0 16px 45px rgba(35,45,68,.07)}.workshop-class-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;background:linear-gradient(135deg,#fafaff,#f5f6fb)}.workshop-class-heading h2{font-size:20px;margin-top:8px}.workshop-class-chip{display:inline-flex;padding:5px 9px;border-radius:8px;background:#e9e6ff;color:#594bd9;font-size:10px;font-weight:950;letter-spacing:.07em;text-transform:uppercase}.workshop-group-progress{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 7px;min-width:180px;text-align:right}.workshop-group-progress strong{font-size:18px;color:#253149}.workshop-group-progress span{font-size:10px;color:#758096;font-weight:800}.workshop-group-progress i{grid-column:1/-1;height:6px;margin-top:7px;border-radius:999px;background:#e4e7ee;overflow:hidden}.workshop-group-progress b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6b58f4,#35c98a)}.workshop-student-row{grid-template-columns:minmax(240px,.8fr) minmax(480px,1.5fr);padding:18px 22px;gap:24px;transition:background .15s}.workshop-student-row.is-waiting{background:#fffdf8}.workshop-student-row.is-approved{background:#f5fcf8}.workshop-student-row.is-rejected{background:#fff8f8}.workshop-student-name{display:flex;align-items:center;gap:12px}.workshop-student-name>div{display:grid;gap:4px;min-width:0}.workshop-student-name small{color:#929bad;font-size:10px}.workshop-student-avatar{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#eef0f6;color:#58647a;font-size:12px;font-weight:950}.workshop-status{justify-self:start;display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px!important;font-weight:900!important}.status-missing{background:#f0f2f6;color:#7b8597!important}.status-waiting{background:#fff0c7;color:#8b6100!important}.status-approved{background:#dcf5e7;color:#147a50!important}.status-rejected{background:#ffe4e7;color:#ae3542!important}.workshop-review-actions{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}.workshop-file-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 13px;border:1px solid #dcd8ff;border-radius:11px;background:#f5f3ff;color:#5547d1;text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap}.workshop-file-button:hover{background:#ebe8ff}.workshop-inline-review{grid-template-columns:minmax(170px,1fr) auto}.workshop-inline-review textarea{min-height:40px;max-height:90px;background:#fff}.workshop-inline-review .btn{padding:10px 12px;font-size:10px;white-space:nowrap}.workshop-no-file{display:grid;justify-items:end;gap:3px;color:#8791a3}.workshop-no-file span{font-size:11px;font-weight:900}.workshop-no-file small{font-size:10px}
@media(max-width:1050px){.workshop-filter-card{grid-template-columns:auto 1fr 1.5fr}.workshop-filter-card .btn{grid-column:2/-1}.workshop-summary-grid{grid-template-columns:repeat(2,1fr)}.workshop-student-row{grid-template-columns:1fr}.workshop-review-actions{grid-template-columns:auto 1fr}.workshop-no-file{justify-items:start;margin-left:54px}}
@media(max-width:700px){.workshop-filter-card{grid-template-columns:1fr}.workshop-filter-icon{display:none}.workshop-filter-card .btn{grid-column:auto}.workshop-summary-grid{grid-template-columns:1fr 1fr}.workshop-class-heading{align-items:flex-start;flex-direction:column}.workshop-group-progress{width:100%;text-align:left}.workshop-review-actions,.workshop-inline-review{grid-template-columns:1fr}.workshop-inline-review>div{display:grid;grid-template-columns:1fr 1fr}.workshop-no-file{margin-left:0}.workshop-student-row{padding:16px}.workshop-review-title h1{font-size:38px}}

/* Workshopherinneringen vanuit de inzendingenlijst */
.workshop-heading-actions{display:flex;align-items:center;gap:18px}.workshop-remind-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid #ddd8ff;border-radius:11px;background:#fff;color:#5547d1;text-decoration:none;font-size:11px;font-weight:950;white-space:nowrap;box-shadow:0 5px 14px rgba(76,61,184,.08)}.workshop-remind-button:hover{background:#eeeaff;transform:translateY(-1px)}.workshop-reminder-page{max-width:820px;margin:34px auto 70px}.workshop-reminder-page>.back{display:inline-flex;margin-bottom:10px}.workshop-reminder-page .page-title{margin:18px 0 24px}.workshop-reminder-page .page-title h1{font-size:clamp(38px,6vw,58px);margin:7px 0}.workshop-reminder-email-card{padding:28px}.workshop-reminder-email-card>h2{margin:7px 0}.workshop-reminder-email-card>p{color:var(--muted);line-height:1.65}.workshop-reminder-email-form{display:grid;gap:10px;margin-top:20px}.workshop-reminder-email-form label{display:grid;grid-template-columns:minmax(200px,1fr) minmax(280px,1.4fr);gap:18px;align-items:center;padding:13px 15px;border:1px solid #e4e7ee;border-radius:14px;background:#fafbfc}.workshop-reminder-email-form label strong,.workshop-reminder-email-form label small{display:block}.workshop-reminder-email-form label small{margin-top:3px;color:#8b95a6;font-size:10px}.workshop-reminder-email-form input{width:100%;padding:11px 12px;border:1px solid #d9dee8;border-radius:10px;background:#fff;font:inherit}.workshop-reminder-email-form .btn{margin-top:8px;justify-self:end}.workshop-reminder-ready,.workshop-reminder-empty{text-align:center;padding:42px}.workshop-reminder-ready-icon,.workshop-reminder-empty>span{width:64px;height:64px;margin:0 auto 14px;display:grid;place-items:center;border-radius:20px;background:#e9e6ff;font-size:28px}.workshop-reminder-empty>span{background:#dcf6e7;color:#168154}.workshop-reminder-ready h2,.workshop-reminder-empty h2{margin:5px 0}.workshop-reminder-ready p,.workshop-reminder-empty p{max-width:570px;margin:8px auto 20px;color:var(--muted);line-height:1.6}
@media(max-width:850px){.workshop-heading-actions{width:100%;justify-content:space-between}.workshop-reminder-email-form label{grid-template-columns:1fr}.workshop-reminder-email-form .btn{justify-self:stretch}.workshop-remind-button{white-space:normal;text-align:center}}
/* ===== APV3 docentchecklist ===== */
.study-course-link{color:inherit;text-decoration:none}.study-course-link:hover{text-decoration:underline}.study-open-module{display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem;color:#2563eb;font-weight:800;text-decoration:none}.study-open-module:hover{gap:.65rem}
.apv3-head{background:linear-gradient(135deg,#13243f,#243f70);color:#fff;border-radius:24px;padding:28px;box-shadow:0 18px 48px rgba(15,31,58,.2);margin-bottom:18px}.apv3-back{display:inline-flex;color:#cfe0ff;text-decoration:none;font-weight:700;margin-bottom:20px}.apv3-back:hover{color:#fff}.apv3-title-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.apv3-title-row h1{color:#fff;margin:.2rem 0 .4rem}.apv3-title-row p{color:#dbe8ff;margin:0;max-width:680px}.apv3-score{flex:0 0 auto;text-align:right}.apv3-score strong{display:block;font-size:2.2rem;line-height:1}.apv3-score span{display:block;color:#cfe0ff;font-size:.9rem;margin-top:.35rem}.apv3-progress{margin-top:22px;background:rgba(255,255,255,.18)}.apv3-progress i{background:linear-gradient(90deg,#66ddb5,#a7f3d0)}.apv3-saved{background:#e9fbf3;color:#126141;border:1px solid #b7edd7;border-radius:12px;padding:11px 14px;font-weight:700;margin-bottom:16px}.apv3-legend{display:flex;gap:12px;margin-bottom:18px}.apv3-legend>div{display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:center;background:#fff;border:1px solid #dce3ee;border-radius:14px;padding:10px 14px}.apv3-legend small{grid-column:2;color:#6b7280}.apv3-dot{width:10px;height:10px;border-radius:50%;grid-row:1/3}.apv3-dot.done{background:#22a875}.apv3-dot.todo{background:#d5dbe5}.apv3-sections{display:grid;gap:13px}.apv3-section{background:#fff;border:1px solid #dce3ee;border-radius:18px;overflow:hidden;box-shadow:0 5px 18px rgba(25,42,70,.06)}.apv3-section summary{display:grid;grid-template-columns:48px 1fr auto 24px;align-items:center;gap:14px;cursor:pointer;padding:18px 20px;list-style:none}.apv3-section summary::-webkit-details-marker{display:none}.apv3-section[open] summary{border-bottom:1px solid #e6ebf2;background:#f8faff}.apv3-section-number{width:42px;height:42px;border-radius:12px;background:#eaf0fb;color:#244777;display:grid;place-items:center;font-weight:900}.apv3-section-title strong{display:block;color:#17233a}.apv3-section-title small{display:block;color:#707b8f;margin-top:3px}.apv3-section-count{background:#edf1f6;color:#596579;border-radius:999px;padding:5px 10px;font-size:.83rem;font-weight:800}.apv3-section-count.complete{background:#ddf7eb;color:#15704c}.apv3-chevron{font-size:1.3rem;color:#718096;transition:transform .2s}.apv3-section[open] .apv3-chevron{transform:rotate(180deg)}.apv3-checklist{padding:8px 20px 14px}.apv3-check-row{border-bottom:1px solid #edf0f5}.apv3-check-row:last-child{border-bottom:0}.apv3-check-row label{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:12px;padding:13px 4px;cursor:pointer}.apv3-check-row input{position:absolute;opacity:0;pointer-events:none}.apv3-checkbox{width:24px;height:24px;border:2px solid #b9c2cf;border-radius:7px;color:transparent;display:grid;place-items:center;font-weight:900;transition:.15s}.apv3-check-row input:focus-visible+.apv3-checkbox{outline:3px solid rgba(37,99,235,.25);outline-offset:2px}.apv3-check-row.is-complete .apv3-checkbox{background:#1fa572;border-color:#1fa572;color:#fff}.apv3-check-text{color:#273449}.apv3-check-row.is-complete .apv3-check-text{text-decoration:line-through;color:#7a8495}.apv3-status{font-size:.78rem;font-weight:800;color:#8a6470;background:#f6eef1;border-radius:999px;padding:5px 9px}.apv3-check-row.is-complete .apv3-status{color:#15704c;background:#ddf7eb}
@media(max-width:700px){.apv3-head{padding:21px;border-radius:18px}.apv3-title-row{display:block}.apv3-score{text-align:left;margin-top:18px}.apv3-legend{display:grid}.apv3-section summary{grid-template-columns:42px 1fr auto;padding:15px 14px;gap:10px}.apv3-section-number{width:38px;height:38px}.apv3-chevron{display:none}.apv3-checklist{padding:6px 13px 12px}.apv3-check-row label{grid-template-columns:28px 1fr}.apv3-status{grid-column:2;justify-self:start}.apv3-section-title strong{font-size:.96rem}}

/* Interactieve workshop voorvoegsels en omrekenen */
.prefix-workshop-shell{display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);gap:28px;align-items:start;max-width:1440px;margin:0 auto;padding:10px 0 40px}.prefix-reference{position:sticky;top:18px;background:#202328;color:#fff;border-radius:24px;padding:22px;box-shadow:0 18px 50px rgba(22,31,52,.18);z-index:3}.prefix-reference .eyebrow{color:#ffcd57}.prefix-reference h2{margin:6px 0 16px;font-size:1.45rem}.prefix-reference img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.2)}.prefix-reference-rules{display:grid;gap:8px;margin-top:16px}.prefix-reference-rules strong,.prefix-reference-rules span{padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.08)}.prefix-reference-rules strong{color:#ff6969}.prefix-exercise-panel{min-width:0}.prefix-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin:20px 0}.prefix-heading h1{margin:5px 0 7px;font-size:clamp(1.8rem,4vw,3rem)}.prefix-heading p{margin:0;color:#68738a}.prefix-score{flex:none;text-align:center;background:#eef0ff;color:#5146d8;padding:14px 20px;border-radius:18px}.prefix-score strong,.prefix-score span{display:block}.prefix-score strong{font-size:1.5rem}.prefix-progress{height:12px;background:#e6e9f2;border-radius:999px;overflow:hidden;margin-bottom:18px}.prefix-progress i{display:block;height:100%;background:linear-gradient(90deg,#6558eb,#27b8a5);border-radius:inherit;transition:width .3s}.prefix-stage{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;background:#f2f4f8;border-radius:13px;margin-bottom:16px}.prefix-stage span{color:#68738a}.prefix-question-card,.prefix-complete{background:#fff;border:1px solid #dfe4ef;border-radius:24px;padding:clamp(22px,4vw,42px);box-shadow:0 18px 55px rgba(39,48,76,.09)}.prefix-question-number{display:block;color:#6a7288;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.prefix-equation{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:35px 0;font-size:clamp(1.5rem,4vw,2.7rem)}.prefix-equation form{display:flex;align-items:center;gap:14px;flex:1;flex-wrap:wrap}.prefix-equation input{width:min(260px,55vw);font:inherit;font-weight:800;border:3px solid #aaa5ef;border-radius:14px;padding:10px 14px;color:#242a42;background:#fafaff}.prefix-equation input:focus{outline:4px solid rgba(101,88,235,.18);border-color:#6558eb}.prefix-equation .btn{font-size:1rem}.prefix-question-card>p{color:#68738a}.prefix-feedback{display:grid;gap:4px;padding:15px 18px;border-radius:15px;margin-bottom:16px}.prefix-feedback.correct{background:#e6f8f1;color:#126948;border:1px solid #9cddc5}.prefix-feedback.incorrect{background:#fff0ef;color:#9d2f2b;border:1px solid #efb1ad}.prefix-feedback em{font-style:normal;font-weight:750;margin-top:3px}.prefix-help{margin-top:16px;background:#fff;border:1px solid #dfe4ef;border-radius:14px;padding:13px 17px}.prefix-help summary{cursor:pointer;font-weight:800}.prefix-complete{text-align:center}.prefix-complete>span{font-size:4rem}.prefix-complete h2{font-size:2.2rem;margin:10px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px){.prefix-workshop-shell{display:flex;flex-direction:column;padding-top:0}.prefix-reference{width:100%;top:0;border-radius:0 0 18px 18px;padding:10px 14px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}.prefix-reference .eyebrow,.prefix-reference h2{display:none}.prefix-reference img{max-height:110px;object-fit:contain;grid-row:1/3}.prefix-reference-rules{margin:0;font-size:.72rem;gap:3px}.prefix-reference-rules strong,.prefix-reference-rules span{padding:3px 6px}.prefix-exercise-panel{padding:0 14px;width:100%}.prefix-heading{margin-top:12px}.prefix-equation{margin:24px 0}.prefix-equation form{flex-basis:100%}.prefix-equation input{width:min(210px,58vw)}}
.prefix-streak{justify-self:start;margin-top:5px;padding:5px 10px;background:#fff1bd;color:#805500;border-radius:999px;animation:prefix-pop .45s cubic-bezier(.2,1.5,.4,1)}.prefix-celebration{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .18s}.prefix-celebration.show{opacity:1}.prefix-celebration.leave{opacity:0;transition-duration:.4s}.prefix-celebration-label{position:relative;z-index:2;display:grid;place-items:center;gap:3px;background:rgba(26,30,48,.94);color:#fff;padding:19px 30px;border-radius:22px;box-shadow:0 20px 70px rgba(18,24,44,.3);transform:scale(.5) rotate(-5deg)}.prefix-celebration.show .prefix-celebration-label{animation:prefix-label 1.35s cubic-bezier(.2,1.4,.35,1) both}.prefix-celebration-label span{font-size:2.5rem}.prefix-celebration-label strong{font-size:1.35rem}.prefix-celebration-burst{position:absolute;left:50%;top:50%;width:1px;height:1px}.prefix-celebration-burst i{position:absolute;width:10px;height:16px;border-radius:3px;background:var(--color);opacity:0;transform:rotate(var(--angle)) translateX(0)}.prefix-celebration.show .prefix-celebration-burst i{animation:prefix-confetti 1.25s var(--delay) cubic-bezier(.1,.7,.3,1) forwards}.prefix-celebration[data-kind="incorrect"] .prefix-celebration-burst i{width:8px;height:8px;border-radius:50%;background:#8dc8ff}.prefix-question-card.answer-nudge{animation:prefix-nudge .42s ease}.prefix-question-card.answer-success{animation:prefix-glow .7s ease}.prefix-complete{animation:prefix-pop .7s cubic-bezier(.2,1.3,.4,1)}
@keyframes prefix-confetti{0%{opacity:1;transform:rotate(var(--angle)) translateX(0) rotate(0)}75%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) rotate(540deg)}}@keyframes prefix-label{0%{transform:scale(.5) rotate(-5deg)}22%{transform:scale(1.08) rotate(2deg)}38%,78%{transform:scale(1) rotate(0)}100%{transform:scale(.92)}}@keyframes prefix-pop{0%{transform:scale(.75)}65%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes prefix-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-3px)}}@keyframes prefix-glow{0%{box-shadow:0 18px 55px rgba(39,48,76,.09)}50%{box-shadow:0 0 0 7px rgba(39,184,165,.17),0 18px 55px rgba(39,48,76,.09)}100%{box-shadow:0 18px 55px rgba(39,48,76,.09)}}
@media(prefers-reduced-motion:reduce){.prefix-celebration-burst{display:none}.prefix-celebration.show .prefix-celebration-label,.prefix-question-card.answer-nudge,.prefix-question-card.answer-success,.prefix-streak,.prefix-complete{animation:none}.prefix-celebration-label{transform:none}}