fix: checkbox alignment, wording, and Dan Mode drag handle contrast

data/units.json

@@ -1,13 +1,5 @@
 {
   "units": [
-    {
-      "id": "dickload",
-      "label": "Dickload",
-      "labelPlural": "Dickloads",
-      "symbol": "dl",
-      "group": "dickloads",
-      "toBase": 1
-    },
     {
       "id": "pound",
       "label": "Pound",
@@ -16,6 +8,14 @@
       "group": "dickloads",
       "toBase": 0.038
     },
+    {
+      "id": "dickload",
+      "label": "Dickload",
+      "labelPlural": "Dickloads",
+      "symbol": "dl",
+      "group": "dickloads",
+      "toBase": 1
+    },
     {
       "id": "barrel",
       "label": "Barrel",

src/routes/admin/+page.svelte

@@ -863,7 +863,7 @@
       </label>
       <label class="checkbox-label">
         <input type="checkbox" bind:checked={unitForm.hidden} />
-        Hidden <small class="muted">— exclude from converter rendering</small>
+        <span>Don't show on front end</span>
       </label>
       <div class="form-actions">
         <button onclick={saveUnit}>{unitFormNew ? 'Create' : 'Save'}</button>
@@ -912,7 +912,7 @@
       </label>
       <label class="checkbox-label">
         <input type="checkbox" bind:checked={groupForm.hidden} />
-        Hidden <small class="muted">— exclude group and all its units from converter rendering</small>
+        <span>Don't show on front end</span>
       </label>
       <div class="form-actions">
         <button onclick={saveGroup}>{groupFormNew ? 'Create' : 'Save'}</button>
@@ -1239,6 +1239,9 @@
     width: 1rem;
     height: 1rem;
     margin: 0;
+    /* Pico adds margin-top to checkboxes — override so flex centering works */
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
   }
   .form-msg {
     padding: 0.5rem 0.75rem;
@@ -1300,21 +1303,36 @@
   }
   .drag-handle {
     cursor: grab;
-    color: var(--pico-muted-color);
+    color: var(--pico-color);
+    opacity: 0.35;
     font-size: 0.9rem;
     padding: 0 0.1rem;
     flex-shrink: 0;
     user-select: none;
     line-height: 1;
   }
+  .drag-handle:hover {
+    opacity: 0.7;
+  }
   .drag-handle:active {
     cursor: grabbing;
+    opacity: 1;
   }
-  /* When the row has a primary-colored background, muted grey/orange disappears.
-     Force the handle to the primary inverse (white in normal themes, black in Dan). */
+  /* On selected/drag-over rows the background changes — boost opacity so dots stay visible. */
   .tree-unit-row.selected .drag-handle,
   .tree-unit-row.drag-over-unit .drag-handle {
     color: var(--pico-primary-inverse);
+    opacity: 0.6;
+  }
+  /* Dan Mode: handle is magenta at full blast; black on yellow selected rows. */
+  :global([data-theme=dan]) .drag-handle {
+    color: #ff00ff;
+    opacity: 1;
+  }
+  :global([data-theme=dan]) .tree-unit-row.selected .drag-handle,
+  :global([data-theme=dan]) .tree-unit-row.drag-over-unit .drag-handle {
+    color: #000000;
+    opacity: 1;
   }
   .drag-over-unit {
     border-top: 2px solid var(--pico-primary);