Revamp CommonwealthOnline browser UI and styles

Rework the CommonwealthOnline browser UI: restructure HTML into a nav + subpanel layout, add SVG/PNG/font assets and new sprites, and overhaul styles with a new font-face and refreshed color/spacing variables. Refactor components: tabs use a left nav list; filters extraction (renderRow) and reset focus handling; direct-connect renders into a dedicated container; server-list switched to compact row layout and adds a scroll indicator; server-details now uses a preview area and simplified preview/stats rendering. Update app logic: adjust focus zone handling (nextFocusZone), limit zones per tab, update connection status/count display, and avoid rendering details for direct-connect. Overall changes improve responsiveness, visual hierarchy, and focus/navigation behavior.

ui/views/CommonwealthOnline/browser/components/direct-connect.js

@@ -6,12 +6,13 @@
       var pane = root.querySelector('[data-pane="direct-connect"]');
       if (!pane) return;
 
+      var container = pane.querySelector(".co-direct-connect");
+      if (!container) return;
+
       var address = state.directConnect.address || "127.0.0.1";
       var port = state.directConnect.port || "7777";
 
-      pane.innerHTML =
-        '<div class="co-direct-connect">' +
-        "<h2>Direct Connect</h2>" +
+      container.innerHTML =
         '<div class="co-direct-row">' +
         '<label for="co-dc-address">Server Address</label>' +
         '<input class="co-filter-input" id="co-dc-address" type="text" value="' + escapeAttr(address) + '">' +
@@ -21,8 +22,7 @@
         '<input class="co-filter-input" id="co-dc-port" type="text" value="' + escapeAttr(port) + '">' +
         "</div>" +
         '<button type="button" class="co-btn co-dc-connect">Connect</button>' +
-        '<p class="co-detail-desc" style="margin-top:16px">Enter a server address to connect directly without browsing the list.</p>' +
-        "</div>";
+        '<p class="co-detail-desc" style="margin-top:16px;color:var(--co-text-dim);font-size:var(--co-font-sm)">Enter a server address to connect directly without browsing the list.</p>';
     },
 
     bind: function (root, onConnect) {