UI accent partial fix for issue #1528 (#1530)

Made the suggested changes as listed in the fix path provided by
@Kpa-clawbot

Fix path:

`style.css:1244` `.field-table .section-row td` → `color: var(--text)`
(or new `--section-header-fg`).
`style.css:2620-2631` `.copy-link-btn` → `color: var(--text);`
background/border via `--accent-bg` / `--accent-border` tokens with safe
defaults.
`live.css:987` `.vcr-scope-btn.active` → same token swap; ensure text
remains `--text` on the tinted bg.
`nodes.js:212` `.multibyte-badge` → move inline styles to style.css,
`color:var(--text)`, keep `--accent-bg` background.

When creating the defaults for `--accent-bg` and `--accent-border`, I
chose to go with the default style values embedded in nodes.js, as that
was the safest bet.

We should probably extend the custom themes to include these variables
as well as not to confuse users if they see it. This also causes the
delima of, sometimes the `--accent` is use as the background for
objects, and not `--accent-bg`, example:
`btn active` has background set to` --accent` and border set to
`--accent`.

If we don't extend the config to accept accent-bg and accent-border, we
risk users still making accents of light blue that will be drown out
with the defaults we've set.


Also updated the badge above the multi-byte badge that contains X bytes
of the nodes public key, where X is determined by the path byte length.
This was done because it had styles set that were easy to add to the
styles.css file, to clean up coe. The node-type badge above it is
unfortunately driven by javascript in the nodes.js page, and requires
syling.

**Note:** Accidentally added ghost changes into this push for a second
time. They can be ignored as they were previously merged and shouldn't
have been seen as new.

public/live.css

@@ -986,7 +986,7 @@
 }
 .vcr-scope-btn.active {
   background: rgba(59,130,246,0.2);
-  color: var(--accent);
+  color: var(--text);
   border-color: rgba(59,130,246,0.3);
 }
 

public/nodes.js

@@ -202,14 +202,14 @@
     const info = getStatusInfo(n);
     let html = `<span class="badge" style="background:${roleColor}20;color:${roleColor}">${n.role}</span>`;
     if (n.hash_size) {
-      html += ` <span class="badge" style="background:var(--nav-bg);color:var(--nav-text);font-family:var(--mono)">${n.public_key.slice(0, n.hash_size * 2).toUpperCase()}</span>`;
+      html += ` <span class="badge pubkey-prefix-badge">${n.public_key.slice(0, n.hash_size * 2).toUpperCase()}</span>`;
     }
     // #1279 P2 #4: multibyte capability badge — surfaced from the observable
     // multibyte hash_size (firmware Feat1/Feat2 carry the wire capability bits
     // per AdvertDataHelpers.h:14-16, but Feat1/Feat2 aren't persisted per-node
     // in CoreScope today; hash_size is the observed effective capability).
     if (n.hash_size && Number(n.hash_size) >= 2) {
-      html += ` <span class="badge multibyte-badge" title="Node advertises multibyte hash path (firmware Feat1/Feat2)" style="background:var(--accent-bg, rgba(20,184,166,0.2));color:var(--accent, #14b8a6);font-size:10px">Multibyte: ${Number(n.hash_size)}-byte</span>`;
+      html += ` <span class="badge multibyte-badge" title="Node advertises multibyte hash path (firmware Feat1/Feat2)">Multibyte: ${Number(n.hash_size)}-byte</span>`;
     }
     if (n.hash_size_inconsistent) {
       html += ` <a href="#/nodes/${encodeURIComponent(n.public_key)}?section=node-packets" class="badge" style="background:var(--status-yellow);color:#000;font-size:10px;cursor:pointer;text-decoration:none">⚠️ variable hash size</a>`;

public/style.css

@@ -104,6 +104,8 @@
   --nav-text-muted: #cbd5e1;
   --nav-active-bg: rgba(74, 158, 255, 0.15);
   --accent: #4a9eff;
+  --accent-bg: rgba(59, 130, 246, 0.12);
+  --accent-border: rgba(59, 130, 246, 0.25);
   --geo-filter-color: #3b82f6;
   --status-green: #22c55e;
   --status-yellow: #eab308;
@@ -1165,7 +1167,16 @@ body.scroll-locked { overflow: hidden; }
   font-size: 10px; font-weight: 600;
   background: #ede9fe; color: #6d28d9;
 }
-
+.multibyte-badge {
+  color: var(--text);
+  background: var(--accent-bg);
+  font-size: 10px;
+}
+.pubkey-prefix-badge {
+  background:var(--nav-bg);
+  color:var(--nav-text);
+  font-family:var(--mono)
+}
 /* === Monospace === */
 .mono { font-family: var(--mono); font-size: 12px; }
 
@@ -1241,7 +1252,7 @@ body.scroll-locked { overflow: hidden; }
 }
 .field-table .section-row td {
   background: var(--section-bg, #eef2ff); font-weight: 700; font-size: 11px;
-  text-transform: uppercase; letter-spacing: .5px; color: var(--accent);
+  text-transform: uppercase; letter-spacing: .5px; color: var(--text);
 }
 .field-table .section-header td  { background: rgba(243,139,168,0.18); }
 .field-table .section-transport td { background: rgba(137,180,250,0.18); }
@@ -2619,9 +2630,9 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
 
 .copy-link-btn {
   padding: 5px 12px;
-  background: rgba(59, 130, 246, 0.12);
-  border: 1px solid rgba(59, 130, 246, 0.25);
-  color: var(--accent, #3b82f6);
+  background: var(--accent-bg);
+  border: 1px solid var(--accent-border);
+  color: var(--text);
   border-radius: 6px;
   font-size: 0.78rem;
   font-weight: 600;

test-e2e-playwright.js

@@ -670,6 +670,15 @@ async function run() {
     assert(hasChannelHash, 'Undecrypted GRP_TXT detail should show "Channel Hash"');
   });
 
+  await test('#1530 copy-link-btn color differs from accent', async () => {
+    const hash = await page.evaluate(async () => (await (await fetch('/api/packets?limit=1')).json()).packets?.[0]?.hash);
+    if (!hash) return console.log('    ⏭️  Skipped (no packets)');
+    await page.goto(`${BASE}/#/packets/${hash}`, { waitUntil: 'domcontentloaded' });
+    await page.waitForSelector('.copy-link-btn', { timeout: 8000 });
+    const diff = await page.evaluate(() => window.getComputedStyle(document.querySelector('.copy-link-btn')).color !== window.getComputedStyle(document.documentElement).getPropertyValue('--accent').trim());
+    assert(diff, 'copy-link-btn color should not match --accent');
+  });
+
   // --- Group: Analytics page (test 8 + sub-tabs) ---
 
   // Test 8: Analytics page loads with overview