feat: add SLA banner component and gradient progress bar fills from design test

SLA banners (.lt-sla-p1 / .lt-sla-p2):
- P1 pulsing red banner with lt-sla-pulse keyframe
- P2 static amber banner
- Subcomponents: lt-sla-icon, lt-sla-info, lt-sla-title, lt-sla-bar,
  lt-sla-fill, lt-sla-meta, lt-sla-dismiss
- Light theme overrides included
- Demo section added to base.html with dismiss wiring

Progress bar gradient fills:
- Default (orange), --cyan, --green, --red variants now use
  linear-gradient fills instead of flat accent colors for more
  dramatic terminal readout appearance

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

base.html

@@ -932,6 +932,29 @@
           </div>
         </div>
 
+        <!-- SLA BANNERS -->
+        <div class="lt-section-header">SLA Banners</div>
+        <div class="lt-section-body" style="display:flex;flex-direction:column;gap:var(--space-sm)">
+          <div class="lt-sla-p1" role="alert">
+            <span class="lt-sla-icon" aria-hidden="true">🔴</span>
+            <div class="lt-sla-info">
+              <div class="lt-sla-title">⚠ P1 Critical — SLA: 6h 42m elapsed of 8h limit</div>
+              <div class="lt-sla-bar"><div class="lt-sla-fill" style="width:84%"></div></div>
+            </div>
+            <div class="lt-sla-meta">Storage array link-down · #123456789</div>
+            <button type="button" class="lt-sla-dismiss" aria-label="Dismiss">✕</button>
+          </div>
+          <div class="lt-sla-p2" role="alert">
+            <span class="lt-sla-icon" aria-hidden="true">🟠</span>
+            <div class="lt-sla-info">
+              <div class="lt-sla-title">P2 High — SLA: 9h 37m elapsed of 24h limit</div>
+              <div class="lt-sla-bar"><div class="lt-sla-fill" style="width:40%"></div></div>
+            </div>
+            <div class="lt-sla-meta">Switch port flapping · #987654321</div>
+            <button type="button" class="lt-sla-dismiss" aria-label="Dismiss">✕</button>
+          </div>
+        </div>
+
         <!-- TOGGLES, RANGE, TAGS -->
         <div class="lt-section-header">Toggles / Range / Tags</div>
         <div class="lt-section-body" style="display:flex;flex-direction:column;gap:var(--space-lg)">
@@ -1978,6 +2001,14 @@ Storage array link-down on `compute-storage-01`.
         });
       });
 
+      // SLA dismiss buttons
+      document.querySelectorAll('.lt-sla-dismiss').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const banner = btn.closest('.lt-sla-p1, .lt-sla-p2');
+          if (banner) banner.remove();
+        });
+      });
+
       // Footer year
       const footerYear = document.getElementById('footer-year');
       if (footerYear) footerYear.textContent = new Date().getFullYear();