UI: Refactor design system to align with dense mockup

static/js/panels/models.js

@@ -20,7 +20,7 @@ function mount() {
 
   $("#m-table").innerHTML = `
     <div class="card-h"><h3>Modelle &amp; Ports</h3><span class="meta" id="m-count"></span></div>
-    <div class="hint" style="margin-bottom: 16px;">
+    <div class="hint mb-4">
       💡 <b>Modelle werden automatisch geladen</b>, sobald eine Chat-Anfrage an sie gestellt wird. Du musst sie nicht manuell starten.
     </div>
     <table>
@@ -36,13 +36,13 @@ function mount() {
         <h2 style="margin-top:0">Modell konfigurieren</h2>
         <p class="meta" id="cfg-model-name"></p>
         
-        <div style="margin-top:24px">
+        <div class="mt-6">
           <label>Context-Size (Tokens)</label>
           <input id="cfg-ctx" type="number" class="tokin" value="8192">
-          <div class="meta" style="font-size:12px; margin-top:4px;">Höhere Werte erlauben längere Dokumente, brauchen aber mehr VRAM.</div>
+          <div class="meta text-xs mt-2">Höhere Werte erlauben längere Dokumente, brauchen aber mehr VRAM.</div>
         </div>
 
-        <button class="primary" id="cfg-save" style="width:100%; margin-top:24px; padding:12px">Speichern</button>
+        <button class="primary mt-6" id="cfg-save" style="width:100%; padding:var(--sp-3)">Speichern</button>
       </div>
     </div>
   `;