Restructure app to use LotusGuild Terminal Design System v1.2

Replace custom phosphor-green terminal aesthetic with the lt-* component
system from base.css/base.js. All templates now inherit the LotusGuild
multi-accent Anduril palette via variable aliases in style.css, and use
lt-header, lt-nav, lt-card, lt-table, lt-btn, lt-modal, lt-badge etc.
Custom components (topology, inspector chassis, link debug, SFP panels)
are preserved with color values updated to base.css palette variables.

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

static/app.js

@@ -78,7 +78,7 @@ function updateStatusBar(summary, lastCheck) {
         staleBanner = document.createElement('div');
         staleBanner.id = 'stale-banner';
         staleBanner.className = 'stale-banner';
-        document.querySelector('.main').prepend(staleBanner);
+        document.querySelector('.lt-main').prepend(staleBanner);
       }
       const mins = Math.floor(checkAge / 60);
       staleBanner.textContent = `⚠ Monitoring data is stale — last check was ${mins} minute${mins !== 1 ? 's' : ''} ago. The monitor daemon may be down.`;
@@ -144,7 +144,7 @@ function updateUnifiTable(devices) {
     const dotClass    = d.connected ? 'dot-up' : 'dot-down';
     const statusText  = d.connected ? 'Online' : 'Offline';
     const suppressBtn = !d.connected
-      ? `<button class="btn-sm btn-suppress"
+      ? `<button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
             data-sup-type="unifi_device"
             data-sup-name="${escHtml(d.name)}"
             data-sup-detail="">🔕 Suppress</button>`
@@ -188,7 +188,7 @@ function updateEventsTable(events, totalActive) {
       : '–';
     return `
       <tr class="row-${e.severity}">
-        <td><span class="badge badge-${e.severity}">${e.severity}</span></td>
+        <td><span class="lt-badge badge-${e.severity}">${e.severity}</span></td>
         <td>${escHtml(e.event_type.replace(/_/g,' '))}</td>
         <td><strong>${escHtml(e.target_name)}</strong></td>
         <td>${escHtml(e.target_detail || '–')}</td>
@@ -198,7 +198,7 @@ function updateEventsTable(events, totalActive) {
         <td>${e.consecutive_failures}</td>
         <td>${ticket}</td>
         <td>
-          <button class="btn-sm btn-suppress"
+          <button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
             data-sup-type="${escHtml(supType)}"
             data-sup-name="${escHtml(e.target_name)}"
             data-sup-detail="${escHtml(e.target_detail||'')}">🔕</button>
@@ -208,8 +208,9 @@ function updateEventsTable(events, totalActive) {
 
   wrap.innerHTML = `
     ${countNotice}
-    <div class="table-wrap">
-      <table class="data-table" id="events-table">
+    <div class="lt-table-wrap">
+      <table class="lt-table" id="events-table">
+        <caption class="lt-sr-only">Active network alerts</caption>
         <thead>
           <tr>
             <th>Sev</th><th>Type</th><th>Target</th><th>Detail</th>