CSS: replace remaining inline color/size styles with TDS utilities

- Stat card icons and values: style="color:var(--red)" etc replaced with
  lt-text-red, lt-text-amber, lt-text-cyan, lt-text-green (defined in
  base.css with both color and glow-shadow)
- Host search input: style="width:180px" extracted to .lt-search-input--sm
- base.html: suppress modal form groups use lt-form-group--last for last
  item (already committed); lt-divider--compact applied to settings divider

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

static/style.css

@@ -118,6 +118,15 @@
   padding: 0.2rem 0.45rem;
 }
 
+/* ── Form group modifiers ────────────────────────────────────────── */
+.lt-form-group--last { margin-bottom: 0; }
+
+/* ── Search input size variant ───────────────────────────────────── */
+.lt-search-input--sm { width: 180px; }
+
+/* ── Divider compact variant ─────────────────────────────────────── */
+.lt-divider--compact { margin: 1rem 0 0.75rem; }
+
 /* ── Topology section collapse toggle ────────────────────────────── */
 .topo-collapse-btn {
   margin-left: auto;
@@ -410,6 +419,9 @@
   background: linear-gradient(to bottom, var(--cyan), var(--green));
   opacity: .7;
 }
+.topo-vc-wire--wan  { background: linear-gradient(to bottom, var(--cyan), rgba(0,212,255,.3)); opacity: .7; }
+.topo-vc-wire--10g  { background: var(--amber); opacity: .6; }
+.topo-vc-wire--mgmt { background: var(--border-color); opacity: .5; }
 /* Blurred copy of the wire for a soft glow halo */
 .topo-vc-wire::before {
   content: '';
@@ -467,6 +479,7 @@
 .topo-v2-sub   { font-size: .58em; color: var(--text-muted); letter-spacing: .02em; }
 .topo-v2-vlan  { font-size: .54em; color: var(--cyan); opacity: .75; }
 
+.topo-v2-host--bus { min-width: 80px; max-width: 96px; }
 .topo-v2-internet { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); box-shadow: 0 0 12px rgba(0,212,255,.12); }
 .topo-v2-router   { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); box-shadow: 0 0 12px rgba(0,212,255,.14); }
 .topo-v2-switch   { border-color: var(--amber); color: var(--amber); text-shadow: var(--glow-amber); box-shadow: 0 0 12px rgba(255,179,0,.12); }
@@ -516,6 +529,7 @@
 /* Bus rails */
 .topo-bus-section {
   width: 100%;
+  max-width: 860px;
   display: flex;
   flex-direction: column;
   align-items: stretch;

templates/base.html

@@ -207,7 +207,7 @@
       </div>
       <form id="suppress-form">
         <div class="lt-modal-body">
-          <div class="lt-form-group" style="margin-bottom:12px">
+          <div class="lt-form-group">
             <label class="lt-label" for="sup-type">Target Type</label>
             <select class="lt-select" id="sup-type" name="target_type">
               <option value="host">Host (all interfaces)</option>
@@ -216,20 +216,20 @@
               <option value="all">Global Maintenance</option>
             </select>
           </div>
-          <div class="lt-form-group" id="sup-name-group" style="margin-bottom:12px">
+          <div class="lt-form-group" id="sup-name-group">
             <label class="lt-label" for="sup-name">Target Name</label>
             <input type="text" class="lt-input" id="sup-name" name="target_name" placeholder="e.g. large1">
           </div>
-          <div class="lt-form-group" id="sup-detail-group" style="margin-bottom:12px;display:none">
+          <div class="lt-form-group" id="sup-detail-group" style="display:none">
             <label class="lt-label" for="sup-detail">Interface <span class="lt-field-hint">(interface type only)</span></label>
             <input type="text" class="lt-input" id="sup-detail" name="target_detail" placeholder="e.g. enp35s0">
           </div>
-          <div class="lt-form-group" style="margin-bottom:12px">
+          <div class="lt-form-group">
             <label class="lt-label" for="sup-reason">Reason <span class="required">*</span></label>
             <input type="text" class="lt-input" id="sup-reason" name="reason"
                    placeholder="e.g. Planned switch reboot" required>
           </div>
-          <div class="lt-form-group" style="margin-bottom:0">
+          <div class="lt-form-group lt-form-group--last">
             <label class="lt-label">Duration</label>
             <div class="duration-pills">
               <button type="button" class="pill" data-duration="30">30 min</button>
@@ -258,7 +258,7 @@
         <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
       </div>
       <div class="lt-modal-body">
-        <table class="lt-table" style="width:100%">
+        <table class="lt-table">
           <thead><tr><th>Shortcut</th><th>Action</th></tr></thead>
           <tbody>
             <tr><td>Ctrl / &#x2318; + K</td><td>Command palette</td></tr>
@@ -295,7 +295,7 @@
           </div>
           <div class="lt-field-hint" id="settings-refresh-hint"></div>
         </div>
-        <div class="lt-divider" style="margin:1rem 0 0.75rem"></div>
+        <div class="lt-divider lt-divider--compact"></div>
         <div class="lt-kv-grid">
           <span class="lt-kv-key">User</span>
           <span class="lt-kv-val lt-kv-val--cyan">{{ user.name or user.username }}</span>

templates/index.html

@@ -31,32 +31,32 @@
   <div class="lt-stat-card{% if summary.critical %} lt-stat-card--alert{% endif %}"
        id="stat-critical" role="button" tabindex="0"
        data-stat-filter="critical" aria-label="{{ summary.critical or 0 }} critical alerts">
-    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--red);text-shadow:var(--glow-red)">●</span>
+    <span class="lt-stat-icon lt-text-red" aria-hidden="true">●</span>
     <div class="lt-stat-info">
-      <span class="lt-stat-value" id="stat-critical-val" style="color:var(--red)">{{ summary.critical or 0 }}</span>
+      <span class="lt-stat-value lt-text-red" id="stat-critical-val">{{ summary.critical or 0 }}</span>
       <span class="lt-stat-label">Critical</span>
     </div>
   </div>
   <div class="lt-stat-card"
        id="stat-warning" role="button" tabindex="0"
        data-stat-filter="warning" aria-label="{{ summary.warning or 0 }} warning alerts">
-    <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" id="stat-warning-val" style="color:var(--amber)">{{ summary.warning or 0 }}</span>
+      <span class="lt-stat-value lt-text-amber" id="stat-warning-val">{{ summary.warning or 0 }}</span>
       <span class="lt-stat-label">Warning</span>
     </div>
   </div>
   <div class="lt-stat-card" id="stat-hosts" aria-label="Monitored hosts">
-    <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" id="stat-hosts-val" style="color:var(--cyan)">{{ snapshot.hosts | length }}</span>
+      <span class="lt-stat-value lt-text-cyan" id="stat-hosts-val">{{ snapshot.hosts | length }}</span>
       <span class="lt-stat-label">Hosts</span>
     </div>
   </div>
   <div class="lt-stat-card" id="stat-resolved" aria-label="{{ recent_resolved | length }} alerts resolved in last 24 hours">
-    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--green);text-shadow:var(--glow)">✔</span>
+    <span class="lt-stat-icon lt-text-green" aria-hidden="true">✔</span>
     <div class="lt-stat-info">
-      <span class="lt-stat-value" id="stat-resolved-val" style="color:var(--green)">{{ recent_resolved | length }}</span>
+      <span class="lt-stat-value lt-text-green" id="stat-resolved-val">{{ recent_resolved | length }}</span>
       <span class="lt-stat-label">Resolved 24h</span>
     </div>
   </div>
@@ -188,9 +188,9 @@
       </div>
     </div>
 
-    <!-- WAN wire: cyan → green gradient, labeled -->
+    <!-- WAN wire: cyan → WAN gradient -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:linear-gradient(to bottom,var(--cyan),rgba(0,212,255,.3)); opacity:.7;"></div>
+      <div class="topo-vc-wire topo-vc-wire--wan"></div>
       <span class="topo-vc-label">WAN · 10G SFP+</span>
     </div>
 
@@ -208,7 +208,7 @@
 
     <!-- UDM-Pro → USW-Agg (10G SFP+) -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <div class="topo-vc-wire topo-vc-wire--10g"></div>
       <span class="topo-vc-label">10G SFP+</span>
     </div>
 
@@ -227,7 +227,7 @@
 
     <!-- USW-Agg → Pro 24 PoE (10G trunk) -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <div class="topo-vc-wire topo-vc-wire--10g"></div>
       <span class="topo-vc-label">10G trunk</span>
     </div>
 
@@ -246,14 +246,14 @@
 
     <!-- Pro 24 PoE → host bus section -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--border-color);opacity:.5;"></div>
+      <div class="topo-vc-wire topo-vc-wire--mgmt"></div>
     </div>
 
     <!-- ══════════════════════════════════════════════════════════════
          TIER 4 connecting bus – two rails (10G green + 1G amber dashed)
          showing dual-homing for all 6 servers
          ══════════════════════════════════════════════════════════ -->
-    <div class="topo-bus-section" style="max-width:860px;">
+    <div class="topo-bus-section">
 
       <!-- 10G storage bus (Agg → VLAN90) -->
       <div class="topo-bus-10g">
@@ -286,8 +286,8 @@
             <div class="topo-v2-wire-1g"  data-host="{{ hname }}" title="1G → Pro 24 PoE"></div>
           </div>
           <!-- host box -->
-          <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }}"
-               data-host="{{ hname }}" style="min-width:80px; max-width:96px;">
+          <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }} topo-v2-host--bus"
+               data-host="{{ hname }}">
             <span class="topo-v2-icon">▣</span>
             <span class="topo-v2-label">{{ hlabel }}</span>
             <span class="topo-v2-sub">{{ hsub }}</span>
@@ -315,8 +315,8 @@
   <div class="lt-toolbar" id="host-toolbar">
     <div class="lt-toolbar-left">
       <div class="lt-search">
-        <input type="search" class="lt-input lt-search-input" id="host-search"
-               placeholder="Filter hosts…" autocomplete="off" style="width:180px">
+        <input type="search" class="lt-input lt-search-input lt-search-input--sm" id="host-search"
+               placeholder="Filter hosts…" autocomplete="off">
       </div>
     </div>
   </div>