VERSION

@@ -1 +1 @@
-0.3.84-beta
+0.3.85-beta

public/css/teach.css

@@ -1863,3 +1863,84 @@ body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .wo
   .sb-add input{flex-basis:100%}
   .bd-controls{grid-template-columns:1fr;max-height:180px}
 }
+
+/* ============================================================
+   Zakelijk thema: Instellingen (#settingsModal)
+   Het bord blijft speels; het beheer is voor volwassenen. De ID-scope
+   verslaat alle .am- en .st-regels hierboven, dus dit blok kan alles
+   overschrijven zonder het bord of het ouderportaal te raken.
+   ============================================================ */
+#settingsModal{
+  --control-h:32px; --radius:7px; --radius-s:6px; --radius-l:10px;
+  font-family:ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+@media (pointer:coarse){ #settingsModal{--control-h:40px;} }
+#settingsModal.st-modal{width:min(1100px,96vw);}
+#settingsModal .st-head h2{font-size:16px; font-weight:650; letter-spacing:.2px;}
+#settingsModal #stSearch{border-radius:var(--radius-s); background:var(--surface); font-size:13px;}
+/* navigatie: neutraal, gedempte iconen, accent alleen als inzetlijn */
+#settingsModal .st-nav-btn{font-size:13.5px; font-weight:550; border-radius:var(--radius-s); padding:7px 10px;}
+#settingsModal .st-nav-btn.active{background:var(--surface-3); color:var(--ink); box-shadow:inset 3px 0 0 var(--accent);}
+#settingsModal .st-nav-ico{filter:grayscale(1); opacity:.6; font-size:13px;}
+#settingsModal .st-nav-btn.active .st-nav-ico{opacity:.9;}
+#settingsModal .st-nav-group{font-size:10px; letter-spacing:.7px;}
+#settingsModal .st-sec-title{font-size:15px; font-weight:650; display:flex; gap:8px; align-items:center;}
+#settingsModal .st-sec-ico{filter:grayscale(1); opacity:.6; font-size:14px;}
+#settingsModal .st-sec-sub{font-size:12px;}
+#settingsModal .st-result{border-radius:var(--radius-s);}
+/* platte rijen: scheidingslijnen i.p.v. losse pastel-pills - LET OP: geen
+   flex-direction hier, de bestaande mobiel-stack-regel moet blijven werken */
+#settingsModal .am-list{gap:0; border:1px solid var(--line); border-radius:var(--radius-s); overflow:hidden; background:var(--surface);}
+#settingsModal .am-row{
+  background:transparent; border-radius:0; box-shadow:none;
+  border-bottom:1px solid var(--line); margin:0; padding:7px 10px; font-size:13.5px;
+}
+#settingsModal .am-list > .am-row:last-child,
+#settingsModal .am-list > .am-add-wrap:last-child{border-bottom:none;}
+#settingsModal .am-row:hover{background:var(--surface-2);}
+#settingsModal .am-row-school{background:transparent; font-weight:600;}
+#settingsModal .am-row-sub{border-left:none; border-radius:0; padding-left:30px; background:transparent;}
+#settingsModal .am-name{font-size:13.5px; font-weight:600;}
+#settingsModal .am-role{font-size:12.5px;}
+/* groepskoppen: subtiele sticky sectierijen binnen de lijst */
+#settingsModal .am-group{
+  position:sticky; top:0; z-index:2; margin:0; padding:7px 10px 5px;
+  background:var(--surface-2); border-bottom:1px solid var(--line);
+  font-size:11px; letter-spacing:.6px; color:var(--muted);
+}
+/* controls: vlak, omrand, compact */
+#settingsModal .am-inp, #settingsModal .am-sel, #settingsModal .am-pw{
+  border-radius:var(--radius-s); font-size:13px; background:var(--surface);
+}
+#settingsModal .am-btn, #settingsModal .am-copy, #settingsModal .tbtn{
+  border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface);
+  font-size:12.5px; font-weight:550; box-shadow:none; padding:0 12px;
+}
+#settingsModal .am-btn:hover, #settingsModal .tbtn:hover{background:var(--surface-2);}
+#settingsModal .am-btn.am-danger{background:transparent; border:1px solid var(--line); color:var(--red); font-weight:600;}
+#settingsModal .am-btn.am-danger.armed{background:var(--red); border-color:var(--red); color:#fff;}
+#settingsModal .am-edit{border:1px solid transparent; border-radius:var(--radius-s); font-size:12.5px; opacity:.75;}
+#settingsModal .am-edit:hover{opacity:1; border-color:var(--line); background:var(--surface-2);}
+#settingsModal .am-chip{border-radius:var(--radius-s); padding:3px 9px; font-size:12px;}
+#settingsModal .am-result{
+  background:transparent; border:1px solid var(--accent); color:var(--accent-ink);
+  border-radius:var(--radius-s); font-weight:600; padding:7px 11px;
+}
+#settingsModal .am-schoolbar{background:transparent; border:1px solid var(--line); border-radius:var(--radius-s); padding:6px 10px;}
+#settingsModal .am-reset{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); box-shadow:none;}
+#settingsModal .am-reset-row{background:transparent; border-radius:0; border-bottom:1px solid var(--line);}
+#settingsModal .am-h3{font-size:12px; letter-spacing:.5px;}
+#settingsModal .am-field-lbl{font-size:10px; letter-spacing:.5px;}
+#settingsModal .am-add{border-radius:var(--radius-s);}
+#settingsModal .am-add-wrap > .tbtn{border-style:dashed; color:var(--muted); font-weight:550;}
+#settingsModal .am-add-wrap > .tbtn:hover{color:var(--ink);}
+/* weergave-sectie: vlakke segmentknoppen */
+#settingsModal .seg{border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); padding:2px; box-shadow:none;}
+#settingsModal .seg button{border-radius:5px; box-shadow:none; font-size:12.5px;}
+#settingsModal .seg button.on{background:var(--surface-3); color:var(--ink); box-shadow:none;}
+#settingsModal .vw-lbl{font-size:12.5px; font-weight:600;}
+/* hoog contrast: de ID-scope verslaat de body.hc-regels, dus expliciet terug */
+body.hc #settingsModal .am-row{border-bottom:1.5px solid #000;}
+body.hc #settingsModal .am-list, body.hc #settingsModal .am-reset,
+body.hc #settingsModal .am-btn, body.hc #settingsModal .tbtn,
+body.hc #settingsModal .am-inp, body.hc #settingsModal .am-sel{border-color:#000;}

public/js/core.js

@@ -2,7 +2,7 @@
 "use strict";
 /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline).
    Kept in sync by hand with the VERSION file at the repo root on every release. */
-const VERSION = "0.3.84-beta";
+const VERSION = "0.3.85-beta";
 (function(){
   const tag = document.getElementById("verTag");
   tag.textContent = "v"+VERSION;

public/js/settings.js

@@ -90,7 +90,10 @@ function registerSettingsSection(sec){ ST_SECTIONS.push(sec); }
     searchInp.value = "";
     nav.querySelectorAll(".st-nav-btn").forEach(b=>b.classList.toggle("active", b.dataset.section===id));
     secHead.innerHTML = "";
-    secHead.appendChild(el("div","st-sec-title", s.icon + "  " + s.label()));
+    const title = el("div","st-sec-title");
+    title.appendChild(el("span","st-sec-ico", s.icon));
+    title.appendChild(el("span", null, s.label()));
+    secHead.appendChild(title);
     if(s.sub) secHead.appendChild(el("div","st-sec-sub", s.sub()));
     content.scrollTop = 0;
     await s.activate(payload);