From 622a6a9204d95e0ed18602d64a797c01ddf998bb Mon Sep 17 00:00:00 2001
From: Alexander Whitestone
 <8633216+AlexanderWhitestone@users.noreply.github.com>
Date: Wed, 11 Mar 2026 09:52:57 -0400
Subject: [PATCH] polish: extract inline CSS, add connection status, panel
 macro, favicon, ollama cache, toast system (#164)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Major:
- Extract all inline <style> blocks from 22 Jinja2 templates into
  static/css/mission-control.css — single cacheable stylesheet
- Add tox lint check that fails on inline <style> in templates

Minor:
1. Connection status indicator in topbar (green/amber/red dot) reflecting
   WebSocket + Ollama reachability, with auto-reconnect
2. Jinja2 {% macro panel(title) %} in macros.html — eliminates repeated
   .card.mc-panel markup; index.html converted as example
3. SVG favicon (purple T + orange dot)
4. 30-second TTL cache on _check_ollama() to avoid blocking the event loop
   on every health poll (asyncio.to_thread was already in place)
5. Toast notification system (McToast.show) for transient status messages —
   wired into connection status for Ollama/WebSocket state changes

Enforcement:
- CLAUDE.md updated with conventions 11-14 (no inline CSS, use panel macro,
  use toasts, never block the event loop)
- tox lint + pre-push environments now fail on inline <style> blocks

https://claude.ai/code/session_014FQ785MQdyJQ4BAXrRSo9w

Co-authored-by: Claude <noreply@anthropic.com>
---
 CLAUDE.md                                     |   46 +
 src/dashboard/routes/health.py                |   26 +-
 src/dashboard/templates/base.html             |  103 +
 src/dashboard/templates/briefing.html         |  145 +-
 src/dashboard/templates/calm/calm_view.html   |   63 +-
 .../calm/evening_ritual_complete.html         |   10 +-
 .../templates/calm/evening_ritual_form.html   |   20 +-
 .../templates/calm/morning_ritual_form.html   |   23 +-
 src/dashboard/templates/creative.html         |   69 +-
 src/dashboard/templates/experiments.html      |   22 +-
 src/dashboard/templates/hands.html            |   46 +-
 src/dashboard/templates/index.html            |   29 +-
 src/dashboard/templates/macros.html           |   28 +
 src/dashboard/templates/marketplace.html      |   70 +-
 src/dashboard/templates/mobile.html           |  143 +-
 src/dashboard/templates/mobile_local.html     |  242 +--
 src/dashboard/templates/router_status.html    |   91 -
 src/dashboard/templates/self_coding.html      |   53 -
 src/dashboard/templates/spark.html            |  284 +--
 src/dashboard/templates/swarm_live.html       |  119 +-
 src/dashboard/templates/tasks.html            |  190 +-
 src/dashboard/templates/thinking.html         |   92 +-
 src/dashboard/templates/tools.html            |   61 +-
 src/dashboard/templates/upgrade_queue.html    |  109 -
 src/dashboard/templates/voice_button.html     |   92 +-
 src/dashboard/templates/voice_enhanced.html   |  105 +-
 static/css/mission-control.css                | 1926 +++++++++++++++++
 static/favicon.svg                            |    5 +
 tests/dashboard/test_local_models.py          |   18 +-
 tox.ini                                       |    6 +-
 30 files changed, 2171 insertions(+), 2065 deletions(-)
 create mode 100644 src/dashboard/templates/macros.html
 create mode 100644 static/css/mission-control.css
 create mode 100644 static/favicon.svg

diff --git a/CLAUDE.md b/CLAUDE.md
index 0ddcf022..32a6c76e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -104,6 +104,52 @@ tox -e dev              # Start dashboard with auto-reload
 8. **Prefer editing existing files** over creating new ones.
 9. **Use `from config import settings`** for all env-var access.
 10. **Use tox for everything.** Never run `poetry run` directly — use `tox -e <env>`.
+11. **No inline CSS in templates.** All styles go in `static/style.css` (base theme) or `static/css/mission-control.css` (page-specific). `{% block extra_styles %}` must stay empty. If you need new styles, append them to the appropriate CSS file.
+12. **Use the panel macro** for repeated `.card.mc-panel` markup: `{% from "macros.html" import panel %}` / `{% call panel("TITLE") %}...{% endcall %}`. See `macros.html` for kwargs (id, hx_get, etc.).
+13. **Toast for transient messages.** Use `McToast.show(msg, level)` (info/warn/error) instead of rendering errors inline in the chat log. The toast container lives in `base.html`.
+14. **Never block the event loop.** Wrap synchronous I/O (HTTP calls, file reads) in `asyncio.to_thread()`. Cache health-check results with a TTL when polling external services.
+
+---
+
+## Frontend Architecture
+
+### Stylesheets
+
+| File | Purpose |
+|------|---------|
+| `static/style.css` | Base theme: palette, layout, header, chat, Bootstrap overrides, mobile breakpoints |
+| `static/css/mission-control.css` | Page-specific styles (tasks, briefing, swarm, calm, etc.), toast system, connection indicator |
+
+**Rule:** No `<style>` blocks in Jinja2 templates. All CSS lives in the two static files above. The `{% block extra_styles %}` hook exists for emergencies only and must remain empty in committed code.
+
+### CSS custom properties
+
+Defined in `:root` in `style.css`. Use these — never hard-code colours:
+
+```css
+var(--green)  var(--amber)  var(--red)  var(--purple)  var(--orange)
+var(--text-bright)  var(--text)  var(--text-dim)
+var(--bg-deep)  var(--bg-panel)  var(--bg-card)  var(--border)
+```
+
+### Jinja2 macros
+
+`src/dashboard/templates/macros.html` — reusable components:
+
+```jinja2
+{% from "macros.html" import panel %}
+{% call panel("TITLE", hx_get="/endpoint", hx_trigger="every 10s") %}
+  <p>Panel body content</p>
+{% endcall %}
+```
+
+### Toast notifications (JS)
+
+```javascript
+McToast.show('Ollama reconnected', 'info');   // green border
+McToast.show('Connection lost', 'warn');       // amber border
+McToast.show('Request failed', 'error');       // red border
+```
 
 ---
 
diff --git a/src/dashboard/routes/health.py b/src/dashboard/routes/health.py
index cb151e4f..1bf24869 100644
--- a/src/dashboard/routes/health.py
+++ b/src/dashboard/routes/health.py
@@ -6,6 +6,7 @@ for the Mission Control dashboard.
 
 import asyncio
 import logging
+import time
 from datetime import datetime, timezone
 from typing import Any
 
@@ -50,6 +51,11 @@ class HealthStatus(BaseModel):
 # Simple uptime tracking
 _START_TIME = datetime.now(timezone.utc)
 
+# Ollama health cache (30-second TTL)
+_ollama_cache: DependencyStatus | None = None
+_ollama_cache_ts: float = 0.0
+_OLLAMA_CACHE_TTL = 30.0
+
 
 def _check_ollama_sync() -> DependencyStatus:
     """Synchronous Ollama check — run via asyncio.to_thread()."""
@@ -82,17 +88,31 @@ def _check_ollama_sync() -> DependencyStatus:
 
 
 async def _check_ollama() -> DependencyStatus:
-    """Check Ollama AI backend status without blocking the event loop."""
+    """Check Ollama AI backend status without blocking the event loop.
+
+    Results are cached for 30 seconds to avoid hammering a slow/unreachable
+    Ollama instance on every health poll.
+    """
+    global _ollama_cache, _ollama_cache_ts  # noqa: PLW0603
+
+    now = time.monotonic()
+    if _ollama_cache is not None and (now - _ollama_cache_ts) < _OLLAMA_CACHE_TTL:
+        return _ollama_cache
+
     try:
-        return await asyncio.to_thread(_check_ollama_sync)
+        result = await asyncio.to_thread(_check_ollama_sync)
     except Exception:
-        return DependencyStatus(
+        result = DependencyStatus(
             name="Ollama AI",
             status="unavailable",
             sovereignty_score=10,
             details={"url": settings.ollama_url, "error": "Cannot connect to Ollama"},
         )
 
+    _ollama_cache = result
+    _ollama_cache_ts = now
+    return result
+
 
 async def check_ollama() -> bool:
     """Legacy bool check — used by health_check endpoint."""
diff --git a/src/dashboard/templates/base.html b/src/dashboard/templates/base.html
index a0d08d3a..8273cac0 100644
--- a/src/dashboard/templates/base.html
+++ b/src/dashboard/templates/base.html
@@ -12,7 +12,9 @@
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
+  <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
   <link rel="stylesheet" href="/static/style.css?v=5" />
+  <link rel="stylesheet" href="/static/css/mission-control.css?v=1" />
   {% block extra_styles %}{% endblock %}
   <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.3/dist/htmx.min.js" crossorigin="anonymous"></script>
   <script>
@@ -31,6 +33,10 @@
     <div class="mc-header-left">
       <a href="/" class="mc-title">MISSION CONTROL</a>
       <span class="mc-subtitle">MISSION CONTROL</span>
+      <span class="mc-conn-status" id="conn-status">
+        <span class="mc-conn-dot red" id="conn-dot"></span>
+        <span id="conn-label">OFFLINE</span>
+      </span>
     </div>
 
     <!-- Desktop nav -->
@@ -121,6 +127,9 @@
     </div>
   </nav>
 
+  <!-- Toast container -->
+  <div class="mc-toast-container" id="toast-container"></div>
+
   <main class="mc-main">
     {% block content %}{% endblock %}
   </main>
@@ -206,6 +215,100 @@
         .catch(function() {});
     }
   </script>
+  <!-- Toast + connection status system -->
+  <script>
+    // ── Toast notifications ──
+    window.McToast = {
+      show: function(message, level) {
+        level = level || 'info';
+        var container = document.getElementById('toast-container');
+        if (!container) return;
+        var toast = document.createElement('div');
+        toast.className = 'mc-toast ' + level;
+        toast.textContent = message;
+        container.appendChild(toast);
+        requestAnimationFrame(function() {
+          toast.classList.add('show');
+        });
+        setTimeout(function() {
+          toast.classList.remove('show');
+          setTimeout(function() { toast.remove(); }, 300);
+        }, 4000);
+      }
+    };
+
+    // ── Global connection status ──
+    (function() {
+      var dot = document.getElementById('conn-dot');
+      var label = document.getElementById('conn-label');
+      var wsConnected = false;
+      var ollamaOk = null;   // null = unknown, true/false
+
+      function updateIndicator() {
+        if (!dot || !label) return;
+        if (!wsConnected) {
+          dot.className = 'mc-conn-dot red';
+          label.textContent = 'OFFLINE';
+        } else if (ollamaOk === false) {
+          dot.className = 'mc-conn-dot amber';
+          label.textContent = 'NO LLM';
+        } else {
+          dot.className = 'mc-conn-dot green';
+          label.textContent = 'LIVE';
+        }
+      }
+
+      function checkOllama() {
+        fetch('/health')
+          .then(function(r) { return r.json(); })
+          .then(function(data) {
+            var prev = ollamaOk;
+            ollamaOk = data.services && data.services.ollama === 'up';
+            updateIndicator();
+            if (prev === false && ollamaOk) {
+              McToast.show('Ollama reconnected', 'info');
+            } else if (prev === true && !ollamaOk) {
+              McToast.show('Ollama unreachable', 'warn');
+            }
+          })
+          .catch(function() {
+            ollamaOk = false;
+            updateIndicator();
+          });
+      }
+
+      var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      var reconnectDelay = 1000;
+
+      function connectStatusWs() {
+        var ws;
+        try {
+          ws = new WebSocket(protocol + '//' + window.location.host + '/swarm/live');
+        } catch(e) { return; }
+
+        ws.onopen = function() {
+          wsConnected = true;
+          reconnectDelay = 1000;
+          updateIndicator();
+          checkOllama();
+        };
+        ws.onclose = function() {
+          if (wsConnected) {
+            McToast.show('WebSocket disconnected', 'error');
+          }
+          wsConnected = false;
+          updateIndicator();
+          setTimeout(connectStatusWs, reconnectDelay);
+          reconnectDelay = Math.min(reconnectDelay * 2, 30000);
+        };
+        ws.onerror = function() {};
+      }
+
+      connectStatusWs();
+      // Poll Ollama health every 30s
+      setInterval(checkOllama, 30000);
+    })();
+  </script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   <script src="/static/notifications.js"></script>
 </body>
diff --git a/src/dashboard/templates/briefing.html b/src/dashboard/templates/briefing.html
index 1fb98a34..1fc438f8 100644
--- a/src/dashboard/templates/briefing.html
+++ b/src/dashboard/templates/briefing.html
@@ -2,150 +2,7 @@
 
 {% block title %}Morning Briefing{% endblock %}
 
-{% block extra_styles %}
-<style>
-/* ── Briefing-specific styles ── */
-
-.briefing-container { max-width: 680px; }
-
-.briefing-header {
-  border-left: 3px solid var(--amber);
-  padding-left: 1rem;
-}
-.briefing-greeting {
-  font-size: 1.6rem;
-  font-weight: 700;
-  color: var(--amber);
-  letter-spacing: 0.04em;
-  font-family: var(--font);
-}
-.briefing-timestamp {
-  font-size: 0.75rem;
-  color: var(--text-dim);
-  margin-top: 0.25rem;
-}
-.briefing-ts-val { color: var(--text); }
-
-.briefing-prose {
-  font-size: 1rem;
-  line-height: 1.75;
-  color: var(--text-bright);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* Approval cards */
-.approval-card {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 1rem;
-  margin-bottom: 0.75rem;
-  background: rgba(24, 10, 45, 0.5);
-  transition: border-color 0.2s;
-}
-.approval-card.approved {
-  border-color: var(--green);
-  opacity: 0.7;
-}
-.approval-card.rejected {
-  border-color: var(--red);
-  opacity: 0.7;
-}
-.approval-card-title {
-  font-weight: 600;
-  font-size: 0.95rem;
-  color: var(--text-bright);
-  margin-bottom: 0.25rem;
-}
-.approval-card-desc {
-  font-size: 0.85rem;
-  color: var(--text);
-  margin-bottom: 0.5rem;
-}
-.approval-card-action {
-  font-size: 0.8rem;
-  color: var(--text-dim);
-  font-family: var(--font);
-  margin-bottom: 0.75rem;
-  border-left: 2px solid var(--border);
-  padding-left: 0.5rem;
-}
-
-.impact-badge {
-  font-size: 0.7rem;
-  padding: 0.2em 0.5em;
-  border-radius: 4px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.impact-low    { background: var(--green-dim); color: var(--green); }
-.impact-medium { background: var(--amber-dim); color: var(--amber); }
-.impact-high   { background: var(--red-dim);   color: var(--red); }
-
-.approval-actions {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-.btn-approve {
-  background: var(--green-dim);
-  color: var(--green);
-  border: 1px solid var(--green);
-  border-radius: var(--radius-sm);
-  padding: 0.4rem 0.9rem;
-  font-size: 0.82rem;
-  font-family: var(--font);
-  cursor: pointer;
-  min-height: 44px;
-  transition: background 0.15s;
-  touch-action: manipulation;
-}
-.btn-approve:hover { background: rgba(0, 232, 122, 0.2); }
-
-.btn-reject {
-  background: transparent;
-  color: var(--red);
-  border: 1px solid var(--red);
-  border-radius: var(--radius-sm);
-  padding: 0.4rem 0.9rem;
-  font-size: 0.82rem;
-  font-family: var(--font);
-  cursor: pointer;
-  min-height: 44px;
-  transition: background 0.15s;
-  touch-action: manipulation;
-}
-.btn-reject:hover { background: rgba(255, 68, 85, 0.1); }
-
-.no-approvals {
-  text-align: center;
-  color: var(--text-dim);
-  padding: 2rem 0;
-  font-size: 0.9rem;
-}
-
-.btn-refresh {
-  background: transparent;
-  color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 0.3rem 0.7rem;
-  font-size: 0.75rem;
-  font-family: var(--font);
-  cursor: pointer;
-  text-decoration: none;
-  display: inline-block;
-  transition: border-color 0.15s;
-}
-.btn-refresh:hover { border-color: var(--purple); color: var(--text-bright); }
-
-@media (max-width: 576px) {
-  .briefing-greeting { font-size: 1.3rem; }
-  .briefing-prose    { font-size: 0.95rem; }
-}
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="container briefing-container py-4">
diff --git a/src/dashboard/templates/calm/calm_view.html b/src/dashboard/templates/calm/calm_view.html
index 5e5ee081..7c9a2ccd 100644
--- a/src/dashboard/templates/calm/calm_view.html
+++ b/src/dashboard/templates/calm/calm_view.html
@@ -3,68 +3,7 @@
 
 {% block title %}Timmy Calm{% endblock %}
 
-{% block extra_styles %}
-<style>
-    .calm-container { max-width: 600px; margin: 0 auto; padding: 20px; }
-    .calm-header { text-align: center; margin-bottom: 30px; }
-    .calm-title { font-size: 2.5rem; font-weight: 700; color: var(--text-bright); letter-spacing: 0.05em; }
-    .calm-subtitle { font-size: 1.1rem; color: var(--text-dim); margin-top: 5px; }
-
-    .task-card {
-        background: var(--bg-secondary);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-lg);
-        padding: 25px;
-        margin-bottom: 20px;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-        transition: all 0.3s ease;
-    }
-    .task-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
-
-    .now-card {
-        background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(124, 58, 237, 0.1) 100%);
-        border-color: rgba(124, 58, 237, 0.4);
-    }
-    .now-card .task-title { font-size: 2.2rem; font-weight: 800; color: var(--green); margin-bottom: 15px; }
-    .now-card .task-description { font-size: 1.1rem; color: var(--text); line-height: 1.6; margin-bottom: 20px; }
-    .now-card .task-actions { display: flex; gap: 15px; justify-content: center; }
-    .now-card .task-btn { padding: 12px 25px; font-size: 1rem; font-weight: 700; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; }
-    .now-card .task-btn-complete { background: var(--green); color: var(--bg-secondary); border: none; }
-    .now-card .task-btn-complete:hover { background: var(--green-dark); }
-    .now-card .task-btn-defer { background: var(--bg-tertiary); color: var(--text); border: 1px solid var(--border); }
-    .now-card .task-btn-defer:hover { background: var(--bg-tertiary-hover); }
-
-    .next-card {
-        background: var(--bg-tertiary);
-        border-color: var(--border);
-        padding: 15px 20px;
-    }
-    .next-card .task-title { font-size: 1.3rem; font-weight: 600; color: var(--info); margin-bottom: 5px; }
-    .next-card .task-description { font-size: 0.9rem; color: var(--text-dim); max-height: 40px; overflow: hidden; }
-
-    .later-section {
-        background: var(--bg-tertiary);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-lg);
-        margin-top: 20px;
-    }
-    .later-summary { padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: var(--text-bright); }
-    .later-summary:hover { background: var(--bg-tertiary-hover); border-radius: var(--radius-lg); }
-    .later-content { padding: 10px 20px 20px; border-top: 1px solid var(--border); }
-    .later-task-item { padding: 8px 0; border-bottom: 1px dashed var(--border); display: flex; justify-content: space-between; align-items: center; }
-    .later-task-item:last-child { border-bottom: none; }
-    .later-task-title { font-size: 0.95rem; color: var(--text); }
-    .later-task-actions .task-btn { font-size: 0.75rem; padding: 5px 10px; }
-
-    .empty-state { text-align: center; color: var(--text-dim); padding: 40px 20px; font-size: 1rem; }
-
-    .ritual-btn { display: block; width: fit-content; margin: 20px auto; padding: 10px 20px; background: var(--purple); color: white; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; }
-    .ritual-btn:hover { opacity: 0.9; }
-
-    /* Inter font - assuming it's available or linked in base.html */
-    body { font-family: 'Inter', sans-serif; }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="calm-container py-3">
diff --git a/src/dashboard/templates/calm/evening_ritual_complete.html b/src/dashboard/templates/calm/evening_ritual_complete.html
index 181a457e..1c6fc822 100644
--- a/src/dashboard/templates/calm/evening_ritual_complete.html
+++ b/src/dashboard/templates/calm/evening_ritual_complete.html
@@ -3,15 +3,7 @@
 
 {% block title %}Evening Ritual Complete - Timmy Calm{% endblock %}
 
-{% block extra_styles %}
-<style>
-    .ritual-container { max-width: 700px; margin: 0 auto; padding: 30px; background: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: 0 5px 20px rgba(0,0,0,0.2); text-align: center; }
-    .ritual-title { font-size: 2rem; font-weight: 700; color: var(--green); margin-bottom: 20px; }
-    .ritual-message { font-size: 1.1rem; color: var(--text); line-height: 1.6; margin-bottom: 30px; }
-    .ritual-btn { display: inline-block; padding: 12px 25px; font-size: 1rem; font-weight: 700; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; border: none; background: var(--purple); color: white; text-decoration: none; }
-    .ritual-btn:hover { opacity: 0.9; }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="ritual-container">
diff --git a/src/dashboard/templates/calm/evening_ritual_form.html b/src/dashboard/templates/calm/evening_ritual_form.html
index d797aea7..a431b2ea 100644
--- a/src/dashboard/templates/calm/evening_ritual_form.html
+++ b/src/dashboard/templates/calm/evening_ritual_form.html
@@ -3,25 +3,7 @@
 
 {% block title %}Evening Ritual - Timmy Calm{% endblock %}
 
-{% block extra_styles %}
-<style>
-    .ritual-container { max-width: 700px; margin: 0 auto; padding: 30px; background: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
-    .ritual-header { text-align: center; margin-bottom: 30px; }
-    .ritual-title { font-size: 2rem; font-weight: 700; color: var(--text-bright); margin-bottom: 10px; }
-    .ritual-subtitle { font-size: 1rem; color: var(--text-dim); line-height: 1.5; }
-
-    .form-group { margin-bottom: 20px; }
-    .form-group label { display: block; font-size: 0.9rem; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
-    .form-group input[type="text"], .form-group textarea, .form-group input[type="number"] { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-tertiary); color: var(--text); font-size: 1rem; }
-    .form-group textarea { min-height: 100px; resize: vertical; }
-    .form-group input[type="text"]:focus, .form-group textarea:focus, .form-group input[type="number"]:focus { border-color: var(--purple); outline: none; box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2); }
-
-    .form-actions { display: flex; justify-content: flex-end; margin-top: 30px; }
-    .form-actions button { padding: 12px 25px; font-size: 1rem; font-weight: 700; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; border: none; }
-    .form-actions .btn-submit { background: var(--green); color: var(--bg-secondary); }
-    .form-actions .btn-submit:hover { background: var(--green-dark); }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="ritual-container">
diff --git a/src/dashboard/templates/calm/morning_ritual_form.html b/src/dashboard/templates/calm/morning_ritual_form.html
index 40428979..ffa5d708 100644
--- a/src/dashboard/templates/calm/morning_ritual_form.html
+++ b/src/dashboard/templates/calm/morning_ritual_form.html
@@ -3,28 +3,7 @@
 
 {% block title %}Morning Ritual - Timmy Calm{% endblock %}
 
-{% block extra_styles %}
-<style>
-    .ritual-container { max-width: 700px; margin: 0 auto; padding: 30px; background: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
-    .ritual-header { text-align: center; margin-bottom: 30px; }
-    .ritual-title { font-size: 2rem; font-weight: 700; color: var(--text-bright); margin-bottom: 10px; }
-    .ritual-subtitle { font-size: 1rem; color: var(--text-dim); line-height: 1.5; }
-
-    .form-group { margin-bottom: 20px; }
-    .form-group label { display: block; font-size: 0.9rem; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
-    .form-group input[type="text"], .form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-tertiary); color: var(--text); font-size: 1rem; }
-    .form-group textarea { min-height: 100px; resize: vertical; }
-    .form-group input[type="text"]:focus, .form-group textarea:focus { border-color: var(--purple); outline: none; box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2); }
-
-    .mit-section { border: 1px dashed var(--border); padding: 20px; border-radius: var(--radius-md); margin-top: 25px; background: rgba(124, 58, 237, 0.05); }
-    .mit-section h4 { color: var(--purple); margin-top: 0; margin-bottom: 15px; font-size: 1.1rem; }
-
-    .form-actions { display: flex; justify-content: flex-end; margin-top: 30px; }
-    .form-actions button { padding: 12px 25px; font-size: 1rem; font-weight: 700; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; border: none; }
-    .form-actions .btn-submit { background: var(--green); color: var(--bg-secondary); }
-    .form-actions .btn-submit:hover { background: var(--green-dark); }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="ritual-container">
diff --git a/src/dashboard/templates/creative.html b/src/dashboard/templates/creative.html
index df0d1fcf..27386cf1 100644
--- a/src/dashboard/templates/creative.html
+++ b/src/dashboard/templates/creative.html
@@ -2,74 +2,7 @@
 
 {% block title %}Creative Studio — Mission Control{% endblock %}
 
-{% block extra_styles %}
-<style>
-  .creative-container { max-width: 1200px; margin: 0 auto; }
-
-  .creative-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 20px;
-  }
-  .creative-title {
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: var(--text-bright);
-    letter-spacing: 0.08em;
-  }
-  .creative-subtitle {
-    font-size: 0.8rem;
-    color: var(--text-dim);
-    margin-top: 2px;
-  }
-  .creative-stats {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
-  .creative-stat-box {
-    background: var(--glass-bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: 8px 14px;
-    text-align: center;
-    min-width: 60px;
-  }
-  .creative-stat-val {
-    font-size: 1.1rem;
-    font-weight: 700;
-    color: var(--text-bright);
-  }
-  .creative-stat-label {
-    font-size: 0.6rem;
-    color: var(--text-dim);
-    letter-spacing: 0.06em;
-  }
-
-  .persona-card .card-header strong { color: var(--text-bright); }
-  .persona-card .card-body { font-size: 0.85rem; }
-  .persona-card .card-body p { color: var(--text-dim); }
-
-  .pipeline-badge {
-    display: inline-block;
-    font-size: 0.7rem;
-    padding: 2px 8px;
-    border-radius: 3px;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-  }
-
-  @media (max-width: 768px) {
-    .creative-title { font-size: 1.1rem; }
-    .creative-header { flex-direction: column; }
-    .creative-stats { width: 100%; }
-    .creative-stat-box { flex: 1; }
-  }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="creative-container py-3">
diff --git a/src/dashboard/templates/experiments.html b/src/dashboard/templates/experiments.html
index d5fc330e..e4ddfcd5 100644
--- a/src/dashboard/templates/experiments.html
+++ b/src/dashboard/templates/experiments.html
@@ -2,27 +2,7 @@
 
 {% block title %}{{ page_title }}{% endblock %}
 
-{% block extra_styles %}
-<style>
-  .experiments-container { max-width: 1000px; margin: 0 auto; }
-  .exp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
-  .exp-title { font-size: 1.3rem; font-weight: 700; color: var(--text-bright); }
-  .exp-subtitle { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
-  .exp-config { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-dim); }
-  .exp-config span { background: var(--glass-bg); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; }
-  .exp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
-  .exp-table th { text-align: left; padding: 8px 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 600; }
-  .exp-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
-  .exp-table tr:hover { background: var(--glass-bg); }
-  .metric-good { color: var(--success); }
-  .metric-bad { color: var(--danger); }
-  .btn-start { background: var(--accent); color: #fff; border: none; padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
-  .btn-start:hover { opacity: 0.9; }
-  .btn-start:disabled { opacity: 0.4; cursor: not-allowed; }
-  .disabled-note { font-size: 0.8rem; color: var(--text-dim); margin-top: 8px; }
-  .empty-state { text-align: center; padding: 40px; color: var(--text-dim); }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="experiments-container">
diff --git a/src/dashboard/templates/hands.html b/src/dashboard/templates/hands.html
index 8c19133a..cd3e0057 100644
--- a/src/dashboard/templates/hands.html
+++ b/src/dashboard/templates/hands.html
@@ -2,6 +2,8 @@
 
 {% block title %}Hands — Timmy Time{% endblock %}
 
+{% block extra_styles %}{% endblock %}
+
 {% block content %}
 <div class="container-fluid py-4">
   <!-- Header -->
@@ -87,48 +89,4 @@
   </div>
 </div>
 
-<style>
-.hand-card {
-  transition: all 0.2s ease;
-  border-left: 3px solid transparent;
-}
-
-.hand-card:hover {
-  background-color: rgba(255, 255, 255, 0.03);
-}
-
-.hand-card.running {
-  border-left-color: #0dcaf0;
-}
-
-.hand-card.scheduled {
-  border-left-color: #198754;
-}
-
-.hand-card.paused {
-  border-left-color: #ffc107;
-}
-
-.hand-card.error {
-  border-left-color: #dc3545;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.status-dot.running { background-color: #0dcaf0; animation: pulse 1.5s infinite; }
-.status-dot.scheduled { background-color: #198754; }
-.status-dot.paused { background-color: #ffc107; }
-.status-dot.error { background-color: #dc3545; }
-.status-dot.idle { background-color: #6c757d; }
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-</style>
 {% endblock %}
diff --git a/src/dashboard/templates/index.html b/src/dashboard/templates/index.html
index daf07f75..4f3b2d15 100644
--- a/src/dashboard/templates/index.html
+++ b/src/dashboard/templates/index.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% from "macros.html" import panel %}
 
 {% block content %}
 
@@ -9,30 +10,16 @@
     <div class="col-12 col-md-3 d-flex flex-column gap-3 mc-sidebar">
 
       <!-- Agents (HTMX-polled from registry) -->
-      <div class="card mc-panel"
-           hx-get="/swarm/agents/sidebar"
-           hx-trigger="every 10s"
-           hx-target="this"
-           hx-swap="innerHTML">
-        <div class="card-header mc-panel-header">// AGENTS</div>
-        <div class="card-body p-3">
-          <div style="font-size:11px; color:var(--text-dim); letter-spacing:.08em;">LOADING...</div>
-        </div>
-      </div>
+      {% call panel("AGENTS", hx_get="/swarm/agents/sidebar", hx_trigger="every 10s") %}
+        <div style="font-size:11px; color:var(--text-dim); letter-spacing:.08em;">LOADING...</div>
+      {% endcall %}
 
       <!-- System Health (HTMX polled) -->
-      <div class="card mc-panel"
-           hx-get="/health/status"
-           hx-trigger="every 30s"
-           hx-target="this"
-           hx-swap="innerHTML">
-        <div class="card-header mc-panel-header">// SYSTEM HEALTH</div>
-        <div class="card-body p-3">
-          <div class="health-row">
-            <span class="health-label">LOADING...</span>
-          </div>
+      {% call panel("SYSTEM HEALTH", hx_get="/health/status", hx_trigger="every 30s") %}
+        <div class="health-row">
+          <span class="health-label">LOADING...</span>
         </div>
-      </div>
+      {% endcall %}
 
     </div>
 
diff --git a/src/dashboard/templates/macros.html b/src/dashboard/templates/macros.html
new file mode 100644
index 00000000..156a804c
--- /dev/null
+++ b/src/dashboard/templates/macros.html
@@ -0,0 +1,28 @@
+{# ── Reusable component macros ─────────────────────────────
+   Usage:
+     {% from "macros.html" import panel %}
+     {% call panel("SYSTEM HEALTH") %}
+       <p>Content here</p>
+     {% endcall %}
+
+   Optional kwargs:
+     id        – element id for HTMX targeting
+     classes   – extra CSS classes on the outer card
+     hx_get    – HTMX polling endpoint
+     hx_trigger – HTMX trigger (default: none)
+     hx_target – HTMX swap target (default: "this")
+     hx_swap   – HTMX swap strategy (default: "innerHTML")
+#}
+
+{% macro panel(title, id="", classes="", hx_get="", hx_trigger="", hx_target="this", hx_swap="innerHTML") %}
+<div class="card mc-panel {{ classes }}"
+  {%- if id %} id="{{ id }}"{% endif %}
+  {%- if hx_get %} hx-get="{{ hx_get }}"{% endif %}
+  {%- if hx_trigger %} hx-trigger="{{ hx_trigger }}"{% endif %}
+  {%- if hx_get %} hx-target="{{ hx_target }}" hx-swap="{{ hx_swap }}"{% endif %}>
+  <div class="card-header mc-panel-header">// {{ title }}</div>
+  <div class="card-body p-3">
+    {{ caller() }}
+  </div>
+</div>
+{% endmacro %}
diff --git a/src/dashboard/templates/marketplace.html b/src/dashboard/templates/marketplace.html
index 69b41aa2..1408ef74 100644
--- a/src/dashboard/templates/marketplace.html
+++ b/src/dashboard/templates/marketplace.html
@@ -2,75 +2,7 @@
 
 {% block title %}{{ page_title }}{% endblock %}
 
-{% block extra_styles %}
-<style>
-  .market-container { max-width: 1000px; margin: 0 auto; }
-
-  .market-header {
-    border-left: 3px solid var(--orange);
-    padding-left: 1rem;
-    margin-bottom: 20px;
-  }
-  .market-title {
-    font-size: 1.4rem;
-    font-weight: 700;
-    color: var(--text-bright);
-    letter-spacing: 0.08em;
-  }
-  .market-subtitle { font-size: 0.8rem; color: var(--text-dim); margin-top: 4px; }
-  .market-stats { font-size: 0.8rem; color: var(--text-dim); margin-top: 6px; }
-  .market-stats .up { color: var(--green); }
-
-  .market-agent {
-    display: flex;
-    align-items: flex-start;
-    gap: 14px;
-    padding: 16px;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    background: rgba(24, 10, 45, 0.6);
-    margin-bottom: 10px;
-    transition: border-color 0.2s;
-  }
-  .market-agent:hover { border-color: rgba(124, 58, 237, 0.3); }
-
-  .market-agent-price {
-    text-align: right;
-    min-width: 100px;
-    flex-shrink: 0;
-  }
-  .price-amount {
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: var(--orange);
-    font-family: var(--font);
-  }
-  .price-label { font-size: 0.7rem; color: var(--text-dim); }
-  .price-stat { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
-  .price-stat .earned { color: var(--green); }
-
-  .how-step {
-    text-align: center;
-    padding: 20px 12px;
-  }
-  .how-step-num {
-    font-size: 1.6rem;
-    font-weight: 700;
-    color: var(--purple);
-    margin-bottom: 8px;
-    font-family: var(--font);
-  }
-  .how-step h3 { font-size: 0.9rem; color: var(--text-bright); margin-bottom: 6px; }
-  .how-step p { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; }
-
-  @media (max-width: 768px) {
-    .market-title { font-size: 1.1rem; }
-    .market-agent { flex-direction: column; gap: 10px; }
-    .market-agent-price { text-align: left; min-width: unset; }
-    .price-amount { font-size: 1.1rem; }
-  }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="market-container py-3">
diff --git a/src/dashboard/templates/mobile.html b/src/dashboard/templates/mobile.html
index 1fdb6863..d74e0be3 100644
--- a/src/dashboard/templates/mobile.html
+++ b/src/dashboard/templates/mobile.html
@@ -2,148 +2,7 @@
 
 {% block title %}{{ page_title }}{% endblock %}
 
-{% block extra_styles %}
-<style>
-  @media (min-width: 769px) {
-    .mobile-only { display: none; }
-  }
-  @media (max-width: 768px) {
-    .desktop-message { display: none; }
-  }
-
-  .mobile-only {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding-bottom: 20px;
-  }
-
-  .quick-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
-    padding: 14px;
-  }
-
-  .quick-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    min-height: 52px;
-    border-radius: var(--radius-md);
-    font-family: var(--font);
-    font-size: 13px;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-decoration: none;
-    color: var(--text-bright);
-    border: 1px solid var(--border);
-    background: rgba(24, 10, 45, 0.6);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    transition: transform 0.1s, border-color 0.2s, box-shadow 0.2s;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-  }
-  .quick-btn:hover { color: var(--text-bright); text-decoration: none; }
-  .quick-btn:active { transform: scale(0.96); }
-  .quick-btn.voice {
-    border-color: var(--border-glow);
-    background: rgba(124, 58, 237, 0.15);
-  }
-  .quick-btn.voice:active {
-    box-shadow: 0 0 18px rgba(124, 58, 237, 0.3);
-  }
-
-  .mobile-chat-wrap {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-  .mobile-chat-log {
-    flex: 1;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    padding: 14px;
-    max-height: 300px;
-  }
-  .mobile-chat-input {
-    display: flex;
-    gap: 8px;
-    padding: 10px 14px;
-    padding-bottom: max(10px, env(safe-area-inset-bottom));
-    background: rgba(24, 10, 45, 0.9);
-    border-top: 1px solid var(--border);
-  }
-  .mobile-chat-input input {
-    flex: 1;
-    background: rgba(8, 4, 18, 0.75);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    color: var(--text-bright);
-    font-family: var(--font);
-    font-size: 16px;
-    padding: 10px 12px;
-    min-height: 44px;
-  }
-  .mobile-chat-input input:focus {
-    outline: none;
-    border-color: var(--border-glow);
-    box-shadow: 0 0 0 1px var(--border-glow), 0 0 8px rgba(124, 58, 237, 0.2);
-  }
-  .mobile-chat-input input::placeholder { color: var(--text-dim); }
-  .mobile-chat-input button {
-    background: var(--border-glow);
-    border: none;
-    border-radius: var(--radius-md);
-    color: var(--text-bright);
-    font-family: var(--font);
-    font-size: 12px;
-    font-weight: 700;
-    padding: 0 16px;
-    min-height: 44px;
-    letter-spacing: 0.1em;
-    transition: background 0.15s, transform 0.1s;
-    touch-action: manipulation;
-  }
-  .mobile-chat-input button:active { transform: scale(0.96); }
-
-  .mobile-agents-list {
-    padding: 14px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .mobile-chat-msg {
-    margin-bottom: 12px;
-  }
-  .mobile-chat-msg .meta {
-    font-size: 10px;
-    letter-spacing: 0.1em;
-    margin-bottom: 3px;
-  }
-  .mobile-chat-msg.user .meta { color: var(--orange); }
-  .mobile-chat-msg.timmy .meta { color: var(--purple); }
-  .mobile-chat-msg .bubble {
-    background: rgba(24, 10, 45, 0.8);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: 10px 12px;
-    font-size: 13px;
-    line-height: 1.6;
-    color: var(--text);
-  }
-  .mobile-chat-msg.timmy .bubble {
-    border-left: 3px solid var(--purple);
-  }
-  .mobile-chat-msg.user .bubble {
-    border-color: var(--border-glow);
-  }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="mobile-only">
diff --git a/src/dashboard/templates/mobile_local.html b/src/dashboard/templates/mobile_local.html
index b74b24af..67aa1e6a 100644
--- a/src/dashboard/templates/mobile_local.html
+++ b/src/dashboard/templates/mobile_local.html
@@ -2,247 +2,7 @@
 
 {% block title %}{{ page_title }}{% endblock %}
 
-{% block extra_styles %}
-<style>
-  .local-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding-bottom: 20px;
-    max-width: 600px;
-    margin: 0 auto;
-  }
-
-  /* ── Model status panel ────────────────────────────────────── */
-  .model-status {
-    padding: 14px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-  .model-status-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 11px;
-    letter-spacing: 0.08em;
-  }
-  .model-status-label { color: var(--text-dim); }
-  .model-status-value { color: var(--text-bright); font-weight: 600; }
-  .model-status-value.ready { color: #4ade80; }
-  .model-status-value.loading { color: #facc15; }
-  .model-status-value.error { color: #f87171; }
-  .model-status-value.offline { color: var(--text-dim); }
-
-  /* ── Progress bar ──────────────────────────────────────────── */
-  .progress-wrap {
-    display: none;
-    flex-direction: column;
-    gap: 6px;
-    padding: 0 14px 14px;
-  }
-  .progress-wrap.active { display: flex; }
-  .progress-bar-outer {
-    height: 6px;
-    background: rgba(8, 4, 18, 0.75);
-    border-radius: 3px;
-    overflow: hidden;
-  }
-  .progress-bar-inner {
-    height: 100%;
-    width: 0%;
-    background: linear-gradient(90deg, var(--border-glow), #a78bfa);
-    border-radius: 3px;
-    transition: width 0.3s;
-  }
-  .progress-text {
-    font-size: 10px;
-    color: var(--text-dim);
-    letter-spacing: 0.06em;
-    min-height: 14px;
-  }
-
-  /* ── Model selector ────────────────────────────────────────── */
-  .model-select-wrap {
-    padding: 0 14px 14px;
-  }
-  .model-select {
-    width: 100%;
-    background: rgba(8, 4, 18, 0.75);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    color: var(--text-bright);
-    font-family: var(--font);
-    font-size: 13px;
-    padding: 10px 12px;
-    min-height: 44px;
-    appearance: none;
-    -webkit-appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237c7c8a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 12px center;
-    touch-action: manipulation;
-  }
-  .model-select:focus {
-    outline: none;
-    border-color: var(--border-glow);
-  }
-
-  /* ── Action buttons ────────────────────────────────────────── */
-  .model-actions {
-    display: flex;
-    gap: 8px;
-    padding: 0 14px 14px;
-  }
-  .model-btn {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    min-height: 44px;
-    border-radius: var(--radius-md);
-    font-family: var(--font);
-    font-size: 12px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    border: 1px solid var(--border);
-    background: rgba(24, 10, 45, 0.6);
-    color: var(--text-bright);
-    cursor: pointer;
-    transition: transform 0.1s, border-color 0.2s;
-    touch-action: manipulation;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .model-btn:active { transform: scale(0.96); }
-  .model-btn.primary {
-    border-color: var(--border-glow);
-    background: rgba(124, 58, 237, 0.2);
-  }
-  .model-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  /* ── Chat area ─────────────────────────────────────────────── */
-  .local-chat-wrap {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-  .local-chat-log {
-    flex: 1;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    padding: 14px;
-    max-height: 400px;
-    min-height: 200px;
-  }
-  .local-chat-input {
-    display: flex;
-    gap: 8px;
-    padding: 10px 14px;
-    padding-bottom: max(10px, env(safe-area-inset-bottom));
-    background: rgba(24, 10, 45, 0.9);
-    border-top: 1px solid var(--border);
-  }
-  .local-chat-input input {
-    flex: 1;
-    background: rgba(8, 4, 18, 0.75);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    color: var(--text-bright);
-    font-family: var(--font);
-    font-size: 16px;
-    padding: 10px 12px;
-    min-height: 44px;
-  }
-  .local-chat-input input:focus {
-    outline: none;
-    border-color: var(--border-glow);
-    box-shadow: 0 0 0 1px var(--border-glow), 0 0 8px rgba(124, 58, 237, 0.2);
-  }
-  .local-chat-input input::placeholder { color: var(--text-dim); }
-  .local-chat-input button {
-    background: var(--border-glow);
-    border: none;
-    border-radius: var(--radius-md);
-    color: var(--text-bright);
-    font-family: var(--font);
-    font-size: 12px;
-    font-weight: 700;
-    padding: 0 16px;
-    min-height: 44px;
-    min-width: 64px;
-    letter-spacing: 0.1em;
-    transition: background 0.15s, transform 0.1s;
-    touch-action: manipulation;
-  }
-  .local-chat-input button:active { transform: scale(0.96); }
-  .local-chat-input button:disabled { opacity: 0.4; }
-
-  /* ── Chat messages ─────────────────────────────────────────── */
-  .local-msg { margin-bottom: 12px; }
-  .local-msg .meta {
-    font-size: 10px;
-    letter-spacing: 0.1em;
-    margin-bottom: 3px;
-  }
-  .local-msg.user .meta { color: var(--orange); }
-  .local-msg.timmy .meta { color: var(--purple); }
-  .local-msg.system .meta { color: var(--text-dim); }
-  .local-msg .bubble {
-    background: rgba(24, 10, 45, 0.8);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: 10px 12px;
-    font-size: 13px;
-    line-height: 1.6;
-    color: var(--text);
-    word-break: break-word;
-  }
-  .local-msg.timmy .bubble { border-left: 3px solid var(--purple); }
-  .local-msg.user .bubble { border-color: var(--border-glow); }
-  .local-msg.system .bubble {
-    border-color: transparent;
-    background: rgba(8, 4, 18, 0.5);
-    font-size: 11px;
-    color: var(--text-dim);
-  }
-
-  /* ── Backend badge ─────────────────────────────────────────── */
-  .backend-badge {
-    display: inline-block;
-    font-size: 9px;
-    letter-spacing: 0.1em;
-    padding: 2px 6px;
-    border-radius: 3px;
-    vertical-align: middle;
-    margin-left: 6px;
-  }
-  .backend-badge.local {
-    background: rgba(74, 222, 128, 0.15);
-    color: #4ade80;
-    border: 1px solid rgba(74, 222, 128, 0.3);
-  }
-  .backend-badge.server {
-    background: rgba(250, 204, 21, 0.15);
-    color: #facc15;
-    border: 1px solid rgba(250, 204, 21, 0.3);
-  }
-
-  /* ── Stats panel ───────────────────────────────────────────── */
-  .model-stats {
-    padding: 0 14px 14px;
-    font-size: 10px;
-    color: var(--text-dim);
-    letter-spacing: 0.06em;
-    display: none;
-  }
-  .model-stats.visible { display: block; }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="local-wrap">
diff --git a/src/dashboard/templates/router_status.html b/src/dashboard/templates/router_status.html
index 1f397729..ccc5126c 100644
--- a/src/dashboard/templates/router_status.html
+++ b/src/dashboard/templates/router_status.html
@@ -108,95 +108,4 @@
   {% endif %}
 </div>
 
-<style>
-.mc-providers-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
-.mc-provider-card {
-  background: rgba(10, 15, 30, 0.6);
-  border: 1px solid var(--mc-border);
-  border-radius: 0.5rem;
-  padding: 1rem;
-}
-
-.mc-provider-card.provider-healthy {
-  border-left: 4px solid #28a745;
-}
-
-.mc-provider-card.provider-degraded {
-  border-left: 4px solid #ffc107;
-}
-
-.mc-provider-card.provider-unhealthy {
-  border-left: 4px solid #dc3545;
-}
-
-.provider-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.provider-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-}
-
-.provider-meta {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-  font-size: 0.85rem;
-  color: var(--mc-text-secondary);
-}
-
-.provider-circuit {
-  font-size: 0.85rem;
-  margin-bottom: 0.75rem;
-  padding: 0.25rem 0.5rem;
-  background: rgba(0,0,0,0.3);
-  border-radius: 0.25rem;
-}
-
-.circuit-closed { color: #28a745; }
-.circuit-open { color: #dc3545; }
-.circuit-half_open { color: #ffc107; }
-
-.provider-metrics {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 0.5rem;
-  text-align: center;
-}
-
-.metric {
-  padding: 0.5rem;
-  background: rgba(0,0,0,0.2);
-  border-radius: 0.25rem;
-}
-
-.metric-value {
-  display: block;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--mc-gold);
-}
-
-.metric-label {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--mc-text-secondary);
-}
-
-.mc-alert-small {
-  margin-top: 0.75rem;
-  padding: 0.5rem;
-  font-size: 0.85rem;
-}
-</style>
 {% endblock %}
diff --git a/src/dashboard/templates/self_coding.html b/src/dashboard/templates/self_coding.html
index 9af9be58..d8f59807 100644
--- a/src/dashboard/templates/self_coding.html
+++ b/src/dashboard/templates/self_coding.html
@@ -143,57 +143,4 @@
   </div>
 </dialog>
 
-<style>
-.journal-list {
-  max-height: 600px;
-  overflow-y: auto;
-}
-
-.journal-entry {
-  border-left: 3px solid transparent;
-  transition: all 0.2s ease;
-}
-
-.journal-entry:hover {
-  background-color: rgba(255, 255, 255, 0.03);
-}
-
-.journal-entry.success {
-  border-left-color: #198754;
-}
-
-.journal-entry.failure {
-  border-left-color: #dc3545;
-}
-
-.journal-entry.rollback {
-  border-left-color: #fd7e14;
-}
-
-.stat-card {
-  transition: transform 0.2s ease;
-}
-
-.stat-card:hover {
-  transform: translateY(-2px);
-}
-
-/* Custom scrollbar for journal */
-.journal-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.journal-list::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.journal-list::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
-}
-
-.journal-list::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-</style>
 {% endblock %}
diff --git a/src/dashboard/templates/spark.html b/src/dashboard/templates/spark.html
index 4720aef5..d9825665 100644
--- a/src/dashboard/templates/spark.html
+++ b/src/dashboard/templates/spark.html
@@ -2,289 +2,7 @@
 
 {% block title %}Timmy Time — Spark Intelligence{% endblock %}
 
-{% block extra_styles %}
-<style>
-/* ── Spark Intelligence — unified theme ── */
-
-.spark-container { max-width: 1400px; margin: 0 auto; }
-
-.spark-header {
-  border-left: 3px solid var(--purple);
-  padding-left: 1rem;
-  margin-bottom: 20px;
-}
-.spark-title {
-  font-size: 1.4rem;
-  font-weight: 700;
-  color: var(--purple);
-  letter-spacing: 0.08em;
-  font-family: var(--font);
-}
-.spark-subtitle {
-  font-size: 0.75rem;
-  color: var(--text-dim);
-  margin-top: 0.25rem;
-}
-.spark-status-val {
-  color: var(--purple);
-  font-weight: 600;
-}
-
-/* Stat grid */
-.spark-stat-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
-}
-.spark-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: rgba(8, 4, 18, 0.5);
-}
-.spark-stat-label {
-  font-size: 0.65rem;
-  color: var(--text-dim);
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-.spark-stat-value {
-  font-size: 1.3rem;
-  font-weight: 700;
-  color: var(--text-bright);
-  font-family: var(--font);
-}
-
-/* Event pipeline rows */
-.spark-event-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.4rem 0;
-  border-bottom: 1px solid var(--border);
-}
-.spark-event-row:last-child { border-bottom: none; }
-.spark-event-count {
-  font-weight: 600;
-  color: var(--text);
-  font-family: var(--font);
-}
-
-/* Event type badges */
-.spark-event-type-badge {
-  font-size: 0.65rem;
-  padding: 0.15em 0.5em;
-  border-radius: 3px;
-  letter-spacing: 0.05em;
-  font-weight: 600;
-  background: rgba(59, 26, 92, 0.4);
-  color: var(--text);
-}
-.spark-type-task_posted .spark-event-type-badge,
-.spark-event-type-badge.spark-type-task_posted { background: rgba(124, 58, 237, 0.2); color: var(--purple); }
-.spark-type-bid_submitted .spark-event-type-badge,
-.spark-event-type-badge.spark-type-bid_submitted { background: rgba(255, 122, 42, 0.2); color: var(--orange); }
-.spark-type-task_assigned .spark-event-type-badge,
-.spark-event-type-badge.spark-type-task_assigned { background: rgba(0, 232, 122, 0.15); color: var(--green); }
-.spark-type-task_completed .spark-event-type-badge,
-.spark-event-type-badge.spark-type-task_completed { background: rgba(0, 232, 122, 0.2); color: var(--green); }
-.spark-type-task_failed .spark-event-type-badge,
-.spark-event-type-badge.spark-type-task_failed { background: rgba(255, 68, 85, 0.2); color: var(--red); }
-.spark-type-agent_joined .spark-event-type-badge,
-.spark-event-type-badge.spark-type-agent_joined { background: rgba(168, 85, 247, 0.2); color: var(--purple); }
-.spark-type-prediction_result .spark-event-type-badge,
-.spark-event-type-badge.spark-type-prediction_result { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
-
-/* Advisories */
-.spark-advisory {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem;
-  margin-bottom: 0.75rem;
-  background: rgba(24, 10, 45, 0.5);
-}
-.spark-advisory.priority-high   { border-left: 3px solid var(--red); }
-.spark-advisory.priority-medium { border-left: 3px solid var(--orange); }
-.spark-advisory.priority-low    { border-left: 3px solid var(--green); }
-
-.spark-advisory-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.25rem;
-}
-.spark-advisory-cat {
-  font-size: 0.6rem;
-  color: var(--text-dim);
-  letter-spacing: 0.08em;
-}
-.spark-advisory-priority {
-  font-size: 0.65rem;
-  color: var(--text);
-  font-family: var(--font);
-}
-.spark-advisory-title {
-  font-weight: 600;
-  font-size: 0.9rem;
-  color: var(--text-bright);
-  margin-bottom: 0.25rem;
-}
-.spark-advisory-detail {
-  font-size: 0.8rem;
-  color: var(--text);
-  margin-bottom: 0.4rem;
-  line-height: 1.4;
-}
-.spark-advisory-action {
-  font-size: 0.75rem;
-  color: var(--purple);
-  font-style: italic;
-  border-left: 2px solid var(--purple);
-  padding-left: 0.5rem;
-}
-
-/* Predictions */
-.spark-prediction {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 0.6rem;
-  margin-bottom: 0.6rem;
-  background: rgba(8, 4, 18, 0.5);
-}
-.spark-prediction.evaluated { border-left: 3px solid var(--green); }
-.spark-prediction.pending   { border-left: 3px solid var(--orange); }
-
-.spark-pred-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.3rem;
-}
-.spark-pred-task {
-  font-size: 0.75rem;
-  color: var(--text);
-  font-family: var(--font);
-}
-.spark-pred-accuracy {
-  font-weight: 700;
-  font-size: 0.85rem;
-  font-family: var(--font);
-}
-.spark-pred-pending-badge {
-  font-size: 0.6rem;
-  background: var(--amber-dim);
-  color: var(--amber);
-  padding: 0.1em 0.4em;
-  border-radius: 3px;
-  font-weight: 600;
-}
-.spark-pred-detail { font-size: 0.75rem; color: var(--text); }
-.spark-pred-item { padding: 0.1rem 0; }
-.spark-pred-label { color: var(--text-dim); font-weight: 600; }
-.spark-pred-actual {
-  margin-top: 0.3rem;
-  padding-top: 0.3rem;
-  border-top: 1px dashed var(--border);
-  color: var(--text-bright);
-}
-.spark-pred-time {
-  font-size: 0.6rem;
-  color: var(--text-dim);
-  margin-top: 0.3rem;
-  font-family: var(--font);
-}
-
-/* Memories */
-.spark-memory-card {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 0.6rem;
-  margin-bottom: 0.6rem;
-  background: rgba(8, 4, 18, 0.5);
-}
-.spark-memory-card.mem-pattern { border-left: 3px solid var(--green); }
-.spark-memory-card.mem-anomaly { border-left: 3px solid var(--red); }
-.spark-memory-card.mem-insight { border-left: 3px solid var(--purple); }
-
-.spark-mem-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.25rem;
-}
-.spark-mem-type {
-  font-size: 0.6rem;
-  letter-spacing: 0.08em;
-  color: var(--text-dim);
-  font-weight: 600;
-}
-.spark-mem-confidence {
-  font-size: 0.65rem;
-  color: var(--text);
-  font-family: var(--font);
-}
-.spark-mem-content {
-  font-size: 0.8rem;
-  color: var(--text-bright);
-  line-height: 1.4;
-}
-.spark-mem-meta {
-  font-size: 0.6rem;
-  color: var(--text-dim);
-  margin-top: 0.3rem;
-}
-
-/* Timeline */
-.spark-timeline-scroll {
-  max-height: 70vh;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.spark-event {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 0.5rem;
-  margin-bottom: 0.5rem;
-  background: rgba(8, 4, 18, 0.5);
-}
-.spark-event-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.2rem;
-}
-.spark-event-importance {
-  font-size: 0.5rem;
-  color: var(--purple);
-}
-.spark-event-desc {
-  font-size: 0.8rem;
-  color: var(--text-bright);
-}
-.spark-event-meta {
-  font-size: 0.65rem;
-  color: var(--text-dim);
-  font-family: var(--font);
-  margin-top: 0.15rem;
-}
-.spark-event-time {
-  font-size: 0.6rem;
-  color: var(--text-dim);
-  font-family: var(--font);
-}
-
-@media (max-width: 992px) {
-  .spark-title { font-size: 1.1rem; }
-  .spark-stat-value { font-size: 1.1rem; }
-}
-@media (max-width: 768px) {
-  .spark-timeline-scroll { max-height: 50vh; }
-}
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="container-fluid spark-container py-3">
diff --git a/src/dashboard/templates/swarm_live.html b/src/dashboard/templates/swarm_live.html
index 7929487a..c2995171 100644
--- a/src/dashboard/templates/swarm_live.html
+++ b/src/dashboard/templates/swarm_live.html
@@ -2,124 +2,7 @@
 
 {% block title %}{{ page_title }}{% endblock %}
 
-{% block extra_styles %}
-<style>
-  .swarm-container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-  .swarm-header-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-  }
-  .swarm-title {
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: var(--text-bright);
-    letter-spacing: 0.08em;
-  }
-  .swarm-log-box {
-    height: 200px;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    background: rgba(24, 10, 45, 0.6);
-    padding: 12px;
-    border-radius: var(--radius-md);
-    border: 1px solid var(--border);
-    font-family: var(--font);
-    font-size: 12px;
-  }
-  @media (max-width: 768px) {
-    .swarm-title { font-size: 1rem; }
-    .swarm-log-box { height: 160px; font-size: 11px; }
-  }
-  
-  /* Activity Feed Styles */
-  .activity-feed-panel {
-    margin-bottom: 16px;
-  }
-  .activity-feed {
-    max-height: 300px;
-    overflow-y: auto;
-    background: rgba(24, 10, 45, 0.6);
-    padding: 12px;
-    border-radius: var(--radius-md);
-    border: 1px solid var(--border);
-  }
-  .activity-item {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    padding: 8px 0;
-    border-bottom: 1px solid rgba(255,255,255,0.05);
-    animation: fadeIn 0.3s ease;
-  }
-  .activity-item:last-child {
-    border-bottom: none;
-  }
-  @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-5px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-  .activity-icon {
-    font-size: 16px;
-    flex-shrink: 0;
-    width: 24px;
-    text-align: center;
-  }
-  .activity-content {
-    flex: 1;
-    min-width: 0;
-  }
-  .activity-label {
-    font-weight: 600;
-    color: var(--text-bright);
-    font-size: 12px;
-  }
-  .activity-desc {
-    color: var(--text-dim);
-    font-size: 11px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .activity-meta {
-    display: flex;
-    gap: 8px;
-    font-size: 10px;
-    color: var(--text-dim);
-    margin-top: 2px;
-  }
-  .activity-time {
-    font-family: var(--font);
-    color: var(--amber);
-  }
-  .activity-source {
-    opacity: 0.7;
-  }
-  .activity-empty {
-    color: var(--text-dim);
-    font-size: 12px;
-    text-align: center;
-    padding: 20px;
-  }
-  .activity-badge {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    background: #28a745;
-    border-radius: 50%;
-    margin-left: 8px;
-    animation: pulse 2s infinite;
-  }
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="swarm-container py-3">
diff --git a/src/dashboard/templates/tasks.html b/src/dashboard/templates/tasks.html
index 234d79ba..ada52040 100644
--- a/src/dashboard/templates/tasks.html
+++ b/src/dashboard/templates/tasks.html
@@ -2,195 +2,7 @@
 
 {% block title %}Task Queue - Timmy Time{% endblock %}
 
-{% block extra_styles %}
-<style>
-  .tasks-container { max-width: 1400px; margin: 0 auto; }
-  .tasks-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-  }
-  .tasks-title {
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: var(--text-bright);
-    letter-spacing: 0.08em;
-  }
-  .tasks-columns {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 16px;
-  }
-  @media (max-width: 992px) {
-    .tasks-columns { grid-template-columns: 1fr; }
-  }
-  .task-column-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-  }
-  .task-column-title {
-    font-size: 0.75rem;
-    font-weight: 700;
-    letter-spacing: 0.1em;
-    color: var(--text-dim);
-  }
-  .task-card {
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: 12px;
-    margin-bottom: 10px;
-    background: rgba(24, 10, 45, 0.6);
-    transition: border-color 0.2s;
-  }
-  .task-card:hover { border-color: rgba(124, 58, 237, 0.3); }
-  .task-card.priority-urgent { border-left: 3px solid var(--red, #ef4444); }
-  .task-card.priority-high   { border-left: 3px solid var(--amber, #f59e0b); }
-  .task-card.priority-normal { border-left: 3px solid var(--info, #4ea8de); }
-  .task-card.priority-low    { border-left: 3px solid var(--text-dim); }
-  .task-card-title {
-    font-weight: 600;
-    font-size: 0.9rem;
-    color: var(--text-bright);
-    margin-bottom: 4px;
-  }
-  .task-card-desc {
-    font-size: 0.8rem;
-    color: var(--text);
-    margin-bottom: 6px;
-    max-height: 3em;
-    overflow: hidden;
-  }
-  .task-card-meta {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-    margin-bottom: 8px;
-  }
-  .task-badge {
-    font-size: 0.65rem;
-    padding: 0.15em 0.5em;
-    border-radius: 3px;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    background: var(--bg-tertiary);
-    color: var(--text);
-  }
-  .task-badge-urgent { background: rgba(239,68,68,0.2); color: var(--red, #ef4444); }
-  .task-badge-high   { background: rgba(245,158,11,0.2); color: var(--amber, #f59e0b); }
-  .task-badge-running { background: rgba(59,130,246,0.2); color: #60a5fa; }
-  .task-badge-completed { background: rgba(16,185,129,0.2); color: var(--green, #10b981); }
-  .task-badge-failed { background: rgba(239,68,68,0.2); color: var(--red, #ef4444); }
-  .task-badge-vetoed { background: rgba(107,114,128,0.2); color: #9ca3af; }
-  .task-badge-paused { background: rgba(245,158,11,0.2); color: var(--amber, #f59e0b); }
-  .task-actions {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-  }
-  .task-btn {
-    font-size: 0.7rem;
-    padding: 4px 12px;
-    border: none;
-    border-radius: var(--radius-sm, 4px);
-    cursor: pointer;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    font-family: var(--font);
-  }
-  .task-btn-approve { background: var(--green, #10b981); color: #000; }
-  .task-btn-approve:hover { opacity: 0.85; }
-  .task-btn-modify { background: var(--purple, #7c3aed); color: #fff; }
-  .task-btn-modify:hover { opacity: 0.85; }
-  .task-btn-veto { background: var(--red, #ef4444); color: #fff; }
-  .task-btn-veto:hover { opacity: 0.85; }
-  .task-btn-pause { background: var(--amber, #f59e0b); color: #000; }
-  .task-btn-cancel { background: var(--bg-tertiary); color: var(--text); border: 1px solid var(--border); }
-  .task-btn-retry { background: var(--info, #4ea8de); color: #000; }
-  .task-result {
-    font-size: 0.75rem;
-    color: var(--text);
-    margin-top: 6px;
-    padding: 6px;
-    background: rgba(0,0,0,0.2);
-    border-radius: 4px;
-    max-height: 4em;
-    overflow: hidden;
-    cursor: pointer;
-  }
-  .task-result.expanded { max-height: none; }
-  .task-steps {
-    margin-top: 6px;
-    font-size: 0.7rem;
-  }
-  .task-step { padding: 2px 0; color: var(--text-dim); }
-  .task-step.running { color: #60a5fa; }
-  .task-step.completed { color: var(--green, #10b981); }
-  .task-time {
-    font-size: 0.6rem;
-    color: var(--text-dim);
-    font-family: var(--font);
-    margin-top: 4px;
-  }
-  /* Create modal */
-  .task-modal-overlay {
-    display: none;
-    position: fixed;
-    top: 0; left: 0; right: 0; bottom: 0;
-    background: rgba(0,0,0,0.6);
-    z-index: 1000;
-    align-items: center;
-    justify-content: center;
-  }
-  .task-modal-overlay.open { display: flex; }
-  .task-modal {
-    background: var(--bg-secondary, #1a0a2e);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: 24px;
-    max-width: 480px;
-    width: 90%;
-  }
-  .task-modal h3 {
-    margin: 0 0 16px;
-    font-size: 1rem;
-    color: var(--text-bright);
-  }
-  .task-modal label {
-    display: block;
-    font-size: 0.75rem;
-    color: var(--text-dim);
-    margin-bottom: 4px;
-    letter-spacing: 0.05em;
-  }
-  .task-modal input, .task-modal textarea, .task-modal select {
-    width: 100%;
-    padding: 8px;
-    margin-bottom: 12px;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    background: var(--bg-tertiary, #0a0f1e);
-    color: var(--text);
-    font-family: var(--font);
-    font-size: 0.85rem;
-  }
-  .task-modal textarea { min-height: 80px; resize: vertical; }
-  .task-modal-actions {
-    display: flex;
-    gap: 8px;
-    justify-content: flex-end;
-    margin-top: 8px;
-  }
-  .empty-column {
-    text-align: center;
-    padding: 24px;
-    color: var(--text-dim);
-    font-size: 0.8rem;
-  }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="tasks-container py-3">
diff --git a/src/dashboard/templates/thinking.html b/src/dashboard/templates/thinking.html
index 3b6a4a26..2460378f 100644
--- a/src/dashboard/templates/thinking.html
+++ b/src/dashboard/templates/thinking.html
@@ -2,97 +2,7 @@
 
 {% block title %}Thought Stream{% endblock %}
 
-{% block extra_styles %}
-<style>
-.thinking-container { max-width: 680px; }
-
-.thinking-header {
-  border-left: 3px solid var(--purple);
-  padding-left: 1rem;
-}
-.thinking-title {
-  font-size: 1.6rem;
-  font-weight: 700;
-  color: var(--purple);
-  letter-spacing: 0.04em;
-  font-family: var(--font);
-}
-.thinking-subtitle {
-  font-size: 0.75rem;
-  color: var(--text-dim);
-  margin-top: 0.25rem;
-}
-
-.thought-card {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 1rem;
-  margin-bottom: 0.75rem;
-  background: rgba(24, 10, 45, 0.5);
-  transition: border-color 0.2s;
-}
-.thought-card:hover {
-  border-color: var(--purple);
-}
-
-.thought-content {
-  font-size: 0.95rem;
-  line-height: 1.65;
-  color: var(--text-bright);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.thought-meta {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.thought-time {
-  font-size: 0.72rem;
-  color: var(--text-dim);
-  font-family: var(--font);
-}
-
-.seed-badge {
-  font-size: 0.68rem;
-  padding: 0.15em 0.5em;
-  border-radius: 4px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.seed-existential { background: rgba(138, 43, 226, 0.2); color: #c084fc; }
-.seed-swarm       { background: rgba(0, 232, 122, 0.15); color: var(--green); }
-.seed-scripture   { background: rgba(255, 193, 7, 0.15); color: var(--amber); }
-.seed-creative    { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
-.seed-memory      { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
-.seed-freeform    { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
-
-.thought-chain-link {
-  font-size: 0.72rem;
-  color: var(--text-dim);
-  text-decoration: none;
-  font-family: var(--font);
-}
-.thought-chain-link:hover { color: var(--purple); }
-
-.no-thoughts {
-  text-align: center;
-  color: var(--text-dim);
-  padding: 3rem 0;
-  font-size: 0.9rem;
-}
-
-@media (max-width: 576px) {
-  .thinking-title { font-size: 1.3rem; }
-  .thought-content { font-size: 0.9rem; }
-}
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="container thinking-container py-4">
diff --git a/src/dashboard/templates/tools.html b/src/dashboard/templates/tools.html
index b93f054b..bf4da957 100644
--- a/src/dashboard/templates/tools.html
+++ b/src/dashboard/templates/tools.html
@@ -2,66 +2,7 @@
 
 {% block title %}Tools & Capabilities — Mission Control{% endblock %}
 
-{% block extra_styles %}
-<style>
-  .tools-container { max-width: 1200px; margin: 0 auto; }
-
-  .tools-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 20px;
-  }
-  .tools-title {
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: var(--text-bright);
-    letter-spacing: 0.08em;
-  }
-  .tools-subtitle {
-    font-size: 0.8rem;
-    color: var(--text-dim);
-    margin-top: 2px;
-  }
-  .tools-stat-box {
-    background: var(--glass-bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: 10px 18px;
-    text-align: center;
-  }
-  .tools-stat-val {
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: var(--text-bright);
-  }
-  .tools-stat-label {
-    font-size: 0.7rem;
-    color: var(--text-dim);
-    letter-spacing: 0.08em;
-  }
-
-  .tool-card {
-    height: 100%;
-  }
-  .tool-card .card-title {
-    font-size: 0.85rem;
-    letter-spacing: 0.04em;
-  }
-  .tool-card .card-text {
-    font-size: 0.8rem;
-    color: var(--text-dim);
-    line-height: 1.5;
-  }
-
-  @media (max-width: 768px) {
-    .tools-title { font-size: 1.1rem; }
-    .tools-header { flex-direction: column; }
-  }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="tools-container py-3">
diff --git a/src/dashboard/templates/upgrade_queue.html b/src/dashboard/templates/upgrade_queue.html
index c907a8f3..f91757f8 100644
--- a/src/dashboard/templates/upgrade_queue.html
+++ b/src/dashboard/templates/upgrade_queue.html
@@ -182,113 +182,4 @@ async function applyUpgrade(id) {
 }
 </script>
 
-<style>
-.mc-section {
-  margin-bottom: 2rem;
-}
-
-.mc-section-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.upgrades-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.upgrade-card {
-  background: rgba(10, 15, 30, 0.6);
-  border: 1px solid var(--mc-border);
-  border-radius: 0.5rem;
-  padding: 1rem;
-}
-
-.upgrade-pending {
-  border-left: 4px solid #ffc107;
-}
-
-.upgrade-approved {
-  border-left: 4px solid #17a2b8;
-}
-
-.upgrade-applied {
-  border-left: 4px solid #28a745;
-}
-
-.upgrade-rejected {
-  border-left: 4px solid #6c757d;
-}
-
-.upgrade-failed {
-  border-left: 4px solid #dc3545;
-}
-
-.upgrade-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 0.5rem;
-}
-
-.upgrade-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-}
-
-.upgrade-meta {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.85rem;
-  color: var(--mc-text-secondary);
-  margin-bottom: 0.5rem;
-}
-
-.upgrade-files {
-  font-size: 0.9rem;
-  margin-bottom: 0.5rem;
-  font-family: monospace;
-}
-
-.upgrade-test-status {
-  margin-bottom: 0.75rem;
-}
-
-.test-passed {
-  color: #28a745;
-}
-
-.test-failed {
-  color: #dc3545;
-}
-
-.upgrade-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.upgrades-history .upgrade-card {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.75rem 1rem;
-}
-
-.upgrade-desc {
-  flex: 1;
-}
-
-.upgrade-time {
-  font-size: 0.85rem;
-  color: var(--mc-text-secondary);
-}
-
-.upgrade-error {
-  color: #dc3545;
-  cursor: help;
-}
-</style>
 {% endblock %}
diff --git a/src/dashboard/templates/voice_button.html b/src/dashboard/templates/voice_button.html
index 9f989717..5f79247b 100644
--- a/src/dashboard/templates/voice_button.html
+++ b/src/dashboard/templates/voice_button.html
@@ -2,97 +2,7 @@
 
 {% block title %}{{ page_title }}{% endblock %}
 
-{% block extra_styles %}
-<style>
-  .voice-page {
-    max-width: 600px;
-    margin: 0 auto;
-    text-align: center;
-  }
-
-  .voice-button {
-    width: 160px;
-    height: 160px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, var(--border-glow), var(--purple));
-    border: none;
-    color: white;
-    font-size: 3.5rem;
-    cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.3s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 30px auto;
-    box-shadow: 0 0 40px rgba(124, 58, 237, 0.3);
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-  }
-  .voice-button:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 60px rgba(124, 58, 237, 0.5);
-  }
-  .voice-button:active, .voice-button.listening {
-    transform: scale(0.95);
-    background: linear-gradient(135deg, var(--red), var(--red-dim));
-    box-shadow: 0 0 60px rgba(255, 68, 85, 0.5);
-    animation: pulse-listen 1s infinite;
-  }
-  @keyframes pulse-listen {
-    0%, 100% { box-shadow: 0 0 40px rgba(255, 68, 85, 0.5); }
-    50% { box-shadow: 0 0 80px rgba(255, 68, 85, 0.8); }
-  }
-
-  .voice-status {
-    font-size: 1rem;
-    color: var(--text-dim);
-    margin-bottom: 16px;
-    letter-spacing: 0.06em;
-  }
-
-  .voice-result {
-    background: rgba(24, 10, 45, 0.8);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: 16px;
-    margin-top: 20px;
-    text-align: left;
-  }
-  .voice-transcript {
-    font-size: 0.95rem;
-    margin-bottom: 12px;
-    color: var(--text);
-  }
-  .voice-response {
-    color: var(--purple);
-    font-style: italic;
-  }
-
-  .voice-tips {
-    margin-top: 24px;
-    padding: 16px;
-    background: rgba(24, 10, 45, 0.6);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    text-align: left;
-  }
-  .voice-tips h3 {
-    font-size: 0.85rem;
-    color: var(--text-bright);
-    margin-bottom: 10px;
-  }
-  .voice-tips ul {
-    color: var(--text-dim);
-    line-height: 2;
-    padding-left: 18px;
-    font-size: 0.85rem;
-  }
-
-  @media (max-width: 768px) {
-    .voice-button { width: 140px; height: 140px; font-size: 3rem; }
-  }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="voice-page py-3">
diff --git a/src/dashboard/templates/voice_enhanced.html b/src/dashboard/templates/voice_enhanced.html
index 7772fcd2..304a3ecf 100644
--- a/src/dashboard/templates/voice_enhanced.html
+++ b/src/dashboard/templates/voice_enhanced.html
@@ -2,110 +2,7 @@
 
 {% block title %}{{ page_title }}{% endblock %}
 
-{% block extra_styles %}
-<style>
-  .voice-enhanced-page {
-    max-width: 600px;
-    margin: 0 auto;
-  }
-
-  .wave-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    height: 60px;
-    margin: 20px 0;
-  }
-  .wave-bar {
-    width: 4px;
-    background: var(--purple);
-    border-radius: 2px;
-    animation: wave 1s ease-in-out infinite;
-  }
-  .wave-bar:nth-child(1) { animation-delay: 0s; height: 20%; }
-  .wave-bar:nth-child(2) { animation-delay: 0.1s; height: 40%; }
-  .wave-bar:nth-child(3) { animation-delay: 0.2s; height: 60%; }
-  .wave-bar:nth-child(4) { animation-delay: 0.3s; height: 80%; }
-  .wave-bar:nth-child(5) { animation-delay: 0.4s; height: 100%; }
-  .wave-bar:nth-child(6) { animation-delay: 0.3s; height: 80%; }
-  .wave-bar:nth-child(7) { animation-delay: 0.2s; height: 60%; }
-  .wave-bar:nth-child(8) { animation-delay: 0.1s; height: 40%; }
-  .wave-bar:nth-child(9) { animation-delay: 0s; height: 20%; }
-  @keyframes wave {
-    0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
-    50% { transform: scaleY(1); opacity: 1; }
-  }
-  .wave-container:not(.listening) .wave-bar {
-    animation: none;
-    height: 10%;
-    opacity: 0.3;
-  }
-
-  .voice-btn-row {
-    text-align: center;
-    margin-bottom: 16px;
-  }
-  .voice-btn-row button {
-    padding: 12px 32px;
-    font-size: 1rem;
-    font-family: var(--font);
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    min-height: 48px;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    touch-action: manipulation;
-    transition: transform 0.1s, box-shadow 0.2s;
-  }
-  .voice-btn-row button:active { transform: scale(0.96); }
-  #start-btn {
-    background: var(--border-glow);
-    border: none;
-    color: var(--text-bright);
-  }
-  #stop-btn {
-    background: var(--red);
-    border: none;
-    color: white;
-  }
-
-  #status-text {
-    text-align: center;
-    color: var(--text-dim);
-    margin-bottom: 16px;
-    font-size: 0.85rem;
-    letter-spacing: 0.06em;
-  }
-
-  .result-box {
-    background: rgba(24, 10, 45, 0.8);
-    border: 1px solid var(--border);
-    padding: 14px;
-    border-radius: var(--radius-md);
-    margin-bottom: 10px;
-    font-size: 0.9rem;
-    color: var(--text);
-  }
-  .result-box.timmy-reply {
-    border-left: 3px solid var(--purple);
-  }
-  .result-box strong {
-    color: var(--text-dim);
-    font-size: 0.75rem;
-    letter-spacing: 0.08em;
-    display: block;
-    margin-bottom: 6px;
-  }
-  .result-box.timmy-reply strong { color: var(--purple); }
-
-  #audio-player {
-    width: 100%;
-    margin-top: 10px;
-    border-radius: var(--radius-md);
-  }
-</style>
-{% endblock %}
+{% block extra_styles %}{% endblock %}
 
 {% block content %}
 <div class="voice-enhanced-page py-3">
diff --git a/static/css/mission-control.css b/static/css/mission-control.css
new file mode 100644
index 00000000..170450b9
--- /dev/null
+++ b/static/css/mission-control.css
@@ -0,0 +1,1926 @@
+/* ═══════════════════════════════════════════════════════════════
+   mission-control.css — Page-specific styles extracted from
+   Jinja2 templates. Loaded globally via base.html so the
+   browser can cache everything in one request.
+
+   Organisation: one section per template / component, alpha order.
+   ═══════════════════════════════════════════════════════════════ */
+
+
+/* ── Toast notifications ──────────────────────────────────── */
+.mc-toast-container {
+  position: fixed;
+  top: 68px;
+  right: 20px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+  max-width: 380px;
+}
+.mc-toast {
+  pointer-events: auto;
+  background: rgba(17, 8, 32, 0.94);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 10px 16px;
+  font-family: var(--font);
+  font-size: 12px;
+  color: var(--text);
+  letter-spacing: 0.04em;
+  line-height: 1.5;
+  opacity: 0;
+  transform: translateX(40px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.mc-toast.show {
+  opacity: 1;
+  transform: translateX(0);
+}
+.mc-toast.info  { border-left: 3px solid var(--green);  }
+.mc-toast.warn  { border-left: 3px solid var(--amber);  }
+.mc-toast.error { border-left: 3px solid var(--red);    }
+.mc-toast .mc-toast-msg { display: inline; }
+
+@media (max-width: 768px) {
+  .mc-toast-container {
+    top: 56px;
+    right: 10px;
+    left: 10px;
+    max-width: none;
+  }
+}
+
+
+/* ── Connection status indicator ──────────────────────────── */
+.mc-conn-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: var(--text-dim);
+  margin-left: 14px;
+}
+.mc-conn-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--text-dim);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+.mc-conn-dot.green  { background: var(--green); box-shadow: 0 0 6px var(--green); }
+.mc-conn-dot.amber  { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
+.mc-conn-dot.red    { background: var(--red);   box-shadow: 0 0 6px var(--red);   }
+
+
+/* ── Briefing ─────────────────────────────────────────────── */
+.briefing-container { max-width: 680px; }
+
+.briefing-header {
+  border-left: 3px solid var(--amber);
+  padding-left: 1rem;
+}
+.briefing-greeting {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: var(--amber);
+  letter-spacing: 0.04em;
+  font-family: var(--font);
+}
+.briefing-timestamp {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  margin-top: 0.25rem;
+}
+.briefing-ts-val { color: var(--text); }
+
+.briefing-prose {
+  font-size: 1rem;
+  line-height: 1.75;
+  color: var(--text-bright);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Approval cards */
+.approval-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  background: rgba(24, 10, 45, 0.5);
+  transition: border-color 0.2s;
+}
+.approval-card.approved {
+  border-color: var(--green);
+  opacity: 0.7;
+}
+.approval-card.rejected {
+  border-color: var(--red);
+  opacity: 0.7;
+}
+.approval-card-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--text-bright);
+  margin-bottom: 0.25rem;
+}
+.approval-card-desc {
+  font-size: 0.85rem;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+}
+.approval-card-action {
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  font-family: var(--font);
+  margin-bottom: 0.75rem;
+  border-left: 2px solid var(--border);
+  padding-left: 0.5rem;
+}
+
+.impact-badge {
+  font-size: 0.7rem;
+  padding: 0.2em 0.5em;
+  border-radius: 4px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.impact-low    { background: var(--green-dim); color: var(--green); }
+.impact-medium { background: var(--amber-dim); color: var(--amber); }
+.impact-high   { background: var(--red-dim);   color: var(--red); }
+
+.approval-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.btn-approve {
+  background: var(--green-dim);
+  color: var(--green);
+  border: 1px solid var(--green);
+  border-radius: var(--radius-sm);
+  padding: 0.4rem 0.9rem;
+  font-size: 0.82rem;
+  font-family: var(--font);
+  cursor: pointer;
+  min-height: 44px;
+  transition: background 0.15s;
+  touch-action: manipulation;
+}
+.btn-approve:hover { background: rgba(0, 232, 122, 0.2); }
+
+.btn-reject {
+  background: transparent;
+  color: var(--red);
+  border: 1px solid var(--red);
+  border-radius: var(--radius-sm);
+  padding: 0.4rem 0.9rem;
+  font-size: 0.82rem;
+  font-family: var(--font);
+  cursor: pointer;
+  min-height: 44px;
+  transition: background 0.15s;
+  touch-action: manipulation;
+}
+.btn-reject:hover { background: rgba(255, 68, 85, 0.1); }
+
+.no-approvals {
+  text-align: center;
+  color: var(--text-dim);
+  padding: 2rem 0;
+  font-size: 0.9rem;
+}
+
+.btn-refresh {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.3rem 0.7rem;
+  font-size: 0.75rem;
+  font-family: var(--font);
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+  transition: border-color 0.15s;
+}
+.btn-refresh:hover { border-color: var(--purple); color: var(--text-bright); }
+
+@media (max-width: 576px) {
+  .briefing-greeting { font-size: 1.3rem; }
+  .briefing-prose    { font-size: 0.95rem; }
+}
+
+
+/* ── Calm ─────────────────────────────────────────────────── */
+.calm-container { max-width: 600px; margin: 0 auto; padding: 20px; }
+.calm-header { text-align: center; margin-bottom: 30px; }
+.calm-title { font-size: 2.5rem; font-weight: 700; color: var(--text-bright); letter-spacing: 0.05em; }
+.calm-subtitle { font-size: 1.1rem; color: var(--text-dim); margin-top: 5px; }
+
+.calm-container .task-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 25px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+.calm-container .task-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
+
+.now-card {
+  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(124, 58, 237, 0.1) 100%);
+  border-color: rgba(124, 58, 237, 0.4);
+}
+.now-card .task-title { font-size: 2.2rem; font-weight: 800; color: var(--green); margin-bottom: 15px; }
+.now-card .task-description { font-size: 1.1rem; color: var(--text); line-height: 1.6; margin-bottom: 20px; }
+.now-card .task-actions { display: flex; gap: 15px; justify-content: center; }
+.now-card .task-btn { padding: 12px 25px; font-size: 1rem; font-weight: 700; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; }
+.now-card .task-btn-complete { background: var(--green); color: var(--bg-secondary); border: none; }
+.now-card .task-btn-complete:hover { background: var(--green-dark); }
+.now-card .task-btn-defer { background: var(--bg-tertiary); color: var(--text); border: 1px solid var(--border); }
+.now-card .task-btn-defer:hover { background: var(--bg-tertiary-hover); }
+
+.next-card {
+  background: var(--bg-tertiary);
+  border-color: var(--border);
+  padding: 15px 20px;
+}
+.next-card .task-title { font-size: 1.3rem; font-weight: 600; color: var(--info); margin-bottom: 5px; }
+.next-card .task-description { font-size: 0.9rem; color: var(--text-dim); max-height: 40px; overflow: hidden; }
+
+.later-section {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  margin-top: 20px;
+}
+.later-summary { padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: var(--text-bright); }
+.later-summary:hover { background: var(--bg-tertiary-hover); border-radius: var(--radius-lg); }
+.later-content { padding: 10px 20px 20px; border-top: 1px solid var(--border); }
+.later-task-item { padding: 8px 0; border-bottom: 1px dashed var(--border); display: flex; justify-content: space-between; align-items: center; }
+.later-task-item:last-child { border-bottom: none; }
+.later-task-title { font-size: 0.95rem; color: var(--text); }
+.later-task-actions .task-btn { font-size: 0.75rem; padding: 5px 10px; }
+
+.empty-state { text-align: center; color: var(--text-dim); padding: 40px 20px; font-size: 1rem; }
+
+.ritual-btn { display: block; width: fit-content; margin: 20px auto; padding: 10px 20px; background: var(--purple); color: white; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; }
+.ritual-btn:hover { opacity: 0.9; }
+
+
+/* ── Calm rituals ─────────────────────────────────────────── */
+.ritual-container { max-width: 700px; margin: 0 auto; padding: 30px; background: var(--bg-secondary); border-radius: var(--radius-lg); box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
+.ritual-header { text-align: center; margin-bottom: 30px; }
+.ritual-title { font-size: 2rem; font-weight: 700; color: var(--text-bright); margin-bottom: 10px; }
+.ritual-subtitle { font-size: 1rem; color: var(--text-dim); line-height: 1.5; }
+.ritual-message { font-size: 1.1rem; color: var(--text); line-height: 1.6; margin-bottom: 30px; }
+
+.ritual-container .form-group label { display: block; font-size: 0.9rem; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
+.ritual-container .form-group input[type="text"],
+.ritual-container .form-group textarea,
+.ritual-container .form-group input[type="number"] { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-tertiary); color: var(--text); font-size: 1rem; }
+.ritual-container .form-group textarea { min-height: 100px; resize: vertical; }
+.ritual-container .form-group input[type="text"]:focus,
+.ritual-container .form-group textarea:focus,
+.ritual-container .form-group input[type="number"]:focus { border-color: var(--purple); outline: none; box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2); }
+
+.form-actions { display: flex; justify-content: flex-end; margin-top: 30px; }
+.form-actions button { padding: 12px 25px; font-size: 1rem; font-weight: 700; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; border: none; }
+.form-actions .btn-submit { background: var(--green); color: var(--bg-secondary); }
+.form-actions .btn-submit:hover { background: var(--green-dark); }
+
+.mit-section { border: 1px dashed var(--border); padding: 20px; border-radius: var(--radius-md); margin-top: 25px; background: rgba(124, 58, 237, 0.05); }
+.mit-section h4 { color: var(--purple); margin-top: 0; margin-bottom: 15px; font-size: 1.1rem; }
+
+
+/* ── Creative ─────────────────────────────────────────────── */
+.creative-container { max-width: 1200px; margin: 0 auto; }
+
+.creative-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.creative-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text-bright);
+  letter-spacing: 0.08em;
+}
+.creative-subtitle {
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+.creative-stats {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.creative-stat-box {
+  background: var(--glass-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 8px 14px;
+  text-align: center;
+  min-width: 60px;
+}
+.creative-stat-val {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-bright);
+}
+.creative-stat-label {
+  font-size: 0.6rem;
+  color: var(--text-dim);
+  letter-spacing: 0.06em;
+}
+
+.persona-card .card-header strong { color: var(--text-bright); }
+.persona-card .card-body { font-size: 0.85rem; }
+.persona-card .card-body p { color: var(--text-dim); }
+
+.pipeline-badge {
+  display: inline-block;
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+@media (max-width: 768px) {
+  .creative-title { font-size: 1.1rem; }
+  .creative-header { flex-direction: column; }
+  .creative-stats { width: 100%; }
+  .creative-stat-box { flex: 1; }
+}
+
+
+/* ── Experiments ──────────────────────────────────────────── */
+.experiments-container { max-width: 1000px; margin: 0 auto; }
+.exp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+.exp-title { font-size: 1.3rem; font-weight: 700; color: var(--text-bright); }
+.exp-subtitle { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
+.exp-config { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-dim); }
+.exp-config span { background: var(--glass-bg); border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; }
+.exp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
+.exp-table th { text-align: left; padding: 8px 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 600; }
+.exp-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
+.exp-table tr:hover { background: var(--glass-bg); }
+.metric-good { color: var(--success); }
+.metric-bad { color: var(--danger); }
+.btn-start { background: var(--accent); color: #fff; border: none; padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
+.btn-start:hover { opacity: 0.9; }
+.btn-start:disabled { opacity: 0.4; cursor: not-allowed; }
+.disabled-note { font-size: 0.8rem; color: var(--text-dim); margin-top: 8px; }
+
+
+/* ── Hands ────────────────────────────────────────────────── */
+.hand-card {
+  transition: all 0.2s ease;
+  border-left: 3px solid transparent;
+}
+.hand-card:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+.hand-card.running  { border-left-color: #0dcaf0; }
+.hand-card.scheduled { border-left-color: #198754; }
+.hand-card.paused   { border-left-color: #ffc107; }
+.hand-card.error    { border-left-color: #dc3545; }
+
+/* Hands-specific status dots (extends base .status-dot) */
+.hand-card .status-dot.running   { background-color: #0dcaf0; animation: pulse-hand 1.5s infinite; }
+.hand-card .status-dot.scheduled { background-color: #198754; }
+.hand-card .status-dot.paused    { background-color: #ffc107; }
+.hand-card .status-dot.error     { background-color: #dc3545; }
+.hand-card .status-dot.idle      { background-color: #6c757d; }
+
+@keyframes pulse-hand {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+
+/* ── Marketplace ──────────────────────────────────────────── */
+.market-container { max-width: 1000px; margin: 0 auto; }
+
+.market-header {
+  border-left: 3px solid var(--orange);
+  padding-left: 1rem;
+  margin-bottom: 20px;
+}
+.market-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--text-bright);
+  letter-spacing: 0.08em;
+}
+.market-subtitle { font-size: 0.8rem; color: var(--text-dim); margin-top: 4px; }
+.market-stats { font-size: 0.8rem; color: var(--text-dim); margin-top: 6px; }
+.market-stats .up { color: var(--green); }
+
+.market-agent {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: rgba(24, 10, 45, 0.6);
+  margin-bottom: 10px;
+  transition: border-color 0.2s;
+}
+.market-agent:hover { border-color: rgba(124, 58, 237, 0.3); }
+
+.market-agent-price {
+  text-align: right;
+  min-width: 100px;
+  flex-shrink: 0;
+}
+.price-amount {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--orange);
+  font-family: var(--font);
+}
+.price-label { font-size: 0.7rem; color: var(--text-dim); }
+.price-stat { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
+.price-stat .earned { color: var(--green); }
+
+.how-step {
+  text-align: center;
+  padding: 20px 12px;
+}
+.how-step-num {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: var(--purple);
+  margin-bottom: 8px;
+  font-family: var(--font);
+}
+.how-step h3 { font-size: 0.9rem; color: var(--text-bright); margin-bottom: 6px; }
+.how-step p { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; }
+
+@media (max-width: 768px) {
+  .market-title { font-size: 1.1rem; }
+  .market-agent { flex-direction: column; gap: 10px; }
+  .market-agent-price { text-align: left; min-width: unset; }
+  .price-amount { font-size: 1.1rem; }
+}
+
+
+/* ── Mobile ───────────────────────────────────────────────── */
+@media (min-width: 769px) {
+  .mobile-only { display: none; }
+}
+@media (max-width: 768px) {
+  .desktop-message { display: none; }
+}
+
+.mobile-only {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 20px;
+}
+
+.quick-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  padding: 14px;
+}
+
+.quick-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 52px;
+  border-radius: var(--radius-md);
+  font-family: var(--font);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-decoration: none;
+  color: var(--text-bright);
+  border: 1px solid var(--border);
+  background: rgba(24, 10, 45, 0.6);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: transform 0.1s, border-color 0.2s, box-shadow 0.2s;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+.quick-btn:hover { color: var(--text-bright); text-decoration: none; }
+.quick-btn:active { transform: scale(0.96); }
+.quick-btn.voice {
+  border-color: var(--border-glow);
+  background: rgba(124, 58, 237, 0.15);
+}
+.quick-btn.voice:active {
+  box-shadow: 0 0 18px rgba(124, 58, 237, 0.3);
+}
+
+.mobile-chat-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.mobile-chat-log {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 14px;
+  max-height: 300px;
+}
+.mobile-chat-input {
+  display: flex;
+  gap: 8px;
+  padding: 10px 14px;
+  padding-bottom: max(10px, env(safe-area-inset-bottom));
+  background: rgba(24, 10, 45, 0.9);
+  border-top: 1px solid var(--border);
+}
+.mobile-chat-input input {
+  flex: 1;
+  background: rgba(8, 4, 18, 0.75);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-bright);
+  font-family: var(--font);
+  font-size: 16px;
+  padding: 10px 12px;
+  min-height: 44px;
+}
+.mobile-chat-input input:focus {
+  outline: none;
+  border-color: var(--border-glow);
+  box-shadow: 0 0 0 1px var(--border-glow), 0 0 8px rgba(124, 58, 237, 0.2);
+}
+.mobile-chat-input input::placeholder { color: var(--text-dim); }
+.mobile-chat-input button {
+  background: var(--border-glow);
+  border: none;
+  border-radius: var(--radius-md);
+  color: var(--text-bright);
+  font-family: var(--font);
+  font-size: 12px;
+  font-weight: 700;
+  padding: 0 16px;
+  min-height: 44px;
+  letter-spacing: 0.1em;
+  transition: background 0.15s, transform 0.1s;
+  touch-action: manipulation;
+}
+.mobile-chat-input button:active { transform: scale(0.96); }
+
+.mobile-agents-list {
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mobile-chat-msg {
+  margin-bottom: 12px;
+}
+.mobile-chat-msg .meta {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  margin-bottom: 3px;
+}
+.mobile-chat-msg.user .meta { color: var(--orange); }
+.mobile-chat-msg.timmy .meta { color: var(--purple); }
+.mobile-chat-msg .bubble {
+  background: rgba(24, 10, 45, 0.8);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text);
+}
+.mobile-chat-msg.timmy .bubble {
+  border-left: 3px solid var(--purple);
+}
+.mobile-chat-msg.user .bubble {
+  border-color: var(--border-glow);
+}
+
+
+/* ── Mobile Local (on-device LLM) ────────────────────────── */
+.local-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 20px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.model-status {
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.model-status-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+}
+.model-status-label { color: var(--text-dim); }
+.model-status-value { color: var(--text-bright); font-weight: 600; }
+.model-status-value.ready   { color: #4ade80; }
+.model-status-value.loading { color: #facc15; }
+.model-status-value.error   { color: #f87171; }
+.model-status-value.offline { color: var(--text-dim); }
+
+.progress-wrap {
+  display: none;
+  flex-direction: column;
+  gap: 6px;
+  padding: 0 14px 14px;
+}
+.progress-wrap.active { display: flex; }
+.progress-bar-outer {
+  height: 6px;
+  background: rgba(8, 4, 18, 0.75);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.progress-bar-inner {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, var(--border-glow), #a78bfa);
+  border-radius: 3px;
+  transition: width 0.3s;
+}
+.progress-text {
+  font-size: 10px;
+  color: var(--text-dim);
+  letter-spacing: 0.06em;
+  min-height: 14px;
+}
+
+.model-select-wrap {
+  padding: 0 14px 14px;
+}
+.model-select {
+  width: 100%;
+  background: rgba(8, 4, 18, 0.75);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-bright);
+  font-family: var(--font);
+  font-size: 13px;
+  padding: 10px 12px;
+  min-height: 44px;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237c7c8a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  touch-action: manipulation;
+}
+.model-select:focus {
+  outline: none;
+  border-color: var(--border-glow);
+}
+
+.model-actions {
+  display: flex;
+  gap: 8px;
+  padding: 0 14px 14px;
+}
+.model-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 44px;
+  border-radius: var(--radius-md);
+  font-family: var(--font);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  border: 1px solid var(--border);
+  background: rgba(24, 10, 45, 0.6);
+  color: var(--text-bright);
+  cursor: pointer;
+  transition: transform 0.1s, border-color 0.2s;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+.model-btn:active { transform: scale(0.96); }
+.model-btn.primary {
+  border-color: var(--border-glow);
+  background: rgba(124, 58, 237, 0.2);
+}
+.model-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.local-chat-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.local-chat-log {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 14px;
+  max-height: 400px;
+  min-height: 200px;
+}
+.local-chat-input {
+  display: flex;
+  gap: 8px;
+  padding: 10px 14px;
+  padding-bottom: max(10px, env(safe-area-inset-bottom));
+  background: rgba(24, 10, 45, 0.9);
+  border-top: 1px solid var(--border);
+}
+.local-chat-input input {
+  flex: 1;
+  background: rgba(8, 4, 18, 0.75);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-bright);
+  font-family: var(--font);
+  font-size: 16px;
+  padding: 10px 12px;
+  min-height: 44px;
+}
+.local-chat-input input:focus {
+  outline: none;
+  border-color: var(--border-glow);
+  box-shadow: 0 0 0 1px var(--border-glow), 0 0 8px rgba(124, 58, 237, 0.2);
+}
+.local-chat-input input::placeholder { color: var(--text-dim); }
+.local-chat-input button {
+  background: var(--border-glow);
+  border: none;
+  border-radius: var(--radius-md);
+  color: var(--text-bright);
+  font-family: var(--font);
+  font-size: 12px;
+  font-weight: 700;
+  padding: 0 16px;
+  min-height: 44px;
+  min-width: 64px;
+  letter-spacing: 0.1em;
+  transition: background 0.15s, transform 0.1s;
+  touch-action: manipulation;
+}
+.local-chat-input button:active { transform: scale(0.96); }
+.local-chat-input button:disabled { opacity: 0.4; }
+
+.local-msg { margin-bottom: 12px; }
+.local-msg .meta {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  margin-bottom: 3px;
+}
+.local-msg.user .meta { color: var(--orange); }
+.local-msg.timmy .meta { color: var(--purple); }
+.local-msg.system .meta { color: var(--text-dim); }
+.local-msg .bubble {
+  background: rgba(24, 10, 45, 0.8);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text);
+  word-break: break-word;
+}
+.local-msg.timmy .bubble { border-left: 3px solid var(--purple); }
+.local-msg.user .bubble { border-color: var(--border-glow); }
+.local-msg.system .bubble {
+  border-color: transparent;
+  background: rgba(8, 4, 18, 0.5);
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.backend-badge {
+  display: inline-block;
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  padding: 2px 6px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-left: 6px;
+}
+.backend-badge.local {
+  background: rgba(74, 222, 128, 0.15);
+  color: #4ade80;
+  border: 1px solid rgba(74, 222, 128, 0.3);
+}
+.backend-badge.server {
+  background: rgba(250, 204, 21, 0.15);
+  color: #facc15;
+  border: 1px solid rgba(250, 204, 21, 0.3);
+}
+
+.model-stats {
+  padding: 0 14px 14px;
+  font-size: 10px;
+  color: var(--text-dim);
+  letter-spacing: 0.06em;
+  display: none;
+}
+.model-stats.visible { display: block; }
+
+
+/* ── Router status ────────────────────────────────────────── */
+.mc-providers-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.mc-provider-card {
+  background: rgba(10, 15, 30, 0.6);
+  border: 1px solid var(--mc-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+.mc-provider-card.provider-healthy  { border-left: 4px solid #28a745; }
+.mc-provider-card.provider-degraded { border-left: 4px solid #ffc107; }
+.mc-provider-card.provider-unhealthy { border-left: 4px solid #dc3545; }
+
+.provider-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+.provider-header h3 { margin: 0; font-size: 1.1rem; }
+
+.provider-meta {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--mc-text-secondary);
+}
+
+.provider-circuit {
+  font-size: 0.85rem;
+  margin-bottom: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  background: rgba(0,0,0,0.3);
+  border-radius: 0.25rem;
+}
+.circuit-closed    { color: #28a745; }
+.circuit-open      { color: #dc3545; }
+.circuit-half_open { color: #ffc107; }
+
+.provider-metrics {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 0.5rem;
+  text-align: center;
+}
+.metric {
+  padding: 0.5rem;
+  background: rgba(0,0,0,0.2);
+  border-radius: 0.25rem;
+}
+.metric-value {
+  display: block;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--mc-gold);
+}
+.metric-label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--mc-text-secondary);
+}
+
+.mc-alert-small {
+  margin-top: 0.75rem;
+  padding: 0.5rem;
+  font-size: 0.85rem;
+}
+
+
+/* ── Self-coding journal ──────────────────────────────────── */
+.journal-list {
+  max-height: 600px;
+  overflow-y: auto;
+}
+.journal-entry {
+  border-left: 3px solid transparent;
+  transition: all 0.2s ease;
+}
+.journal-entry:hover { background-color: rgba(255, 255, 255, 0.03); }
+.journal-entry.success  { border-left-color: #198754; }
+.journal-entry.failure  { border-left-color: #dc3545; }
+.journal-entry.rollback { border-left-color: #fd7e14; }
+
+.stat-card {
+  transition: transform 0.2s ease;
+}
+.stat-card:hover { transform: translateY(-2px); }
+
+.journal-list::-webkit-scrollbar { width: 6px; }
+.journal-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
+.journal-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
+.journal-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
+
+
+/* ── Spark intelligence ───────────────────────────────────── */
+.spark-container { max-width: 1400px; margin: 0 auto; }
+
+.spark-header {
+  border-left: 3px solid var(--purple);
+  padding-left: 1rem;
+  margin-bottom: 20px;
+}
+.spark-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--purple);
+  letter-spacing: 0.08em;
+  font-family: var(--font);
+}
+.spark-subtitle {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  margin-top: 0.25rem;
+}
+.spark-status-val {
+  color: var(--purple);
+  font-weight: 600;
+}
+
+.spark-stat-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+.spark-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: rgba(8, 4, 18, 0.5);
+}
+.spark-stat-label {
+  font-size: 0.65rem;
+  color: var(--text-dim);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.spark-stat-value {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text-bright);
+  font-family: var(--font);
+}
+
+.spark-event-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid var(--border);
+}
+.spark-event-row:last-child { border-bottom: none; }
+.spark-event-count {
+  font-weight: 600;
+  color: var(--text);
+  font-family: var(--font);
+}
+
+.spark-event-type-badge {
+  font-size: 0.65rem;
+  padding: 0.15em 0.5em;
+  border-radius: 3px;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  background: rgba(59, 26, 92, 0.4);
+  color: var(--text);
+}
+.spark-type-task_posted .spark-event-type-badge,
+.spark-event-type-badge.spark-type-task_posted { background: rgba(124, 58, 237, 0.2); color: var(--purple); }
+.spark-type-bid_submitted .spark-event-type-badge,
+.spark-event-type-badge.spark-type-bid_submitted { background: rgba(255, 122, 42, 0.2); color: var(--orange); }
+.spark-type-task_assigned .spark-event-type-badge,
+.spark-event-type-badge.spark-type-task_assigned { background: rgba(0, 232, 122, 0.15); color: var(--green); }
+.spark-type-task_completed .spark-event-type-badge,
+.spark-event-type-badge.spark-type-task_completed { background: rgba(0, 232, 122, 0.2); color: var(--green); }
+.spark-type-task_failed .spark-event-type-badge,
+.spark-event-type-badge.spark-type-task_failed { background: rgba(255, 68, 85, 0.2); color: var(--red); }
+.spark-type-agent_joined .spark-event-type-badge,
+.spark-event-type-badge.spark-type-agent_joined { background: rgba(168, 85, 247, 0.2); color: var(--purple); }
+.spark-type-prediction_result .spark-event-type-badge,
+.spark-event-type-badge.spark-type-prediction_result { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
+
+.spark-advisory {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  background: rgba(24, 10, 45, 0.5);
+}
+.spark-advisory.priority-high   { border-left: 3px solid var(--red); }
+.spark-advisory.priority-medium { border-left: 3px solid var(--orange); }
+.spark-advisory.priority-low    { border-left: 3px solid var(--green); }
+
+.spark-advisory-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+.spark-advisory-cat {
+  font-size: 0.6rem;
+  color: var(--text-dim);
+  letter-spacing: 0.08em;
+}
+.spark-advisory-priority {
+  font-size: 0.65rem;
+  color: var(--text);
+  font-family: var(--font);
+}
+.spark-advisory-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--text-bright);
+  margin-bottom: 0.25rem;
+}
+.spark-advisory-detail {
+  font-size: 0.8rem;
+  color: var(--text);
+  margin-bottom: 0.4rem;
+  line-height: 1.4;
+}
+.spark-advisory-action {
+  font-size: 0.75rem;
+  color: var(--purple);
+  font-style: italic;
+  border-left: 2px solid var(--purple);
+  padding-left: 0.5rem;
+}
+
+.spark-prediction {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0.6rem;
+  margin-bottom: 0.6rem;
+  background: rgba(8, 4, 18, 0.5);
+}
+.spark-prediction.evaluated { border-left: 3px solid var(--green); }
+.spark-prediction.pending   { border-left: 3px solid var(--orange); }
+
+.spark-pred-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.3rem;
+}
+.spark-pred-task {
+  font-size: 0.75rem;
+  color: var(--text);
+  font-family: var(--font);
+}
+.spark-pred-accuracy {
+  font-weight: 700;
+  font-size: 0.85rem;
+  font-family: var(--font);
+}
+.spark-pred-pending-badge {
+  font-size: 0.6rem;
+  background: var(--amber-dim);
+  color: var(--amber);
+  padding: 0.1em 0.4em;
+  border-radius: 3px;
+  font-weight: 600;
+}
+.spark-pred-detail { font-size: 0.75rem; color: var(--text); }
+.spark-pred-item { padding: 0.1rem 0; }
+.spark-pred-label { color: var(--text-dim); font-weight: 600; }
+.spark-pred-actual {
+  margin-top: 0.3rem;
+  padding-top: 0.3rem;
+  border-top: 1px dashed var(--border);
+  color: var(--text-bright);
+}
+.spark-pred-time {
+  font-size: 0.6rem;
+  color: var(--text-dim);
+  margin-top: 0.3rem;
+  font-family: var(--font);
+}
+
+.spark-memory-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0.6rem;
+  margin-bottom: 0.6rem;
+  background: rgba(8, 4, 18, 0.5);
+}
+.spark-memory-card.mem-pattern { border-left: 3px solid var(--green); }
+.spark-memory-card.mem-anomaly { border-left: 3px solid var(--red); }
+.spark-memory-card.mem-insight { border-left: 3px solid var(--purple); }
+
+.spark-mem-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+.spark-mem-type {
+  font-size: 0.6rem;
+  letter-spacing: 0.08em;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+.spark-mem-confidence {
+  font-size: 0.65rem;
+  color: var(--text);
+  font-family: var(--font);
+}
+.spark-mem-content {
+  font-size: 0.8rem;
+  color: var(--text-bright);
+  line-height: 1.4;
+}
+.spark-mem-meta {
+  font-size: 0.6rem;
+  color: var(--text-dim);
+  margin-top: 0.3rem;
+}
+
+.spark-timeline-scroll {
+  max-height: 70vh;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.spark-event {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  background: rgba(8, 4, 18, 0.5);
+}
+.spark-event-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.2rem;
+}
+.spark-event-importance { font-size: 0.5rem; color: var(--purple); }
+.spark-event-desc { font-size: 0.8rem; color: var(--text-bright); }
+.spark-event-meta {
+  font-size: 0.65rem;
+  color: var(--text-dim);
+  font-family: var(--font);
+  margin-top: 0.15rem;
+}
+.spark-event-time {
+  font-size: 0.6rem;
+  color: var(--text-dim);
+  font-family: var(--font);
+}
+
+@media (max-width: 992px) {
+  .spark-title { font-size: 1.1rem; }
+  .spark-stat-value { font-size: 1.1rem; }
+}
+@media (max-width: 768px) {
+  .spark-timeline-scroll { max-height: 50vh; }
+}
+
+
+/* ── Swarm live ───────────────────────────────────────────── */
+.swarm-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.swarm-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.swarm-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text-bright);
+  letter-spacing: 0.08em;
+}
+.swarm-log-box {
+  height: 200px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  background: rgba(24, 10, 45, 0.6);
+  padding: 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  font-family: var(--font);
+  font-size: 12px;
+}
+@media (max-width: 768px) {
+  .swarm-title { font-size: 1rem; }
+  .swarm-log-box { height: 160px; font-size: 11px; }
+}
+
+.activity-feed-panel {
+  margin-bottom: 16px;
+}
+.activity-feed {
+  max-height: 300px;
+  overflow-y: auto;
+  background: rgba(24, 10, 45, 0.6);
+  padding: 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+}
+.activity-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+  animation: fadeIn 0.3s ease;
+}
+.activity-item:last-child { border-bottom: none; }
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-5px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.activity-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+  width: 24px;
+  text-align: center;
+}
+.activity-content {
+  flex: 1;
+  min-width: 0;
+}
+.activity-label {
+  font-weight: 600;
+  color: var(--text-bright);
+  font-size: 12px;
+}
+.activity-desc {
+  color: var(--text-dim);
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.activity-meta {
+  display: flex;
+  gap: 8px;
+  font-size: 10px;
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+.activity-time {
+  font-family: var(--font);
+  color: var(--amber);
+}
+.activity-source { opacity: 0.7; }
+.activity-empty {
+  color: var(--text-dim);
+  font-size: 12px;
+  text-align: center;
+  padding: 20px;
+}
+.activity-badge {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background: #28a745;
+  border-radius: 50%;
+  margin-left: 8px;
+  animation: pulse-activity 2s infinite;
+}
+@keyframes pulse-activity {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+
+/* ── Tasks (Kanban) ───────────────────────────────────────── */
+.tasks-container { max-width: 1400px; margin: 0 auto; }
+.tasks-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.tasks-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text-bright);
+  letter-spacing: 0.08em;
+}
+.tasks-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 16px;
+}
+@media (max-width: 992px) {
+  .tasks-columns { grid-template-columns: 1fr; }
+}
+.task-column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.task-column-title {
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  color: var(--text-dim);
+}
+.task-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 12px;
+  margin-bottom: 10px;
+  background: rgba(24, 10, 45, 0.6);
+  transition: border-color 0.2s;
+}
+.task-card:hover { border-color: rgba(124, 58, 237, 0.3); }
+.task-card.priority-urgent { border-left: 3px solid var(--red, #ef4444); }
+.task-card.priority-high   { border-left: 3px solid var(--amber, #f59e0b); }
+.task-card.priority-normal { border-left: 3px solid var(--info, #4ea8de); }
+.task-card.priority-low    { border-left: 3px solid var(--text-dim); }
+.task-card-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--text-bright);
+  margin-bottom: 4px;
+}
+.task-card-desc {
+  font-size: 0.8rem;
+  color: var(--text);
+  margin-bottom: 6px;
+  max-height: 3em;
+  overflow: hidden;
+}
+.task-card-meta {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+.task-badge {
+  font-size: 0.65rem;
+  padding: 0.15em 0.5em;
+  border-radius: 3px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  background: var(--bg-tertiary);
+  color: var(--text);
+}
+.task-badge-urgent    { background: rgba(239,68,68,0.2);  color: var(--red, #ef4444); }
+.task-badge-high      { background: rgba(245,158,11,0.2); color: var(--amber, #f59e0b); }
+.task-badge-running   { background: rgba(59,130,246,0.2); color: #60a5fa; }
+.task-badge-completed { background: rgba(16,185,129,0.2); color: var(--green, #10b981); }
+.task-badge-failed    { background: rgba(239,68,68,0.2);  color: var(--red, #ef4444); }
+.task-badge-vetoed    { background: rgba(107,114,128,0.2); color: #9ca3af; }
+.task-badge-paused    { background: rgba(245,158,11,0.2); color: var(--amber, #f59e0b); }
+.task-actions {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.task-btn {
+  font-size: 0.7rem;
+  padding: 4px 12px;
+  border: none;
+  border-radius: var(--radius-sm, 4px);
+  cursor: pointer;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  font-family: var(--font);
+}
+.task-btn-approve { background: var(--green, #10b981); color: #000; }
+.task-btn-approve:hover { opacity: 0.85; }
+.task-btn-modify  { background: var(--purple, #7c3aed); color: #fff; }
+.task-btn-modify:hover { opacity: 0.85; }
+.task-btn-veto    { background: var(--red, #ef4444); color: #fff; }
+.task-btn-veto:hover { opacity: 0.85; }
+.task-btn-pause   { background: var(--amber, #f59e0b); color: #000; }
+.task-btn-cancel  { background: var(--bg-tertiary); color: var(--text); border: 1px solid var(--border); }
+.task-btn-retry   { background: var(--info, #4ea8de); color: #000; }
+.task-result {
+  font-size: 0.75rem;
+  color: var(--text);
+  margin-top: 6px;
+  padding: 6px;
+  background: rgba(0,0,0,0.2);
+  border-radius: 4px;
+  max-height: 4em;
+  overflow: hidden;
+  cursor: pointer;
+}
+.task-result.expanded { max-height: none; }
+.task-steps {
+  margin-top: 6px;
+  font-size: 0.7rem;
+}
+.task-step { padding: 2px 0; color: var(--text-dim); }
+.task-step.running   { color: #60a5fa; }
+.task-step.completed { color: var(--green, #10b981); }
+.task-time {
+  font-size: 0.6rem;
+  color: var(--text-dim);
+  font-family: var(--font);
+  margin-top: 4px;
+}
+
+/* Task create modal */
+.task-modal-overlay {
+  display: none;
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+}
+.task-modal-overlay.open { display: flex; }
+.task-modal {
+  background: var(--bg-secondary, #1a0a2e);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 24px;
+  max-width: 480px;
+  width: 90%;
+}
+.task-modal h3 {
+  margin: 0 0 16px;
+  font-size: 1rem;
+  color: var(--text-bright);
+}
+.task-modal label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  margin-bottom: 4px;
+  letter-spacing: 0.05em;
+}
+.task-modal input, .task-modal textarea, .task-modal select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary, #0a0f1e);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 0.85rem;
+}
+.task-modal textarea { min-height: 80px; resize: vertical; }
+.task-modal-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+.empty-column {
+  text-align: center;
+  padding: 24px;
+  color: var(--text-dim);
+  font-size: 0.8rem;
+}
+
+
+/* ── Thinking ─────────────────────────────────────────────── */
+.thinking-container { max-width: 680px; }
+
+.thinking-header {
+  border-left: 3px solid var(--purple);
+  padding-left: 1rem;
+}
+.thinking-title {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: var(--purple);
+  letter-spacing: 0.04em;
+  font-family: var(--font);
+}
+.thinking-subtitle {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  margin-top: 0.25rem;
+}
+
+.thought-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  background: rgba(24, 10, 45, 0.5);
+  transition: border-color 0.2s;
+}
+.thought-card:hover { border-color: var(--purple); }
+
+.thought-content {
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--text-bright);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.thought-meta {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
+}
+.thought-time {
+  font-size: 0.72rem;
+  color: var(--text-dim);
+  font-family: var(--font);
+}
+
+.seed-badge {
+  font-size: 0.68rem;
+  padding: 0.15em 0.5em;
+  border-radius: 4px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.seed-existential { background: rgba(138, 43, 226, 0.2); color: #c084fc; }
+.seed-swarm       { background: rgba(0, 232, 122, 0.15); color: var(--green); }
+.seed-scripture   { background: rgba(255, 193, 7, 0.15); color: var(--amber); }
+.seed-creative    { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
+.seed-memory      { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
+.seed-freeform    { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
+
+.thought-chain-link {
+  font-size: 0.72rem;
+  color: var(--text-dim);
+  text-decoration: none;
+  font-family: var(--font);
+}
+.thought-chain-link:hover { color: var(--purple); }
+
+.no-thoughts {
+  text-align: center;
+  color: var(--text-dim);
+  padding: 3rem 0;
+  font-size: 0.9rem;
+}
+
+@media (max-width: 576px) {
+  .thinking-title { font-size: 1.3rem; }
+  .thought-content { font-size: 0.9rem; }
+}
+
+
+/* ── Tools ────────────────────────────────────────────────── */
+.tools-container { max-width: 1200px; margin: 0 auto; }
+
+.tools-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.tools-title {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text-bright);
+  letter-spacing: 0.08em;
+}
+.tools-subtitle {
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+.tools-stat-box {
+  background: var(--glass-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 10px 18px;
+  text-align: center;
+}
+.tools-stat-val {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text-bright);
+}
+.tools-stat-label {
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  letter-spacing: 0.08em;
+}
+
+.tool-card { height: 100%; }
+.tool-card .card-title {
+  font-size: 0.85rem;
+  letter-spacing: 0.04em;
+}
+.tool-card .card-text {
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+
+@media (max-width: 768px) {
+  .tools-title { font-size: 1.1rem; }
+  .tools-header { flex-direction: column; }
+}
+
+
+/* ── Upgrades queue ───────────────────────────────────────── */
+.mc-section { margin-bottom: 2rem; }
+.mc-section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.upgrades-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.upgrade-card {
+  background: rgba(10, 15, 30, 0.6);
+  border: 1px solid var(--mc-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+.upgrade-pending  { border-left: 4px solid #ffc107; }
+.upgrade-approved { border-left: 4px solid #17a2b8; }
+.upgrade-applied  { border-left: 4px solid #28a745; }
+.upgrade-rejected { border-left: 4px solid #6c757d; }
+.upgrade-failed   { border-left: 4px solid #dc3545; }
+
+.upgrade-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+}
+.upgrade-header h3 { margin: 0; font-size: 1.1rem; }
+
+.upgrade-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.85rem;
+  color: var(--mc-text-secondary);
+  margin-bottom: 0.5rem;
+}
+.upgrade-files {
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+  font-family: monospace;
+}
+.upgrade-test-status { margin-bottom: 0.75rem; }
+.test-passed { color: #28a745; }
+.test-failed { color: #dc3545; }
+
+.upgrade-actions { display: flex; gap: 0.5rem; }
+
+.upgrades-history .upgrade-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+}
+.upgrade-desc { flex: 1; }
+.upgrade-time { font-size: 0.85rem; color: var(--mc-text-secondary); }
+.upgrade-error { color: #dc3545; cursor: help; }
+
+
+/* ── Voice ────────────────────────────────────────────────── */
+.voice-page {
+  max-width: 600px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.voice-button {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--border-glow), var(--purple));
+  border: none;
+  color: white;
+  font-size: 3.5rem;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 30px auto;
+  box-shadow: 0 0 40px rgba(124, 58, 237, 0.3);
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+.voice-button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 60px rgba(124, 58, 237, 0.5);
+}
+.voice-button:active, .voice-button.listening {
+  transform: scale(0.95);
+  background: linear-gradient(135deg, var(--red), var(--red-dim));
+  box-shadow: 0 0 60px rgba(255, 68, 85, 0.5);
+  animation: pulse-listen 1s infinite;
+}
+@keyframes pulse-listen {
+  0%, 100% { box-shadow: 0 0 40px rgba(255, 68, 85, 0.5); }
+  50% { box-shadow: 0 0 80px rgba(255, 68, 85, 0.8); }
+}
+
+.voice-status {
+  font-size: 1rem;
+  color: var(--text-dim);
+  margin-bottom: 16px;
+  letter-spacing: 0.06em;
+}
+
+.voice-result {
+  background: rgba(24, 10, 45, 0.8);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  margin-top: 20px;
+  text-align: left;
+}
+.voice-transcript {
+  font-size: 0.95rem;
+  margin-bottom: 12px;
+  color: var(--text);
+}
+.voice-response {
+  color: var(--purple);
+  font-style: italic;
+}
+
+.voice-tips {
+  margin-top: 24px;
+  padding: 16px;
+  background: rgba(24, 10, 45, 0.6);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  text-align: left;
+}
+.voice-tips h3 {
+  font-size: 0.85rem;
+  color: var(--text-bright);
+  margin-bottom: 10px;
+}
+.voice-tips ul {
+  color: var(--text-dim);
+  line-height: 2;
+  padding-left: 18px;
+  font-size: 0.85rem;
+}
+
+@media (max-width: 768px) {
+  .voice-button { width: 140px; height: 140px; font-size: 3rem; }
+}
+
+
+/* ── Voice enhanced ───────────────────────────────────────── */
+.voice-enhanced-page {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.wave-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 60px;
+  margin: 20px 0;
+}
+.wave-bar {
+  width: 4px;
+  background: var(--purple);
+  border-radius: 2px;
+  animation: wave 1s ease-in-out infinite;
+}
+.wave-bar:nth-child(1) { animation-delay: 0s; height: 20%; }
+.wave-bar:nth-child(2) { animation-delay: 0.1s; height: 40%; }
+.wave-bar:nth-child(3) { animation-delay: 0.2s; height: 60%; }
+.wave-bar:nth-child(4) { animation-delay: 0.3s; height: 80%; }
+.wave-bar:nth-child(5) { animation-delay: 0.4s; height: 100%; }
+.wave-bar:nth-child(6) { animation-delay: 0.3s; height: 80%; }
+.wave-bar:nth-child(7) { animation-delay: 0.2s; height: 60%; }
+.wave-bar:nth-child(8) { animation-delay: 0.1s; height: 40%; }
+.wave-bar:nth-child(9) { animation-delay: 0s; height: 20%; }
+@keyframes wave {
+  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
+  50% { transform: scaleY(1); opacity: 1; }
+}
+.wave-container:not(.listening) .wave-bar {
+  animation: none;
+  height: 10%;
+  opacity: 0.3;
+}
+
+.voice-btn-row {
+  text-align: center;
+  margin-bottom: 16px;
+}
+.voice-btn-row button {
+  padding: 12px 32px;
+  font-size: 1rem;
+  font-family: var(--font);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  min-height: 48px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: transform 0.1s, box-shadow 0.2s;
+}
+.voice-btn-row button:active { transform: scale(0.96); }
+#start-btn {
+  background: var(--border-glow);
+  border: none;
+  color: var(--text-bright);
+}
+#stop-btn {
+  background: var(--red);
+  border: none;
+  color: white;
+}
+
+#status-text {
+  text-align: center;
+  color: var(--text-dim);
+  margin-bottom: 16px;
+  font-size: 0.85rem;
+  letter-spacing: 0.06em;
+}
+
+.result-box {
+  background: rgba(24, 10, 45, 0.8);
+  border: 1px solid var(--border);
+  padding: 14px;
+  border-radius: var(--radius-md);
+  margin-bottom: 10px;
+  font-size: 0.9rem;
+  color: var(--text);
+}
+.result-box.timmy-reply {
+  border-left: 3px solid var(--purple);
+}
+.result-box strong {
+  color: var(--text-dim);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  display: block;
+  margin-bottom: 6px;
+}
+.result-box.timmy-reply strong { color: var(--purple); }
+
+#audio-player {
+  width: 100%;
+  margin-top: 10px;
+  border-radius: var(--radius-md);
+}
diff --git a/static/favicon.svg b/static/favicon.svg
new file mode 100644
index 00000000..5778d82f
--- /dev/null
+++ b/static/favicon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="6" fill="#080412"/>
+  <text x="16" y="23" text-anchor="middle" font-family="monospace" font-weight="700" font-size="20" fill="#a855f7">T</text>
+  <circle cx="24" cy="8" r="3" fill="#ff7a2a"/>
+</svg>
diff --git a/tests/dashboard/test_local_models.py b/tests/dashboard/test_local_models.py
index 859b498a..d5f04d3c 100644
--- a/tests/dashboard/test_local_models.py
+++ b/tests/dashboard/test_local_models.py
@@ -128,9 +128,9 @@ def test_L306_template_has_message_input(client):
 
 
 def test_L307_input_font_size_16px(client):
-    """Input font-size must be 16px to prevent iOS zoom."""
-    html = _local_html(client)
-    assert "font-size: 16px" in html
+    """Input font-size must be 16px to prevent iOS zoom (in static CSS)."""
+    css = Path(__file__).resolve().parents[2] / "static" / "css" / "mission-control.css"
+    assert "font-size: 16px" in css.read_text()
 
 
 def test_L308_input_has_ios_attributes(client):
@@ -143,15 +143,15 @@ def test_L308_input_has_ios_attributes(client):
 
 
 def test_L309_touch_targets_44px(client):
-    """Buttons and inputs must meet 44px min-height (Apple HIG)."""
-    html = _local_html(client)
-    assert "min-height: 44px" in html
+    """Buttons and inputs must meet 44px min-height (Apple HIG, in static CSS)."""
+    css = Path(__file__).resolve().parents[2] / "static" / "css" / "mission-control.css"
+    assert "min-height: 44px" in css.read_text()
 
 
 def test_L310_safe_area_inset_bottom(client):
-    """Chat input must account for iPhone home indicator."""
-    html = _local_html(client)
-    assert "safe-area-inset-bottom" in html
+    """Chat input must account for iPhone home indicator (in static CSS)."""
+    css = Path(__file__).resolve().parents[2] / "static" / "css" / "mission-control.css"
+    assert "safe-area-inset-bottom" in css.read_text()
 
 
 def test_L311_template_has_backend_badge(client):
diff --git a/tox.ini b/tox.ini
index 4b32e722..acc4beba 100644
--- a/tox.ini
+++ b/tox.ini
@@ -4,7 +4,7 @@ no_package = true
 
 # ── Base ─────────────────────────────────────────────────────────────────────
 [testenv]
-allowlist_externals = timeout, perl, docker, mkdir
+allowlist_externals = timeout, perl, docker, mkdir, bash, grep
 commands_pre = pip install -e ".[dev]" --quiet
 
 setenv =
@@ -15,7 +15,7 @@ setenv =
 # ── Lint & Format ────────────────────────────────────────────────────────────
 
 [testenv:lint]
-description = Check formatting (black), import order (isort), security (bandit)
+description = Check formatting (black), import order (isort), security (bandit), no inline CSS
 commands_pre =
 deps =
     black
@@ -25,6 +25,7 @@ commands =
     black --check --line-length 100 src/ tests/
     isort --check-only --profile black --line-length 100 src/ tests/
     bandit -r src/ -ll -s B101,B104,B307,B310,B324,B601,B608 -q
+    bash -c 'files=$(grep -rl "<style" src/dashboard/templates/ --include="*.html" 2>/dev/null); if [ -n "$files" ]; then echo "ERROR: inline <style> blocks found — move CSS to static/css/mission-control.css:"; echo "$files"; exit 1; fi; echo "No inline CSS — OK"'
 
 [testenv:format]
 description = Auto-format code with black + isort
@@ -133,6 +134,7 @@ commands =
     black --check --line-length 100 src/ tests/
     isort --check-only --profile black --line-length 100 src/ tests/
     bandit -r src/ -ll -s B101,B104,B307,B310,B324,B601,B608 -q
+    bash -c 'files=$(grep -rl "<style" src/dashboard/templates/ --include="*.html" 2>/dev/null); if [ -n "$files" ]; then echo "ERROR: inline <style> blocks found — move CSS to static/css/mission-control.css:"; echo "$files"; exit 1; fi; echo "No inline CSS — OK"'
     mkdir -p reports
     pytest tests/ \
         --cov=src \