:root{
 --bg:#eef3f7;--panel:#fff;--soft:#f7f9fb;--text:#17212b;--muted:#6f7c88;--line:#d8e1e8;
 --accent:#166fc5;--accent2:#0c58a1;--green:#20b889;--good:#178a48;--goodbg:#e7f7ee;
 --bad:#c53e3e;--badbg:#fdecec;--warn:#9b6500;--warnbg:#fff4d8;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;background:#e9eef4;color:var(--text)}
button.primary{background:var(--accent);color:#fff} button.primary:hover{background:var(--accent2)}
button.ghost{background:transparent;border:1px solid var(--line)} button.danger{background:#fdeaea;color:#a32929}
button.full{width:100%}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:12px}.spacer{flex:1}
label{display:block;font-weight:650;margin:10px 0 6px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(22,111,197,.14);border-color:#86aeda}
textarea{min-height:150px;resize:vertical}.message{margin-top:10px;color:var(--bad)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(430px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 8px 28px rgba(25,45,70,.10)}
.login-logo{display:block;width:min(350px,100%);height:auto;margin:0 auto 8px}
.login-card button{width:100%;margin-top:14px}
.app{min-height:100vh}.app header{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:6px 16px;gap:10px;position:sticky;top:0;z-index:20}
.header-logo{height:50px;width:auto;display:block}.chip{background:var(--soft);border:1px solid var(--line);padding:7px 10px;border-radius:999px;font-size:14px;color:var(--muted)}
.layout{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:calc(100vh - 68px)}
aside{background:#fff;border-right:1px solid var(--line);padding:14px;display:flex;flex-direction:column;min-height:0}
.filters{display:grid;gap:8px}.test-list{margin-top:12px;overflow:auto;min-height:0}.sidebar-bottom{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.test-item{padding:11px;border:1px solid transparent;border-radius:10px;margin-bottom:5px;cursor:pointer}.test-item:hover{background:var(--soft);border-color:var(--line)}

.test-row{display:flex;align-items:center;gap:12px;min-width:0}
.test-content{min-width:0;flex:1}
.test-icon{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;flex:0 0 46px;background:#e8f0fb;color:#155fae;border:1px solid rgba(21,95,174,.08)
}
.test-icon.icon-engels,.test-icon.icon-duits,.test-icon.icon-frans{font-size:14px;letter-spacing:.4px}
.test-icon.icon-economie{background:#e7f8ef;color:#18794f}
.test-icon.icon-natuur{background:#edf9ee;color:#2f8f46}
.test-icon.icon-geschiedenis{background:#f6efe7;color:#8b5d2a}
.test-icon.icon-aardrijkskunde{background:#e8f4ff;color:#1a6fbf}
.test-icon.icon-wiskunde{background:#f1ecff;color:#6d42c8}
.test-icon.icon-nederlands{background:#fff1e7;color:#b25c19}
.test-icon.icon-engels{background:#eaf2ff;color:#2a58c9}
.test-icon.icon-duits{background:#f2f2f2;color:#333}
.test-icon.icon-frans{background:#eef5ff;color:#315fbc}
.test-icon.icon-natuurkunde{background:#eef9ff;color:#1672aa}
.test-icon.icon-scheikunde{background:#fff2eb;color:#b45324}
.test-icon.icon-default{background:#eef3f8;color:#47627a}
.test-item.active{background:#edf5ff;border-color:#aac7e8}.test-name{font-weight:750}.test-meta{font-size:12px;color:var(--muted);margin-top:4px;display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:#eef2f7;font-size:11px}.badge.private{background:#fff1d8;color:#8c5d00}
main{padding:22px;min-width:0}.card{max-width:1000px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.wide{max-width:1200px}
.row{display:flex;gap:10px;align-items:center}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.pill{display:inline-block;background:var(--soft);border:1px solid var(--line);padding:5px 9px;border-radius:999px;font-size:13px}
.question{font-size:23px;font-weight:800;line-height:1.35;margin:18px 0}.answers{display:grid;gap:10px}.answer{width:100%;text-align:left;border:1px solid var(--line);background:#fff;padding:13px 14px;border-radius:12px}
.answer.correct{border-color:#7cc49a;background:var(--goodbg);color:#0d6333}.answer.wrong{border-color:#e59a9a;background:var(--badbg);color:#9c2f2f}.answer.unknown{border-style:dashed;background:var(--warnbg);color:#85570b}
.progress{height:8px;background:#e9edf1;border-radius:99px;overflow:hidden;margin:10px 0 18px}.progress>div{height:100%;background:var(--accent)}
.score{font-size:44px;font-weight:850}.question-edit{border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0;background:var(--soft)}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;color:var(--muted)}
.table-wrap{overflow:auto}.modal-wrap{position:fixed;inset:0;background:rgba(14,22,31,.45);display:grid;place-items:center;padding:20px;z-index:60}
.modal-card{width:min(800px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:20px}
.context-menu{position:fixed;z-index:80;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 35px rgba(0,0,0,.15);padding:6px;min-width:190px}
.context-menu button{display:block;width:100%;text-align:left;background:transparent}.context-menu button:hover{background:var(--soft)}
.checkline{display:flex;align-items:center;gap:8px;margin:12px 0}.checkline input{width:auto}.mobile-only{display:none}.icon-btn{padding:9px 11px}
.update-box{border:1px dashed var(--line);padding:14px;border-radius:12px;background:var(--soft)}
@media(max-width:760px){
 .app header{height:60px;padding:5px 9px;gap:7px}.header-logo{height:42px}.chip{display:none}.mobile-only{display:block}
 .layout{display:block;min-height:0}
 aside{position:fixed;left:0;top:60px;bottom:0;width:min(88vw,330px);z-index:40;transform:translateX(-102%);transition:transform .18s ease;box-shadow:8px 0 25px rgba(0,0,0,.15)}
 aside.open{transform:translateX(0)}
 main{padding:12px}.card{padding:15px;border-radius:13px}.grid2,.grid3{grid-template-columns:1fr}
 .question{font-size:20px}.toolbar button{flex:1 1 135px}.login-shell{padding:12px}.login-card{padding:20px}
 .test-icon{width:42px;height:42px;flex-basis:42px;font-size:20px;border-radius:12px}
 .table-wrap table{min-width:650px}
 #adminBtn,#logoutBtn,#installPwa{padding:8px 9px;font-size:13px;white-space:nowrap}
}

.admin-check{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft);width:max-content;max-width:100%}
.admin-check input,.admin-inline input{width:20px;height:20px;flex:0 0 20px}
.admin-inline{margin:0;white-space:nowrap}
#spellInput{font-size:20px;padding:14px 16px}