style: fix code quality issues from review for task-15 remote instances UI

- Deduplicate CSS: merge shared properties of .settings-remote-url and
  .settings-remote-name into a combined selector, keeping only flex
  values in individual rules. Reduces 18 lines to 10.

- Fix remove button hover color: .settings-remote-remove:hover now uses
  #ef4444 (red) and rgba(239, 68, 68, 0.1) background, consistent with
  .tile-delete:hover and .sidebar-delete:hover for destructive actions.

- Add aria-label attributes to urlInput and nameInput in
  _buildRemoteInstanceRow for screen-reader accessibility:
  'Remote instance URL' and 'Remote instance display name'.

- Add 2 tests to verify aria-label attributes are set on both inputs
  (test_build_remote_instance_row_url_input_aria_label,
  test_build_remote_instance_row_name_input_aria_label).

All 615 tests pass.

Co-authored-by: Amplifier <amplifier@sourcegraph.com>

muxplex/frontend/app.js

@@ -1198,11 +1198,13 @@ function _buildRemoteInstanceRow(url, name) {
   urlInput.className = 'settings-remote-url';
   urlInput.placeholder = 'http://192.168.1.x:8000';
   urlInput.value = url || '';
+  urlInput.setAttribute('aria-label', 'Remote instance URL');
   var nameInput = document.createElement('input');
   nameInput.type = 'text';
   nameInput.className = 'settings-remote-name';
   nameInput.placeholder = 'Device name';
   nameInput.value = name || '';
+  nameInput.setAttribute('aria-label', 'Remote instance display name');
   var removeBtn = document.createElement('button');
   removeBtn.className = 'settings-remote-remove';
   removeBtn.textContent = '\u00d7';

muxplex/frontend/style.css

@@ -1485,8 +1485,8 @@ body {
   align-items: center;
 }
 
-.settings-remote-url {
+.settings-remote-url,
-  flex: 2;
+.settings-remote-name {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
   border-radius: 4px;
@@ -1497,22 +1497,15 @@ body {
   transition: border-color 0.15s;
 }
 
-.settings-remote-url:focus {
+.settings-remote-url {
-  border-color: var(--accent);
+  flex: 2;
 }
 
 .settings-remote-name {
   flex: 1;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--text);
-  font-size: 13px;
-  padding: 5px 8px;
-  outline: none;
-  transition: border-color 0.15s;
 }
 
+.settings-remote-url:focus,
 .settings-remote-name:focus {
   border-color: var(--accent);
 }
@@ -1531,6 +1524,7 @@ body {
 }
 
 .settings-remote-remove:hover {
-  border-color: var(--accent);
+  border-color: #ef4444;
-  color: var(--text);
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
 }

muxplex/tests/test_frontend_js.py

@@ -2416,3 +2416,31 @@ def test_bind_static_event_listeners_remote_instance_remove() -> None:
     assert "settings-remote-remove" in body, (
         "bindStaticEventListeners must handle delegated clicks on .settings-remote-remove buttons"
     )
+
+
+def test_build_remote_instance_row_url_input_aria_label() -> None:
+    """urlInput in _buildRemoteInstanceRow must have an aria-label attribute."""
+    match = re.search(
+        r"function _buildRemoteInstanceRow\s*\(.*?\)\s*\{(.*?)(?=\n(?:function|/\*\*|window\.)|\n})",
+        _JS,
+        re.DOTALL,
+    )
+    assert match, "_buildRemoteInstanceRow function not found in app.js"
+    body = match.group(1)
+    assert "Remote instance URL" in body, (
+        "urlInput must have aria-label='Remote instance URL' for screen-reader accessibility"
+    )
+
+
+def test_build_remote_instance_row_name_input_aria_label() -> None:
+    """nameInput in _buildRemoteInstanceRow must have an aria-label attribute."""
+    match = re.search(
+        r"function _buildRemoteInstanceRow\s*\(.*?\)\s*\{(.*?)(?=\n(?:function|/\*\*|window\.)|\n})",
+        _JS,
+        re.DOTALL,
+    )
+    assert match, "_buildRemoteInstanceRow function not found in app.js"
+    body = match.group(1)
+    assert "Remote instance display name" in body, (
+        "nameInput must have aria-label='Remote instance display name' for screen-reader accessibility"
+    )