.back-fab,.profile-btn{border-radius:10px;text-decoration:none}.continue-prof,.practice-img{object-fit:contain;object-position:center}.continue,.topbar-inner,.wrap{max-width:1000px}.detail-header h2,.topbar h1{font-family:var(--font-display);font-size:1.5em}.errors-cta,.item-score,.practice-cta,.topbar h1{white-space:nowrap}:root{--primary:#03a9f4;--primary-dark:#0288d1;--secondary:#ffc107;--secondary-dark:#fbc02d;--success:#4caf50;--success-dark:#388e3c;--gamepad:#7e57c2;--gamepad-dark:#5e35b1;--bg:#eef4fa;--card-bg:#ffffff;--text:#1f2a37;--muted:#6b7686;--font-display:"Baloo 2","Poppins",sans-serif}*{box-sizing:border-box}body{position:relative;margin:0;color:var(--text);font-family:Poppins,sans-serif;background-image:url("https://www.pocketdriver.be/afbeeldingen/theorie-bg.webp");background-repeat:no-repeat;background-attachment:fixed;background-position:center;background-size:100% auto}body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(255,255,255,.25)}.back-fab,.continue,.detail,.errors-banner-wrap,.topbar,.wrap{position:relative;z-index:1}.topbar{padding:20px 24px;background:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.15)}.continue-text .label,.profile-btn{color:var(--primary-dark);font-weight:700}.topbar-inner{position:relative;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.topbar h1{grid-column:2;margin:0;font-weight:700;text-align:center}.profile-btn{grid-column:3;justify-self:end;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:9px 18px;background:#fff;font-size:.95em;box-shadow:0 3px 10px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s}.profile-btn:hover{transform:scale(1.05);box-shadow:0 5px 14px rgba(0,0,0,.22)}.back-fab{position:fixed;bottom:20px;right:20px;z-index:50;display:flex;align-items:center;gap:10px;padding:15px 25px;background-color:var(--primary);color:#fff;font-size:1.1em;box-shadow:0 6px #3f2c61;transition:transform .2s,background .2s}.continue-card,.practice-card{box-shadow:0 8px 20px rgba(0,0,0,.08);overflow:hidden}.back-fab:hover{background-color:var(--primary-dark);transform:scale(1.08)}.continue{margin:22px auto 0;padding:0 20px}.continue-card{display:flex;align-items:flex-start;background:var(--card-bg);color:var(--text);border:2px solid var(--primary);border-radius:16px}.continue-prof{flex-shrink:0;width:190px;height:230px;transform-origin:bottom center;animation:4s ease-in-out infinite sway}@keyframes sway{0%,100%,50%{transform:rotate(0)}25%{transform:rotate(.6deg)}75%{transform:rotate(-.6deg)}}.continue-right{flex:1;min-width:0;padding:20px 24px;display:flex;flex-direction:column;gap:18px}.continue-top{display:flex;align-items:center;gap:18px}.continue-text{flex:1;display:flex;flex-direction:column}.continue-text .label{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-bottom:8px;padding:4px 10px;background:#eaf5ff;border-radius:20px;font-size:.72em;text-transform:uppercase;letter-spacing:.03em}.continue-text .label::before{content:"\25B6";font-size:.7em}.continue-text .title{color:var(--text);font-family:var(--font-display);font-size:1.35em;font-weight:700;line-height:1.25}.continue-text .time{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--muted);font-size:.85em}.continue-text .time::before{content:"\1F551";font-size:.9em}.continue-card .cta{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:#fff;border:none;border-radius:12px;box-shadow:0 4px 12px rgba(126,87,194,.3);font-weight:700;font-size:.95em;white-space:nowrap;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}.continue-card .cta:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 16px rgba(126,87,194,.4)}.cta-arrow{display:inline-block;transition:transform .15s}.continue-card .cta:hover .cta-arrow{transform:translateX(4px)}.continue-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:16px;border-top:1px solid rgba(0,0,0,.06)}.stat-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;background:#eef1f5;border-radius:12px;transition:background-color .3s}.stat-icon{flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.3);border-radius:10px;font-size:1.05em}.errors-text,.practice-text,.stat-body{flex:1;min-width:0}.stat-value{display:flex;align-items:center;gap:6px;font-size:1.3em;font-weight:800;line-height:1.1}.stat-label{font-size:.78em;opacity:.9}.info-btn{margin-left:auto;padding:3px 9px;background:rgba(0,0,0,.08);border:none;border-radius:50%;color:inherit;font-size:.7em;font-weight:700;line-height:1.4;cursor:pointer;transition:background .15s}.info-btn:hover{background:rgba(0,0,0,.16)}.stat-detail{flex-basis:100%;margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,0,0,.1)}.detail-row,.grid-header{display:flex;align-items:center}.detail-row{justify-content:space-between;gap:8px;padding:4px 0;font-size:.82em;font-weight:500}.detail-row i{width:16px;text-align:center;margin-right:4px}.stat-card.c-red{background:#e53935;color:#fff}.stat-card.c-orange{background:#fb8c00;color:#fff}.stat-card.c-yellow{background:#fbc02d;color:#3a2e00}.stat-card.c-yellow .stat-label{color:#3a2e00;opacity:.75}.stat-card.c-green{background:#43a047;color:#fff}.wrap{margin:26px auto 60px;padding:0 20px}.grid-header{justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}.grid-title{margin:0;color:var(--muted);font-size:1.05em;font-weight:600}.back-link,.card-km,.card-title,.detail-header h2,.detail-km,.errors-cta,.errors-title,.practice-cta,.practice-title{font-weight:700}.reset-link{background:0 0;border:none;color:var(--muted);font-size:.82em;text-decoration:underline;cursor:pointer}.practice-card,.reset-link:hover{color:var(--text)}.back-link,.btn-link,.errors-banner,.practice-card{text-decoration:none}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.practice-card{display:flex;align-items:center;margin-top:20px;background:var(--card-bg);border:2px solid var(--gamepad);border-radius:16px;transition:transform .15s,box-shadow .15s}.practice-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.12)}.practice-img{flex-shrink:0;width:190px;height:230px}.practice-right{flex:1;min-width:0;display:flex;align-items:center;gap:18px;padding:20px 24px}.practice-title{font-family:var(--font-display);font-size:1.15em}.practice-sub{margin-top:2px;color:var(--muted);font-size:.85em}.errors-banner,.practice-cta{color:#fff;transition:background .15s,transform .15s,box-shadow .15s}.practice-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--gamepad);border:none;border-radius:10px;box-shadow:0 4px 12px rgba(126,87,194,.3);font-size:.9em}.practice-card:hover .practice-cta{background:var(--gamepad-dark);transform:translateY(-2px);box-shadow:0 6px 16px rgba(126,87,194,.4)}.errors-banner-wrap{max-width:1000px;margin:16px auto 0;padding:0 20px}.errors-banner{display:flex;align-items:center;gap:16px;padding:16px 22px;background:var(--success-dark);border-radius:16px;box-shadow:0 8px 20px rgba(56,142,60,.35)}.back-link,.chapter-card{cursor:pointer;transition:transform .15s,box-shadow .15s}.errors-banner:hover{background:#2e6b30;transform:translateY(-2px);box-shadow:0 10px 24px rgba(56,142,60,.45)}.errors-icon{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);border-radius:12px;font-size:1.2em}.errors-title{font-family:var(--font-display);font-size:1.05em}.errors-sub{margin-top:2px;font-size:.85em;opacity:.9}.errors-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;background:#fff;color:var(--success-dark);border-radius:10px;font-size:.9em}.chapter-card{position:relative;padding:18px;background:var(--card-bg);border:2px solid transparent;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.06)}.chapter-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.1)}.chapter-card:focus-visible{outline:3px solid var(--primary);outline-offset:2px;transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.1)}.chapter-card.done{border-color:var(--success)}.card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}.card-km{margin-bottom:2px;color:var(--primary);font-size:.75em}.card-icon{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border-radius:12px;font-size:1.15em}.card-title{font-family:var(--font-display);font-size:1.1em;line-height:1.25}.card-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;color:var(--muted);font-size:.82em}.progress-track{height:8px;background:#eceff3;border-radius:5px;overflow:hidden}.progress-fill{height:100%;background:var(--success);border-radius:5px}.progress-label{margin-top:6px;color:var(--muted);font-size:.78em;text-align:right}.detail{display:none;max-width:900px;margin:26px auto 60px;padding:0 20px}.detail.active{display:block}#overview,.detail.active{opacity:1;transition:opacity .18s}#overview.fade-out,.detail.fade-out{opacity:0}.wrap.hidden{display:none}.back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:10px 18px;background:var(--card-bg);border:none;border-radius:10px;color:var(--primary-dark);box-shadow:0 2px 8px rgba(0,0,0,.1);font-family:inherit;font-size:.98em}.detail-header,.timeline-content,.timeline-marker{background:var(--primary)}.back-link:hover{transform:translateX(-3px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.detail-list::after,.detail-list::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%)}.detail-header{padding:18px 22px;margin-bottom:22px;color:#fff;border-radius:14px}.detail-list,.timeline-item{position:relative;padding:8px 0}.detail-header h2{margin:0 0 4px}.detail-km{margin-bottom:4px;font-size:.85em;opacity:.85}.detail-header .sub{font-size:.9em;opacity:.9}.detail-subtitle{margin:0 0 6px;font-size:.88em;font-style:italic;opacity:.85}.detail-list::before{width:10px;background:#4a4f57;border-radius:5px}.detail-list::after{width:3px;background-image:repeating-linear-gradient(to bottom,#fff 0,#fff 14px,transparent 14px,transparent 28px)}.timeline-item{width:50%;display:flex}.timeline-content.done::after,.timeline-marker{position:absolute;display:flex;border-radius:50%;color:#fff}.timeline-item.left{left:0;justify-content:flex-end}.timeline-item.right{left:50%;justify-content:flex-start}.timeline-marker{top:18px;z-index:1;width:40px;height:40px;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.2)}.img-wrap,.timeline-content{position:relative}.timeline-item.left .timeline-marker{right:-20px}.timeline-item.right .timeline-marker{left:-20px}.timeline-content.quiz,.timeline-marker.quiz{background:var(--success)}.timeline-content.story,.timeline-marker.story{background:var(--secondary-dark)}.timeline-content.game,.timeline-marker.game{background:var(--gamepad)}.timeline-content{width:260px;max-width:calc(100% - 50px);overflow:hidden;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:transform .2s}.timeline-item.left .timeline-content{margin-right:40px}.timeline-item.right .timeline-content{margin-left:40px}.timeline-content:hover{transform:scale(1.05)}.btn-link{display:flex;flex-direction:column;text-align:center;color:#fff}.timeline-content.done{outline:5px solid var(--success);outline-offset:0}.timeline-content.done::after{content:"\2713";top:6px;right:6px;z-index:2;width:24px;height:24px;align-items:center;justify-content:center;background:var(--success);font-size:.9em;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.3)}.btn-link .btn-img{width:100%;aspect-ratio:650/365;object-fit:cover;background:rgba(255,255,255,.15)}.img-wrap.has-score::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0,rgba(0,0,0,.25) 55%,rgba(0,0,0,0) 85%)}.btn-link .btn-text{padding:10px 12px;font-size:.92em;font-weight:600;line-height:1.3}.item-score{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;color:#fff;font-size:1.8em;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 3px rgba(0,0,0,.9)}@media (max-width:600px){.timeline-content{width:150px}}@media (max-width:900px){.continue,.detail,.wrap{padding:0 16px}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.timeline-content{width:220px}body{background-size:cover;background-position:center top}}@media (max-width:600px){.continue-card .cta,.continue-right,.continue-text,.continue-top{box-sizing:border-box}body{background-position:center center;background-size:auto 100%}.detail-header,.topbar{padding:16px 18px}.topbar h1{font-size:1.05em;white-space:normal}.profile-btn span{display:none}.back-fab{bottom:14px;right:14px;padding:12px 18px;font-size:1em}.continue-card{flex-direction:column;width:100%}.continue-top,.practice-card{flex-direction:column}.continue-prof{width:130px;height:auto;margin:18px auto 0;display:block;animation:none}.continue-right{width:100%;padding:16px;gap:14px}.continue-top{width:100%;align-items:stretch;text-align:center}.continue-text{width:100%}.continue-stats{width:100%;grid-template-columns:1fr}.continue-card .cta{width:100%;text-align:center;justify-content:center}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.chapter-card{padding:12px}.card-top{gap:8px;margin-bottom:8px}.card-icon{width:34px;height:34px;font-size:.95em}.card-km{font-size:.68em}.card-title{font-size:.88em;line-height:1.2}.card-meta{margin-bottom:8px;font-size:.72em}.progress-label{font-size:.7em}.practice-img{width:130px;height:auto;margin:18px auto 0}.errors-banner,.practice-right{flex-direction:column;text-align:center;padding:16px}.errors-cta,.practice-cta{width:100%;justify-content:center}.detail-header h2{font-size:1.2em}.timeline-content{font-size:.9em}.timeline-marker{width:34px;height:34px;font-size:.9em}}