feat(dashboard): add real system metrics endpoint and fix UI dark-theme issues

- Add /api/system/metrics endpoint reading real data from /proc (CPU, memory, disk, network, load avg, uptime, connections)
- Replace hardcoded fake monitoring metrics with live API data
- Replace random chart data with real latency/error-rate/client-request charts from DB logs
- Fix light-mode colors leaking into dark theme (monitoring stream bg, settings tokens, warning card)
- Add 'models' to page title map, fix System Health card structure
- Move inline styles to CSS classes (monitoring-layout, monitoring-stream, token-item, warning-card)
- Prevent duplicate style injection in monitoring page

static/js/dashboard.js

@@ -101,7 +101,8 @@ class Dashboard {
             'providers': 'Providers',
             'monitoring': 'Monitoring',
             'settings': 'Settings',
-            'logs': 'Logs'
+            'logs': 'Logs',
+            'models': 'Models'
         };
         if (titleElement) titleElement.textContent = titles[page] || 'Dashboard';
 
@@ -193,8 +194,10 @@ class Dashboard {
             </div>
             <div class="grid-2">
                 <div class="card">
-                    <h3 class="card-title">System Health</h3>
-                    <div id="system-health" style="margin-top: 1rem;"></div>
+                    <div class="card-header">
+                        <h3 class="card-title">System Health</h3>
+                    </div>
+                    <div class="card-body" id="system-health"></div>
                 </div>
                 <div class="card">
                     <div class="card-header">
@@ -400,10 +403,10 @@ class Dashboard {
                         <i class="fas fa-pause"></i> Pause Stream
                     </button>
                 </div>
-                <div class="grid-2" style="display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem;">
+                <div class="monitoring-layout">
                     <div>
                         <h4>Incoming Requests</h4>
-                        <div id="request-stream" class="monitoring-stream" style="height: 400px; overflow-y: auto; background: #f8fafc; border-radius: 8px; margin-top: 1rem; padding: 1rem;"></div>
+                        <div id="request-stream" class="monitoring-stream"></div>
                     </div>
                     <div>
                         <h4>System Performance</h4>
@@ -411,7 +414,7 @@ class Dashboard {
                     </div>
                 </div>
             </div>
-            <div class="grid-3" style="margin-top: 1.5rem;">
+            <div class="grid-3 monitoring-charts">
                 <div class="chart-container">
                     <h3 class="card-title">Latency (ms)</h3>
                     <canvas id="response-time-chart" height="200"></canvas>