fix: toevoegformulier duidelijk anders dan een bestaande-gebruikersrij (v0.4.06-beta)

Een uitgeklapt "＋ ..."-formulier (nieuwe schoolbeheerder/leerkracht/leerling/
school/klas) zag er in het beheerpaneel bijna hetzelfde uit als het
bewerkpaneel van een bestaande gebruiker - beide gewoon een rij velden
zonder duidelijk onderscheid.

- .am-add krijgt nu een eigen kader (accentkleur, stippellijn) i.p.v. de
  neutrale achtergrond van een gebruikersrij
- het formulier toont bovenaan een titel die herhaalt wát je toevoegt (bv.
  "LEERLING"), ook zodra de knoptekst erboven uit beeld is
- de dichtgeklapte "＋ ..."-knop zelf krijgt ook de accentkleur, zodat
  collapsed en uitgeklapt dezelfde "dit is toevoegen"-taal spreken
- geverifieerd in een echte headless Chromium: duidelijk visueel onderscheid
  tussen een toevoegformulier en een echte gebruikersrij

VERSION

@@ -1 +1 @@
-0.4.05-beta
+0.4.06-beta

public/css/teach.css

@@ -1276,7 +1276,19 @@
 }
 .am-schoolbar-lbl{font-size:16px;}
 .am-schoolbar .am-sel{flex:1; min-width:0;}
-.am-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0;}
+/* een uitgeklapt toevoegformulier moet nooit op een bestaande-gebruikersrij
+   lijken: duidelijk eigen kader (accentkleur, stippellijn) i.p.v. de neutrale
+   achtergrond van .am-row/.am-row-tools, plus een titel die herhaalt wát je
+   aan het toevoegen bent zodra de knoptekst zelf uit beeld is. */
+.am-add{
+  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0;
+  background:var(--accent-soft); border:1.5px dashed var(--accent);
+  border-radius:var(--radius); padding:10px;
+}
+.am-add-title{
+  flex:1 1 100%; font-weight:800; font-size:12.5px; color:var(--accent-ink);
+  text-transform:uppercase; letter-spacing:.4px;
+}
 .am-inp,.am-sel,.am-pw{
   border:1px solid var(--line); border-radius:var(--radius); height:var(--control-h);
   padding:0 11px; font:inherit; font-size:14px; outline:none;
@@ -1936,8 +1948,8 @@ body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .wo
 #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{border-style:dashed; border-color:var(--accent); color:var(--accent-ink); font-weight:550;}
-#settingsModal .am-add-wrap > .tbtn:hover{color:var(--ink);}
+#settingsModal .am-add-wrap > .tbtn:hover{color:var(--ink); background:var(--accent-soft);}
 /* 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;}

public/js/admin.js

@@ -615,6 +615,10 @@
 
     const f = h("div","am-add");
     f.style.display = "none";
+    /* het formulier zelf herhaalt wat je aan het toevoegen bent, zodat het
+       nooit met een bestaande-gebruikersrij te verwarren is zodra de
+       knoptekst erboven uit beeld is (zie ook .am-add's eigen kader in css) */
+    f.appendChild(h("div","am-add-title", label));
     const name = h("input","am-inp");
     name.placeholder = T("amUserPh");
     name.addEventListener("keydown", ev=>ev.stopPropagation());
@@ -862,6 +866,7 @@
     wrap.appendChild(toggle);
     const f = h("div","am-add");
     f.style.display = "none";
+    f.appendChild(h("div","am-add-title", T("amNewSchool")));
     const inp = h("input","am-inp");
     inp.placeholder = T("amSchoolNamePh");
     inp.maxLength = 80;
@@ -956,6 +961,7 @@
     }
     if(canResetPw){
       const f = h("div","am-add");
+      f.appendChild(h("div","am-add-title", T("amNewClass")));
       const inp = h("input","am-inp");
       inp.placeholder = T("amClassNamePh");
       inp.maxLength = 80;

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.4.05-beta";
+const VERSION = "0.4.06-beta";
 (function(){
   const tag = document.getElementById("verTag");
   tag.textContent = "v"+VERSION;