From 83f4acc976ae71ca875e920ef568e74de8ef5854 Mon Sep 17 00:00:00 2001
From: Rene Fichtmueller <renefichtmueller@MacBook-Pro-von-Rene.local>
Date: Sat, 28 Mar 2026 02:42:55 +1300
Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20dashboard=20=E2=80=94=20glas?=
 =?UTF-8?q?smorphism,=20animated=20background,=20gradient=20accents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Premium dark UI with ambient glow background, glass cards, gradient
text, animated counters, glow effects on hype cycle dots, smooth
transitions, and improved detail panel with regional adoption and
revenue lifecycle data. Fix API data key mismatch (data vs transceivers).
---
 packages/dashboard/index.html | 857 +++++++++++++++++++++++-----------
 1 file changed, 587 insertions(+), 270 deletions(-)

diff --git a/packages/dashboard/index.html b/packages/dashboard/index.html
index 81b3a5e..f6589f6 100644
--- a/packages/dashboard/index.html
+++ b/packages/dashboard/index.html
@@ -5,33 +5,41 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>TIP — Transceiver Intelligence Platform</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <style>
     :root {
-      --bg: #0c0f16;
-      --surface: #13161f;
-      --surface2: #1a1e2a;
-      --surface3: #222736;
-      --border: #2a3040;
-      --border-hover: #3b4560;
-      --text: #d4d8e3;
-      --text-bright: #f0f2f5;
-      --text-dim: #7a829a;
+      --bg: #06080d;
+      --surface: rgba(14,17,27,0.85);
+      --surface-solid: #0e111b;
+      --surface2: rgba(22,27,42,0.7);
+      --surface3: #1a2035;
+      --border: rgba(56,68,100,0.35);
+      --border-hover: rgba(79,143,247,0.3);
+      --text: #c8cee0;
+      --text-bright: #edf0f7;
+      --text-dim: #5b6480;
       --accent: #4f8ff7;
-      --accent-dim: rgba(79,143,247,0.12);
-      --green: #22c55e;
-      --green-dim: rgba(34,197,94,0.12);
-      --yellow: #eab308;
-      --yellow-dim: rgba(234,179,8,0.12);
+      --accent-glow: rgba(79,143,247,0.25);
+      --accent2: #7c5cfc;
+      --green: #10b981;
+      --green-glow: rgba(16,185,129,0.2);
+      --yellow: #f59e0b;
+      --yellow-glow: rgba(245,158,11,0.15);
       --red: #ef4444;
-      --red-dim: rgba(239,68,68,0.12);
+      --red-glow: rgba(239,68,68,0.15);
       --purple: #a78bfa;
-      --purple-dim: rgba(167,139,250,0.12);
+      --purple-glow: rgba(167,139,250,0.15);
       --orange: #f97316;
-      --orange-dim: rgba(249,115,22,0.12);
-      --mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
+      --cyan: #22d3ee;
+      --cyan-glow: rgba(34,211,238,0.15);
+      --mono: 'JetBrains Mono', 'SF Mono', monospace;
+      --grad-accent: linear-gradient(135deg, #4f8ff7, #7c5cfc, #a78bfa);
+      --grad-warm: linear-gradient(135deg, #f59e0b, #ef4444);
+      --grad-cool: linear-gradient(135deg, #10b981, #22d3ee);
     }
+
     * { margin:0; padding:0; box-sizing:border-box; }
+
     body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
       background: var(--bg);
@@ -39,310 +47,509 @@
       min-height: 100vh;
       font-size: 14px;
       line-height: 1.5;
+      overflow-x: hidden;
     }
 
-    /* HEADER — clean, no gradient nonsense */
+    /* === ANIMATED BACKGROUND === */
+    .bg-grid {
+      position: fixed; inset: 0; z-index: 0; pointer-events: none;
+      background-image:
+        linear-gradient(rgba(79,143,247,0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(79,143,247,0.03) 1px, transparent 1px);
+      background-size: 60px 60px;
+    }
+    .bg-glow {
+      position: fixed; z-index: 0; pointer-events: none;
+      width: 600px; height: 600px; border-radius: 50%;
+      filter: blur(120px); opacity: 0.15;
+    }
+    .bg-glow-1 { top: -200px; left: -100px; background: #4f8ff7; animation: float1 20s ease-in-out infinite; }
+    .bg-glow-2 { bottom: -200px; right: -100px; background: #7c5cfc; animation: float2 25s ease-in-out infinite; }
+    .bg-glow-3 { top: 40%; left: 50%; background: #10b981; opacity: 0.08; animation: float3 30s ease-in-out infinite; }
+
+    @keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,60px)} }
+    @keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,-80px)} }
+    @keyframes float3 { 0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(-40%,-40%)} }
+
+    /* === LAYOUT WRAPPER === */
+    .app { position: relative; z-index: 1; }
+
+    /* === HEADER === */
     .header {
-      background: var(--surface);
+      background: rgba(10,13,22,0.8);
+      backdrop-filter: blur(20px) saturate(1.5);
+      -webkit-backdrop-filter: blur(20px) saturate(1.5);
       border-bottom: 1px solid var(--border);
-      padding: 0 1.5rem;
-      height: 48px;
+      padding: 0 2rem;
+      height: 56px;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      position: sticky; top: 0; z-index: 100;
     }
-    .header-left { display: flex; align-items: center; gap: 1.5rem; }
-    .header h1 {
-      font-size: 0.9rem;
-      font-weight: 600;
-      color: var(--text-bright);
-      letter-spacing: -0.01em;
+    .header-left { display: flex; align-items: center; gap: 2rem; }
+    .logo {
+      display: flex; align-items: center; gap: 0.6rem;
     }
+    .logo-mark {
+      width: 32px; height: 32px; border-radius: 8px;
+      background: var(--grad-accent);
+      display: flex; align-items: center; justify-content: center;
+      font-weight: 800; font-size: 0.85rem; color: #fff;
+      box-shadow: 0 0 20px var(--accent-glow);
+    }
+    .logo-text {
+      font-size: 0.95rem; font-weight: 700; color: var(--text-bright);
+      letter-spacing: -0.02em;
+    }
+    .logo-text span { color: var(--text-dim); font-weight: 400; margin-left: 0.25rem; }
     .header-stats {
-      display: flex;
-      gap: 1rem;
-      font-size: 0.75rem;
-      font-family: var(--mono);
-      color: var(--text-dim);
+      display: flex; gap: 1.5rem; font-size: 0.75rem;
+      font-family: var(--mono); color: var(--text-dim);
+    }
+    .header-stats .val {
+      color: var(--accent); font-weight: 600;
+      text-shadow: 0 0 10px var(--accent-glow);
     }
-    .header-stats .val { color: var(--text); font-weight: 500; }
     .header .status {
-      display: flex;
-      gap: 0.75rem;
-      align-items: center;
-      font-size: 0.75rem;
-      color: var(--text-dim);
+      display: flex; gap: 1rem; align-items: center; font-size: 0.75rem;
     }
+    .status-pill {
+      display: flex; align-items: center; gap: 0.35rem;
+      padding: 0.25rem 0.6rem; border-radius: 20px;
+      background: rgba(16,185,129,0.08);
+      border: 1px solid rgba(16,185,129,0.2);
+      color: var(--green); font-weight: 500;
+      font-size: 0.7rem; font-family: var(--mono);
+    }
+    .status-pill.err { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); color: var(--red); }
     .dot {
-      width: 6px; height: 6px; border-radius: 50%;
-      display: inline-block;
-      margin-right: 3px;
+      width: 6px; height: 6px; border-radius: 50%; display: inline-block;
+    }
+    .dot-ok { background: var(--green); box-shadow: 0 0 8px var(--green-glow); animation: pulse-dot 3s infinite; }
+    .dot-err { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
+    @keyframes pulse-dot { 0%,100%{opacity:1;box-shadow:0 0 4px var(--green-glow)} 50%{opacity:0.6;box-shadow:0 0 12px var(--green)} }
+    .version-tag {
+      font-family: var(--mono); font-size: 0.65rem; color: var(--text-dim);
+      padding: 0.15rem 0.5rem; border-radius: 4px;
+      background: var(--surface2); border: 1px solid var(--border);
     }
-    .dot-ok { background: var(--green); }
-    .dot-err { background: var(--red); }
 
-    /* TABS */
+    /* === TABS === */
     .tabs {
-      display: flex;
-      gap: 0;
+      display: flex; gap: 0;
       border-bottom: 1px solid var(--border);
-      padding: 0 1.5rem;
-      background: var(--surface);
+      padding: 0 2rem;
+      background: rgba(10,13,22,0.5);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
     }
     .tab {
-      padding: 0.6rem 1rem;
+      padding: 0.75rem 1.25rem;
       cursor: pointer;
       border-bottom: 2px solid transparent;
       color: var(--text-dim);
-      font-size: 0.8rem;
-      font-weight: 500;
-      transition: color 0.15s;
+      font-size: 0.8rem; font-weight: 500;
+      transition: all 0.2s ease;
+      position: relative;
     }
     .tab:hover { color: var(--text); }
-    .tab.active { color: var(--text-bright); border-bottom-color: var(--accent); }
+    .tab.active {
+      color: var(--text-bright);
+      border-bottom-color: var(--accent);
+    }
+    .tab.active::after {
+      content: '';
+      position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
+      background: var(--accent);
+      box-shadow: 0 0 12px var(--accent-glow), 0 0 4px var(--accent);
+    }
 
-    /* LAYOUT */
-    .main { padding: 1.25rem 1.5rem; max-width: 1600px; margin: 0 auto; }
-    .grid { display: grid; gap: 0.75rem; }
-    .g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
+    /* === MAIN === */
+    .main { padding: 1.5rem 2rem; max-width: 1600px; margin: 0 auto; }
+    .grid { display: grid; gap: 1rem; }
+    .g4 { grid-template-columns: repeat(4, 1fr); }
     .g3 { grid-template-columns: repeat(3, 1fr); }
     .g2 { grid-template-columns: 1fr 1fr; }
     .g2-1 { grid-template-columns: 2fr 1fr; }
 
-    /* CARDS */
+    /* === GLASS CARDS === */
     .card {
       background: var(--surface);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
       border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 1rem;
+      border-radius: 12px;
+      padding: 1.25rem;
+      transition: border-color 0.3s, box-shadow 0.3s;
+    }
+    .card:hover {
+      border-color: var(--border-hover);
+      box-shadow: 0 4px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.03);
+    }
+    .card-glow {
+      box-shadow: 0 0 30px var(--accent-glow);
+      border-color: rgba(79,143,247,0.25);
     }
-    .card-sm { padding: 0.75rem; }
     .card-label {
-      font-size: 0.7rem;
-      font-weight: 500;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      color: var(--text-dim);
-      margin-bottom: 0.25rem;
+      font-size: 0.7rem; font-weight: 500;
+      text-transform: uppercase; letter-spacing: 0.08em;
+      color: var(--text-dim); margin-bottom: 0.5rem;
     }
     .card-num {
-      font-size: 1.5rem;
-      font-weight: 700;
-      font-family: var(--mono);
-      color: var(--text-bright);
-      letter-spacing: -0.02em;
+      font-size: 2rem; font-weight: 800;
+      font-family: var(--mono); letter-spacing: -0.03em;
+      background: var(--grad-accent);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
+    .card-num.green { background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; }
+    .card-num.warm { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; }
     .card-num small {
-      font-size: 0.7rem;
-      font-weight: 400;
-      color: var(--text-dim);
-      margin-left: 4px;
+      font-size: 0.7rem; font-weight: 400;
+      -webkit-text-fill-color: var(--text-dim);
     }
 
-    /* BADGES */
-    .b { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.7rem; font-weight: 600; font-family: var(--mono); }
-    .b-blue { background: var(--accent-dim); color: var(--accent); }
-    .b-green { background: var(--green-dim); color: var(--green); }
-    .b-yellow { background: var(--yellow-dim); color: var(--yellow); }
-    .b-red { background: var(--red-dim); color: var(--red); }
-    .b-purple { background: var(--purple-dim); color: var(--purple); }
-    .b-orange { background: var(--orange-dim); color: var(--orange); }
-    .b-neutral { background: var(--surface3); color: var(--text-dim); }
+    /* === STAT CARDS (overview) === */
+    .stat-card {
+      background: var(--surface);
+      backdrop-filter: blur(12px);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 1.25rem;
+      position: relative; overflow: hidden;
+      transition: all 0.3s;
+    }
+    .stat-card::before {
+      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
+      background: var(--grad-accent); opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .stat-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
+    .stat-card:hover::before { opacity: 1; }
+    .stat-icon {
+      width: 36px; height: 36px; border-radius: 10px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1rem; margin-bottom: 0.75rem;
+    }
+    .stat-icon.blue { background: rgba(79,143,247,0.1); color: var(--accent); }
+    .stat-icon.green { background: rgba(16,185,129,0.1); color: var(--green); }
+    .stat-icon.purple { background: rgba(167,139,250,0.1); color: var(--purple); }
+    .stat-icon.orange { background: rgba(249,115,22,0.1); color: var(--orange); }
+    .stat-icon.cyan { background: rgba(34,211,238,0.1); color: var(--cyan); }
+    .stat-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
+    .stat-val {
+      font-size: 1.75rem; font-weight: 800; font-family: var(--mono);
+      color: var(--text-bright); letter-spacing: -0.03em; margin-top: 0.15rem;
+    }
 
-    /* TABLES */
+    /* === BADGES === */
+    .b {
+      display: inline-block; padding: 2px 8px; border-radius: 6px;
+      font-size: 0.68rem; font-weight: 600; font-family: var(--mono);
+      letter-spacing: 0.02em;
+    }
+    .b-blue { background: rgba(79,143,247,0.12); color: var(--accent); border: 1px solid rgba(79,143,247,0.2); }
+    .b-green { background: rgba(16,185,129,0.12); color: var(--green); border: 1px solid rgba(16,185,129,0.2); }
+    .b-yellow { background: rgba(245,158,11,0.12); color: var(--yellow); border: 1px solid rgba(245,158,11,0.2); }
+    .b-red { background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }
+    .b-purple { background: rgba(167,139,250,0.12); color: var(--purple); border: 1px solid rgba(167,139,250,0.2); }
+    .b-orange { background: rgba(249,115,22,0.12); color: var(--orange); border: 1px solid rgba(249,115,22,0.2); }
+    .b-cyan { background: rgba(34,211,238,0.12); color: var(--cyan); border: 1px solid rgba(34,211,238,0.2); }
+    .b-neutral { background: var(--surface3); color: var(--text-dim); border: 1px solid var(--border); }
+
+    /* === TABLES === */
     table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
     th {
-      text-align: left; padding: 0.5rem 0.6rem;
+      text-align: left; padding: 0.6rem 0.75rem;
       border-bottom: 1px solid var(--border);
-      color: var(--text-dim); font-weight: 500;
-      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
-      position: sticky; top: 0; background: var(--surface); z-index: 1;
+      color: var(--text-dim); font-weight: 600;
+      font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
+      position: sticky; top: 0; background: var(--surface-solid); z-index: 1;
     }
-    td { padding: 0.45rem 0.6rem; border-bottom: 1px solid rgba(42,48,64,0.5); }
-    tr.clickable { cursor: pointer; }
-    tr.clickable:hover td { background: var(--accent-dim); }
-    .table-wrap { max-height: 70vh; overflow-y: auto; }
+    td { padding: 0.55rem 0.75rem; border-bottom: 1px solid rgba(56,68,100,0.15); }
+    tr.clickable { cursor: pointer; transition: background 0.15s; }
+    tr.clickable:hover td { background: rgba(79,143,247,0.06); }
+    .table-wrap { max-height: 70vh; overflow-y: auto; border-radius: 8px; }
+    .table-wrap::-webkit-scrollbar { width: 6px; }
+    .table-wrap::-webkit-scrollbar-track { background: transparent; }
+    .table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 
-    /* SEARCH */
-    .search-row {
-      display: flex; gap: 0.5rem; margin-bottom: 1rem;
-    }
+    /* === SEARCH === */
+    .search-row { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
     .search-row input, .search-row select {
       background: var(--surface2); border: 1px solid var(--border);
-      border-radius: 4px; padding: 0.5rem 0.75rem;
+      border-radius: 8px; padding: 0.6rem 1rem;
       color: var(--text); font-size: 0.85rem;
+      backdrop-filter: blur(8px);
+      transition: border-color 0.2s, box-shadow 0.2s;
     }
     .search-row input { flex: 1; }
-    .search-row input:focus { outline: none; border-color: var(--accent); }
-    .search-row select { min-width: 120px; }
-    .btn {
-      background: var(--accent); color: #fff; border: none;
-      border-radius: 4px; padding: 0.5rem 1rem;
-      font-weight: 600; font-size: 0.8rem; cursor: pointer;
+    .search-row input:focus {
+      outline: none; border-color: var(--accent);
+      box-shadow: 0 0 0 3px var(--accent-glow);
     }
-    .btn:hover { opacity: 0.9; }
+    .search-row select { min-width: 140px; }
+    .btn {
+      background: var(--grad-accent); color: #fff; border: none;
+      border-radius: 8px; padding: 0.6rem 1.25rem;
+      font-weight: 600; font-size: 0.8rem; cursor: pointer;
+      transition: transform 0.15s, box-shadow 0.15s;
+      box-shadow: 0 2px 12px var(--accent-glow);
+    }
+    .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }
+    .btn:active { transform: translateY(0); }
     .btn-ghost {
       background: transparent; border: 1px solid var(--border);
-      color: var(--text); cursor: pointer; border-radius: 4px;
-      padding: 0.4rem 0.75rem; font-size: 0.75rem; font-weight: 500;
+      color: var(--text); cursor: pointer; border-radius: 8px;
+      padding: 0.5rem 0.85rem; font-size: 0.75rem; font-weight: 500;
+      transition: all 0.2s;
     }
-    .btn-ghost:hover { border-color: var(--border-hover); background: var(--surface2); }
+    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(79,143,247,0.05); }
 
-    /* RESULT ITEMS */
+    /* === RESULT ITEMS === */
     .ri {
-      border-bottom: 1px solid var(--border);
-      padding: 0.75rem 0;
-      cursor: pointer;
+      border-bottom: 1px solid rgba(56,68,100,0.2);
+      padding: 1rem 0; cursor: pointer;
+      transition: all 0.15s;
     }
     .ri:last-child { border-bottom: none; }
-    .ri:hover { background: var(--accent-dim); margin: 0 -1rem; padding: 0.75rem 1rem; }
-    .ri-title { font-weight: 500; font-size: 0.85rem; color: var(--text-bright); }
-    .ri-body { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.25rem; }
-    .ri-meta { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.25rem; display: flex; gap: 0.5rem; align-items: center; }
+    .ri:hover { background: rgba(79,143,247,0.04); margin: 0 -1.25rem; padding: 1rem 1.25rem; border-radius: 8px; }
+    .ri-title { font-weight: 600; font-size: 0.85rem; color: var(--text-bright); }
+    .ri-body { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.3rem; line-height: 1.6; }
+    .ri-meta { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.4rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
 
-    /* HYPE CYCLE */
-    .hype-svg-wrap {
+    /* === HYPE CYCLE === */
+    .hype-wrap {
       background: var(--surface);
+      backdrop-filter: blur(12px);
       border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 1rem 1.5rem;
+      border-radius: 12px;
+      padding: 1.5rem;
       overflow-x: auto;
     }
-    .hype-svg-wrap svg { display: block; margin: 0 auto; }
-    .hype-dot { cursor: pointer; transition: filter 0.15s; }
-    .hype-dot:hover { filter: brightness(1.4); }
+    .hype-wrap svg { display: block; margin: 0 auto; }
+    .hype-dot { cursor: pointer; transition: all 0.2s; }
+    .hype-dot:hover { filter: brightness(1.5) drop-shadow(0 0 6px currentColor); }
     .hype-label { font-size: 10px; fill: var(--text); pointer-events: none; font-family: 'Inter', sans-serif; }
     .hype-phase-label { font-size: 9px; fill: var(--text-dim); text-anchor: middle; font-family: 'Inter', sans-serif; }
 
-    .hype-bar { height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; width: 100%; }
-    .hype-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
+    .hype-header {
+      display: flex; justify-content: space-between; align-items: center;
+      margin-bottom: 1rem;
+    }
+    .hype-title {
+      font-weight: 700; font-size: 1rem; color: var(--text-bright);
+    }
+    .hype-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.2rem; }
+    .hype-legend { display: flex; gap: 1rem; font-size: 0.68rem; color: var(--text-dim); align-items: center; }
+    .hype-legend-dot {
+      width: 8px; height: 8px; border-radius: 50%; display: inline-block;
+      margin-right: 0.3rem; vertical-align: middle;
+    }
 
-    /* TOOLTIPS */
+    .hype-bar { height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; width: 100%; }
+    .hype-fill { height: 100%; border-radius: 3px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
+
+    /* === TOOLTIPS === */
     .tip { position: relative; cursor: help; }
     .tip::after {
       content: attr(data-tip);
-      position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
-      background: #1a1a2e; color: #e0e0e0; border: 1px solid var(--border);
-      padding: 0.5rem 0.75rem; border-radius: 6px;
-      font-size: 0.72rem; line-height: 1.4; font-weight: 400; white-space: normal; width: max-content; max-width: 280px;
+      position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
+      background: rgba(10,13,22,0.95); color: #e0e0e0;
+      border: 1px solid var(--border);
+      padding: 0.6rem 0.85rem; border-radius: 10px;
+      font-size: 0.72rem; line-height: 1.5; font-weight: 400;
+      white-space: normal; width: max-content; max-width: 300px;
       opacity: 0; pointer-events: none; transition: opacity 0.2s;
-      z-index: 500; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
+      z-index: 500; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+      backdrop-filter: blur(20px);
     }
     .tip::before {
-      content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
-      border: 5px solid transparent; border-top-color: var(--border);
+      content: ''; position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
+      border: 6px solid transparent; border-top-color: var(--border);
       opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 501;
     }
     .tip:hover::after, .tip:hover::before { opacity: 1; }
     th.tip::after { left: 0; transform: none; }
 
-    /* DETAIL PANEL (shared) */
+    /* === DETAIL PANEL === */
     .panel {
       position: fixed; top: 0; right: 0;
-      width: 480px; height: 100vh;
-      background: var(--surface); border-left: 1px solid var(--border);
-      box-shadow: -4px 0 24px rgba(0,0,0,0.4);
+      width: 520px; height: 100vh;
+      background: rgba(10,13,22,0.95);
+      backdrop-filter: blur(24px) saturate(1.5);
+      -webkit-backdrop-filter: blur(24px) saturate(1.5);
+      border-left: 1px solid var(--border);
+      box-shadow: -8px 0 40px rgba(0,0,0,0.5);
       z-index: 1000; overflow-y: auto;
-      transform: translateX(100%); transition: transform 0.25s ease;
-      padding: 1.25rem;
+      transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+      padding: 1.5rem;
     }
     .panel.open { transform: translateX(0); }
+    .panel::-webkit-scrollbar { width: 4px; }
+    .panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
     .panel-close {
-      position: absolute; top: 0.75rem; right: 0.75rem;
+      position: absolute; top: 1rem; right: 1rem;
       background: var(--surface2); border: 1px solid var(--border);
-      color: var(--text-dim); width: 28px; height: 28px; border-radius: 4px;
-      cursor: pointer; font-size: 1rem;
+      color: var(--text-dim); width: 32px; height: 32px; border-radius: 8px;
+      cursor: pointer; font-size: 1.1rem;
       display: flex; align-items: center; justify-content: center;
+      transition: all 0.2s;
     }
-    .panel-close:hover { background: var(--border); color: var(--text); }
-    .panel-title { font-size: 1.1rem; font-weight: 700; color: var(--text-bright); margin-bottom: 0.15rem; }
-    .panel-sub { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 1rem; }
-    .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
+    .panel-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
+    .panel-title {
+      font-size: 1.2rem; font-weight: 800; color: var(--text-bright);
+      margin-bottom: 0.2rem; letter-spacing: -0.02em;
+    }
+    .panel-sub { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 1.25rem; }
+    .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.25rem; }
     .panel-stat {
-      background: var(--surface2); border-radius: 4px; padding: 0.6rem;
+      background: var(--surface2); border-radius: 10px; padding: 0.75rem;
+      border: 1px solid var(--border);
+    }
+    .panel-stat-label { font-size: 0.65rem; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.06em; font-weight: 500; }
+    .panel-stat-val {
+      font-size: 1.3rem; font-weight: 800; font-family: var(--mono);
+      margin-top: 0.2rem; color: var(--text-bright);
+    }
+    .panel-section {
+      font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
+      letter-spacing: 0.06em; color: var(--text-dim);
+      margin: 1.25rem 0 0.6rem;
+      display: flex; align-items: center; gap: 0.5rem;
+    }
+    .panel-section::after {
+      content: ''; flex: 1; height: 1px;
+      background: linear-gradient(90deg, var(--border), transparent);
     }
-    .panel-stat-label { font-size: 0.65rem; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.04em; }
-    .panel-stat-val { font-size: 1.2rem; font-weight: 700; font-family: var(--mono); margin-top: 0.15rem; color: var(--text-bright); }
-    .panel-section { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin: 1rem 0 0.5rem; }
     .panel-row {
       display: flex; justify-content: space-between; align-items: center;
-      padding: 0.35rem 0; border-bottom: 1px solid rgba(42,48,64,0.5);
+      padding: 0.4rem 0; border-bottom: 1px solid rgba(56,68,100,0.15);
       font-size: 0.8rem;
     }
     .panel-row:last-child { border-bottom: none; }
     .panel-row-label { color: var(--text-dim); }
-    .panel-row-val { font-weight: 500; font-family: var(--mono); color: var(--text); }
+    .panel-row-val { font-weight: 600; font-family: var(--mono); color: var(--text); }
 
     .forecast-bar {
-      display: flex; align-items: center; gap: 0.5rem;
-      margin-bottom: 0.3rem; font-size: 0.8rem;
+      display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem;
     }
-    .forecast-bar .yr { width: 36px; color: var(--text-dim); font-family: var(--mono); font-size: 0.75rem; }
-    .forecast-bar .track { flex: 1; height: 5px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
-    .forecast-bar .fill { height: 100%; border-radius: 3px; }
-    .forecast-bar .pct { width: 40px; text-align: right; font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim); }
+    .forecast-bar .yr { width: 40px; color: var(--text-dim); font-family: var(--mono); font-size: 0.75rem; }
+    .forecast-bar .track { flex: 1; height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
+    .forecast-bar .fill { height: 100%; border-radius: 3px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
+    .forecast-bar .pct { width: 44px; text-align: right; font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim); }
 
-    /* BLOG */
+    /* === BLOG CARDS === */
     .gen-card {
-      background: var(--surface2); border: 1px solid var(--border);
-      border-radius: 6px; padding: 0.75rem; cursor: pointer;
-      transition: border-color 0.15s;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px; padding: 1.25rem; cursor: pointer;
+      transition: all 0.3s; position: relative; overflow: hidden;
     }
-    .gen-card:hover { border-color: var(--accent); }
-    .gen-card-title { font-weight: 600; font-size: 0.85rem; color: var(--text-bright); }
-    .gen-card-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.2rem; }
+    .gen-card::before {
+      content: ''; position: absolute; inset: 0;
+      background: var(--grad-accent); opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .gen-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(79,143,247,0.1); }
+    .gen-card:hover::before { opacity: 0.03; }
+    .gen-card-title { font-weight: 700; font-size: 0.9rem; color: var(--text-bright); position: relative; }
+    .gen-card-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.3rem; position: relative; }
 
-    /* UTILITIES */
+    /* === COLLECTION ITEM === */
+    .col-item {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 0.5rem 0; border-bottom: 1px solid rgba(56,68,100,0.15);
+    }
+    .col-item:last-child { border-bottom: none; }
+    .col-name { font-family: var(--mono); font-size: 0.75rem; color: var(--text); }
+
+    /* === ENDPOINT LIST === */
+    .endpoint-grid {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem;
+      font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); line-height: 1.8;
+    }
+    .endpoint-item {
+      padding: 0.2rem 0.5rem; border-radius: 4px;
+      transition: all 0.15s;
+    }
+    .endpoint-item:hover { background: rgba(79,143,247,0.06); color: var(--accent); }
+
+    /* === UTILITIES === */
     .hidden { display: none !important; }
-    .loading { text-align: center; padding: 2rem; color: var(--text-dim); font-size: 0.85rem; }
+    .loading { text-align: center; padding: 2.5rem; color: var(--text-dim); font-size: 0.85rem; }
     .mono { font-family: var(--mono); }
     .dim { color: var(--text-dim); }
-    .mt { margin-top: 0.75rem; }
-    .mb { margin-bottom: 0.75rem; }
+    .mt { margin-top: 1rem; }
+    .mb { margin-bottom: 1rem; }
 
-    /* TOAST */
+    /* === TOAST === */
     .toast {
-      position: fixed; top: 1rem; right: 1rem; z-index: 9999;
-      background: var(--surface); border: 1px solid var(--green);
-      border-radius: 6px; padding: 0.75rem 1.25rem; max-width: 380px;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
-      transform: translateX(120%); transition: transform 0.25s ease;
+      position: fixed; top: 1.25rem; right: 1.25rem; z-index: 9999;
+      background: rgba(10,13,22,0.95);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--green);
+      border-radius: 12px; padding: 0.85rem 1.5rem; max-width: 400px;
+      box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 20px var(--green-glow);
+      transform: translateX(120%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
     }
     .toast.show { transform: translateX(0); }
-    .toast.error { border-color: var(--red); }
-    .toast-title { font-weight: 600; font-size: 0.8rem; color: var(--text-bright); }
-    .toast-body { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.1rem; }
+    .toast.error { border-color: var(--red); box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 20px var(--red-glow); }
+    .toast-title { font-weight: 700; font-size: 0.8rem; color: var(--text-bright); }
+    .toast-body { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.15rem; }
 
-    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
-    .pulse { animation: pulse 2s infinite; }
+    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
+    .pulse { animation: pulse 1.5s infinite; }
 
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .fade-in { animation: fadeInUp 0.4s ease-out; }
+
+    @media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
     @media (max-width: 900px) {
-      .g2, .g2-1, .g3 { grid-template-columns: 1fr; }
+      .g2, .g2-1, .g3, .g4 { grid-template-columns: 1fr; }
       .panel { width: 100%; }
       .header-stats { display: none; }
+      .main { padding: 1rem; }
+      .header { padding: 0 1rem; }
+      .tabs { padding: 0 1rem; }
     }
   </style>
 </head>
 <body>
 
+<!-- AMBIENT BACKGROUND -->
+<div class="bg-grid"></div>
+<div class="bg-glow bg-glow-1"></div>
+<div class="bg-glow bg-glow-2"></div>
+<div class="bg-glow bg-glow-3"></div>
+
+<div class="app">
+
 <div id="toast" class="toast"><div class="toast-title"></div><div class="toast-body"></div></div>
 
 <!-- HEADER -->
 <div class="header">
   <div class="header-left">
-    <h1>TIP</h1>
+    <div class="logo">
+      <div class="logo-mark">TIP</div>
+      <div class="logo-text">Transceiver Intelligence<span>Platform</span></div>
+    </div>
     <div class="header-stats">
-      <span><span class="val" id="stat-transceivers">—</span> transceivers</span>
-      <span><span class="val" id="stat-vendors">—</span> vendors</span>
-      <span><span class="val" id="stat-standards">—</span> standards</span>
-      <span><span class="val" id="stat-news">—</span> news</span>
+      <span><span class="val" id="stat-transceivers">&mdash;</span> transceivers</span>
+      <span><span class="val" id="stat-vendors">&mdash;</span> vendors</span>
+      <span><span class="val" id="stat-standards">&mdash;</span> standards</span>
+      <span><span class="val" id="stat-news">&mdash;</span> articles</span>
     </div>
   </div>
   <div class="status">
-    <span><span class="dot dot-ok" id="api-status"></span>API</span>
-    <span><span class="dot dot-ok" id="db-status"></span>DB</span>
-    <span><span class="dot dot-ok" id="qdrant-status"></span>Qdrant</span>
-    <span class="mono dim" id="version-label"></span>
+    <div class="status-pill" id="api-pill"><span class="dot dot-ok" id="api-status"></span>API</div>
+    <div class="status-pill" id="db-pill"><span class="dot dot-ok" id="db-status"></span>DB</div>
+    <div class="status-pill" id="qdrant-pill"><span class="dot dot-ok" id="qdrant-status"></span>Qdrant</div>
+    <span class="version-tag" id="version-label"></span>
   </div>
 </div>
 
@@ -358,20 +565,42 @@
 
 <div class="main">
   <!-- OVERVIEW -->
-  <div id="tab-overview">
+  <div id="tab-overview" class="fade-in">
+    <div class="grid g4 mb">
+      <div class="stat-card">
+        <div class="stat-icon blue">&#9881;</div>
+        <div class="stat-label">Transceivers</div>
+        <div class="stat-val" id="ov-transceivers">&mdash;</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon green">&#9733;</div>
+        <div class="stat-label">Vendors</div>
+        <div class="stat-val" id="ov-vendors">&mdash;</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon purple">&#9879;</div>
+        <div class="stat-label">Standards</div>
+        <div class="stat-val" id="ov-standards">&mdash;</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon cyan">&#9998;</div>
+        <div class="stat-label">News Articles</div>
+        <div class="stat-val" id="ov-news">&mdash;</div>
+      </div>
+    </div>
     <div class="grid g2 mb">
       <div class="card">
         <div class="card-label">Vector Collections</div>
-        <div id="collections-list" class="mt" style="font-size:0.8rem"></div>
+        <div id="collections-list" class="mt"></div>
       </div>
       <div class="card">
-        <div class="card-label">Recent News</div>
+        <div class="card-label">Recent Intelligence</div>
         <div id="recent-news" class="mt"></div>
       </div>
     </div>
     <div class="card">
       <div class="card-label">API Endpoints</div>
-      <div id="endpoints-list" class="mt" style="font-family:var(--mono);font-size:0.75rem;color:var(--text-dim);line-height:1.7;columns:2"></div>
+      <div id="endpoints-list" class="endpoint-grid mt"></div>
     </div>
   </div>
 
@@ -393,19 +622,18 @@
 
   <!-- HYPE CYCLE -->
   <div id="tab-hype" class="hidden">
-    <div class="hype-svg-wrap">
-      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem">
+    <div class="hype-wrap">
+      <div class="hype-header">
         <div>
-          <span style="font-weight:600;font-size:0.9rem;color:var(--text-bright)">Optical Transceiver Hype Cycle</span>
-          <span class="mono dim" style="margin-left:0.5rem" id="hype-year">2026</span>
-          <div style="font-size:0.7rem;color:var(--text-dim);margin-top:0.15rem">Norton-Bass Model &mdash; click any technology for details</div>
+          <div class="hype-title">Optical Transceiver Hype Cycle <span class="mono dim" id="hype-year">2026</span></div>
+          <div class="hype-sub">Norton-Bass Multigenerational Diffusion Model &mdash; click any technology for details</div>
         </div>
-        <div style="display:flex;gap:0.75rem;font-size:0.65rem;color:var(--text-dim)">
-          <span><span class="dot dot-ok" style="background:#4f8ff7"></span>Innovation</span>
-          <span><span class="dot" style="background:#eab308"></span>Peak</span>
-          <span><span class="dot" style="background:#ef4444"></span>Trough</span>
-          <span><span class="dot" style="background:#a78bfa"></span>Slope</span>
-          <span><span class="dot" style="background:#22c55e"></span>Plateau</span>
+        <div class="hype-legend">
+          <span><span class="hype-legend-dot" style="background:#4f8ff7"></span>Innovation</span>
+          <span><span class="hype-legend-dot" style="background:#f59e0b"></span>Peak</span>
+          <span><span class="hype-legend-dot" style="background:#ef4444"></span>Trough</span>
+          <span><span class="hype-legend-dot" style="background:#a78bfa"></span>Slope</span>
+          <span><span class="hype-legend-dot" style="background:#10b981"></span>Plateau</span>
         </div>
       </div>
       <div id="hype-svg-container"></div>
@@ -413,7 +641,14 @@
     <div class="card mt">
       <div class="table-wrap">
         <table>
-          <thead><tr><th>Technology</th><th class="tip" data-tip="Current phase in the Gartner-style technology adoption lifecycle. Technologies move from initial hype through disillusionment to mature productivity.">Phase</th><th class="tip" data-tip="Position on the hype curve (0-100%). 0% = just emerging, 50% = mid-cycle, 100% = fully mature.">Position</th><th class="tip" data-tip="Market adoption rate as percentage of total addressable market. Based on Norton-Bass diffusion model forecast.">Adoption</th><th class="tip" data-tip="Estimated year when this technology reaches peak hype / maximum media attention before reality sets in.">Peak</th><th class="tip" data-tip="Estimated years until this technology reaches the Plateau of Productivity — stable, mainstream deployment.">To Plateau</th></tr></thead>
+          <thead><tr>
+            <th>Technology</th>
+            <th class="tip" data-tip="Current phase in the technology adoption lifecycle.">Phase</th>
+            <th class="tip" data-tip="Position on the hype curve (0-100%).">Position</th>
+            <th class="tip" data-tip="Market adoption rate based on Norton-Bass diffusion model.">Adoption</th>
+            <th class="tip" data-tip="Estimated year of peak hype / maximum attention.">Peak</th>
+            <th class="tip" data-tip="Years until mainstream, stable deployment.">To Plateau</th>
+          </tr></thead>
           <tbody id="hype-table"></tbody>
         </table>
       </div>
@@ -433,6 +668,7 @@
         <option value="QSFP28">QSFP28</option>
         <option value="QSFP-DD">QSFP-DD</option>
         <option value="OSFP">OSFP</option>
+        <option value="CFP">CFP</option>
         <option value="CFP2">CFP2</option>
       </select>
       <button class="btn" id="tx-search-btn">Search</button>
@@ -449,9 +685,7 @@
 
   <!-- NEWS -->
   <div id="tab-news" class="hidden">
-    <div class="card">
-      <div id="news-list"></div>
-    </div>
+    <div class="card"><div id="news-list"></div></div>
   </div>
 
   <!-- BLOG -->
@@ -474,7 +708,9 @@
   </div>
 </div>
 
-<!-- DETAIL PANEL (shared for hype cycle + transceivers) -->
+</div><!-- .app -->
+
+<!-- DETAIL PANEL -->
 <div id="detail-panel" class="panel">
   <button class="panel-close" id="panel-close">&times;</button>
   <div id="panel-content"></div>
@@ -521,13 +757,30 @@ function closePanel() { el('detail-panel').classList.remove('open'); }
 el('panel-close').addEventListener('click', closePanel);
 document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closePanel(); });
 
+// Animated number counter
+function animateValue(el, target, duration) {
+  if (!el || isNaN(target)) { if (el) el.textContent = target; return; }
+  var start = 0, startTime = null;
+  target = parseInt(target);
+  function step(ts) {
+    if (!startTime) startTime = ts;
+    var p = Math.min((ts - startTime) / duration, 1);
+    p = 1 - Math.pow(1 - p, 3); // ease-out cubic
+    el.textContent = Math.floor(p * target).toLocaleString();
+    if (p < 1) requestAnimationFrame(step);
+  }
+  requestAnimationFrame(step);
+}
+
 // TABS
 document.querySelectorAll('.tab').forEach(function(tab) {
   tab.addEventListener('click', function() {
     document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
     tab.classList.add('active');
     document.querySelectorAll('[id^="tab-"]').forEach(function(p) { p.classList.add('hidden'); });
-    el('tab-' + tab.dataset.tab).classList.remove('hidden');
+    var target = el('tab-' + tab.dataset.tab);
+    target.classList.remove('hidden');
+    target.classList.add('fade-in');
     if (tab.dataset.tab === 'hype') loadHypeCycle();
     if (tab.dataset.tab === 'transceivers') searchTransceivers();
     if (tab.dataset.tab === 'news') loadNews();
@@ -539,30 +792,42 @@ document.querySelectorAll('.tab').forEach(function(tab) {
 async function loadOverview() {
   try {
     var h = await api('/api/health');
-    el('stat-transceivers').textContent = h.database.stats.transceiver_count;
-    el('stat-vendors').textContent = h.database.stats.vendor_count;
-    el('stat-standards').textContent = h.database.stats.standard_count;
-    el('stat-news').textContent = h.database.stats.news_count;
+    animateValue(el('stat-transceivers'), h.database.stats.transceiver_count, 800);
+    animateValue(el('stat-vendors'), h.database.stats.vendor_count, 600);
+    animateValue(el('stat-standards'), h.database.stats.standard_count, 500);
+    animateValue(el('stat-news'), h.database.stats.news_count, 700);
+    animateValue(el('ov-transceivers'), h.database.stats.transceiver_count, 1000);
+    animateValue(el('ov-vendors'), h.database.stats.vendor_count, 800);
+    animateValue(el('ov-standards'), h.database.stats.standard_count, 700);
+    animateValue(el('ov-news'), h.database.stats.news_count, 900);
     el('version-label').textContent = 'v' + h.version;
     el('api-status').className = 'dot ' + (h.success ? 'dot-ok' : 'dot-err');
     el('db-status').className = 'dot ' + (h.database.connected ? 'dot-ok' : 'dot-err');
-  } catch(e) { el('api-status').className = 'dot dot-err'; }
+    if (!h.success) el('api-pill').classList.add('err');
+    if (!h.database.connected) el('db-pill').classList.add('err');
+  } catch(e) {
+    el('api-status').className = 'dot dot-err';
+    el('api-pill').classList.add('err');
+  }
 
   try {
     var stats = await api('/api/search/stats');
     buildDOM(el('collections-list'), stats.collections.map(function(c) {
-      return '<div style="display:flex;justify-content:space-between;padding:0.35rem 0;border-bottom:1px solid var(--border)">'
-        + '<span class="mono" style="font-size:0.75rem">' + esc(c.collection) + '</span>'
-        + '<span class="b ' + (c.pointsCount > 0 ? 'b-green' : 'b-yellow') + '">' + esc(c.pointsCount) + '</span>'
+      return '<div class="col-item">'
+        + '<span class="col-name">' + esc(c.collection) + '</span>'
+        + '<span class="b ' + (c.pointsCount > 0 ? 'b-green' : 'b-yellow') + '">' + esc(c.pointsCount) + ' vectors</span>'
         + '</div>';
     }).join(''));
     el('qdrant-status').className = 'dot dot-ok';
-  } catch(e) { el('qdrant-status').className = 'dot dot-err'; }
+  } catch(e) {
+    el('qdrant-status').className = 'dot dot-err';
+    el('qdrant-pill').classList.add('err');
+  }
 
   try {
     var root = await api('/');
     buildDOM(el('endpoints-list'), (root.endpoints || []).map(function(e) {
-      return '<div style="padding:0.1rem 0">' + esc(e) + '</div>';
+      return '<div class="endpoint-item">' + esc(e) + '</div>';
     }).join(''));
   } catch(e) {}
 
@@ -573,7 +838,7 @@ async function loadOverview() {
         + '<div class="ri-title">' + esc(n.title) + '</div>'
         + '<div class="ri-meta"><span class="b b-blue">' + esc(n.source) + '</span> ' + (n.published_at ? new Date(n.published_at).toLocaleDateString() : '') + '</div>'
         + '</div>';
-    }).join('') || '<div class="loading">No news</div>');
+    }).join('') || '<div class="loading">No news yet</div>');
   } catch(e) {}
 }
 
@@ -582,15 +847,17 @@ function doSearch() {
   var q = el('search-input').value;
   var col = el('search-collection').value;
   if (!q) return;
-  el('search-results').textContent = 'Searching...';
+  el('search-results').innerHTML = '<div class="loading pulse">Searching...</div>';
   api('/api/search?q=' + encodeURIComponent(q) + '&collection=' + col + '&limit=15').then(function(data) {
     buildDOM(el('search-results'), (data.results || []).map(function(r) {
       var title = r.standard_name || r.title || r.question || r.symptom || (r.text ? r.text.slice(0,80) : 'Result');
       var body = r.answer || r.solution || r.summary || (r.text ? r.text.slice(0,300) : '');
+      var score = (r.score * 100).toFixed(1);
+      var scoreColor = score > 70 ? 'var(--green)' : score > 40 ? 'var(--yellow)' : 'var(--text-dim)';
       return '<div class="ri">'
         + '<div style="display:flex;justify-content:space-between;align-items:center">'
         + '<div class="ri-title">' + esc(title) + '</div>'
-        + '<span class="mono dim" style="font-size:0.7rem">' + (r.score * 100).toFixed(1) + '%</span>'
+        + '<span class="mono" style="font-size:0.72rem;color:' + scoreColor + ';font-weight:600">' + score + '%</span>'
         + '</div>'
         + '<div class="ri-body">' + esc(body) + '</div>'
         + '<div class="ri-meta">'
@@ -600,7 +867,7 @@ function doSearch() {
         + (r.severity ? '<span class="b b-red">' + esc(r.severity) + '</span>' : '')
         + (r.vendor ? '<span class="dim">' + esc(r.vendor) + '</span>' : '')
         + '</div></div>';
-    }).join('') || '<div class="loading">No results</div>');
+    }).join('') || '<div class="loading">No results found</div>');
   });
 }
 el('search-btn').addEventListener('click', doSearch);
@@ -609,10 +876,10 @@ el('search-input').addEventListener('keydown', function(e) { if (e.key === 'Ente
 // HYPE CYCLE
 var PC = {
   'Innovation Trigger': '#4f8ff7',
-  'Peak of Inflated Expectations': '#eab308',
+  'Peak of Inflated Expectations': '#f59e0b',
   'Trough of Disillusionment': '#ef4444',
   'Slope of Enlightenment': '#a78bfa',
-  'Plateau of Productivity': '#22c55e'
+  'Plateau of Productivity': '#10b981'
 };
 var PHASE_MAP = {
   'INNOVATION_TRIGGER': 'Innovation Trigger',
@@ -622,11 +889,11 @@ var PHASE_MAP = {
   'PLATEAU_OF_PRODUCTIVITY': 'Plateau of Productivity'
 };
 var PHASE_DESC = {
-  'Innovation Trigger': 'Early-stage technology breakthrough. First proof-of-concept demos, limited vendor support. High risk, high potential. Expect interop issues and premium pricing.',
-  'Peak of Inflated Expectations': 'Maximum hype and media attention. Vendors announce products, but real-world deployments are rare. Expectations exceed what the technology can deliver today.',
-  'Trough of Disillusionment': 'Reality check. Early deployments reveal limitations — interop failures, cost overruns, performance gaps. Interest wanes. Only committed adopters remain.',
-  'Slope of Enlightenment': 'Practical benefits become clear. Second and third-generation products fix early issues. Multi-vendor support grows. Best practices emerge from real deployments.',
-  'Plateau of Productivity': 'Mainstream adoption. Stable pricing, broad vendor support, proven reliability. The technology is a standard part of network infrastructure.'
+  'Innovation Trigger': 'Early-stage technology breakthrough. First proof-of-concept demos, limited vendor support.',
+  'Peak of Inflated Expectations': 'Maximum hype and media attention. Vendors announce products, but real-world deployments are rare.',
+  'Trough of Disillusionment': 'Reality check. Early deployments reveal limitations. Only committed adopters remain.',
+  'Slope of Enlightenment': 'Practical benefits become clear. Multi-vendor support grows. Best practices emerge.',
+  'Plateau of Productivity': 'Mainstream adoption. Stable pricing, broad vendor support, proven reliability.'
 };
 
 function curveY(x, w, h) {
@@ -640,19 +907,41 @@ function curveY(x, w, h) {
 }
 
 function renderHypeSvg(techs) {
-  var W = 1000, H = 300, P = 35;
+  var W = 1000, H = 320, P = 40;
   var cw = W - P * 2, ch = H - P * 2;
   var pts = [];
   for (var i = 0; i <= cw; i += 2) pts.push((i + P) + ',' + (curveY(i, cw, ch) + P));
 
-  var svg = '<svg width="' + W + '" height="' + (H + 40) + '" viewBox="0 0 ' + W + ' ' + (H + 40) + '" xmlns="http://www.w3.org/2000/svg">';
+  var svg = '<svg width="' + W + '" height="' + (H + 45) + '" viewBox="0 0 ' + W + ' ' + (H + 45) + '" xmlns="http://www.w3.org/2000/svg">';
 
+  // Defs for glow effects
+  svg += '<defs>';
+  svg += '<filter id="glow"><feGaussianBlur stdDeviation="3" result="blur"/><feComposite in="SourceGraphic" in2="blur" operator="over"/></filter>';
+  svg += '<linearGradient id="curveGrad" x1="0%" y1="0%" x2="100%" y2="0%">';
+  svg += '<stop offset="0%" stop-color="#4f8ff7" stop-opacity="0.6"/>';
+  svg += '<stop offset="25%" stop-color="#f59e0b" stop-opacity="0.6"/>';
+  svg += '<stop offset="50%" stop-color="#ef4444" stop-opacity="0.6"/>';
+  svg += '<stop offset="75%" stop-color="#a78bfa" stop-opacity="0.6"/>';
+  svg += '<stop offset="100%" stop-color="#10b981" stop-opacity="0.6"/>';
+  svg += '</linearGradient>';
+  svg += '<linearGradient id="fillGrad" x1="0%" y1="0%" x2="0%" y2="100%">';
+  svg += '<stop offset="0%" stop-color="url(#curveGrad)" stop-opacity="0.08"/>';
+  svg += '<stop offset="100%" stop-color="transparent" stop-opacity="0"/>';
+  svg += '</linearGradient>';
+  svg += '</defs>';
+
+  // Phase region fills
   var rb = [0, 0.15, 0.28, 0.50, 0.78, 1.0];
-  var rc = ['#4f8ff7', '#eab308', '#ef4444', '#a78bfa', '#22c55e'];
+  var rc = ['#4f8ff7', '#f59e0b', '#ef4444', '#a78bfa', '#10b981'];
   for (var r = 0; r < 5; r++) {
-    svg += '<rect x="' + (rb[r]*cw+P) + '" y="' + P + '" width="' + ((rb[r+1]-rb[r])*cw) + '" height="' + ch + '" fill="' + rc[r] + '" opacity="0.03" />';
+    svg += '<rect x="' + (rb[r]*cw+P) + '" y="' + P + '" width="' + ((rb[r+1]-rb[r])*cw) + '" height="' + ch + '" fill="' + rc[r] + '" opacity="0.025" rx="2" />';
   }
 
+  // Area fill under curve
+  var areaPoints = pts.join(' ') + ' ' + (cw + P) + ',' + (ch + P) + ' ' + P + ',' + (ch + P);
+  svg += '<polygon points="' + areaPoints + '" fill="url(#fillGrad)" />';
+
+  // Phase labels
   var pl = [
     {l:'Innovation\\nTrigger',x:0.07,k:'Innovation Trigger'},
     {l:'Peak of Inflated\\nExpectations',x:0.18,k:'Peak of Inflated Expectations'},
@@ -665,41 +954,46 @@ function renderHypeSvg(techs) {
     var ll = pl[p].l.split('\\n');
     var phaseW = (rb[p+1]-rb[p])*cw;
     svg += '<g style="cursor:help"><title>' + esc(PHASE_DESC[pl[p].k] || '') + '</title>';
-    svg += '<rect x="' + (rb[p]*cw+P) + '" y="' + (H+2) + '" width="' + phaseW + '" height="28" fill="transparent" />';
+    svg += '<rect x="' + (rb[p]*cw+P) + '" y="' + (H+4) + '" width="' + phaseW + '" height="32" fill="transparent" />';
     for (var li = 0; li < ll.length; li++) {
-      svg += '<text x="' + px + '" y="' + (H + 12 + li * 12) + '" class="hype-phase-label">' + esc(ll[li]) + '</text>';
+      svg += '<text x="' + px + '" y="' + (H + 16 + li * 13) + '" class="hype-phase-label">' + esc(ll[li]) + '</text>';
     }
     svg += '</g>';
   }
 
-  svg += '<polyline points="' + pts.join(' ') + '" fill="none" stroke="#333b4d" stroke-width="2" />';
+  // Curve line with gradient
+  svg += '<polyline points="' + pts.join(' ') + '" fill="none" stroke="url(#curveGrad)" stroke-width="2.5" stroke-linecap="round" />';
 
+  // Technology dots
   var placed = [];
   for (var ti = 0; ti < techs.length; ti++) {
     var t = techs[ti], color = PC[t.phase] || '#6b7280';
     var tx = (t.positionPct / 100) * cw, ty = curveY(tx, cw, ch);
     tx += P; ty += P;
-    var ly = ty - 12, lx = tx + 7, anc = 'start';
+    var ly = ty - 14, lx = tx + 9, anc = 'start';
     for (var pi = 0; pi < placed.length; pi++) {
-      if (Math.abs(placed[pi].x - tx) < 45 && Math.abs(placed[pi].y - ly) < 14) ly = placed[pi].y + 14;
+      if (Math.abs(placed[pi].x - tx) < 50 && Math.abs(placed[pi].y - ly) < 15) ly = placed[pi].y + 15;
     }
-    if (tx > W - 150) { lx = tx - 7; anc = 'end'; }
+    if (tx > W - 160) { lx = tx - 9; anc = 'end'; }
     placed.push({x:tx, y:ly});
 
-    svg += '<circle cx="' + tx + '" cy="' + ty + '" r="6" fill="' + color + '" class="hype-dot" data-tech="' + esc(t.technology) + '" />';
-    svg += '<text x="' + lx + '" y="' + (ly + 3) + '" class="hype-label" text-anchor="' + anc + '" font-weight="600">' + esc(t.technology) + '</text>';
+    // Glow ring
+    svg += '<circle cx="' + tx + '" cy="' + ty + '" r="12" fill="' + color + '" opacity="0.12" />';
+    svg += '<circle cx="' + tx + '" cy="' + ty + '" r="7" fill="' + color + '" class="hype-dot" data-tech="' + esc(t.technology) + '" filter="url(#glow)" />';
+    svg += '<circle cx="' + tx + '" cy="' + ty + '" r="3" fill="#fff" opacity="0.6" pointer-events="none" />';
+    svg += '<text x="' + lx + '" y="' + (ly + 4) + '" class="hype-label" text-anchor="' + anc + '" font-weight="600">' + esc(t.technology) + '</text>';
   }
   svg += '</svg>';
   return svg;
 }
 
 async function openHypeDetail(name) {
-  openPanel('<div class="loading pulse">Loading...</div>');
+  openPanel('<div class="loading pulse">Loading ' + esc(name) + '...</div>');
   try {
     var d = await api('/api/hype-cycle/' + encodeURIComponent(name));
     var c = PC[d.phaseLabel] || '#6b7280';
     var h = '<div class="panel-title">' + esc(d.technology) + '</div>';
-    h += '<div class="panel-sub"><span class="b" style="background:' + c + '22;color:' + c + '">' + esc(d.phaseLabel) + '</span></div>';
+    h += '<div class="panel-sub"><span class="b" style="background:' + c + '18;color:' + c + ';border:1px solid ' + c + '33">' + esc(d.phaseLabel) + '</span></div>';
     h += '<div class="panel-grid">';
     h += '<div class="panel-stat"><div class="panel-stat-label">Adoption</div><div class="panel-stat-val" style="color:' + c + '">' + (d.adoptionPct != null ? (d.adoptionPct*100).toFixed(0) + '%' : '—') + '</div></div>';
     h += '<div class="panel-stat"><div class="panel-stat-label">Position</div><div class="panel-stat-val">' + (d.positionPct||0) + '%</div></div>';
@@ -712,13 +1006,37 @@ async function openHypeDetail(name) {
       for (var i = 0; i < d.forecast.fiveYearProjection.length; i++) {
         var f = d.forecast.fiveYearProjection[i];
         var fc = PC[PHASE_MAP[f.phase] || ''] || '#6b7280';
-        h += '<div class="forecast-bar"><span class="yr">' + f.year + '</span><div class="track"><div class="fill" style="width:' + (f.adoptionPct||0) + '%;background:' + fc + '"></div></div><span class="pct">' + (f.adoptionPct||0) + '%</span></div>';
+        h += '<div class="forecast-bar"><span class="yr">' + f.year + '</span><div class="track"><div class="fill" style="width:' + (f.adoptionPct||0) + '%;background:' + fc + ';box-shadow:0 0 8px ' + fc + '44"></div></div><span class="pct">' + (f.adoptionPct||0) + '%</span></div>';
       }
     }
 
+    // Regional adoption
+    if (d.regionalAdoption && d.regionalAdoption.length) {
+      h += '<div class="panel-section">Regional Adoption</div>';
+      for (var ri = 0; ri < d.regionalAdoption.length; ri++) {
+        var ra = d.regionalAdoption[ri];
+        h += '<div class="panel-row"><span class="panel-row-label">' + esc(ra.region) + '</span><span class="panel-row-val"><span class="b b-cyan" style="margin-right:4px">' + esc(ra.adoptionPhase) + '</span>' + esc(ra.estimatedPeakYear) + '</span></div>';
+      }
+    }
+
+    // Revenue lifecycle
+    if (d.revenueLifecycle) {
+      var rl = d.revenueLifecycle;
+      h += '<div class="panel-section">Revenue Lifecycle</div>';
+      var phaseColors = { growing: 'var(--green)', peaking: 'var(--yellow)', declining: 'var(--orange)', legacy: 'var(--text-dim)' };
+      h += '<div class="panel-grid">';
+      h += '<div class="panel-stat"><div class="panel-stat-label">Revenue Phase</div><div class="panel-stat-val" style="color:' + (phaseColors[rl.currentPhase]||'var(--text)') + ';font-size:1rem;text-transform:capitalize">' + esc(rl.currentPhase) + '</div></div>';
+      h += '<div class="panel-stat"><div class="panel-stat-label">Revenue Index</div><div class="panel-stat-val">' + esc(rl.revenueIndex) + '<small>/100</small></div></div>';
+      h += '</div>';
+      h += '<div class="panel-row"><span class="panel-row-label">Peak Revenue Year</span><span class="panel-row-val">' + esc(rl.estimatedPeakRevenueYear) + '</span></div>';
+      h += '<div class="panel-row"><span class="panel-row-label">Decline Start</span><span class="panel-row-val">' + esc(rl.estimatedDeclineStartYear) + '</span></div>';
+      h += '<div class="panel-row"><span class="panel-row-label">Half-Life</span><span class="panel-row-val">' + esc(rl.revenueHalfLifeYears) + ' years</span></div>';
+    }
+
     h += '<div class="panel-section">Composite Score</div>';
-    h += '<div style="padding:0.6rem;background:var(--surface2);border-radius:4px">';
-    h += '<span class="mono" style="font-size:1.5rem;font-weight:700;color:' + c + '">' + (d.compositeScore||0) + '</span><span class="dim" style="font-size:0.8rem"> / 100</span>';
+    h += '<div style="padding:0.75rem;background:var(--surface2);border-radius:10px;border:1px solid var(--border)">';
+    h += '<span class="mono" style="font-size:1.75rem;font-weight:800;background:' + c + ';-webkit-background-clip:text;-webkit-text-fill-color:transparent">' + (d.compositeScore||0) + '</span>';
+    h += '<span style="font-size:0.8rem;color:var(--text-dim)"> / 100</span>';
     h += '</div>';
 
     buildDOM(el('panel-content'), h);
@@ -739,12 +1057,12 @@ async function loadHypeCycle() {
   buildDOM(el('hype-table'), techs.map(function(t) {
     var color = PC[t.phase] || '#374151';
     return '<tr class="clickable" data-tech="' + esc(t.technology) + '">'
-      + '<td style="font-weight:500">' + esc(t.technology) + '</td>'
-      + '<td><span class="b tip" data-tip="' + esc(PHASE_DESC[t.phase] || '') + '" style="background:' + color + '22;color:' + color + '">' + esc(t.phase) + '</span></td>'
-      + '<td><div class="hype-bar"><div class="hype-fill" style="width:' + t.positionPct + '%;background:' + color + '"></div></div></td>'
-      + '<td class="mono tip" data-tip="' + esc(t.technology) + ' has reached ' + (t.adoptionPct * 100).toFixed(0) + '% of its total addressable market based on Norton-Bass diffusion modeling.">' + (t.adoptionPct * 100).toFixed(0) + '%</td>'
-      + '<td class="mono tip" data-tip="' + (t.peakYear ? 'Peak hype expected around ' + t.peakYear + '. After this, expect a reality correction before stable adoption.' : 'Peak year not yet determined.') + '">' + esc(t.peakYear || '—') + '</td>'
-      + '<td class="mono tip" data-tip="' + (t.yearsToPlateauFromNow != null ? 'Estimated ' + t.yearsToPlateauFromNow + ' years until ' + esc(t.technology) + ' reaches mainstream, stable deployment.' : 'Already at plateau or timeline unknown.') + '">' + (t.yearsToPlateauFromNow != null ? t.yearsToPlateauFromNow + 'y' : '—') + '</td>'
+      + '<td style="font-weight:600;color:var(--text-bright)">' + esc(t.technology) + '</td>'
+      + '<td><span class="b tip" data-tip="' + esc(PHASE_DESC[t.phase] || '') + '" style="background:' + color + '18;color:' + color + ';border:1px solid ' + color + '33">' + esc(t.phase) + '</span></td>'
+      + '<td><div class="hype-bar"><div class="hype-fill" style="width:' + t.positionPct + '%;background:' + color + ';box-shadow:0 0 6px ' + color + '44"></div></div></td>'
+      + '<td class="mono tip" data-tip="' + esc(t.technology) + ': ' + (t.adoptionPct * 100).toFixed(0) + '% market adoption (Norton-Bass model).">' + (t.adoptionPct * 100).toFixed(0) + '%</td>'
+      + '<td class="mono">' + esc(t.peakYear || '—') + '</td>'
+      + '<td class="mono">' + (t.yearsToPlateauFromNow != null ? t.yearsToPlateauFromNow + 'y' : '—') + '</td>'
       + '</tr>';
   }).join(''));
 
@@ -753,7 +1071,7 @@ async function loadHypeCycle() {
   });
 }
 
-// TRANSCEIVERS — with click-through detail
+// TRANSCEIVERS
 function searchTransceivers() {
   var q = el('tx-search').value;
   var ff = el('tx-ff-filter').value;
@@ -761,12 +1079,11 @@ function searchTransceivers() {
   if (q) params.push('q=' + encodeURIComponent(q));
   if (ff) params.push('form_factor=' + encodeURIComponent(ff));
   params.push('limit=100');
-  var url = '/api/transceivers?' + params.join('&');
 
-  api(url).then(function(data) {
-    buildDOM(el('tx-table'), (data.transceivers || []).map(function(t) {
+  api('/api/transceivers?' + params.join('&')).then(function(data) {
+    buildDOM(el('tx-table'), (data.data || data.transceivers || []).map(function(t) {
       return '<tr class="clickable" data-txid="' + esc(t.id) + '">'
-        + '<td style="font-weight:500;color:var(--text-bright)">' + esc(t.standard_name || t.slug) + '</td>'
+        + '<td style="font-weight:600;color:var(--text-bright)">' + esc(t.standard_name || t.slug) + '</td>'
         + '<td><span class="b b-blue">' + esc(t.form_factor) + '</span></td>'
         + '<td class="mono">' + esc(t.speed) + '</td>'
         + '<td>' + esc(t.reach_label) + '</td>'
@@ -787,7 +1104,7 @@ async function openTxDetail(id) {
   openPanel('<div class="loading pulse">Loading...</div>');
   try {
     var data = await api('/api/transceivers/' + id);
-    var t = data.transceiver || data;
+    var t = data.data || data.transceiver || data;
     var h = '<div class="panel-title">' + esc(t.standard_name || t.slug) + '</div>';
     h += '<div class="panel-sub">' + esc(t.description || '') + '</div>';
 
@@ -835,14 +1152,14 @@ async function loadNews() {
       + '<div class="ri-meta">'
       + '<span class="b b-blue">' + esc(n.source) + '</span>'
       + (n.published_at ? '<span>' + new Date(n.published_at).toLocaleDateString() + '</span>' : '')
-      + (urlSafe !== '#' ? '<a href="' + esc(urlSafe) + '" target="_blank" rel="noopener noreferrer" style="color:var(--accent);text-decoration:none;font-size:0.7rem">Read &rarr;</a>' : '')
+      + (urlSafe !== '#' ? '<a href="' + esc(urlSafe) + '" target="_blank" rel="noopener noreferrer" style="color:var(--accent);text-decoration:none;font-size:0.72rem;font-weight:500">Read &rarr;</a>' : '')
       + '</div></div>';
-  }).join('') || '<div class="loading">No news</div>');
+  }).join('') || '<div class="loading">No news yet</div>');
 }
 
 // BLOG
 function generateBlog(topic, speed) {
-  el('blog-list').textContent = 'Generating...';
+  el('blog-list').innerHTML = '<div class="loading pulse">Generating article...</div>';
   var body = { topic: topic };
   if (speed) body.speed = speed;
   fetch(API + '/api/blog/generate', {
@@ -875,7 +1192,7 @@ async function loadBlogDrafts() {
       + '<span class="mono">' + esc(d.word_count) + ' words</span>'
       + '<span>' + new Date(d.created_at).toLocaleDateString() + '</span>'
       + '</div></div>';
-  }).join('') || '<div class="loading">No drafts yet</div>');
+  }).join('') || '<div class="loading">No drafts yet &mdash; click a card above to generate</div>');
 }
 
 async function openBlogDetail(id) {
@@ -886,9 +1203,9 @@ async function openBlogDetail(id) {
     var h = '<div class="panel-title">' + esc(d.title) + '</div>';
     h += '<div class="panel-sub"><span class="b b-purple">' + esc(d.topic) + '</span> <span class="b b-neutral">' + esc(d.target_audience) + '</span> <span class="mono dim">' + esc(d.word_count) + ' words</span></div>';
     h += '<div class="panel-section">Content</div>';
-    h += '<div style="font-size:0.8rem;color:var(--text);white-space:pre-wrap;line-height:1.6;max-height:60vh;overflow-y:auto;background:var(--surface2);padding:0.75rem;border-radius:4px">' + esc(d.draft_content) + '</div>';
+    h += '<div style="font-size:0.8rem;color:var(--text);white-space:pre-wrap;line-height:1.7;max-height:60vh;overflow-y:auto;background:var(--surface2);padding:1rem;border-radius:10px;border:1px solid var(--border)">' + esc(d.draft_content) + '</div>';
     h += '<div class="panel-section">SEO Keywords</div>';
-    h += '<div style="display:flex;gap:0.25rem;flex-wrap:wrap">' + (d.seo_keywords || []).map(function(k) { return '<span class="b b-neutral">' + esc(k) + '</span>'; }).join('') + '</div>';
+    h += '<div style="display:flex;gap:0.3rem;flex-wrap:wrap">' + (d.seo_keywords || []).map(function(k) { return '<span class="b b-neutral">' + esc(k) + '</span>'; }).join('') + '</div>';
     buildDOM(el('panel-content'), h);
   } catch(e) { el('panel-content').textContent = 'Error: ' + e.message; }
 }