web UI: drawn checkbox (appearance:none) — accent-color only tinted the native control

src/web/ui.html

@@ -71,8 +71,20 @@
   .cled { width: 7px; height: 7px; border-radius: 50%; background: var(--led-busy); box-shadow: var(--glow-busy); flex-shrink: 0; }
   .cname { font-family: ui-monospace, monospace; color: var(--fg); }
   .actions { display: flex; gap: 8px; align-items: center; margin: 6px 0 0 21px; flex-wrap: wrap; }
-  .actions select, .actions input[type=checkbox] { font: inherit; }
-  .actions input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }
+  .actions select { font: inherit; }
+  .actions input[type=checkbox] {
+    appearance: none; -webkit-appearance: none;
+    width: 15px; height: 15px; margin: 0; flex-shrink: 0;
+    border: 1.5px solid var(--border); border-radius: 4px; background: var(--btn);
+    cursor: pointer; position: relative; transition: background .15s, border-color .15s;
+  }
+  .actions input[type=checkbox]:hover { border-color: var(--accent); }
+  .actions input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
+  .actions input[type=checkbox]:checked::after {
+    content: ""; position: absolute; left: 4.5px; top: 1px;
+    width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
   .actions select {
     background: var(--btn); color: var(--fg); border: 1px solid var(--border);
     border-radius: 6px; padding: 2px 6px; font-size: 12.5px; max-width: 260px; height: 26px;