Fix: inspector empty states and diagnostic button accessibility

- Replace .empty-state (removed class) with TDS lt-empty-state--sm in
  both error branches of renderInspector() and loadInspector()
- Diagnostic run button: add aria-label, apply lt-btn TDS classes for
  consistent styling instead of custom btn-diag-only styling

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/style.css

@@ -143,8 +143,13 @@
   flex-shrink: 0;
 }
 
-/* ── Divider compact variant ─────────────────────────────────────── */
+/* ── Divider variants ────────────────────────────────────────────── */
 .lt-divider--compact { margin: 1rem 0 0.75rem; }
+.lt-divider--unifi   { margin: 20px 0 12px; }
+.lt-divider-label--unifi { color: var(--cyan); letter-spacing: .1em; }
+
+/* ── Stats grid spacing variant ──────────────────────────────────── */
+.lt-stats-grid--mb { margin-bottom: 16px; }
 
 /* ── Topology section collapse toggle ────────────────────────────── */
 .topo-collapse-btn {
@@ -213,6 +218,7 @@
 .events-filter-bar .lt-input-sm { width: 220px; }
 .sev-pills          { display: flex; gap: 4px; }
 .g-page-sub { font-size: .78em; color: var(--text-muted); margin-top: 4px; }
+.g-page-sub-aside { font-size: .78em; color: var(--text-muted); margin-left: 8px; }
 
 /* ── Badge severity color variants (used with lt-badge) ───────────── */
 .badge-critical { color: var(--red);    border-color: var(--red);    text-shadow: var(--glow-red); }

templates/inspector.html

@@ -8,7 +8,7 @@
     <h1 class="lt-page-title">Network Inspector</h1>
     <p class="g-page-sub">
       Visual switch chassis diagrams. Click a port to see detailed stats and LLDP path debug.
-      <span id="inspector-updated" style="margin-left:8px"></span>
+      <span id="inspector-updated" class="g-page-sub-aside"></span>
     </p>
   </div>
 </div>
@@ -320,7 +320,9 @@ function renderPanel(swName, idx) {
     _apiData.hosts && _apiData.hosts[d.lldp.system_name]);
   const diagHtml = hasDiagTarget ? `
     <div class="diag-bar">
-      <button class="btn-diag" data-action="run-diagnostic" data-sw="${escHtml(swName)}" data-idx="${idx}">Run Link Diagnostics</button>
+      <button class="btn-diag lt-btn lt-btn-secondary lt-btn-sm" data-action="run-diagnostic"
+              data-sw="${escHtml(swName)}" data-idx="${idx}"
+              aria-label="Run link diagnostics for port ${idx} on ${escHtml(swName)}">Run Diagnostics</button>
       <span class="diag-status" id="diag-status"></span>
     </div>
     <div class="diag-results" id="diag-results"></div>` : '';
@@ -433,7 +435,7 @@ function renderInspector(data) {
   }
 
   if (!Object.keys(switches).length) {
-    main.innerHTML = '<p class="empty-state">No switch data available. Monitor may still be initialising.</p>';
+    main.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">⬡</div><div class="lt-empty-state-title">No switch data available</div><div class="lt-empty-state-body">Monitor may still be initialising.</div></div>';
     return;
   }
 
@@ -460,7 +462,7 @@ async function loadInspector() {
     renderInspector(data);
   } catch (e) {
     document.getElementById('inspector-main').innerHTML =
-      '<p class="empty-state">Failed to load inspector data.</p>';
+      '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">✕</div><div class="lt-empty-state-title">Failed to load inspector data</div></div>';
     lt.toast.error('Failed to load inspector data');
   }
 }

templates/links.html

@@ -8,7 +8,7 @@
     <h1 class="lt-page-title">Link Debug</h1>
     <p class="g-page-sub">
       Per-interface stats: speed, duplex, SFP optical levels, TX/RX rates, errors, and carrier changes.
-      <span id="links-updated" style="margin-left:8px"></span>
+      <span id="links-updated" class="g-page-sub-aside"></span>
     </p>
   </div>
 </div>
@@ -358,7 +358,7 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
       </div>`;
   }).join('');
 
-  return `<div class="lt-divider" style="margin:20px 0 12px"><span class="lt-divider-label" style="color:var(--cyan);letter-spacing:.1em">UNIFI SWITCH PORTS</span></div>${html}`;
+  return `<div class="lt-divider lt-divider--unifi"><span class="lt-divider-label lt-divider-label--unifi">UNIFI SWITCH PORTS</span></div>${html}`;
 }
 
 // ── Panel collapse / expand ───────────────────────────────────────
@@ -412,18 +412,18 @@ function buildLinkSummary(hosts, unifiSwitches) {
   const downCardCls = allDown  > 0 ? ' lt-stat-card--alert' : '';
   const poeCard = totalPoe > 0 ? `
     <div class="lt-stat-card">
-      <span class="lt-stat-icon" aria-hidden="true" style="color:var(--amber)">⚡</span>
+      <span class="lt-stat-icon lt-text-amber" aria-hidden="true">⚡</span>
       <div class="lt-stat-info">
-        <span class="lt-stat-value" style="color:var(--amber)">${totalPoe.toFixed(1)}</span>
+        <span class="lt-stat-value lt-text-amber">${totalPoe.toFixed(1)}</span>
         <span class="lt-stat-label">PoE Load (W)</span>
       </div>
     </div>` : '';
   return `
-    <div class="lt-stats-grid" style="margin-bottom:16px">
+    <div class="lt-stats-grid lt-stats-grid--mb">
       <div class="lt-stat-card">
-        <span class="lt-stat-icon" aria-hidden="true" style="color:var(--cyan)">⬡</span>
+        <span class="lt-stat-icon lt-text-cyan" aria-hidden="true">⬡</span>
         <div class="lt-stat-info">
-          <span class="lt-stat-value" style="color:var(--cyan)">${allTotal}</span>
+          <span class="lt-stat-value lt-text-cyan">${allTotal}</span>
           <span class="lt-stat-label">Interfaces</span>
         </div>
       </div>