diff --git a/NewDesign.zip b/NewDesign.zip
new file mode 100644
index 0000000..00115f2
Binary files /dev/null and b/NewDesign.zip differ
diff --git a/docs/PLAN-Architektur-WebUI-Backend.md b/docs/PLAN-Architektur-WebUI-Backend.md
new file mode 100644
index 0000000..65e82b7
--- /dev/null
+++ b/docs/PLAN-Architektur-WebUI-Backend.md
@@ -0,0 +1,144 @@
+# Plan: Drei-Schichten-Architektur (Core / Lokal / Public)
+
+> Stand: 2026-07-12 · Status: **Architektur bestätigt** (Nutzer-Entscheidung), Implementierung
+> schrittweise. Kein Code in diesem Schritt.
+> Kontext: Neues WebUI-Design (mit Claude Design vorbereitet) wird nach der Schicht-Trennung
+> schrittweise implementiert. Public-Release ist noch fern, aber alles wird dafür vorbereitet.
+
+## 0. Bestätigte Architektur
+
+Drei Schichten mit **genau einer** Integrationsschnittstelle zwischen intern und öffentlich:
+**der Datenbank**.
+
+```
+┌─────────────────────────── LOKAL (eigener Rechner/LAN) ───────────────────────────┐
+│                                                                                    │
+│   Schicht 1: CORE                          Schicht 2: LOKALE API + WebUI           │
+│   ─────────────────                        ───────────────────────────            │
+│   Crawler, Worker, PnL-Engine,             volle API (Read + Control),             │
+│   Analyse, Ingest                          keine Auth (localhost),                 │
+│        │  schreibt                         serviert WebUI-SPA,                      │
+│        ▼                                   zum Testen von Analysen & Design         │
+│   ┌──────────────────┐   liest/schreibt         ▲                                  │
+│   │  Analyse-DB       │◄────────────────────────┘                                  │
+│   └────────┬─────────┘                                                             │
+│            │ (nur SELECT-Grant)                                                    │
+└────────────┼──────────────────────────────────────────────────────────────────────┘
+             │  ← EINZIGE Verbindung nach außen: read-only DB-Zugriff
+┌────────────┼──────────────────────── EXTERNER WEBSERVER ───────────────────────────┐
+│            ▼                                                                        │
+│   Schicht 3: PUBLIC API + WebUI                                                     │
+│   ────────────────────────────                                                     │
+│   nur Read-Endpunkte (identisch zur lokalen Read-Seite),                           │
+│   Auth + Accounts, öffentliches Rate-Limiting, TLS,                                │
+│   serviert dasselbe WebUI-SPA                                                       │
+│        │ read-only            │ read/write                                         │
+│        ▼                      ▼                                                     │
+│   [Analyse-DB, RO]      [User-DB (Accounts), separat]                              │
+└────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+**Kernprinzipien (aus der Nutzer-Entscheidung):**
+- **Core ist rein lokal** und die einzige Instanz, die in die Analyse-DB **schreibt**.
+- **Public spricht ausschließlich mit der Datenbank** — nie mit dem Core-Prozess, nie mit der
+  lokalen API. Public bekommt einen **read-only** DB-User auf die Analyse-DB und eine
+  **separate User-DB** für Accounts.
+- **Lokale und Public WebUI sind optisch UND funktional gleich** (auf der Analyse-/Ansichtsseite),
+  damit neue Analysen und Designs lokal getestet werden und 1:1 öffentlich aussehen.
+
+## 1. Wie „identisch" technisch erreicht wird
+
+Damit beide WebUIs garantiert gleich sind, wird die **Read-/Analyse-Seite genau einmal** gebaut
+und von beiden Hosts wiederverwendet — kein Duplizieren:
+
+1. **Geteilte Read-API-Library.** `Predictalytics.Api` ist bereits eine Library. Die
+   Endpoint-Registrierung wird in zwei Gruppen gespalten:
+   - `MapReadEndpoints()` — **die Analyse-/Ansichts-Endpunkte** (Trader-Liste/-Detail/-Profil/
+     -Positionen, Markets, Dashboard, Search, Watchlist-Ansicht, Traits). Wird von **beiden**
+     Hosts registriert.
+   - `MapControlEndpoints()` — **schreibende/steuernde** Endpunkte (Jobs-Trigger, `/api/dev`,
+     Trader-Anlage, Watchlist-Mutation, Priority, AI-Analyse-Trigger). Wird **nur lokal**
+     registriert.
+2. **Ein einziges WebUI-SPA-Artefakt.** Dasselbe Build wird von der lokalen und der öffentlichen
+   Schicht ausgeliefert. Es ist reiner API-Client (kein Server-Code, keine DB-Kenntnis).
+3. **Capability-gesteuerte Admin-Bedienelemente.** Da die Control-Endpunkte öffentlich fehlen,
+   fragt das SPA beim Start eine `GET /api/capabilities` ab (`{ canControl: bool, authRequired: bool }`)
+   und blendet Admin-Aktionen (Sync/Analyze/Deep-Resync/Trader-Anlegen) nur ein, wenn vorhanden.
+   → Analyse-Ansichten sind überall identisch; nur die lokalen Steuer-Buttons fehlen öffentlich.
+
+> **Wichtiger Audit-Punkt vor dem Teilen:** Manche „Read"-Endpunkte haben heute versteckte
+> Nebenwirkungen. Beispiel: `GET /api/traders/{id}/deep-dive` **holt Preis-Historie vom Provider
+> und speichert Snapshots** — also ein Schreibzugriff **und** ein externer API-Call. Solche
+> Endpunkte sind **nicht** public-tauglich (read-only DB verbietet den Write, und Public darf
+> Polymarket nicht anrufen). Vor dem Aufnehmen in `MapReadEndpoints()` jeden Endpunkt auf
+> versteckte Writes/Provider-Calls prüfen; die Public-Read-Seite muss **rein aus persistierten
+> Daten** bedienbar sein (das `/profile`-Design aus FIXPLAN E ist genau deshalb „persisted-only").
+
+## 2. Was heute wo läuft (Ist → Ziel)
+
+- **Heute:** Core + Lokale API + WebUI sind **ein** Prozess (WinFormsHost/EmbeddedWebServer:
+  Worker + volle API + `wwwroot`-SPA, localhost, keine Auth, CORS `*`). Public existiert nicht.
+- **Ziel Lokal:** bleibt bequem **ein** Prozess (Core-Worker + Lokale API + WebUI zusammen ist
+  zum Testen praktisch). Wichtig ist nur die **Code-Schichtung** (Read-Library getrennt von
+  Control/Core), damit Public die Read-Library **ohne** Core/Worker/Control referenzieren kann.
+- **Ziel Public:** eigener schlanker Host (neues Projekt `Predictalytics.PublicApi`), der
+  `MapReadEndpoints()` + Auth registriert, das SPA ausliefert, und **nur** die read-only
+  Analyse-DB + die User-DB kennt.
+
+## 3. Implementierungsplan (schrittweise)
+
+### Phase 0 — Endpunkte klassifizieren & Read/Control trennen (Fundament, klein)
+- [ ] Jeden Endpunkt in `docs/API.md` als **Read** (public-tauglich) oder **Control** (nur lokal)
+      markieren. Kandidaten Control: alle `POST/PUT/DELETE`, `/api/dev/*`, Job-Trigger.
+- [ ] Auf **versteckte Writes/Provider-Calls** in Read-Endpunkten prüfen (Deep-Dive!) und
+      bereinigen oder als Control einstufen.
+- [ ] `MapPredictalyticsEndpoints()` in `MapReadEndpoints()` + `MapControlEndpoints()` splitten
+      (rein struktureller Refactor, Verhalten unverändert; bestehende Tests bleiben grün).
+- [ ] `GET /api/capabilities` einführen.
+
+### Phase 1 — WebUI als sauberes, gemeinsames SPA (parallel zum neuen Design)
+- [ ] Neues Design als **ein statisches Artefakt** bauen, reiner API-Client, `API_BASE`
+      konfigurierbar (heute `''` = gleiche Origin bleibt lokal gültig).
+- [ ] Admin-Aktionen an `capabilities.canControl` koppeln.
+- [ ] Trait-Chips/-Filter im Design vorsehen — **erscheinen erst, wenn Backend-D2 steht**
+      (kein UI-Bug, das Backend liefert Traits noch nicht).
+
+### Phase 2 — Lokale Grenze härten (klein, jetzt schon sinnvoll)
+- [ ] CORS von `AllowAnyOrigin` auf konfigurierte Origin-Whitelist umstellen.
+- [ ] Bind-Adresse explizit (localhost/LAN), nie `0.0.0.0` ohne Firewall; Konfig-Kommentar
+      „NIEMALS ins Internet — das ist die interne Schicht".
+
+### Phase 3 — DB für Public vorbereiten (mittel, kann früh passieren)
+- [ ] **Read-only DB-User** auf der Analyse-DB anlegen (nur `SELECT`). Der Nutzer führt das SQL
+      selbst aus (Grant-Statements liefern wir).
+- [ ] `AppDbContext` public-seitig read-only konfigurieren (read-only Connection; keine
+      Migrations, kein SaveChanges). Sicherstellen, dass die Read-Endpunkte ohne Writes auskommen.
+- [ ] **Schema-Kopplung dokumentieren:** Weil Public direkt auf der Analyse-DB liest, ist das
+      DB-Schema jetzt eine **Vertragsfläche**. Schema-Änderungen im Core müssen die Public-Read-
+      Views berücksichtigen (Views/stabile Spalten als Puffer erwägen, damit interne
+      Refactorings die öffentliche Sicht nicht brechen).
+
+### Phase 4 — Public-Host bauen (groß, wenn Release näher rückt)
+- [ ] Neues Projekt `Predictalytics.PublicApi` (eigener Host, TLS, öffentliche Bind-Adresse).
+- [ ] `MapReadEndpoints()` + **Auth/Accounts** (separate **User-DB**; Passwörter/Sessions nach
+      Stand der Technik — Secret-Handling lebt **nur hier**, nie im Core).
+- [ ] Öffentliches **Rate-Limiting & Quotas pro Account** (getrennt vom internen Polymarket-Limiter).
+- [ ] Mandanten-Sicht: Kunde sieht seine Watchlist/kopierten Master, nicht das gesamte Universum.
+- [ ] Dasselbe WebUI-SPA ausliefern.
+
+## 4. Explizite Nicht-Ziele / Fallen
+- ❌ Public bekommt **keinen** Zugriff auf Core-Prozess, lokale API oder Control-Endpunkte.
+- ❌ Public bekommt **keinen** Schreibzugriff auf die Analyse-DB (nur `SELECT`).
+- ❌ **Kein** Nachrüsten von Kunden-Auth auf die lokale Vollschicht — Auth lebt nur im Public-Host.
+- ❌ Read-Endpunkte machen **keine** Provider-Calls und **keine** Writes (sonst public-untauglich).
+- ❌ WebUI kennt die DB nicht — immer nur über die API.
+
+## 5. Reihenfolge / Aufwand
+1. **Phase 0** (klein): Read/Control-Split + Capabilities + Deep-Dive-Audit. **Jetzt** — es ist
+   die Voraussetzung dafür, dass das neue Design von Anfang an sauber sitzt.
+2. **Phase 1+2** (klein, parallel): neues SPA als gemeinsames Artefakt, lokale Grenze härten.
+3. **Phase 3** (mittel): read-only DB-User + Schema-als-Vertrag dokumentieren.
+4. **Phase 4** (groß, später): Public-Host mit Auth/User-DB.
+
+Phase 0–2 begleiten das neue Design sofort. Phase 3 kann jederzeit vorgezogen werden (billig).
+Phase 4 erst zum Release — aber durch 0–3 ist dann nichts mehr umzubauen, nur zu ergänzen.
diff --git a/docs/PLAN-DatenIngest-Skalierung.md b/docs/PLAN-DatenIngest-Skalierung.md
new file mode 100644
index 0000000..9625f10
--- /dev/null
+++ b/docs/PLAN-DatenIngest-Skalierung.md
@@ -0,0 +1,137 @@
+# Plan: Daten-Ingest skalieren (Rate-Limits, Egress-Kanäle, Blockchain)
+
+> Stand: 2026-07-12 · Status: **Richtung bestätigt** (Nutzer: beide Egress-Wege umschaltbar
+> umsetzen, sofern Aufwand vertretbar). Kein Code in diesem Schritt.
+> Problem: Polymarket-Rate-Limits bremsen den Datenimport teils extrem aus.
+
+## 0. Ist-Zustand (verifiziert)
+
+- `RateLimiterService` = **globaler Singleton-Token-Bucket**, feste Delays je Endpoint-Gruppe
+  (Gamma ≈28/s, Data ≈18/s, Clob ≈66/s).
+- `PolymarketApiClient` = Singleton mit 3 benannten HttpClients, **ohne** Proxy/IP-Konfig →
+  ein einziger Ausgangs-IP, ein globales Budget. Das ist die echte Bremse.
+
+**Zwei Hebel:** Nachfrage senken (Abschnitt 1, größter Gewinn) und Angebot erhöhen (Abschnitt 2,
+Egress-Kanäle). Der Nutzer möchte in Abschnitt 2 **beide Egress-Arten (eigene IPs UND Proxys)
+umschaltbar** — und das ist billig, weil beide **derselbe HttpClient-Seam** sind (Abschnitt 2).
+
+---
+
+## 1. Nachfrage senken — größter Hebel (zuerst)
+
+### 1a. Historische Massendaten aus Blockchain/Subgraph statt REST
+Polymarket-Trades sind On-Chain-Events auf Polygon. Für **Backfill/Deep-Resync** (größter
+REST-Verbraucher) ist `/activity` die falsche Quelle.
+- [ ] The-Graph-/Goldsky-Subgraph für Polymarket evaluieren: ein GraphQL-Call → tausende Fills
+      eines Wallets, statt seitenweiser rate-limitierter REST-Abrufe.
+- [ ] Neue `IHistoricalTradeSource` neben dem REST-Provider; DeepResync (FIXPLAN A6) zieht Bulk
+      hierüber. **Effekt:** nimmt die teuerste Last komplett von der REST-API.
+
+### 1b. Markt-Stammdaten aggressiv cachen
+- [ ] Metadaten (Frage, Kategorie, Outcomes, `ConditionId`↔`TokenId`) einmal ziehen, lange cachen;
+      nur Volume/Liquidity/Auflösung periodisch aktualisieren. Geschlossene Märkte nie voll re-syncen.
+
+### 1c. Ingest-Tiering (FIXPLAN D3)
+- [ ] Ultra-HF-Trader im `SnapshotOnly`-Modus erzeugen null Trade-Calls (PnL aus `/positions` +
+      Leaderboard, wöchentliche Biopsie). Entfernt genau die Wallets, die das Budget auffressen.
+
+### 1d. Redundanz vermeiden
+- [ ] Worker-übergreifender Kurzzeit-Cache „gerade geholt", damit nicht mehrere Worker denselben
+      Markt/Trader kurz hintereinander abrufen.
+
+---
+
+## 2. Angebot erhöhen: umschaltbare **Egress-Kanäle** (eigene IPs UND Proxys — eine Mechanik)
+
+**Die Schlüssel-Einsicht:** Ob eine Anfrage über eine **eigene Quell-IP** oder über einen
+**Proxy** rausgeht, ist im HttpClient nur eine andere Konfiguration desselben `SocketsHttpHandler`.
+Deshalb wird **nicht** zweimal gebaut, sondern **ein** Konzept: der **Egress-Kanal**. Umschalten =
+Konfiguration, nicht Code. Damit bekommt der Nutzer „beides, umschaltbar" zu geringen Kosten.
+
+### 2a. Abstraktion `EgressChannel`
+Ein Kanal ist genau eine Ausgangsroute, per Config als einer von zwei Typen definiert:
+```jsonc
+"Egress": {
+  "Channels": [
+    { "id": "ip-a",   "type": "SourceIp", "value": "203.0.113.10" },   // eigene IP
+    { "id": "ip-b",   "type": "SourceIp", "value": "203.0.113.11" },
+    { "id": "prox-1", "type": "Proxy",    "value": "http://user:pass@proxy.example:8080" }
+  ]
+}
+```
+- [ ] Pro Kanal **ein** `SocketsHttpHandler`:
+  - `SourceIp` → `ConnectCallback`, Socket vor Connect an die lokale IP binden
+    (`socket.Bind(new IPEndPoint(ip, 0))`).
+  - `Proxy` → `handler.Proxy = new WebProxy(url); handler.UseProxy = true;`.
+- [ ] `IEgressPool` verteilt Requests round-robin/least-loaded über die aktiven Kanäle.
+      Leere/❑ Kanalliste = heutiges Verhalten (ein Default-Ausgang).
+- [ ] Umschalten „nur eigene IPs" ↔ „nur Proxys" ↔ „Mix" = Config ändern, kein Deploy-Umbau.
+
+### 2b. Rate-Limiter **pro Kanal** (Generalisierung des globalen Limiters)
+- [ ] Limiter-Schlüssel wird `{platform}-{endpointGroup}-{channelId}`. Jeder Kanal hält sein
+      eigenes Budget → N Kanäle ≈ N× Durchsatz, jeder Kanal bleibt unter dem Per-Route-Limit.
+- [ ] 429 sperrt **nur den betroffenen Kanal** kurz, nicht alle.
+
+### 2c. Betrieb
+- [ ] Bei eigenen IPs prüfen: sind es echte getrennte Egress-IPs (multi-homed), nicht NAT hinter einer.
+- [ ] Health/Statistik je Kanal (Erfolg, 429-Rate, Latenz), damit tote Proxys automatisch pausiert werden.
+
+**Aufwand:** moderat und **einmalig** — durch die gemeinsame Abstraktion kostet „beides
+umschaltbar" kaum mehr als „nur IPs".
+
+---
+
+## 3. Proxys & Header-Rotation — Einordnung (korrigiert)
+
+**Klarstellung (Korrektur einer früheren Fassung):** Predictalytics betreibt **kein Trading und
+keine Wallet** — es ist reine Analysesoftware, die ausschließlich **öffentliche** Marktdaten liest.
+Das frühere „Ban gefährdet die Trading-Wallet"-Argument gehört zu **PolyTrader** (getrenntes
+Projekt) und trifft hier **nicht** zu. Damit ist die Proxy-Wahl eine reine Engineering-Entscheidung
+des Nutzers — freie Proxys eingeschlossen.
+
+Was real bleibt (ehrliche Hinweise, keine Blocker — Entscheidung liegt beim Nutzer):
+- **ToS-Grauzone:** Rate-Limit-Umgehung per Routen-/Header-Rotation widerspricht vermutlich
+  Polymarkets Nutzungsbedingungen. Realistische Konsequenz **hier**: einzelne IPs/Proxys werden
+  geblockt und müssen ersetzt werden — mehr nicht (kein Kapital, keine Wallet betroffen).
+- **Datenintegrität (der eigentlich relevante Punkt):** Ein kaputter/bösartiger (v. a. gratis)
+  Proxy kann Antworten **verfälschen** → korrupte Analyse („garbage in, garbage out"). Da die
+  gesamte Auswertung darauf aufbaut, lohnt sich eine **Plausibilitätsprüfung** der Antworten
+  (Feldtypen, Wertebereiche, z. B. Preise ∈ [0,1]) und — wo Genauigkeit zählt — das Bevorzugen
+  kontrollierter Proxys/eigener IPs. Rein informativ, kein Zwang.
+- **DB-Verbindung NIE über Proxy** (ausdrücklicher Nutzer-Wille): Die MySQL-Verbindung läuft
+  **immer direkt**. Der Egress-Pool gilt **ausschließlich** für ausgehende Polymarket-HTTP-Calls,
+  niemals für die DB.
+
+### 3a. Header-Rotation (separat aktivierbar, standardmäßig AUS)
+Auf Wunsch integriert, bewusst opt-in:
+- [ ] Config `Egress.HeaderRotation.Enabled` — **Default `false`**. Bei `false` wird ein einziger,
+      konsistenter Standard-Header-Satz gesendet (heutiges Verhalten).
+- [ ] Rotiert **kohärente Header-SETS**, nicht nur den User-Agent isoliert: je Eintrag ein
+      zusammenpassendes Bündel (`User-Agent` + `Accept` + `Accept-Language` + `Sec-CH-UA`…), damit
+      die Kombination realistisch bleibt — ein moderner UA mit widersprüchlichen Accept-Headern
+      fällt eher auf als gar keine Rotation. Set-Pool aus Config ladbar.
+- [ ] Auswahl pro Kanal **oder** pro Request (konfigurierbar).
+- [ ] Greift nur für Polymarket-Read-Calls; unabhängig vom Kanaltyp (IP oder Proxy) nutzbar.
+
+---
+
+## 4. Reihenfolge
+1. **1b + 1d** (Caching/Dedup) — sofort, klein, spürbar.
+2. **2a–2c** (Egress-Kanäle + Per-Kanal-Limiter) — moderat, liefert „eigene IPs UND Proxys umschaltbar".
+3. **1c** (Tiering) — hängt an FIXPLAN D3.
+4. **1a** (Blockchain/Subgraph-Bulk) — größter struktureller Hebel; eigener Rechercheschritt
+   (welcher Subgraph deckt Fills sauber ab?), dann als `IHistoricalTradeSource`.
+
+## 5. Tests / Abnahme
+- [ ] Per-Kanal-Limiter: unabhängige Budgets (kein globales Blocken); 429 sperrt nur einen Kanal.
+- [ ] Egress-Binding: Smoke gegen einen Dienst, der die Quell-IP zurückgibt → Round-Robin nutzt
+      wirklich verschiedene IPs; Proxy-Kanal geht über den Proxy.
+- [ ] Kanal-Health: toter Proxy wird automatisch pausiert, Pool weicht aus.
+- [ ] Blockchain-Quelle: Stichproben-Abgleich Bulk-Historie ↔ REST-`/activity` eines Wallets,
+      bevor sie produktiv wird.
+- [ ] **Header-Rotation:** bei `Enabled=false` wird genau ein konsistenter Standard-Satz gesendet
+      (kein Rotieren); bei `Enabled=true` stammt jeder gesendete Header-Satz **unverändert** aus dem
+      Pool (kohärent, keine zusammengewürfelten Felder).
+- [ ] **DB-Guard:** die MySQL-Verbindung nutzt nie den Egress-Pool/Proxy (Regressionsschutz).
+- [ ] **Response-Plausibilität:** grob unplausible Provider-Antworten (z. B. Preis außerhalb
+      [0,1]) werden erkannt und verworfen statt in die DB zu wandern.
diff --git a/src/Predictalytics.Api/ApiConfiguration.cs b/src/Predictalytics.Api/ApiConfiguration.cs
index 6c0174c..7afa1d7 100644
--- a/src/Predictalytics.Api/ApiConfiguration.cs
+++ b/src/Predictalytics.Api/ApiConfiguration.cs
@@ -1,5 +1,10 @@
 using Predictalytics.Api.Endpoints;
 using Predictalytics.Infrastructure;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Routing;
+using Microsoft.Extensions.Configuration;
+using System;
 
 namespace Predictalytics.Api;
 
@@ -14,8 +19,10 @@ public static class ApiConfiguration
         builder.Services.AddEndpointsApiExplorer();
         builder.Services.AddSwaggerGen(c => c.SwaggerDoc("v1",
             new() { Title = "Predictalytics Analytics API", Version = "v1" }));
+        var allowedOrigins = builder.Configuration.GetSection("ApiSettings:AllowedOrigins").Get<string[]>() 
+            ?? new[] { "http://localhost:5000" };
         builder.Services.AddCors(o => o.AddDefaultPolicy(p =>
-            p.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()));
+            p.WithOrigins(allowedOrigins).AllowAnyMethod().AllowAnyHeader()));
 
         var app = builder.Build();
 
@@ -29,28 +36,44 @@ public static class ApiConfiguration
             OnPrepareResponse = ctx => ctx.Context.Response.Headers.CacheControl = "no-cache"
         });
 
-        app.MapPredictalyticsEndpoints();
+        // Register both Read and Control endpoints for the local host
+        app.MapPredictalyticsReadEndpoints();
+        app.MapPredictalyticsControlEndpoints();
 
         return app;
     }
 
     /// <summary>
-    /// Single source of truth for ALL API endpoint registrations.
-    /// Both the standalone API and the embedded WinForms Kestrel server MUST use
-    /// this method — never register endpoints individually in either host, or the
-    /// two servers drift apart (missing /api/watchlist in the embedded host was
-    /// exactly this class of bug).
+    /// Registers all Read-only endpoints designed for viewing and analysis.
+    /// Safely exposed publicly since these endpoints perform no DB writes.
     /// </summary>
-    public static void MapPredictalyticsEndpoints(this WebApplication app)
+    public static void MapPredictalyticsReadEndpoints(this IEndpointRouteBuilder routes)
     {
-        app.MapDashboardEndpoints();
-        app.MapTraderEndpoints();
-        app.MapAlertEndpoints();
-        app.MapMarketEndpoints();
-        app.MapSearchEndpoints();
-        app.MapJobEndpoints();
-        app.MapDevEndpoints();
-        app.MapWatchlistEndpoints();
-        app.MapGet("/api/health", () => Results.Ok(new { Status = "OK", Timestamp = DateTime.UtcNow }));
+        routes.MapDashboardEndpoints();
+        routes.MapTraderReadEndpoints();
+        routes.MapAlertReadEndpoints();
+        routes.MapMarketEndpoints();
+        routes.MapSearchEndpoints();
+        routes.MapWatchlistEndpoints();
+        routes.MapGet("/api/health", () => Results.Ok(new { Status = "OK", Timestamp = DateTime.UtcNow }));
+
+        routes.MapGet("/api/capabilities", (IConfiguration config) =>
+        {
+            var canControl = config.GetValue<bool>("ApiSettings:CanControl", true);
+            var authRequired = config.GetValue<bool>("ApiSettings:AuthRequired", false);
+            return Results.Ok(new { CanControl = canControl, AuthRequired = authRequired });
+        });
+    }
+
+    /// <summary>
+    /// Registers all Control endpoints that trigger crawls, modifications, or database updates.
+    /// Excluded from the Public API routing to ensure system security.
+    /// </summary>
+    public static void MapPredictalyticsControlEndpoints(this IEndpointRouteBuilder routes)
+    {
+        routes.MapTraderControlEndpoints();
+        routes.MapAlertControlEndpoints();
+        routes.MapJobEndpoints();
+        routes.MapDevEndpoints();
     }
 }
diff --git a/src/Predictalytics.Api/Endpoints/AlertEndpoints.cs b/src/Predictalytics.Api/Endpoints/AlertEndpoints.cs
index c6addce..a76715c 100644
--- a/src/Predictalytics.Api/Endpoints/AlertEndpoints.cs
+++ b/src/Predictalytics.Api/Endpoints/AlertEndpoints.cs
@@ -1,15 +1,23 @@
-using Predictalytics.Application.Interfaces;
+using Predictalytics.Application.Interfaces;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Routing;
 
 namespace Predictalytics.Api.Endpoints;
 
 public static class AlertEndpoints
 {
-    public static void MapAlertEndpoints(this WebApplication app)
+    public static void MapAlertReadEndpoints(this IEndpointRouteBuilder routes)
     {
-        var group = app.MapGroup("/api/alerts").WithTags("Alerts");
+        var group = routes.MapGroup("/api/alerts").WithTags("Alerts");
 
         group.MapGet("/", async (IAlertService svc, int? count, bool? unreadOnly, CancellationToken ct) =>
             Results.Ok(await svc.GetRecentAlertsAsync(count ?? 50, unreadOnly ?? false, ct)));
+    }
+
+    public static void MapAlertControlEndpoints(this IEndpointRouteBuilder routes)
+    {
+        var group = routes.MapGroup("/api/alerts").WithTags("Alerts");
 
         group.MapPut("/{id:int}/read", async (int id, IAlertService svc, CancellationToken ct) =>
         {
diff --git a/src/Predictalytics.Api/Endpoints/DashboardEndpoints.cs b/src/Predictalytics.Api/Endpoints/DashboardEndpoints.cs
index e4c76d7..9618cb3 100644
--- a/src/Predictalytics.Api/Endpoints/DashboardEndpoints.cs
+++ b/src/Predictalytics.Api/Endpoints/DashboardEndpoints.cs
@@ -1,12 +1,15 @@
-using Predictalytics.Application.Interfaces;
+using Predictalytics.Application.Interfaces;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Routing;
 
 namespace Predictalytics.Api.Endpoints;
 
 public static class DashboardEndpoints
 {
-    public static void MapDashboardEndpoints(this WebApplication app)
+    public static void MapDashboardEndpoints(this IEndpointRouteBuilder routes)
     {
-        app.MapGet("/api/dashboard", async (IAnalyticsService svc, CancellationToken ct) =>
+        routes.MapGet("/api/dashboard", async (IAnalyticsService svc, CancellationToken ct) =>
             Results.Ok(await svc.GetDashboardAsync(ct)))
             .WithTags("Dashboard");
     }
diff --git a/src/Predictalytics.Api/Endpoints/MarketEndpoints.cs b/src/Predictalytics.Api/Endpoints/MarketEndpoints.cs
index 27cfc84..b706fc3 100644
--- a/src/Predictalytics.Api/Endpoints/MarketEndpoints.cs
+++ b/src/Predictalytics.Api/Endpoints/MarketEndpoints.cs
@@ -1,12 +1,15 @@
 using Predictalytics.Application.Interfaces;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Routing;
 
 namespace Predictalytics.Api.Endpoints;
 
 public static class MarketEndpoints
 {
-    public static void MapMarketEndpoints(this WebApplication app)
+    public static void MapMarketEndpoints(this IEndpointRouteBuilder routes)
     {
-        var group = app.MapGroup("/api/markets").WithTags("Markets");
+        var group = routes.MapGroup("/api/markets").WithTags("Markets");
 
         group.MapGet("/", async (IAnalyticsService svc, int? skip, int? take, string? platform, string? category, string? query, CancellationToken ct) =>
         {
diff --git a/src/Predictalytics.Api/Endpoints/SearchEndpoints.cs b/src/Predictalytics.Api/Endpoints/SearchEndpoints.cs
index 85285d1..5aecda5 100644
--- a/src/Predictalytics.Api/Endpoints/SearchEndpoints.cs
+++ b/src/Predictalytics.Api/Endpoints/SearchEndpoints.cs
@@ -7,9 +7,9 @@ namespace Predictalytics.Api.Endpoints;
 
 public static class SearchEndpoints
 {
-    public static void MapSearchEndpoints(this WebApplication app)
+    public static void MapSearchEndpoints(this IEndpointRouteBuilder routes)
     {
-        app.MapGet("/api/search", async (string q, IAnalyticsService svc, CancellationToken ct) =>
+        routes.MapGet("/api/search", async (string q, IAnalyticsService svc, CancellationToken ct) =>
         {
             if (string.IsNullOrWhiteSpace(q)) return Results.BadRequest("Query cannot be empty");
             var results = await svc.SearchAsync(q, ct);
diff --git a/src/Predictalytics.Api/Endpoints/TraderEndpoints.cs b/src/Predictalytics.Api/Endpoints/TraderEndpoints.cs
index bc02031..91869cf 100644
--- a/src/Predictalytics.Api/Endpoints/TraderEndpoints.cs
+++ b/src/Predictalytics.Api/Endpoints/TraderEndpoints.cs
@@ -1,14 +1,17 @@
 using Predictalytics.Application.Interfaces;
 using Predictalytics.Application.Services;
 using Microsoft.EntityFrameworkCore;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Routing;
 
 namespace Predictalytics.Api.Endpoints;
 
 public static class TraderEndpoints
 {
-    public static void MapTraderEndpoints(this WebApplication app)
+    public static void MapTraderReadEndpoints(this IEndpointRouteBuilder routes)
     {
-        var group = app.MapGroup("/api/traders").WithTags("Traders");
+        var group = routes.MapGroup("/api/traders").WithTags("Traders");
 
         group.MapGet("/", async (IAnalyticsService svc, int? skip, int? take, string? platform, bool? highlyCopyable, string? trait, CancellationToken ct) =>
             Results.Ok(await svc.GetTradersAsync(skip ?? 0, take ?? 50, platform, highlyCopyable ?? false, trait, ct)));
@@ -22,48 +25,12 @@ public static class TraderEndpoints
             return detail is not null ? Results.Ok(detail) : Results.NotFound();
         });
 
-        group.MapGet("/{id:int}/deep-dive", async (int id, IAnalyticsService svc, CancellationToken ct) =>
-        {
-            var dd = await svc.GetTraderDeepDiveAsync(id, ct);
-            return dd is not null ? Results.Ok(dd) : Results.NotFound();
-        });
-
         group.MapGet("/{id:int}/positions", async (int id, IAnalyticsService svc, CancellationToken ct) =>
         {
             var positions = await svc.GetTraderPositionsAsync(id, ct);
             return Results.Ok(positions);
         });
 
-        group.MapPost("/{id:int}/priority", async (int id, int? score, IScoringService svc, CancellationToken ct) =>
-        {
-            await svc.SetManualOverrideAsync(id, score, ct);
-            return Results.Ok();
-        });
-
-
-        group.MapPost("/{id:int}/watchlist", async (int id, WatchlistService svc, CancellationToken ct) =>
-        {
-            await svc.AddAsync(id, "Watched via UI", null, ct);
-            return Results.Ok();
-        });
-
-        group.MapDelete("/{id:int}/watchlist", async (int id, WatchlistService svc, CancellationToken ct) =>
-        {
-            await svc.RemoveByTraderIdAsync(id, ct);
-            return Results.Ok();
-        });
-
-        group.MapPost("/{id:int}/ai-analysis", async (int id, bool manual, IAiStrategyAnalysisService aiSvc, CancellationToken ct) =>
-        {
-            var summary = await aiSvc.AnalyzeTraderStrategyAsync(id, manual, ct);
-            return Results.Ok(new { summary });
-        });
-
-        group.MapPost("/", async (string platform, string wallet, IAnalyticsService svc, CancellationToken ct) =>
-        {
-            var id = await svc.AddTraderAsync(platform, wallet, ct);
-            return Results.Ok(new { id });
-        });
         group.MapGet("/{id:int}/profile", async (int id, Predictalytics.Infrastructure.Data.AppDbContext db, CancellationToken ct) =>
         {
             var trader = await db.Traders.Include(t => t.Analytics).FirstOrDefaultAsync(t => t.Id == id, ct);
@@ -128,4 +95,45 @@ public static class TraderEndpoints
             ));
         });
     }
+
+    public static void MapTraderControlEndpoints(this IEndpointRouteBuilder routes)
+    {
+        var group = routes.MapGroup("/api/traders").WithTags("Traders");
+
+        group.MapGet("/{id:int}/deep-dive", async (int id, IAnalyticsService svc, CancellationToken ct) =>
+        {
+            var dd = await svc.GetTraderDeepDiveAsync(id, ct);
+            return dd is not null ? Results.Ok(dd) : Results.NotFound();
+        });
+
+        group.MapPost("/{id:int}/priority", async (int id, int? score, IScoringService svc, CancellationToken ct) =>
+        {
+            await svc.SetManualOverrideAsync(id, score, ct);
+            return Results.Ok();
+        });
+
+        group.MapPost("/{id:int}/watchlist", async (int id, WatchlistService svc, CancellationToken ct) =>
+        {
+            await svc.AddAsync(id, "Watched via UI", null, ct);
+            return Results.Ok();
+        });
+
+        group.MapDelete("/{id:int}/watchlist", async (int id, WatchlistService svc, CancellationToken ct) =>
+        {
+            await svc.RemoveByTraderIdAsync(id, ct);
+            return Results.Ok();
+        });
+
+        group.MapPost("/{id:int}/ai-analysis", async (int id, bool manual, IAiStrategyAnalysisService aiSvc, CancellationToken ct) =>
+        {
+            var summary = await aiSvc.AnalyzeTraderStrategyAsync(id, manual, ct);
+            return Results.Ok(new { summary });
+        });
+
+        group.MapPost("/", async (string platform, string wallet, IAnalyticsService svc, CancellationToken ct) =>
+        {
+            var id = await svc.AddTraderAsync(platform, wallet, ct);
+            return Results.Ok(new { id });
+        });
+    }
 }
diff --git a/src/Predictalytics.Api/appsettings.json b/src/Predictalytics.Api/appsettings.json
index ee82e03..77be9a8 100644
--- a/src/Predictalytics.Api/appsettings.json
+++ b/src/Predictalytics.Api/appsettings.json
@@ -10,5 +10,14 @@
   "OpenRouter": {
     "BaseUrl": "https://openrouter.ai/api/v1",
     "ApiKey": "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"
+  },
+  "Egress": {
+    "Channels": []
+  },
+  "ApiSettings": {
+    "CanControl": true,
+    "AuthRequired": false,
+    "AllowedOrigins": [ "http://localhost:5000" ],
+    "ReadOnlyDatabase": false
   }
 }
diff --git a/src/Predictalytics.Api/wwwroot/css/style.css b/src/Predictalytics.Api/wwwroot/css/style.css
index 2b7c16d..9c412d7 100644
--- a/src/Predictalytics.Api/wwwroot/css/style.css
+++ b/src/Predictalytics.Api/wwwroot/css/style.css
@@ -1,482 +1,1109 @@
 /* ==========================================================================
-   Predictalytics — Premium SaaS Dashboard Design System
-   Modern clean dashboard inspired by Dribbble reference design.
+   Predictalytics — Premium Glassmorphic Design System
+   Inspired by Lucid prototype (Claude Designer).
    ========================================================================== */
 
-/* ─── CSS Custom Properties (Design Tokens) ─── */
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap');
+
 :root {
-  /* Light Theme */
-  --bg: #F4F5F7;
-  --bg-sidebar: #FFFFFF;
-  --bg-card: #FFFFFF;
-  --bg-input: #F0F1F3;
-  --text-primary: #111111;
-  --text-secondary: #666666;
-  --text-muted: #999999;
-  --border: #E8E9EC;
-  --accent: #FF2D55;
-  --accent-glow: rgba(255, 45, 85, 0.15);
-  --success: #34C759;
-  --danger: #FF3B30;
+  --bg: #0a0d14;
+  --bg-sidebar: rgba(255,255,255,0.015);
+  --bg-card: rgba(255,255,255,0.045);
+  --bg-card-hover: rgba(255,255,255,0.07);
+  --bg-input: rgba(255,255,255,0.04);
+  --border: rgba(255,255,255,0.07);
+  --border-hover: rgba(255,255,255,0.14);
+  --border-glow: rgba(22,82,240,0.3);
+  --text-primary: #EDEFF5;
+  --text-secondary: #C7CCDA;
+  --text-muted: #8B93A7;
+  --text-darker: #5B6377;
+  --primary: #1652F0;
+  --primary-glow: rgba(22,82,240,0.22);
+  --primary-light: #5b9dff;
+  --success: #12D48A;
+  --success-glow: rgba(18,212,138,0.12);
+  --danger: #F6465D;
+  --danger-glow: rgba(246,70,93,0.12);
   --warning: #FF9500;
-  --info: #5AC8FA;
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
-  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
-  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
-  --radius: 12px;
-  --radius-sm: 8px;
-  --transition: 0.2s ease;
-  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  --sidebar-w: 240px;
+  --font: 'Manrope', system-ui, -apple-system, sans-serif;
+  --font-mono: 'Roboto Mono', monospace;
+  --sidebar-w: 236px;
+  --radius: 18px;
+  --radius-sm: 10px;
+  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-[data-theme="dark"] {
-  --bg: #0B0C0F;
-  --bg-sidebar: #111215;
-  --bg-card: #16181D;
-  --bg-input: #1E2028;
-  --text-primary: #EEEEEE;
-  --text-secondary: #AAAAAA;
-  --text-muted: #666666;
-  --border: #2A2C33;
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
-  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
-  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
-}
-
-/* ─── Reset & Base ─── */
+/* Reset & Base */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-html { font-size: 14px; -webkit-font-smoothing: antialiased; }
-
 body {
-  font-family: var(--font);
-  background: var(--bg);
+  margin: 0;
+  background: radial-gradient(1100px 700px at 15% -10%, rgba(22,82,240,0.25), transparent 60%), 
+              radial-gradient(900px 600px at 110% 10%, rgba(18,212,138,0.08), transparent 55%), 
+              #0a0d14;
   color: var(--text-primary);
-  display: flex;
+  font-family: var(--font);
   min-height: 100vh;
-  transition: background var(--transition), color var(--transition);
+  display: flex;
+  overflow-x: hidden;
 }
 
-/* ─── Sidebar ─── */
+/* Scrollbar */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+
+a { color: var(--primary-light); text-decoration: none; transition: var(--transition); }
+a:hover { color: #8ab8ff; }
+
+/* Decorative Glow Layer */
+.glow-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(600px 400px at 80% 85%, rgba(76,141,255,0.08), transparent 60%);
+  z-index: 0;
+}
+
+.app-wrapper {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+}
+
+/* Sidebar */
 .sidebar {
   width: var(--sidebar-w);
-  min-height: 100vh;
-  background: var(--bg-sidebar);
-  border-right: 1px solid var(--border);
+  flex: none;
+  padding: 24px 16px;
   display: flex;
   flex-direction: column;
+  gap: 28px;
+  border-right: 1px solid var(--border);
+  background: var(--bg-sidebar);
   position: fixed;
-  top: 0; left: 0; bottom: 0;
+  top: 0; bottom: 0; left: 0;
   z-index: 100;
-  transition: background var(--transition), border-color var(--transition);
 }
 
 .sidebar-logo {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 24px 20px;
-  border-bottom: 1px solid var(--border);
+  gap: 10px;
+  padding: 4px 8px;
 }
 
 .logo-icon {
-  width: 36px; height: 36px;
-  background: linear-gradient(135deg, var(--accent), #FF6B8A);
-  border-radius: 10px;
-  display: flex; align-items: center; justify-content: center;
-  color: #fff;
-  font-weight: 800;
-  font-size: 18px;
-  box-shadow: 0 2px 12px var(--accent-glow);
+  width: 30px; height: 30px;
+  border-radius: 9px;
+  background: linear-gradient(135deg, var(--primary), #4c8dff);
+  box-shadow: 0 0 20px rgba(22,82,240,0.6);
 }
 
-.logo-text { font-weight: 700; font-size: 16px; letter-spacing: -0.3px; }
+.logo-text {
+  font-weight: 800;
+  font-size: 17px;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+}
 
-.sidebar-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.nav-title {
+  font: 600 10px/1 var(--font);
+  letter-spacing: 0.08em;
+  color: var(--text-darker);
+  padding: 0 12px 8px;
+  text-transform: uppercase;
+}
 
 .nav-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 14px;
-  border-radius: var(--radius-sm);
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-weight: 500;
-  font-size: 13.5px;
-  transition: all var(--transition);
-  position: relative;
-}
-
-.nav-item:hover { background: var(--bg-input); color: var(--text-primary); }
-
-.nav-item.active {
-  background: var(--accent-glow);
-  color: var(--accent);
-  font-weight: 600;
-}
-
-.nav-item.active::before {
-  content: '';
-  position: absolute;
-  left: -10px;
-  top: 50%; transform: translateY(-50%);
-  width: 3px; height: 20px;
-  background: var(--accent);
-  border-radius: 2px;
-}
-
-.badge {
-  background: var(--accent);
-  color: #fff;
-  font-size: 11px;
-  font-weight: 700;
-  padding: 2px 7px;
-  border-radius: 10px;
-  margin-left: auto;
-}
-
-.sidebar-footer { padding: 12px 10px; border-top: 1px solid var(--border); }
-
-/* ─── Main Content ─── */
-.main-content {
-  flex: 1;
-  margin-left: var(--sidebar-w);
-  min-height: 100vh;
-}
-
-/* ─── Topbar ─── */
-.topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 32px;
-  background: var(--bg-sidebar);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  backdrop-filter: blur(12px);
-  transition: background var(--transition), border-color var(--transition);
-}
-
-.topbar-left { flex: 1; max-width: 600px; display: flex; align-items: center; gap: 12px; }
-
-.platform-select {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  color: var(--text-primary);
-  padding: 6px 12px;
-  border-radius: var(--radius-sm);
-  font-size: 13px;
-  outline: none;
   cursor: pointer;
-  font-family: inherit;
-  transition: var(--transition);
-}
-
-.platform-select:focus { border-color: var(--accent); }
-
-.search-box {
   display: flex;
   align-items: center;
   gap: 10px;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
+  padding: 10px 12px;
   border-radius: var(--radius-sm);
-  padding: 8px 14px;
-  transition: border-color var(--transition);
-  flex: 1;
-  min-width: 400px;
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--text-muted);
+  transition: var(--transition);
+  text-decoration: none;
 }
 
-.search-box:focus-within { border-color: var(--accent); }
+.nav-item:hover {
+  background: rgba(255,255,255,0.03);
+  color: var(--text-primary);
+}
+
+.nav-item.active {
+  background: rgba(22,82,240,0.12);
+  color: var(--primary-light);
+  border: 1px solid rgba(22,82,240,0.25);
+}
+
+.nav-item .nav-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--text-darker);
+  transition: var(--transition);
+}
+
+.nav-item.active .nav-dot {
+  background: var(--primary-light);
+  box-shadow: 0 0 8px var(--primary-light);
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.data-feed-badge {
+  padding: 14px;
+  border-radius: 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  backdrop-filter: blur(20px);
+}
+
+.data-feed-badge .label {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+.data-feed-badge .status {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.data-feed-badge .dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 8px var(--success);
+}
+
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+}
+
+.user-avatar {
+  width: 30px; height: 30px;
+  border-radius: 50%;
+  background: linear-gradient(135deg,#2a2f3d,#1a1e28);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+
+.user-info .name {
+  font-size: 12.5px;
+  font-weight: 700;
+}
+
+.user-info .workspace {
+  font-size: 11px;
+  color: var(--text-darker);
+}
+
+/* Main Content Area */
+.main-content {
+  flex: 1;
+  min-width: 0;
+  margin-left: var(--sidebar-w);
+  padding: 22px 32px 60px;
+}
+
+/* Topbar */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  max-width: 600px;
+}
+
+.platform-select {
+  padding: 10px 14px;
+  border-radius: 11px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: var(--font);
+  outline: none;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.platform-select:hover, .platform-select:focus {
+  border-color: var(--border-hover);
+}
+
+.search-box {
+  position: relative;
+  flex: 1;
+}
 
 .search-box input {
-  border: none;
-  background: none;
-  outline: none;
-  color: var(--text-primary);
-  font-family: var(--font);
-  font-size: 13px;
   width: 100%;
-}
-
-.search-box input::placeholder { color: var(--text-muted); }
-
-.search-box svg { color: var(--text-muted); flex-shrink: 0; }
-
-.topbar-right { display: flex; align-items: center; gap: 16px; }
-
-.timeframe-toggle {
-  display: flex;
-  background: var(--bg-input);
-  border-radius: var(--radius-sm);
-  padding: 3px;
-}
-
-.tf-btn {
-  padding: 6px 14px;
-  border: none;
-  background: none;
-  color: var(--text-secondary);
-  font-family: var(--font);
-  font-size: 12px;
-  font-weight: 600;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all var(--transition);
-}
-
-.tf-btn.active {
+  padding: 11px 14px 11px 38px;
+  border-radius: 11px;
   background: var(--bg-card);
-  color: var(--text-primary);
-  box-shadow: var(--shadow-sm);
-}
-
-.tf-btn:hover:not(.active) { color: var(--text-primary); }
-
-/* Theme Toggle */
-.theme-toggle {
-  width: 40px; height: 40px;
-  display: flex; align-items: center; justify-content: center;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  background: var(--bg-input);
   border: 1px solid var(--border);
-  transition: all var(--transition);
-  color: var(--text-secondary);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: var(--font);
+  outline: none;
+  transition: var(--transition);
 }
 
-.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
+.search-box input:focus {
+  border-color: var(--border-hover);
+}
 
-[data-theme="dark"] .icon-sun { display: block; }
-[data-theme="dark"] .icon-moon { display: none; }
-[data-theme="light"] .icon-sun { display: none; }
-[data-theme="light"] .icon-moon { display: block; }
-.icon-sun { display: none; }
+.search-box svg {
+  position: absolute;
+  left: 13px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-darker);
+  pointer-events: none;
+}
 
-/* ─── Page Content ─── */
-.page-content { padding: 28px 32px; }
+.topbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 
+.header-vol-badge {
+  padding: 8px 14px;
+  border-radius: 10px;
+  background: var(--success-glow);
+  border: 1px solid rgba(18,212,138,0.25);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--success);
+  font-family: var(--font-mono);
+}
+
+.theme-toggle {
+  width: 38px; height: 38px;
+  border-radius: 11px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: var(--transition);
+}
+
+.theme-toggle:hover {
+  border-color: var(--border-hover);
+  color: var(--text-primary);
+}
+
+.theme-toggle .icon-sun { display: none; }
+.theme-toggle .icon-moon { display: block; }
+
+/* Breadcrumb */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+  margin-bottom: 18px;
+  font-weight: 600;
+}
+
+.breadcrumb span {
+  transition: var(--transition);
+}
+
+.breadcrumb .crumb-link {
+  cursor: pointer;
+  color: var(--text-muted);
+}
+
+.breadcrumb .crumb-link:hover {
+  color: var(--text-primary);
+}
+
+.breadcrumb .crumb-active {
+  color: var(--text-primary);
+  cursor: default;
+}
+
+.breadcrumb .crumb-sep {
+  color: #3a4152;
+}
+
+/* Page Views */
 .page { display: none; }
-.page.active { display: block; animation: fadeIn 0.3s ease; }
+.page.active { display: block; animation: fadeIn 0.25s ease-out; }
 
-@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.page-title-wrap {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
 
 .page-title {
-  font-size: 24px;
-  font-weight: 700;
-  margin-bottom: 24px;
-  letter-spacing: -0.5px;
+  margin: 0 0 4px;
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
 }
 
-/* ─── Metric Cards ─── */
+.page-subtitle {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* Stats Cards Grid */
 .metrics-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
 }
 
 .metric-card {
+  padding: 18px 20px;
+  border-radius: var(--radius);
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 20px 24px;
-  transition: all var(--transition);
-  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(24px);
+  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
+  transition: var(--transition);
 }
 
-.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
+.metric-card:hover {
+  border-color: var(--border-hover);
+  transform: translateY(-2px);
+}
 
 .metric-card.accent {
-  background: linear-gradient(135deg, var(--accent), #FF6B8A);
-  border: none;
-  color: #fff;
+  background: linear-gradient(135deg, var(--primary), #4c8dff);
+  border: 1px solid rgba(22,82,240,0.3);
 }
 
-.metric-card.accent .metric-label { color: rgba(255,255,255,0.8); }
-.metric-card.accent .metric-delta { color: rgba(255,255,255,0.9); }
+.metric-card .metric-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 600;
+  margin-bottom: 10px;
+  text-transform: none;
+  letter-spacing: normal;
+}
 
-.metric-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
-.metric-value { font-size: 28px; font-weight: 800; letter-spacing: -1px; margin-bottom: 4px; }
-.metric-delta { font-size: 12px; font-weight: 600; }
-.metric-delta.positive { color: var(--success); }
-.metric-delta.negative { color: var(--danger); }
+.metric-card.accent .metric-label {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.metric-card .metric-value {
+  font-size: 24px;
+  font-weight: 800;
+  font-family: var(--font-mono);
+  letter-spacing: -0.02em;
+  margin-bottom: 0;
+}
+
+.metric-card .metric-delta {
+  font-size: 12px;
+  font-weight: 700;
+  margin-top: 6px;
+  font-family: var(--font-mono);
+}
+
+.metric-card .metric-delta.positive { color: var(--success); }
+.metric-card .metric-delta.negative { color: var(--danger); }
+.metric-card.accent .metric-delta { color: rgba(255, 255, 255, 0.9); }
+
+/* Premium Grid Cards */
+.glass-row {
+  display: grid;
+  grid-template-columns: 1.7fr 1fr;
+  gap: 16px;
+  align-items: start;
+}
+
+.charts-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
 
-/* ─── Cards ─── */
 .card {
+  border-radius: var(--radius);
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
+  backdrop-filter: blur(24px);
   margin-bottom: 20px;
-  box-shadow: var(--shadow-sm);
-  transition: all var(--transition);
+  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
   overflow: hidden;
+  transition: var(--transition);
+}
+
+.card:hover {
+  border-color: var(--border-hover);
+}
+
+.chart-card {
+  margin-bottom: 0;
+}
+
+.chart-container {
+  padding: 20px 24px;
+  height: 260px;
 }
 
 .card-header {
-  padding: 18px 24px;
+  padding: 18px 22px 14px;
+  font-size: 15px;
+  font-weight: 700;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.card-header h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
+.card-header h2 {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
 
-/* ─── Charts ─── */
-.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
-.chart-card { margin-bottom: 0; }
-.chart-container { padding: 20px 24px; height: 260px; }
+/* Tables */
+.table-wrap {
+  overflow-x: auto;
+}
 
-/* ─── Data Tables ─── */
-.table-wrap { overflow-x: auto; }
-
-.data-table { width: 100%; border-collapse: collapse; }
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
 
 .data-table th {
-  text-align: left;
-  padding: 12px 16px;
+  padding: 10px 22px;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-muted);
+  letter-spacing: 0.04em;
+  color: var(--text-darker);
   border-bottom: 1px solid var(--border);
-  white-space: nowrap;
+  text-align: left;
 }
 
 .data-table td {
-  padding: 12px 16px;
-  font-size: 13px;
+  padding: 13px 22px;
   border-bottom: 1px solid var(--border);
-  white-space: nowrap;
+  vertical-align: middle;
+  color: var(--text-secondary);
 }
 
-.data-table tbody tr { transition: background var(--transition); }
-.data-table tbody tr:hover { background: var(--bg-input); }
-.data-table tbody tr:last-child td { border-bottom: none; }
+.data-table tbody tr {
+  cursor: pointer;
+  transition: var(--transition);
+}
 
-/* Badges in tables */
+.data-table tbody tr:hover {
+  background: rgba(255,255,255,0.025);
+}
+
+.data-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Alignments inside tables */
+.data-table .num-col {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-weight: 700;
+}
+
+/* Badges */
 .tier-badge {
   display: inline-block;
-  padding: 3px 10px;
-  border-radius: 20px;
-  font-size: 11px;
+  font-family: var(--font-mono);
   font-weight: 700;
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 6px;
   text-transform: uppercase;
 }
-.tier-diamond { background: rgba(99,102,241,0.15); color: #818CF8; }
-.tier-platinum { background: rgba(168,85,247,0.15); color: #C084FC; }
-.tier-gold { background: rgba(245,158,11,0.15); color: #F59E0B; }
-.tier-silver { background: rgba(156,163,175,0.15); color: #9CA3AF; }
-.tier-bronze { background: rgba(180,83,9,0.15); color: #D97706; }
-.tier-unknown { background: var(--bg-input); color: var(--text-muted); }
+
+.tier-diamond { background: rgba(99,102,241,0.12); color: #818CF8; border: 1px solid rgba(99,102,241,0.25); }
+.tier-platinum { background: rgba(168,85,247,0.12); color: #C084FC; border: 1px solid rgba(168,85,247,0.25); }
+.tier-gold { background: rgba(245,158,11,0.12); color: #F59E0B; border: 1px solid rgba(245,158,11,0.25); }
+.tier-silver { background: rgba(156,163,175,0.12); color: #9CA3AF; border: 1px solid rgba(156,163,175,0.25); }
+.tier-bronze { background: rgba(180,83,9,0.12); color: #D97706; border: 1px solid rgba(180,83,9,0.25); }
+.tier-unknown { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--border); }
 
 .side-buy { color: var(--success); font-weight: 700; }
 .side-sell { color: var(--danger); font-weight: 700; }
+.pnl-positive { color: var(--success); font-weight: 700; }
+.pnl-negative { color: var(--danger); font-weight: 700; }
 
-.pnl-positive { color: var(--success); font-weight: 600; }
-.pnl-negative { color: var(--danger); font-weight: 600; }
+.side-buy-badge {
+  padding: 3px 7px;
+  border-radius: 6px;
+  background: var(--success-glow);
+  color: var(--success);
+  font-size: 11px;
+  font-weight: 700;
+  border: 1px solid rgba(18,212,138,0.2);
+}
+
+.side-sell-badge {
+  padding: 3px 7px;
+  border-radius: 6px;
+  background: var(--danger-glow);
+  color: var(--danger);
+  font-size: 11px;
+  font-weight: 700;
+  border: 1px solid rgba(246,70,93,0.2);
+}
+
+/* Buttons */
+.btn-premium {
+  cursor: pointer;
+  padding: 9px 20px;
+  border-radius: var(--radius-sm);
+  font-size: 13.5px;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--primary), #4c8dff);
+  box-shadow: 0 4px 20px rgba(22,82,240,0.4);
+  color: white;
+  border: none;
+  transition: var(--transition);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-premium:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 24px rgba(22,82,240,0.5);
+}
 
 .btn-sm {
-  padding: 5px 12px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-input);
-  color: var(--text-secondary);
-  font-family: var(--font);
+  cursor: pointer;
+  padding: 6px 12px;
+  border-radius: 8px;
   font-size: 12px;
   font-weight: 600;
-  cursor: pointer;
-  transition: all var(--transition);
+  color: var(--text-secondary);
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--border);
+  transition: var(--transition);
 }
-.btn-sm:hover { border-color: var(--accent); color: var(--accent); }
 
-/* ─── Alerts ─── */
+.btn-sm:hover {
+  background: rgba(255,255,255,0.08);
+  border-color: var(--border-hover);
+  color: var(--text-primary);
+}
+
+.btn-tab {
+  white-space: nowrap;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  transition: var(--transition);
+  background: transparent;
+  color: var(--text-muted);
+  border: none;
+  cursor: pointer;
+}
+
+.btn-tab:hover {
+  color: var(--text-primary);
+  background: rgba(255,255,255,0.03);
+}
+
+.btn-tab.active {
+  background: rgba(255,255,255,0.05);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+/* Custom Dual Range Sliders (Filter Area) */
+.filter-card {
+  padding: 24px;
+  border-radius: 18px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  backdrop-filter: blur(24px);
+  margin-bottom: 20px;
+}
+
+.filter-section {
+  margin-bottom: 20px;
+}
+
+.filter-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 12px;
+}
+
+.traits-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.trait-chip {
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 7px 13px;
+  border-radius: 9px;
+  background: rgba(255,255,255,0.04);
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+  transition: var(--transition);
+}
+
+.trait-chip:hover {
+  border-color: var(--border-hover);
+  color: var(--text-primary);
+}
+
+.trait-chip.active {
+  background: rgba(22,82,240,0.12);
+  color: var(--primary-light);
+  border-color: rgba(22,82,240,0.3);
+}
+
+/* Slider Style */
+.slider-container {
+  position: relative;
+  height: 24px;
+  margin-top: 10px;
+  margin-bottom: 15px;
+}
+
+.slider-track {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 4px;
+  width: 100%;
+  background: rgba(255,255,255,0.08);
+  border-radius: 2px;
+}
+
+.slider-track-highlight {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 4px;
+  background: var(--primary);
+  border-radius: 2px;
+}
+
+.dual-range {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  pointer-events: none;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 24px;
+}
+
+.dual-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  pointer-events: auto;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--primary-light);
+  border: 2px solid var(--bg);
+  cursor: pointer;
+  box-shadow: 0 0 8px rgba(91,157,255,0.6);
+  margin-top: 0;
+  transition: var(--transition);
+}
+
+.dual-range::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+
+.dual-range::-moz-range-thumb {
+  pointer-events: auto;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--primary-light);
+  border: 2px solid var(--bg);
+  cursor: pointer;
+  box-shadow: 0 0 8px rgba(91,157,255,0.6);
+  transition: var(--transition);
+}
+
+.dual-range::-webkit-slider-runnable-track { background: transparent; }
+.dual-range::-moz-range-track { background: transparent; }
+
+.slider-values {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
+/* Detail Views */
+.detail-grid {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 20px;
+  align-items: start;
+}
+
+.detail-sidebar {
+  padding: 24px;
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+}
+
+.profile-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.profile-avatar {
+  width: 56px; height: 56px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: 800;
+  color: white;
+}
+
+.profile-name {
+  font-size: 19px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.profile-sub {
+  font-size: 12px;
+  color: var(--text-darker);
+  font-family: var(--font-mono);
+}
+
+.profile-joined {
+  font-size: 12.5px;
+  color: var(--text-muted);
+}
+
+.detail-main {
+  min-width: 0;
+}
+
+.detail-actions-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--bg-card);
+  padding: 16px 24px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  margin-bottom: 20px;
+  backdrop-filter: blur(20px);
+}
+
+.detail-actions-bar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.detail-actions-bar-right {
+  display: flex;
+  gap: 10px;
+}
+
+.actions-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--border);
+}
+
+.tabs-nav {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.stat-group {
+  margin-bottom: 16px;
+}
+
+.stat-group:last-child {
+  margin-bottom: 0;
+}
+
+.stat-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--text-darker);
+  letter-spacing: 0.05em;
+  margin-bottom: 4px;
+}
+
+.stat-value {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.stat-value.small {
+  font-size: 12px;
+  font-family: var(--font-mono);
+  word-break: break-all;
+  opacity: 0.8;
+}
+
+/* Order Book Depth Bars */
+.depth-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+  font-size: 12.5px;
+}
+
+.depth-row .price-label {
+  font-family: var(--font-mono);
+  width: 50px;
+  font-weight: 700;
+}
+
+.depth-row .size-label {
+  font-family: var(--font-mono);
+  width: 70px;
+  text-align: right;
+  color: var(--text-muted);
+}
+
+.depth-row .depth-bar-container {
+  flex: 1;
+  height: 8px;
+  background: rgba(255,255,255,0.03);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.depth-row .depth-bar {
+  height: 100%;
+  border-radius: 4px;
+}
+
+.depth-row.ask .price-label { color: var(--danger); }
+.depth-row.ask .depth-bar { background: var(--danger); }
+.depth-row.bid .price-label { color: var(--success); }
+.depth-row.bid .depth-bar { background: var(--success); }
+
+/* Outcome list for market */
+.outcome-row {
+  margin-bottom: 10px;
+  padding: 14px;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.outcome-row span {
+  font-size: 13.5px;
+  font-weight: 700;
+}
+
+.outcome-row strong {
+  font-size: 15px;
+  font-family: var(--font-mono);
+}
+
+.progress-bar {
+  height: 6px;
+  background: rgba(255,255,255,0.05);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-top: 4px;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.5s ease;
+}
+
+/* Alert list */
 .alert-item {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 16px 24px;
   border-bottom: 1px solid var(--border);
-  transition: background var(--transition);
+  transition: var(--transition);
 }
-.alert-item:hover { background: var(--bg-input); }
-.alert-item:last-child { border-bottom: none; }
-.alert-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
-.alert-severity-4 { background: rgba(255,59,48,0.15); }
-.alert-severity-3 { background: rgba(255,149,0,0.15); }
-.alert-severity-2 { background: rgba(90,200,250,0.15); }
-.alert-severity-1 { background: var(--bg-input); }
-.alert-content { flex: 1; }
-.alert-title { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
-.alert-message { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
-.alert-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; margin-top: 2px; }
-.alert-unread .alert-title::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; }
 
-/* ─── Empty State ─── */
+.alert-item:hover {
+  background: rgba(255,255,255,0.02);
+}
+
+.alert-item:last-child {
+  border-bottom: none;
+}
+
+.alert-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 16px;
+}
+
+.alert-severity-4 { background: rgba(246,70,93,0.12); border: 1px solid rgba(246,70,93,0.2); color: var(--danger); }
+.alert-severity-3 { background: rgba(255,149,0,0.12); border: 1px solid rgba(255,149,0,0.2); color: var(--warning); }
+.alert-severity-2 { background: rgba(22,82,240,0.12); border: 1px solid rgba(22,82,240,0.2); color: var(--primary-light); }
+.alert-severity-1 { background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text-muted); }
+
+.alert-content {
+  flex: 1;
+}
+
+.alert-title {
+  font-weight: 700;
+  font-size: 13.5px;
+  margin-bottom: 3px;
+}
+
+.alert-message {
+  font-size: 12.5px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.alert-time {
+  font-size: 11px;
+  color: var(--text-darker);
+  white-space: nowrap;
+  margin-top: 2px;
+}
+
+.alert-unread .alert-title::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--primary-light);
+  margin-right: 8px;
+  box-shadow: 0 0 6px var(--primary-light);
+}
+
+/* Empty State */
 .empty-state {
   padding: 60px 24px;
   text-align: center;
   color: var(--text-muted);
 }
-.empty-state p { font-size: 14px; margin-top: 8px; }
 
-/* ─── Responsive ─── */
-@media (max-width: 1200px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } .charts-row { grid-template-columns: 1fr; } }
-@media (max-width: 768px) { .sidebar { display: none; } .main-content { margin-left: 0; } .metrics-grid { grid-template-columns: 1fr; } }
-
-/* ─── Detail Views ─── */
-.detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
-.btn-back { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; font-weight: 600; padding: 4px 8px; border-radius: 4px; transition: var(--transition); }
-.btn-back:hover { background: var(--bg-input); color: var(--text-primary); }
-
-.detail-grid { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
-.detail-sidebar { padding: 24px; }
-.detail-main { min-width: 0; }
-.trader-menubar { display: flex; justify-content: space-between; align-items: center; background: var(--bg-surface); padding: 16px 24px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
-.trader-menubar-left { display: flex; align-items: center; gap: 16px; }
-.trader-menubar-right { display: flex; gap: 12px; }
-.menubar-divider { width: 1px; height: 24px; background: var(--border); }
-.btn-outline { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.2s; }
-.btn-outline:hover { background: var(--border); }
-.btn-primary { background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.2s; }
-.btn-primary:hover { filter: brightness(1.1); }
-.tabs-nav { display: flex; gap: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 8px; flex-wrap: wrap; align-items: center; }
-.btn-tab { 
-    white-space: nowrap; 
-    padding: 8px 16px; 
-    border-radius: 6px; 
-    font-size: 14px; 
-    font-weight: 600;
-    transition: all 0.2s; 
-    background: transparent; 
-    color: var(--text-muted); 
-    border: none; 
-    cursor: pointer;
+.empty-state p {
+  font-size: 14px;
+  margin-top: 8px;
 }
-.btn-tab:hover { background: var(--bg-input); color: var(--text-primary); }
-.btn-tab.active { 
-    background: var(--bg-input); 
-    color: var(--accent) !important; 
-    border-bottom: 2px solid var(--accent) !important; 
-    border-radius: 6px 6px 0 0;
+
+/* Platform-specific trait coloring helpers */
+.trait-sentiment { background: rgba(22,82,240,0.12) !important; color: #5b9dff !important; border-color: rgba(22,82,240,0.2) !important; }
+.trait-whales { background: rgba(168,85,247,0.12) !important; color: #C084FC !important; border-color: rgba(168,85,247,0.2) !important; }
+.trait-volume { background: rgba(245,158,11,0.12) !important; color: #F59E0B !important; border-color: rgba(245,158,11,0.2) !important; }
+.trait-winrate { background: rgba(18,212,138,0.12) !important; color: #12D48A !important; border-color: rgba(18,212,138,0.2) !important; }
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+  .metrics-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .charts-row, .glass-row {
+    grid-template-columns: 1fr;
+  }
 }
-.stat-group { margin-bottom: 16px; }
-.stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 4px; }
-.stat-value { font-size: 15px; font-weight: 600; color: var(--text-primary); }
-.stat-value.small { font-size: 12px; font-family: 'Cascadia Code', monospace; word-break: break-all; opacity: 0.8; }
 
-.outcome-row { margin-bottom: 12px; padding: 12px; background: var(--bg-input); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
-.outcome-row span { font-size: 13px; font-weight: 600; }
-.outcome-row strong { font-size: 15px; color: var(--accent); }
-
-.progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 4px; }
-.progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.5s ease; }
-
-.market-img-container img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
-.outcomes-list { padding: 16px 24px; }
+@media (max-width: 768px) {
+  .sidebar {
+    display: none;
+  }
+  .main-content {
+    margin-left: 0;
+  }
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/Predictalytics.Api/wwwroot/docs.html b/src/Predictalytics.Api/wwwroot/docs.html
new file mode 100644
index 0000000..ac20183
--- /dev/null
+++ b/src/Predictalytics.Api/wwwroot/docs.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Predictalytics API Reference</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body { margin: 0; background: #0a0d14; font-family: 'Manrope', system-ui, sans-serif; }
+    * { box-sizing: border-box; }
+    a { color: #5b9dff; text-decoration: none; }
+    a:hover { color: #8ab8ff; }
+    ::-webkit-scrollbar { width: 8px; }
+    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
+    pre { margin: 0; font-family: 'Roboto Mono', monospace; }
+  </style>
+</head>
+<body>
+
+<div style="position:relative; min-height:100vh; width:100%; background: radial-gradient(1100px 700px at 15% -10%, rgba(22,82,240,0.22), transparent 60%), #0a0d14; color:#EDEFF5;">
+
+  <header style="position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px 48px; backdrop-filter:blur(20px); background:rgba(10,13,20,0.6); border-bottom:1px solid rgba(255,255,255,0.07);">
+    <div style="display:flex; align-items:center; gap:10px;">
+      <a href="./landing.html" style="display:flex; align-items:center; gap:10px;">
+        <div style="width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 0 20px rgba(22,82,240,0.6);"></div>
+        <div style="font-weight:800; font-size:17px; letter-spacing:-0.02em; color:white;">Predictalytics<span style="color:#5b9dff;">.</span></div>
+      </a>
+    </div>
+    <nav style="display:flex; align-items:center; gap:32px;">
+      <a href="./landing.html#features" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Features</a>
+      <a href="./landing.html#pricing" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Preise</a>
+      <a href="./landing.html#faq" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">FAQ</a>
+      <div style="font-size:13.5px; font-weight:700; color:#5b9dff;">API Docs</div>
+    </nav>
+    <a href="./index.html" style="padding:9px 20px; border-radius:10px; font-size:13.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff); color:white;">Dashboard</a>
+  </header>
+
+  <div style="display:flex; max-width:1280px; margin:0 auto; padding:0 24px;">
+    <!-- SIDEBAR -->
+    <aside style="width:230px; flex:none; padding:36px 16px; position:sticky; top:68px; align-self:flex-start; height:calc(100vh - 68px); overflow-y:auto;">
+      <div style="font-size:11px; font-weight:700; color:#5B6377; letter-spacing:0.06em; padding:0 12px 8px;">GETTING STARTED</div>
+      <div onclick="scrollToSection('sec-auth')" style="cursor:pointer; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:#EDEFF5; margin-bottom:2px;">Authentication</div>
+      <div onclick="scrollToSection('sec-limits')" style="cursor:pointer; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:#8B93A7; margin-bottom:2px;">Rate Limits</div>
+      
+      <div style="font-size:11px; font-weight:700; color:#5B6377; letter-spacing:0.06em; padding:16px 12px 8px;">ENDPOINTS</div>
+      <div id="sidebarEndpoints" style="display:flex; flex-direction:column; gap:2px;"></div>
+    </aside>
+
+    <!-- CONTENT -->
+    <main style="flex:1; min-width:0; padding:36px 40px 100px;">
+      <h1 style="margin:0 0 10px; font-size:30px; font-weight:800; letter-spacing:-0.02em;">API Reference</h1>
+      <p style="margin:0 0 32px; color:#8B93A7; font-size:14.5px; max-width:640px; line-height:1.6;">Programmatischer Zugriff auf jeden Trader, Markt und historischen Trade in Predictalytics. Alle Endpunkte liefern JSON über HTTP(S).</p>
+
+      <!-- Auth -->
+      <section id="sec-auth" style="margin-bottom:40px; scroll-margin-top:90px;">
+        <h2 style="font-size:19px; font-weight:800; margin:0 0 12px;">Authentication</h2>
+        <p style="color:#8B93A7; font-size:13.5px; line-height:1.7; margin:0 0 14px;">Übergebe deinen API-Key (sofern aktiv) als Bearer-Token in jedem Request-Header.</p>
+        <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:18px 20px; font-family:'Roboto Mono'; font-size:13px; color:#C7CCDA; overflow-x:auto;">
+<pre>curl http://localhost:5000/api/dashboard \
+  -H "Authorization: Bearer DEIN_API_KEY"</pre>
+        </div>
+      </section>
+
+      <!-- Rate limits -->
+      <section id="sec-limits" style="margin-bottom:40px; scroll-margin-top:90px;">
+        <h2 style="font-size:19px; font-weight:800; margin:0 0 12px;">Rate limits</h2>
+        <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:14px;">
+          <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:16px 18px;">
+            <div style="font-size:12.5px; font-weight:700; color:#8B93A7; margin-bottom:6px;">Lokal / Dev</div>
+            <div style="font-size:20px; font-weight:800; font-family:'Roboto Mono';">Unlimitiert</div>
+          </div>
+          <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:16px 18px;">
+            <div style="font-size:12.5px; font-weight:700; color:#8B93A7; margin-bottom:6px;">Pro-Plan</div>
+            <div style="font-size:20px; font-weight:800; font-family:'Roboto Mono';">2.000 / Tag</div>
+          </div>
+          <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:16px 18px;">
+            <div style="font-size:12.5px; font-weight:700; color:#8B93A7; margin-bottom:6px;">Enterprise</div>
+            <div style="font-size:20px; font-weight:800; font-family:'Roboto Mono';">Custom</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Dynamic Endpoints -->
+      <div id="endpointsContainer"></div>
+    </main>
+  </div>
+
+</div>
+
+<script>
+  const endpoints = [
+    {
+      id: "ep-capabilities",
+      method: "GET",
+      path: "/api/capabilities",
+      desc: "Gibt die Berechtigungen (CanControl, AuthRequired) des aktuellen Webservers zurück.",
+      params: [],
+      response: '{\n  "canControl": true,\n  "authRequired": false\n}'
+    },
+    {
+      id: "ep-dashboard",
+      method: "GET",
+      path: "/api/dashboard",
+      desc: "Liefert globale Statistiken sowie Listen von Top-Tradern und aktuellen Trades.",
+      params: [],
+      response: '{\n  "totalTraders": 142,\n  "activeTraders24h": 45,\n  "volume24h": 850420.50,\n  "topTraders": [...],\n  "recentTrades": [...]\n}'
+    },
+    {
+      id: "ep-traders",
+      method: "GET",
+      path: "/api/traders",
+      desc: "Liefert eine gefilterte Liste aller überwachten Trader.",
+      params: [
+        { name: "platform", type: "string", desc: "Z.B. Polymarket, Limitless" },
+        { name: "sortBy", type: "string", desc: "score, winrate, pnl, name" },
+        { name: "minWinRate", type: "number", desc: "Mindest-Win-Rate in %" }
+      ],
+      response: '[\n  {\n    "id": 12,\n    "displayName": "quant_owl",\n    "platform": "Polymarket",\n    "combinedScore": 91.5,\n    "winRate": 64.2,\n    "totalPnl": 216420.00\n  }\n]'
+    },
+    {
+      id: "ep-trader-detail",
+      method: "GET",
+      path: "/api/traders/{id}",
+      desc: "Detaillierte Informationen, P&L-Statistiken, Traits und Trade-Historie eines Traders.",
+      params: [
+        { name: "id", type: "integer", desc: "Interne ID des Traders" }
+      ],
+      response: '{\n  "id": 12,\n  "displayName": "quant_owl",\n  "platform": "Polymarket",\n  "traits": [{"trait": "Whale", "value": 1.0}],\n  "recentTrades": [...]\n}'
+    },
+    {
+      id: "ep-markets",
+      method: "GET",
+      path: "/api/markets",
+      desc: "Gibt alle erfassten Wetten/Märkte zurück.",
+      params: [
+        { name: "platform", type: "string", desc: "Filter nach Plattform" }
+      ],
+      response: '[\n  {\n    "id": 8,\n    "question": "Will Ethereum exceed $4,000 in July?",\n    "volume": 2541090.00,\n    "isResolved": false\n  }\n]'
+    }
+  ];
+
+  // Render Sidebar
+  document.getElementById('sidebarEndpoints').innerHTML = endpoints.map(ep => {
+    let methodColor = ep.method === 'GET' ? '#12D48A' : '#ff9d4c';
+    return `
+      <div onclick="scrollToSection('${ep.id}')" style="cursor:pointer; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px; font-size:13px; font-weight:600; color:#8B93A7; margin-bottom:2px;">
+        <span style="font-size:10px; font-weight:800; font-family:'Roboto Mono'; color:${methodColor};">${ep.method}</span>
+        <span>${ep.path}</span>
+      </div>
+    `;
+  }).join('');
+
+  // Render Content Endpoints
+  document.getElementById('endpointsContainer').innerHTML = endpoints.map(ep => {
+    let methodColor = ep.method === 'GET' ? '#12D48A' : '#ff9d4c';
+    let methodBg = ep.method === 'GET' ? 'rgba(18,212,138,0.12)' : 'rgba(255,157,76,0.12)';
+    
+    let paramsHtml = ep.params.length > 0 ? ep.params.map(p => `
+      <div style="display:flex; align-items:baseline; gap:8px; margin-bottom:8px; font-size:12.5px;">
+        <span style="font-family:'Roboto Mono'; font-weight:700; color:#5b9dff;">${p.name}</span>
+        <span style="color:#5B6377; font-size:11.5px;">${p.type}</span>
+        <span style="color:#8B93A7;">${p.desc}</span>
+      </div>
+    `).join('') : '<div style="font-size:12.5px; color:#5B6377;">Keine Parameter erforderlich.</div>';
+
+    return `
+      <section id="${ep.id}" style="margin-bottom:40px; scroll-margin-top:90px;">
+        <div style="display:flex; align-items:center; gap:12px; margin-bottom:10px;">
+          <span style="font-size:11px; font-weight:800; font-family:'Roboto Mono'; padding:4px 9px; border-radius:6px; background:${methodBg}; color:${methodColor};">${ep.method}</span>
+          <span style="font-family:'Roboto Mono'; font-size:14.5px; font-weight:700; color:#EDEFF5;">${ep.path}</span>
+        </div>
+        <p style="color:#8B93A7; font-size:13.5px; line-height:1.6; margin:0 0 14px;">${ep.desc}</p>
+
+        <div style="display:grid; grid-template-columns:1fr 1.2fr; gap:16px;">
+          <div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:16px 18px;">
+            <div style="font-size:11px; font-weight:700; color:#5B6377; text-transform:uppercase; margin-bottom:10px;">Parameters</div>
+            ${paramsHtml}
+          </div>
+          <div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:16px 18px; overflow-x:auto;">
+            <div style="font-size:11px; font-weight:700; color:#5B6377; text-transform:uppercase; margin-bottom:10px;">Response (JSON)</div>
+            <pre style="font-size:12px; color:#C7CCDA; line-height:1.4;">${ep.response}</pre>
+          </div>
+        </div>
+      </section>
+    `;
+  }).join('');
+
+  window.scrollToSection = function(id) {
+    const el = document.getElementById(id);
+    if (el) el.scrollIntoView({ behavior: 'smooth' });
+  };
+</script>
+
+</body>
+</html>
diff --git a/src/Predictalytics.Api/wwwroot/index.html b/src/Predictalytics.Api/wwwroot/index.html
index dc3b4ce..9fb5860 100644
--- a/src/Predictalytics.Api/wwwroot/index.html
+++ b/src/Predictalytics.Api/wwwroot/index.html
@@ -1,488 +1,682 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="de">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Predictalytics — Multi-Platform Prediction Market Smart-Money Tracker & Analytics">
-    <title>Predictalytics</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="css/style.css?v=20260710">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Predictalytics — Multi-Platform Prediction Market Smart-Money Tracker & Analytics">
+  <title>Predictalytics</title>
+  <link rel="stylesheet" href="css/style.css?v=20260715">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
 </head>
 <body>
-    <!-- Sidebar -->
-    <aside class="sidebar" id="sidebar">
-        <div class="sidebar-logo">
-            <div class="logo-icon">P</div>
-            <span class="logo-text">Predictalytics</span>
+
+  <!-- Decorative glow layer -->
+  <div class="glow-layer"></div>
+
+  <div class="app-wrapper">
+
+    <!-- SIDEBAR -->
+    <aside class="sidebar">
+      <div class="sidebar-logo">
+        <div class="logo-icon"></div>
+        <div class="logo-text">Predictalytics<span style="color:#5b9dff;">.</span></div>
+      </div>
+
+      <nav class="sidebar-nav">
+        <div class="nav-title">Navigation</div>
+        <a href="#" class="nav-item active" data-page="dashboard">
+          <div class="nav-dot"></div>
+          <span>Dashboard</span>
+        </a>
+        <a href="#" class="nav-item" data-page="traders">
+          <div class="nav-dot"></div>
+          <span>Trader</span>
+        </a>
+        <a href="#" class="nav-item" data-page="watchlist">
+          <div class="nav-dot"></div>
+          <span>Watchlist</span>
+        </a>
+        <a href="#" class="nav-item" data-page="markets">
+          <div class="nav-dot"></div>
+          <span>Märkte</span>
+        </a>
+        <a href="#" class="nav-item" data-page="alerts">
+          <div class="nav-dot"></div>
+          <span>Alerts</span>
+          <span class="badge" id="alertBadge" style="display:none">0</span>
+        </a>
+        <a href="#" class="nav-item" data-page="jobs" id="nav-jobs-container">
+          <div class="nav-dot"></div>
+          <span>Background Jobs</span>
+        </a>
+      </nav>
+
+      <div class="sidebar-footer">
+        <div class="data-feed-badge">
+          <div class="label">Daten-Feed</div>
+          <div class="status">
+            <div class="dot"></div>
+            <span>Live · On-chain</span>
+          </div>
         </div>
-        <nav class="sidebar-nav">
-            <a href="#" class="nav-item active" data-page="dashboard">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
-                <span>Dashboard</span>
-            </a>
-            <a href="#" class="nav-item" data-page="traders">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
-                <span>Traders</span>
-            </a>
-            <a href="#" class="nav-item" data-page="watchlist">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-                <span>Watchlist</span>
-            </a>
-            <a href="#" class="nav-item" data-page="markets">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
-                <span>Markets</span>
-            </a>
-            <a href="#" class="nav-item" data-page="alerts">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
-                <span>Alerts</span>
-                <span class="badge" id="alertBadge" style="display:none">0</span>
-            </a>
-            <a href="#" class="nav-item" data-page="jobs">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
-                <span>Jobs</span>
-            </a>
-        </nav>
-        <div class="sidebar-footer">
-            <a href="/swagger" target="_blank" class="nav-item">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
-                <span>API Docs</span>
-            </a>
+        
+        <div class="user-profile">
+          <div class="user-avatar"></div>
+          <div class="user-info">
+            <div class="name">Analyst</div>
+            <div class="workspace">Pro Workspace</div>
+          </div>
         </div>
+      </div>
     </aside>
 
-    <!-- Main Content -->
+    <!-- MAIN CONTENT -->
     <main class="main-content">
-        <!-- Top Bar -->
-        <header class="topbar">
-            <div class="topbar-left">
-                <select id="platformSelect" class="platform-select">
-                    <option value="All">All Platforms</option>
-                    <option value="Polymarket">Polymarket</option>
-                    <option value="Limitless">Limitless</option>
-                    <option value="Azuro">Azuro</option>
-                </select>
-                <div class="search-box">
-                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-                    <input type="text" id="searchInput" placeholder="Search traders, markets..." autocomplete="off">
-                </div>
-                <select id="sortSelect" class="platform-select">
-                    <option value="default">Sort by: Default</option>
-                    <option value="score">Sort by: Score/Vol</option>
-                    <option value="name">Sort by: Name/Date</option>
-                    <option value="pnl">Sort by: PnL/Liq</option>
-                </select>
-            </div>
-            <div class="topbar-right">
-                <div class="timeframe-toggle">
-                    <button class="tf-btn active" data-tf="24h">24H</button>
-                    <button class="tf-btn" data-tf="7d">7D</button>
-                    <button class="tf-btn" data-tf="30d">30D</button>
-                </div>
-                <div class="theme-toggle" id="themeToggle" title="Toggle Dark/Light Mode">
-                    <svg class="icon-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
-                    <svg class="icon-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
-                </div>
-            </div>
-        </header>
 
-        <!-- Page Content -->
-        <div class="page-content" id="pageContent">
-            <!-- Dashboard Page -->
-            <section class="page active" id="page-dashboard">
-                <h1 class="page-title">Dashboard</h1>
-                <!-- Metric Cards -->
-                <div class="metrics-grid" id="metricsGrid">
-                    <div class="metric-card"><div class="metric-label">Total Traders</div><div class="metric-value" id="metricTraders">—</div><div class="metric-delta positive">tracking</div></div>
-                    <div class="metric-card"><div class="metric-label">Active (24h)</div><div class="metric-value" id="metricActive">—</div><div class="metric-delta positive">live</div></div>
-                    <div class="metric-card"><div class="metric-label">Total Trades</div><div class="metric-value" id="metricTrades">—</div><div class="metric-delta">all time</div></div>
-                    <div class="metric-card accent"><div class="metric-label">Volume (24h)</div><div class="metric-value" id="metricVolume">—</div><div class="metric-delta positive">USD</div></div>
-                </div>
-                <!-- Charts Row -->
-                <div class="charts-row">
-                    <div class="card chart-card">
-                        <div class="card-header"><h2>Platform Breakdown</h2></div>
-                        <div class="chart-container"><canvas id="platformChart"></canvas></div>
-                    </div>
-                    <div class="card chart-card">
-                        <div class="card-header"><h2>Trader Tiers</h2></div>
-                        <div class="chart-container"><canvas id="tierChart"></canvas></div>
-                    </div>
-                </div>
-                <!-- Top Traders Table -->
-                <div class="card">
-                    <div class="card-header"><h2>Top Traders</h2></div>
-                    <div class="table-wrap">
-                        <table class="data-table" id="topTradersTable">
-                            <thead><tr><th>#</th><th>Trader</th><th>Platform</th><th>Score</th><th>Win Rate</th><th>PnL</th><th>Trades (30d|All)</th></tr></thead>
-                            <tbody id="topTradersBody"></tbody>
-                        </table>
-                    </div>
-                </div>
-                <!-- Recent Trades -->
-                <div class="card">
-                    <div class="card-header"><h2>Recent Trades</h2></div>
-                    <div class="table-wrap">
-                        <table class="data-table" id="recentTradesTable">
-                            <thead><tr><th>Time</th><th>Trader</th><th>Market</th><th>Side</th><th>Price</th><th>Size</th><th>Amount</th></tr></thead>
-                            <tbody id="recentTradesBody"></tbody>
-                        </table>
-                    </div>
-                </div>
-            </section>
-
-            <!-- Traders Page -->
-            <section class="page" id="page-traders">
-                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px;">
-                    <div style="display:flex; align-items:center; gap:16px; flex-wrap:wrap;">
-                        <h1 class="page-title" style="margin-bottom:0">Traders</h1>
-                        
-                        <select id="tradersSort" class="platform-select" onchange="loadTraders()">
-                            <option value="score">Sort: Combined Score</option>
-                            <option value="winrate">Sort: Win Rate</option>
-                            <option value="copyability">Sort: Copyability</option>
-                            <option value="pnl">Sort: Total PnL</option>
-                            <option value="name">Sort: Name</option>
-                        </select>
-                        
-                        <div style="display:flex; align-items:center; gap:4px;">
-                            <span style="font-size:13px; font-weight:600;">Win Rate ></span>
-                            <input type="number" id="filterWinrateMin" class="platform-select" style="width:70px" placeholder="%" onchange="loadTraders()">
-                        </div>
-
-                        <div style="display:flex; align-items:center; gap:4px;">
-                            <span style="font-size:13px; font-weight:600;">Copyability ></span>
-                            <input type="number" id="filterCopyabilityMin" class="platform-select" style="width:70px" placeholder="%" onchange="loadTraders()">
-                        </div>
-                        
-                        <select id="filterTrait" class="platform-select" onchange="loadTraders()">
-                            <option value="">All Traits</option>
-                        </select>
-
-                        <label style="display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; background:var(--bg-surface); padding:8px 12px; border-radius:6px; border:1px solid var(--border);">
-                            <input type="checkbox" id="chk-highly-copyable" onchange="loadTraders()"> Highly Copyable
-                        </label>
-                    </div>
-                    <div class="card" style="margin-bottom:0; padding:12px 20px; display:flex; gap:12px; align-items:center;">
-                        <span style="font-size:13px; font-weight:600">Add Trader:</span>
-                        <select id="addPlatform" class="platform-select">
-                            <option value="Polymarket">Polymarket</option>
-                            <option value="Limitless">Limitless</option>
-                        </select>
-                        <input type="text" id="addWallet" placeholder="Wallet Address" class="platform-select" style="width:200px">
-                        <button class="btn-sm" onclick="manualAddTrader()" style="padding:6px 16px; background:var(--accent); color:white; border:none">Add</button>
-                    </div>
-                </div>
-                <div class="card">
-                    <div class="table-wrap">
-                        <table class="data-table"><thead><tr>
-                            <th style="cursor:pointer" onclick="setTraderSort('score')">#</th>
-                            <th style="cursor:pointer" onclick="setTraderSort('name')">Name ↕</th>
-                            <th style="cursor:pointer" onclick="setTraderSort('platform')">Platform ↕</th>
-                            <th style="cursor:pointer" onclick="setTraderSort('score')">Combined Score ↕</th>
-                            <th style="cursor:pointer" onclick="setTraderSort('quality')">Quality ↕</th>
-                            <th style="cursor:pointer" onclick="setTraderSort('copyability')">Copyability ↕</th>
-                            <th style="cursor:pointer" onclick="setTraderSort('winrate')">Win Rate ↕</th>
-                            <th style="cursor:pointer" onclick="setTraderSort('pnl')">PnL ↕</th>
-                            <th style="cursor:pointer" onclick="setTraderSort('trades')">Trades (30d|All) ↕</th>
-                            <th>Strategy</th>
-                            <th>Actions</th>
-                        </tr></thead>
-                            <tbody id="allTradersBody"></tbody>
-                        </table>
-                    </div>
-                </div>
-            </section>
-
-            <!-- Watchlist Page -->
-            <section class="page" id="page-watchlist">
-                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px;">
-                    <h1 class="page-title" style="margin-bottom:0">Watchlist</h1>
-                </div>
-                <div class="card">
-                    <div class="table-wrap">
-                        <table class="data-table" id="watchlistTable">
-                            <thead>
-                                <tr>
-                                    <th>Trader</th>
-                                    <th>Platform</th>
-                                    <th>Score</th>
-                                    <th>Win Rate</th>
-                                    <th>PnL</th>
-                                    <th>Label</th>
-                                    <th>Added</th>
-                                    <th>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody id="watchlistBody"></tbody>
-                        </table>
-                    </div>
-                </div>
-            </section>
-
-            <!-- Markets Page -->
-            <section class="page" id="page-markets">
-                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px;">
-                    <div style="display:flex; align-items:center; gap:16px; flex-wrap:wrap;">
-                        <h1 class="page-title" style="margin-bottom:0">Markets</h1>
-                        <select id="marketsCategory" class="platform-select" onchange="loadMarkets()">
-                            <option value="All">All Categories</option>
-                            <option value="Politics">Politics</option>
-                            <option value="Crypto">Crypto</option>
-                            <option value="Sports">Sports</option>
-                            <option value="PopCulture">PopCulture</option>
-                            <option value="Other">Other</option>
-                        </select>
-                        <div class="search-box">
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-                            <input type="text" id="marketsSearchInput" placeholder="Search markets..." autocomplete="off" onkeypress="if(event.key==='Enter') loadMarkets()">
-                        </div>
-                    </div>
-                </div>
-                <div class="card"><div class="table-wrap"><table class="data-table"><thead><tr><th>Platform</th><th>Question</th><th>Volume</th><th>Liquidity</th><th>End Date</th><th>Status</th></tr></thead><tbody id="allMarketsBody"></tbody></table></div></div>
-            </section>
-
-            <!-- Alerts Page -->
-            <section class="page" id="page-alerts"><h1 class="page-title">Alerts</h1><div class="card" id="alertsList"></div></section>
-
-            <!-- Jobs Page -->
-            <section class="page" id="page-jobs">
-                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
-                    <h1 class="page-title" style="margin-bottom:0">Background Jobs</h1>
-                    <button class="btn-sm" onclick="queueBacklogAnalysis()" style="padding:6px 16px; background:var(--accent); color:white; border:none; cursor:pointer; border-radius:4px;">Analyze Backlog (50)</button>
-                </div>
-                <div class="card">
-                    <div class="table-wrap">
-                        <table class="data-table">
-                            <thead>
-                                <tr>
-                                    <th>Job ID</th>
-                                    <th>Job Type</th>
-                                    <th>Status</th>
-                                    <th>Trader</th>
-                                    <th>Created At</th>
-                                    <th>Started At</th>
-                                    <th>Completed At</th>
-                                    <th>Error Message</th>
-                                    <th>Action</th>
-                                </tr>
-                            </thead>
-                            <tbody id="jobsBody">
-                                <tr><td colspan="9" style="text-align:center;">Loading jobs...</td></tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </section>
-
-            <!-- Search Results Page -->
-            <section class="page" id="page-search">
-                <h1 class="page-title" id="search-title">Search Results</h1>
-                <div id="searchResults">
-                    <div class="card">
-                        <div class="card-header"><h2>Traders</h2></div>
-                        <div class="table-wrap">
-                            <table class="data-table">
-                                <thead><tr><th>#</th><th>Name</th><th>Platform</th><th>Score</th><th>Tier</th><th>Actions</th></tr></thead>
-                                <tbody id="searchTradersBody"></tbody>
-                            </table>
-                        </div>
-                    </div>
-                    <div class="card">
-                        <div class="card-header"><h2>Markets</h2></div>
-                        <div class="table-wrap">
-                            <table class="data-table">
-                                <thead><tr><th>Platform</th><th>Question</th><th>Volume</th><th>Status</th><th>Actions</th></tr></thead>
-                                <tbody id="searchMarketsBody"></tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            <!-- Trader Detail Page -->
-            <section class="page" id="page-trader-detail">
-                <!-- Trader Detail Menu Bar -->
-                <div class="trader-menubar">
-                    <div class="trader-menubar-left">
-                        <button class="btn-back" onclick="navigateBack()">← Back</button>
-                        <div class="menubar-divider"></div>
-                        <h1 class="page-title" id="td-name" style="margin-bottom:0;">Trader Name</h1>
-                    </div>
-                    <div class="trader-menubar-right">
-                        <button class="btn-sm btn-outline" id="btn-toggle-watchlist">
-                            ☆ Watchlist
-                        </button>
-                        <button class="btn-sm btn-outline" id="btn-open-platform" style="display:none;">
-                            🌐 Open Platform
-                        </button>
-                        <button class="btn-sm btn-primary" id="btn-sync-trader">
-                            ⟱ Sync
-                        </button>
-                        <button class="btn-sm btn-outline" id="btn-deep-resync-trader" style="border-color:var(--pnl-negative); color:var(--pnl-negative);">
-                            ⟱ Deep Resync
-                        </button>
-                        <button class="btn-sm btn-primary" id="btn-analyze-trader">
-                            ⚙ Analyze
-                        </button>
-                    </div>
-                </div>
-                <div class="detail-grid">
-                    <div class="detail-sidebar">
-                        <div class="card">
-                            <div class="stat-group">
-                                <div class="stat-label">Platform</div>
-                                <div class="stat-value" id="td-platform">—</div>
-                            </div>
-                            <div class="stat-group">
-                                <div class="stat-label">Platform ID</div>
-                                <div class="stat-value small" id="td-platformId">—</div>
-                            </div>
-                            <div class="stat-group">
-                                <div class="stat-label">Tier</div>
-                                <div class="stat-value" id="td-tier">—</div>
-                            </div>
-                            <div class="stat-group">
-                                <div class="stat-label">Strategy</div>
-                                <div class="stat-value" id="td-strategy">—</div>
-                            </div>
-                            <div class="stat-group" id="td-traits-container" style="display:none; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px;">
-                                <div class="stat-label">Algorithmic Traits</div>
-                                <div class="stat-value small" id="td-traits" style="display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="detail-main">
-                        <!-- Tabs Navigation -->
-                        <div class="tabs-nav">
-                            <button class="btn-tab active" data-tab="td-tab-analytics" onclick="switchTraderTab('td-tab-analytics')">Analytics & AI</button>
-                            <button class="btn-tab" data-tab="td-tab-recent" onclick="switchTraderTab('td-tab-recent')">Recent Trades</button>
-                            <button class="btn-tab" data-tab="td-tab-positions" onclick="switchTraderTab('td-tab-positions')">Positions</button>
-                        </div>
-
-                        <!-- Tab Content: Analytics -->
-                        <div class="tab-content" id="td-tab-analytics" style="display:block;">
-                            <div class="metrics-grid">
-                                <div class="metric-card"><div class="metric-label">Win Rate</div><div class="metric-value" id="td-winrate">---</div></div>
-                                <div class="metric-card"><div class="metric-label">Win Rate (30d)</div><div class="metric-value" id="td-winrate30d">---</div></div>
-                                <div class="metric-card"><div class="metric-label">Total PnL</div><div class="metric-value" id="td-pnl">---</div></div>
-                                <div class="metric-card"><div class="metric-label">PnL (30d)</div><div class="metric-value" id="td-pnl30d">---</div></div>
-                                <div class="metric-card"><div class="metric-label">Total Trades</div><div class="metric-value" id="td-trades">---</div></div>
-                                <div class="metric-card"><div class="metric-label">Est. Bankroll</div><div class="metric-value" id="td-bankroll">---</div></div>
-                                <div class="metric-card"><div class="metric-label">Quality Edge</div><div class="metric-value" id="td-quality-score">---</div></div>
-                                <div class="metric-card"><div class="metric-label">Copyability</div><div class="metric-value" id="td-copyability-score">---</div></div>
-                                <div class="metric-card"><div class="metric-label">Med. Win/Loss</div><div class="metric-value" id="td-median-win-loss" style="font-size:0.9em;">---</div></div>
-                                <div class="metric-card"><div class="metric-label">Profit Factor</div><div class="metric-value" id="td-profit-factor">---</div></div>
-                                <div class="metric-card"><div class="metric-label">Expectancy / Trade</div><div class="metric-value" id="td-expectancy">---</div></div>
-                                <div class="metric-card accent">
-                                    <div class="metric-value" id="td-score">---</div>
-                                </div>
-                            </div>
-                            
-                            <div class="card" style="margin-bottom: 24px;">
-                                <div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
-                                    <h2>AI Strategy Analysis</h2>
-                                    <button class="btn-sm" id="btn-ai-analysis" style="padding:6px 12px; background:var(--primary); color:#000;">Run Deep Analysis</button>
-                                </div>
-                                <div class="stat-value small" id="td-ai-summary" style="margin-top: 16px; font-weight:normal; line-height:1.6; white-space:pre-wrap; background:var(--bg-input); padding:16px; border-radius:8px; border:1px solid var(--border);">Click 'Run Deep Analysis' to generate a detailed summary of this trader's behavior.</div>
-                            </div>
-
-                            <div class="card" style="margin-bottom: 24px;">
-                                <div class="card-header"><h2>Category Specialization</h2></div>
-                                <div class="table-wrap">
-                                    <table class="data-table">
-                                        <thead><tr><th>Category</th><th>Subcategory</th><th>Win Rate</th><th>PnL</th><th>Volume</th><th>Trades</th></tr></thead>
-                                        <tbody id="td-categoryBody"></tbody>
-                                    </table>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Tab Content: Recent Trades -->
-                        <div class="tab-content" id="td-tab-recent" style="display:none;">
-                            <div class="card">
-                                <div class="card-header"><h2>Recent Trades</h2></div>
-                                <div class="table-wrap">
-                                    <table class="data-table">
-                                        <thead><tr><th>Time</th><th>Market</th><th>Side</th><th>Price</th><th>Size</th><th>Amount</th></tr></thead>
-                                        <tbody id="td-tradesBody"></tbody>
-                                    </table>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Tab Content: Positions -->
-                        <div class="tab-content" id="td-tab-positions" style="display:none;">
-                            <div class="card">
-                                <div class="card-header"><h2>Active Positions</h2></div>
-                                <div class="table-wrap">
-                                    <table class="data-table">
-                                        <thead><tr><th>Market / Outcome</th><th>Shares</th><th>Avg Price</th><th>Current Price</th><th>Realized PnL</th><th>Unrealized PnL</th></tr></thead>
-                                        <tbody id="td-positionsBody"><tr><td colspan="6" style="text-align:center;">Loading...</td></tr></tbody>
-                                    </table>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            <!-- Market Detail Page -->
-            <section class="page" id="page-market-detail">
-                <div class="detail-header">
-                    <button class="btn-back" onclick="navigateBack()">← Back</button>
-                    <h1 class="page-title" id="md-question">Market Question</h1>
-                </div>
-                <div class="detail-grid">
-                    <div class="card detail-sidebar">
-                        <div id="md-image" class="market-img-container"></div>
-                        <div class="stat-group">
-                            <div class="stat-label">Platform</div>
-                            <div class="stat-value" id="md-platform">—</div>
-                        </div>
-                        <ul class="nav-links">
-                  <li><a href="#" onclick="showPage('page-dashboard')" class="active" id="nav-dashboard">Dashboard</a></li>
-                  <li><a href="#" onclick="showPage('page-traders')" id="nav-traders">Traders</a></li>
-                  <li><a href="#" onclick="showPage('page-markets')" id="nav-markets">Markets</a></li>
-                  <li><a href="#" onclick="showPage('page-alerts')" id="nav-alerts">Alerts</a></li>
-                  <li><a href="#" onclick="showPage('page-jobs')" id="nav-jobs">Jobs</a></li>
-              </ul>              <div class="stat-group">
-                            <div class="stat-label">Category</div>
-                            <div class="stat-value" id="md-category">—</div>
-                        </div>
-                        <div class="stat-group">
-                            <div class="stat-label">Ends</div>
-                            <div class="stat-value" id="md-ends">—</div>
-                        </div>
-                    </div>
-                    <div class="detail-main">
-                        <div class="metrics-grid">
-                            <div class="metric-card"><div class="metric-label">Volume</div><div class="metric-value" id="md-volume">—</div></div>
-                            <div class="metric-card"><div class="metric-label">Liquidity</div><div class="metric-value" id="md-liquidity">—</div></div>
-                            <div class="metric-card"><div class="metric-label">Status</div><div class="metric-value" id="md-status">—</div></div>
-                            <div class="metric-card accent"><div class="metric-label">Bot Activity</div><div class="metric-value" id="md-bot-activity">—</div></div>
-                            <div class="metric-card"><div class="metric-label">Unique Traders</div><div class="metric-value" id="md-unique-traders">—</div></div>
-                            <div class="metric-card"><div class="metric-label">Avg Trade Size</div><div class="metric-value" id="md-avg-trade-size">—</div></div>
-                        </div>
-                        <div class="card">
-                            <div class="card-header"><h2>Outcomes</h2></div>
-                            <div class="outcomes-list" id="md-outcomes"></div>
-                        </div>
-                        <div class="card">
-                            <div class="card-header"><h2>Recent Trades</h2></div>
-                            <div class="table-wrap">
-                                <table class="data-table">
-                                    <thead><tr><th>Time</th><th>Trader</th><th>Side</th><th>Price</th><th>Size</th><th>Amount</th></tr></thead>
-                                    <tbody id="md-tradesBody"></tbody>
-                                </table>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
+      <!-- TOPBAR -->
+      <header class="topbar">
+        <div class="topbar-left">
+          <select id="platformSelect" class="platform-select">
+            <option value="All">Alle Plattformen</option>
+            <option value="Polymarket">Polymarket</option>
+            <option value="Limitless">Limitless</option>
+            <option value="Azuro">Azuro</option>
+          </select>
+          <div class="search-box">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+            <input type="text" id="searchInput" placeholder="Suche nach Tradern, Märkten, Wallets..." autocomplete="off">
+          </div>
+          <select id="sortSelect" class="platform-select">
+            <option value="default">Sortieren: Standard</option>
+            <option value="score">Sortieren: Score/Vol</option>
+            <option value="name">Sortieren: Name/Datum</option>
+            <option value="pnl">Sortieren: PnL/Liq</option>
+          </select>
         </div>
+
+        <div class="topbar-right">
+          <div class="header-vol-badge" id="headerVolumeBadge">24H VOL: Loading...</div>
+          <div class="theme-toggle" id="themeToggle" title="Design wechseln">
+            <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+            <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+          </div>
+        </div>
+      </header>
+
+      <!-- PAGE VIEWS -->
+      <div id="pageContent">
+
+        <!-- 1. Dashboard View -->
+        <section class="page active" id="page-dashboard">
+          <div class="page-title-wrap">
+            <div>
+              <h1 class="page-title">Märkte Übersicht</h1>
+              <div class="page-subtitle">Echtzeit-Analysen über alle Prognosemärkte</div>
+            </div>
+            <div class="timeframe-toggle" style="display:flex; background:rgba(255,255,255,0.04); border-radius:8px; padding:3px; border:1px solid var(--border);">
+              <button class="tf-btn active" data-tf="24h" style="padding:6px 12px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:12px; font-weight:700; border-radius:6px; transition:var(--transition);">24H</button>
+              <button class="tf-btn" data-tf="7d" style="padding:6px 12px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:12px; font-weight:700; border-radius:6px; transition:var(--transition);">7D</button>
+              <button class="tf-btn" data-tf="30d" style="padding:6px 12px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:12px; font-weight:700; border-radius:6px; transition:var(--transition);">30D</button>
+            </div>
+          </div>
+
+          <!-- Global Metrics Grid -->
+          <div class="metrics-grid">
+            <div class="metric-card">
+              <div class="metric-label">Überwachte Trader</div>
+              <div class="metric-value" id="metricTraders">—</div>
+              <div class="metric-delta positive">aktiv erfasst</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-label">Aktive Trader (24h)</div>
+              <div class="metric-value" id="metricActive">—</div>
+              <div class="metric-delta positive">live on-chain</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-label">Erfasste Trades</div>
+              <div class="metric-value" id="metricTrades">—</div>
+              <div class="metric-delta">gesamt</div>
+            </div>
+            <div class="metric-card accent">
+              <div class="metric-label">Handelsvolumen (24h)</div>
+              <div class="metric-value" id="metricVolume">—</div>
+              <div class="metric-delta">USD</div>
+            </div>
+          </div>
+
+          <!-- Charts Row -->
+          <div class="charts-row">
+            <div class="card chart-card">
+              <div class="card-header"><h2>Verteilung nach Plattformen</h2></div>
+              <div class="chart-container"><canvas id="platformChart"></canvas></div>
+            </div>
+            <div class="card chart-card">
+              <div class="card-header"><h2>Trader Einstufungen</h2></div>
+              <div class="chart-container"><canvas id="tierChart"></canvas></div>
+            </div>
+          </div>
+
+          <!-- Top Traders and Recent Trades -->
+          <div class="glass-row">
+            <div class="card">
+              <div class="card-header"><h2>Top-Performer</h2></div>
+              <div class="table-wrap">
+                <table class="data-table" id="topTradersTable">
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>Trader</th>
+                      <th>Plattform</th>
+                      <th class="num-col">Score</th>
+                      <th class="num-col">Win Rate</th>
+                      <th class="num-col">PnL</th>
+                      <th>Trades (30d|All)</th>
+                    </tr>
+                  </thead>
+                  <tbody id="topTradersBody"></tbody>
+                </table>
+              </div>
+            </div>
+
+            <div class="card">
+              <div class="card-header"><h2>Letzte Aktivitäten</h2></div>
+              <div class="table-wrap">
+                <table class="data-table" id="recentTradesTable">
+                  <thead>
+                    <tr>
+                      <th>Zeit</th>
+                      <th>Trader</th>
+                      <th>Seite</th>
+                      <th class="num-col">Preis</th>
+                      <th class="num-col">Menge</th>
+                    </tr>
+                  </thead>
+                  <tbody id="recentTradesBody"></tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- 2. Traders List View -->
+        <section class="page" id="page-traders">
+          <div class="page-title-wrap">
+            <div>
+              <h1 class="page-title">Trader-Bibliothek</h1>
+              <div class="page-subtitle">Verwalte und analysiere überwachte Wallets</div>
+            </div>
+            <div>
+              <select id="tradersSort" class="platform-select" onchange="loadTraders()">
+                <option value="score">Sortieren: Combined Score</option>
+                <option value="winrate">Sortieren: Win Rate</option>
+                <option value="copyability">Sortieren: Copyability</option>
+                <option value="pnl">Sortieren: Gesamt-PnL</option>
+                <option value="name">Sortieren: Name</option>
+              </select>
+            </div>
+          </div>
+
+          <div style="display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:20px; align-items:stretch;">
+            <!-- Custom Filter Panel -->
+            <div class="filter-card">
+              <div class="filter-section">
+                <div class="filter-label">Filter nach Kennzahlen</div>
+                <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
+                  <div>
+                    <span style="font-size:12px; color:var(--text-muted); font-weight:600;">Mindest-Win-Rate:</span>
+                    <input type="number" id="filterWinrateMin" class="platform-select" style="width:100%; margin-top:6px;" placeholder="%" onchange="loadTraders()">
+                  </div>
+                  <div>
+                    <span style="font-size:12px; color:var(--text-muted); font-weight:600;">Mindest-Copyability:</span>
+                    <input type="number" id="filterCopyabilityMin" class="platform-select" style="width:100%; margin-top:6px;" placeholder="%" onchange="loadTraders()">
+                  </div>
+                </div>
+              </div>
+
+              <div class="filter-section" style="margin-bottom:0;">
+                <div class="filter-label">Auswahl nach Traits</div>
+                <div class="traits-grid">
+                  <select id="filterTrait" class="platform-select" onchange="loadTraders()" style="width:100%;">
+                    <option value="">Alle Traits anzeigen</option>
+                  </select>
+                  <label style="display:flex; align-items:center; gap:8px; font-weight:600; cursor:pointer; font-size:12px; margin-top:10px; color:var(--text-secondary);">
+                    <input type="checkbox" id="chk-highly-copyable" onchange="loadTraders()"> Nur sehr gut kopierbare (Copyability > 70%)
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <!-- Add Trader Panel (Control-Mode Guarded) -->
+            <div class="filter-card" id="control-add-trader-panel" style="display:flex; flex-direction:column; justify-content:center;">
+              <div class="filter-label">Trader hinzufügen</div>
+              <div style="display:flex; flex-direction:column; gap:12px;">
+                <select id="addPlatform" class="platform-select">
+                  <option value="Polymarket">Polymarket</option>
+                  <option value="Limitless">Limitless</option>
+                </select>
+                <input type="text" id="addWallet" placeholder="Wallet-Adresse / Handle" class="platform-select">
+                <button class="btn-premium" onclick="manualAddTrader()" style="justify-content:center; padding:12px;">
+                  Hinzufügen
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Traders Table Card -->
+          <div class="card">
+            <div class="table-wrap">
+              <table class="data-table">
+                <thead>
+                  <tr>
+                    <th style="cursor:pointer" onclick="setTraderSort('score')">#</th>
+                    <th style="cursor:pointer" onclick="setTraderSort('name')">Name ↕</th>
+                    <th style="cursor:pointer" onclick="setTraderSort('platform')">Plattform ↕</th>
+                    <th style="cursor:pointer" onclick="setTraderSort('score')" class="num-col">Score ↕</th>
+                    <th style="cursor:pointer" onclick="setTraderSort('quality')" class="num-col">Quality ↕</th>
+                    <th style="cursor:pointer" onclick="setTraderSort('copyability')" class="num-col">Copyability ↕</th>
+                    <th style="cursor:pointer" onclick="setTraderSort('winrate')" class="num-col">Win Rate ↕</th>
+                    <th style="cursor:pointer" onclick="setTraderSort('pnl')" class="num-col">PnL ↕</th>
+                    <th>Trades (30d|All) ↕</th>
+                    <th>Strategie</th>
+                  </tr>
+                </thead>
+                <tbody id="allTradersBody"></tbody>
+              </table>
+            </div>
+          </div>
+        </section>
+
+        <!-- 3. Watchlist View -->
+        <section class="page" id="page-watchlist">
+          <div class="page-title-wrap">
+            <div>
+              <h1 class="page-title">Beobachtungsliste</h1>
+              <div class="page-subtitle">Deine fokussierten Smart-Money Wallets</div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="table-wrap">
+              <table class="data-table" id="watchlistTable">
+                <thead>
+                  <tr>
+                    <th>Trader</th>
+                    <th>Plattform</th>
+                    <th class="num-col">Score</th>
+                    <th class="num-col">Win Rate</th>
+                    <th class="num-col">PnL</th>
+                    <th>Label</th>
+                    <th>Hinzugefügt</th>
+                  </tr>
+                </thead>
+                <tbody id="watchlistBody"></tbody>
+              </table>
+            </div>
+          </div>
+        </section>
+
+        <!-- 4. Markets List View -->
+        <section class="page" id="page-markets">
+          <div class="page-title-wrap">
+            <div>
+              <h1 class="page-title">Wettmärkte</h1>
+              <div class="page-subtitle">On-chain Indizes und Volumenaktivitäten</div>
+            </div>
+            <div style="display:flex; align-items:center; gap:10px;">
+              <select id="marketsCategory" class="platform-select" onchange="loadMarkets()">
+                <option value="All">Alle Kategorien</option>
+                <option value="Politics">Politik</option>
+                <option value="Crypto">Krypto</option>
+                <option value="Sports">Sport</option>
+                <option value="PopCulture">Popkultur</option>
+                <option value="Other">Andere</option>
+              </select>
+              <div class="search-box" style="width:240px;">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                <input type="text" id="marketsSearchInput" placeholder="Suchen..." autocomplete="off" onkeypress="if(event.key==='Enter') loadMarkets()">
+              </div>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="table-wrap">
+              <table class="data-table">
+                <thead>
+                  <tr>
+                    <th>Plattform</th>
+                    <th>Wettfrage</th>
+                    <th class="num-col">Volumen</th>
+                    <th class="num-col">Liquidität</th>
+                    <th>Enddatum</th>
+                    <th>Status</th>
+                  </tr>
+                </thead>
+                <tbody id="allMarketsBody"></tbody>
+              </table>
+            </div>
+          </div>
+        </section>
+
+        <!-- 5. Alerts View -->
+        <section class="page" id="page-alerts">
+          <div class="page-title-wrap">
+            <div>
+              <h1 class="page-title">Sicherheitsmeldungen &amp; Alerts</h1>
+              <div class="page-subtitle">Auffällige Walletbewegungen und Großorders</div>
+            </div>
+          </div>
+          <div class="card" id="alertsList"></div>
+        </section>
+
+        <!-- 6. Background Jobs View (Control-Mode Guarded) -->
+        <section class="page" id="page-jobs">
+          <div class="page-title-wrap">
+            <div>
+              <h1 class="page-title">System-Hintergrundprozesse</h1>
+              <div class="page-subtitle">Statusberichte der Daten-Ingestions-Worker</div>
+            </div>
+            <div>
+              <button class="btn-premium" onclick="queueBacklogAnalysis()">
+                Backlog analysieren (50)
+              </button>
+            </div>
+          </div>
+          <div class="card">
+            <div class="table-wrap">
+              <table class="data-table">
+                <thead>
+                  <tr>
+                    <th>Job ID</th>
+                    <th>Typ</th>
+                    <th>Status</th>
+                    <th>Trader</th>
+                    <th>Erstellt am</th>
+                    <th>Gestartet</th>
+                    <th>Abgeschlossen</th>
+                    <th>Meldung</th>
+                  </tr>
+                </thead>
+                <tbody id="jobsBody">
+                  <tr><td colspan="8" style="text-align:center;">Lade Jobs...</td></tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </section>
+
+        <!-- 7. Search Results View -->
+        <section class="page" id="page-search">
+          <div class="page-title-wrap">
+            <div>
+              <h1 class="page-title" id="search-title">Suchergebnisse</h1>
+            </div>
+          </div>
+          <div id="searchResults">
+            <div class="card" style="margin-bottom:20px;">
+              <div class="card-header"><h2>Gefundene Trader</h2></div>
+              <div class="table-wrap">
+                <table class="data-table">
+                  <thead>
+                    <tr>
+                      <th>#</th>
+                      <th>Name</th>
+                      <th>Plattform</th>
+                      <th class="num-col">Score</th>
+                      <th>Kategorie</th>
+                    </tr>
+                  </thead>
+                  <tbody id="searchTradersBody"></tbody>
+                </table>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-header"><h2>Gefundene Märkte</h2></div>
+              <div class="table-wrap">
+                <table class="data-table">
+                  <thead>
+                    <tr>
+                      <th>Plattform</th>
+                      <th>Wettfrage</th>
+                      <th class="num-col">Volumen</th>
+                      <th>Status</th>
+                    </tr>
+                  </thead>
+                  <tbody id="searchMarketsBody"></tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- 8. Trader Detail View -->
+        <section class="page" id="page-trader-detail">
+          <div class="detail-actions-bar">
+            <div class="detail-actions-bar-left">
+              <button class="btn-sm" onclick="navigateBack()">← Zurück</button>
+              <div class="actions-divider"></div>
+              <h1 class="page-title" id="td-name" style="margin-bottom:0;">Trader Profil</h1>
+            </div>
+            <div class="detail-actions-bar-right">
+              <button class="btn-sm" id="btn-toggle-watchlist">☆ Watchlist</button>
+              <button class="btn-sm" id="btn-open-platform" style="display:none;">🌐 Plattform öffnen</button>
+              
+              <!-- Control-Mode Guarded Buttons -->
+              <span id="control-trader-actions" style="display:inline-flex; gap:10px;">
+                <button class="btn-sm btn-premium" id="btn-sync-trader">⟱ Sync</button>
+                <button class="btn-sm" id="btn-deep-resync-trader" style="border-color:var(--danger); color:var(--danger);">Deep Resync</button>
+                <button class="btn-sm" id="btn-analyze-trader">⚙ Berechnen</button>
+              </span>
+            </div>
+          </div>
+
+          <div class="detail-grid">
+            <!-- Left Sidebar -->
+            <div class="detail-sidebar">
+              <div class="profile-header">
+                <div class="profile-avatar" id="td-avatar" style="background:var(--primary)">P</div>
+                <div class="profile-name" id="td-displayName">—</div>
+                <div class="profile-sub" id="td-platformId">—</div>
+              </div>
+
+              <div class="stat-group">
+                <div class="stat-label">Plattform</div>
+                <div class="stat-value" id="td-platform">—</div>
+              </div>
+              <div class="stat-group">
+                <div class="stat-label">Einstufung (Tier)</div>
+                <div class="stat-value" id="td-tier">—</div>
+              </div>
+              <div class="stat-group">
+                <div class="stat-label">Handelsstil</div>
+                <div class="stat-value" id="td-strategy">—</div>
+              </div>
+              <div class="stat-group" id="td-traits-container" style="display:none;">
+                <div class="stat-label">Identifizierte Verhaltensmerkmale</div>
+                <div id="td-traits" style="display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;"></div>
+              </div>
+            </div>
+
+            <!-- Right Main Area -->
+            <div class="detail-main">
+              <div class="tabs-nav">
+                <button class="btn-tab active" data-tab="td-tab-analytics" onclick="switchTraderTab('td-tab-analytics')">Analyse &amp; KI</button>
+                <button class="btn-tab" data-tab="td-tab-recent" onclick="switchTraderTab('td-tab-recent')">Handelshistorie</button>
+                <button class="btn-tab" data-tab="td-tab-positions" onclick="switchTraderTab('td-tab-positions')">Offene Positionen</button>
+              </div>
+
+              <!-- Content: Analytics -->
+              <div class="tab-content" id="td-tab-analytics" style="display:block;">
+                <div class="metrics-grid" style="grid-template-columns: repeat(3, 1fr);">
+                  <div class="metric-card"><div class="metric-label">Win Rate (All-Time)</div><div class="metric-value" id="td-winrate">—</div></div>
+                  <div class="metric-card"><div class="metric-label">Win Rate (30d)</div><div class="metric-value" id="td-winrate30d">—</div></div>
+                  <div class="metric-card"><div class="metric-label">Gesamt-P&amp;L</div><div class="metric-value" id="td-pnl">—</div></div>
+                  <div class="metric-card"><div class="metric-label">P&amp;L (30d)</div><div class="metric-value" id="td-pnl30d">—</div></div>
+                  <div class="metric-card"><div class="metric-label">Handelsanzahl</div><div class="metric-value" id="td-trades">—</div></div>
+                  <div class="metric-card"><div class="metric-label">Est. Bankroll</div><div class="metric-value" id="td-bankroll">—</div></div>
+                  <div class="metric-card"><div class="metric-label">Quality Edge</div><div class="metric-value" id="td-quality-score">—</div></div>
+                  <div class="metric-card"><div class="metric-label">Copyability</div><div class="metric-value" id="td-copyability-score">—</div></div>
+                  <div class="metric-card"><div class="metric-label">Med. Win/Loss</div><div class="metric-value" id="td-median-win-loss" style="font-size:15px; font-weight:700;">—</div></div>
+                  <div class="metric-card"><div class="metric-label">Profit Faktor</div><div class="metric-value" id="td-profit-factor">—</div></div>
+                  <div class="metric-card"><div class="metric-label">Erwartungswert / Trade</div><div class="metric-value" id="td-expectancy">—</div></div>
+                  <div class="metric-card accent">
+                    <div class="metric-label" style="color:rgba(255,255,255,0.7);">Kombinierter Score</div>
+                    <div class="metric-value" id="td-score">—</div>
+                  </div>
+                </div>
+
+                <!-- AI Summary Card (Control-Mode Guarded Button) -->
+                <div class="card">
+                  <div class="card-header">
+                    <h2>Künstliche Intelligenz Analyse</h2>
+                    <button class="btn-sm" id="btn-ai-analysis" style="background:var(--primary); color:white; border:none;">Deep AI-Audit</button>
+                  </div>
+                  <div id="td-ai-summary" style="margin: 16px; font-size:13px; line-height:1.6; white-space:pre-wrap; background:rgba(255,255,255,0.02); padding:16px; border-radius:12px; border:1px solid var(--border);">
+                    Führe ein KI-Audit aus, um detaillierte Strategieprofile dieses Händlers zu generieren.
+                  </div>
+                </div>
+
+                <!-- Category Performance -->
+                <div class="card">
+                  <div class="card-header"><h2>Erfolge nach Kategorien</h2></div>
+                  <div class="table-wrap">
+                    <table class="data-table">
+                      <thead>
+                        <tr>
+                          <th>Hauptkategorie</th>
+                          <th>Unterkategorie</th>
+                          <th class="num-col">Win Rate</th>
+                          <th class="num-col">PnL</th>
+                          <th class="num-col">Volumen</th>
+                          <th>Trades</th>
+                        </tr>
+                      </thead>
+                      <tbody id="td-categoryBody"></tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Content: Recent Trades -->
+              <div class="tab-content" id="td-tab-recent" style="display:none;">
+                <div class="card">
+                  <div class="card-header"><h2>Handelshistorie</h2></div>
+                  <div class="table-wrap">
+                    <table class="data-table">
+                      <thead>
+                        <tr>
+                          <th>Zeit</th>
+                          <th>Wettmarkt</th>
+                          <th>Seite</th>
+                          <th class="num-col">Ausführungspreis</th>
+                          <th class="num-col">Menge</th>
+                          <th class="num-col">Gesamtwert</th>
+                        </tr>
+                      </thead>
+                      <tbody id="td-tradesBody"></tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Content: Positions -->
+              <div class="tab-content" id="td-tab-positions" style="display:none;">
+                <div class="card">
+                  <div class="card-header"><h2>Aktive Positionen</h2></div>
+                  <div class="table-wrap">
+                    <table class="data-table">
+                      <thead>
+                        <tr>
+                          <th>Markt / Wette</th>
+                          <th class="num-col">Anteile</th>
+                          <th class="num-col">Kaufpreis Ø</th>
+                          <th class="num-col">Marktpreis</th>
+                          <th class="num-col">Realisierte P&amp;L</th>
+                          <th class="num-col">Unrealisierte P&amp;L</th>
+                        </tr>
+                      </thead>
+                      <tbody id="td-positionsBody">
+                        <tr><td colspan="6" style="text-align:center;">Lade Positionen...</td></tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- 9. Market Detail View -->
+        <section class="page" id="page-market-detail">
+          <div class="detail-actions-bar">
+            <div class="detail-actions-bar-left">
+              <button class="btn-sm" onclick="navigateBack()">← Zurück</button>
+              <div class="actions-divider"></div>
+              <h1 class="page-title" id="md-question" style="margin-bottom:0;">Wettfrage</h1>
+            </div>
+          </div>
+
+          <div class="detail-grid">
+            <!-- Sidebar Stats -->
+            <div class="detail-sidebar">
+              <div id="md-image" class="market-img-container"></div>
+              <div class="stat-group">
+                <div class="stat-label">Plattform</div>
+                <div class="stat-value" id="md-platform">—</div>
+              </div>
+              <div class="stat-group">
+                <div class="stat-label">Kategorie</div>
+                <div class="stat-value" id="md-category">—</div>
+              </div>
+              <div class="stat-group">
+                <div class="stat-label">Ablaufdatum</div>
+                <div class="stat-value" id="md-ends">—</div>
+              </div>
+            </div>
+
+            <!-- Main stats and elements -->
+            <div class="detail-main">
+              <div class="metrics-grid" style="grid-template-columns: repeat(3, 1fr);">
+                <div class="metric-card"><div class="metric-label">Volumen</div><div class="metric-value" id="md-volume">—</div></div>
+                <div class="metric-card"><div class="metric-label">Liquidität</div><div class="metric-value" id="md-liquidity">—</div></div>
+                <div class="metric-card"><div class="metric-label">Status</div><div class="metric-value" id="md-status">—</div></div>
+                <div class="metric-card accent"><div class="metric-label">Bot-Aktivität Score</div><div class="metric-value" id="md-bot-activity">—</div></div>
+                <div class="metric-card"><div class="metric-label">Eindeutige Trader</div><div class="metric-value" id="md-unique-traders">—</div></div>
+                <div class="metric-card"><div class="metric-label">Durchschnittsgröße</div><div class="metric-value" id="md-avg-trade-size">—</div></div>
+              </div>
+
+              <!-- Outcomes -->
+              <div class="card">
+                <div class="card-header"><h2>Wahrscheinlichkeiten &amp; Kurse</h2></div>
+                <div class="outcomes-list" id="md-outcomes"></div>
+              </div>
+
+              <!-- Market Trades -->
+              <div class="card">
+                <div class="card-header"><h2>Letzte Trades in diesem Markt</h2></div>
+                <div class="table-wrap">
+                  <table class="data-table">
+                    <thead>
+                      <tr>
+                        <th>Zeit</th>
+                        <th>Händler</th>
+                        <th>Seite</th>
+                        <th class="num-col">Preis</th>
+                        <th class="num-col">Menge</th>
+                        <th class="num-col">Gesamtwert</th>
+                      </tr>
+                    </thead>
+                    <tbody id="md-tradesBody"></tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+      </div>
     </main>
-    <script src="js/app.js?v=20260710"></script>
+
+  </div>
+
+  <script src="js/app.js?v=20260715"></script>
 </body>
 </html>
diff --git a/src/Predictalytics.Api/wwwroot/js/app.js b/src/Predictalytics.Api/wwwroot/js/app.js
index 0200a84..b1d184a 100644
--- a/src/Predictalytics.Api/wwwroot/js/app.js
+++ b/src/Predictalytics.Api/wwwroot/js/app.js
@@ -168,21 +168,125 @@ const fmt = {
 let platformChart, tierChart;
 
 function getChartColors() {
-    const isDark = html.getAttribute('data-theme') === 'dark';
     return {
-        text: isDark ? '#AAAAAA' : '#666666',
-        grid: isDark ? '#2A2C33' : '#E8E9EC',
-        bg: isDark ? '#16181D' : '#FFFFFF'
+        text: '#8B93A7',
+        grid: 'rgba(255,255,255,0.07)',
+        bg: 'rgba(255,255,255,0.045)'
     };
 }
 
-function updateChartColors() {
-    const c = getChartColors();
-    [platformChart, tierChart].forEach(chart => {
-        if (!chart) return;
-        if (chart.options.plugins?.legend) chart.options.plugins.legend.labels.color = c.text;
-        chart.update();
-    });
+function getAvatarBg(id) {
+    const gradients = [
+        'linear-gradient(135deg,#1652F0,#4c8dff)',
+        'linear-gradient(135deg,#12D48A,#0a8f5f)',
+        'linear-gradient(135deg,#7c5cff,#4c8dff)',
+        'linear-gradient(135deg,#ff9d4c,#ff6b8a)',
+        'linear-gradient(135deg,#F6465D,#ff6b8a)'
+    ];
+    return gradients[id % gradients.length];
+}
+
+function getTraitClass(trait) {
+    if (!trait) return 'tier-unknown';
+    const lower = trait.toLowerCase();
+    if (lower.includes('winrate') || lower.includes('wins') || lower.includes('farming') || lower.includes('insider')) return 'trait-winrate';
+    if (lower.includes('volume') || lower.includes('amounts') || lower.includes('sizes') || lower.includes('stake')) return 'trait-volume';
+    if (lower.includes('whale') || lower.includes('scalper') || lower.includes('martingale')) return 'trait-whales';
+    if (lower.includes('sentiment') || lower.includes('cadence') || lower.includes('24_7') || lower.includes('copyable') || lower.includes('wallet')) return 'trait-sentiment';
+    return 'tier-unknown';
+}
+
+const TraitMetadata = {
+    "sub_second_cadence": {
+        name: "Sub-Second Cadence",
+        desc: "Executes trades in sub-second intervals, highly indicative of algorithmic execution."
+    },
+    "always_on_24_7": {
+        name: "24/7 Activity",
+        desc: "Trades at all hours of the day and night with very short gaps, indicating bot operation."
+    },
+    "uniform_sizes": {
+        name: "Uniform Sizes",
+        desc: "Executes trades with identical position sizes, suggesting a systematic layout."
+    },
+    "round_amounts": {
+        name: "Round Amounts",
+        desc: "Executes trades with round amounts (e.g. 100, 500, 1000 USD), common for manual traders."
+    },
+    "uses_split_merge": {
+        name: "Split & Merge",
+        desc: "Splits large positions into smaller orders or merges multiple positions to optimize slippage."
+    },
+    "both_sides_same_market": {
+        name: "Two-Sided Market Maker",
+        desc: "Buys and sells in the same market, extracting spreads or resolving inventory."
+    },
+    "resolution_farming": {
+        name: "Resolution Farmer",
+        desc: "Buys options at high probabilities (e.g., >93%) to collect predictable small returns."
+    },
+    "longshot_buyer": {
+        name: "Longshot Buyer",
+        desc: "Buys options at low probabilities (e.g., <10%), seeking rare high-payoff events."
+    },
+    "scalper": {
+        name: "Scalper",
+        desc: "Holds positions for very short periods (typically <1 hour) to lock in quick profits."
+    },
+    "holds_to_resolution": {
+        name: "Holds to Resolution",
+        desc: "Keeps positions open until the market officially resolves, avoiding early exits."
+    },
+    "fresh_wallet": {
+        name: "Fresh Wallet",
+        desc: "Wallet was created recently (less than 30 days of active history)."
+    },
+    "stable_stake_fraction": {
+        name: "Stable Stake",
+        desc: "Risk per trade is a highly stable fraction of estimated total bankroll."
+    },
+    "possible_insider": {
+        name: "Possible Insider",
+        desc: "Consistently wins low-probability bets with very low volume, indicating asymmetric information."
+    },
+    "thin_margin_wins": {
+        name: "Thin Margin Winner",
+        desc: "Consistently resolves trades with small margins of win (low ROI)."
+    },
+    "high_payoff_wins": {
+        name: "High Payoff Winner",
+        desc: "Consistently resolves trades with high margins of win (high ROI)."
+    },
+    "sells_at_loss": {
+        name: "Sells at Loss",
+        desc: "Uses strict stop-loss rules, selling options at a loss when the market goes against them."
+    },
+    "days_active": {
+        name: "Days Active",
+        desc: "The number of days this wallet has been active on-chain."
+    },
+    "trades_last_30_days": {
+        name: "Trades Last 30d",
+        desc: "The total number of trades executed in the last 30 days."
+    },
+    "martingale_pattern": {
+        name: "Martingale Trader",
+        desc: "Increases bet size after losses to attempt to recoup losses, typical of high-risk strategies."
+    },
+    "not_copyable_hf": {
+        name: "Uncopyable (High Freq)",
+        desc: "Trades at frequencies too high to replicate manually or with standard copytrading setups."
+    }
+};
+
+function getTraitDisplayName(traitKey) {
+    const meta = TraitMetadata[traitKey];
+    return meta ? meta.name : traitKey.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+
+function getTraitDescription(traitKey) {
+    const meta = TraitMetadata[traitKey];
+    return meta ? meta.desc : 'No description available.';
 }
 
 // ─── Dashboard Load ───
@@ -224,19 +328,20 @@ async function loadDashboard() {
     // Recent Trades table
     const rBody = document.getElementById('recentTradesBody');
     rBody.innerHTML = data.recentTrades.map(t => `
-        <tr>
+        <tr onclick="viewTrader(${t.traderId})">
             <td>${fmt.time(t.executedAt)}</td>
-            <td onclick="viewTrader(${t.traderId})" style="cursor:pointer; color:var(--primary)">${t.traderName}</td>
-            <td onclick="${t.dbMarketId ? `viewMarket(${t.dbMarketId})` : `''`}" style="cursor:${t.dbMarketId ? 'pointer' : 'default'}" title="Market ID: ${t.marketId}">
-                ${t.marketName || (t.marketId.length > 20 ? t.marketId.substring(0,20)+'...' : t.marketId)}
-            </td>
+            <td><strong>${t.traderName}</strong></td>
             <td>${fmt.side(t.side)}</td>
-            <td>${Number(t.price).toFixed(2)}</td>
-            <td>${fmt.num(t.size)}</td>
-            <td>${fmt.usd(t.amount)}</td>
+            <td class="num-col">${Number(t.price).toFixed(2)}</td>
+            <td class="num-col">${fmt.num(t.size)}</td>
         </tr>
     `).join('');
 
+    const headerVol = document.getElementById('headerVolumeBadge');
+    if (headerVol) {
+        headerVol.textContent = `24H VOL: ${fmt.usd(data.volume24h)}`;
+    }
+
     // Platform Chart
     const cc = getChartColors();
     const pLabels = Object.keys(data.platformBreakdown.traderCounts);
@@ -245,25 +350,25 @@ async function loadDashboard() {
     if (platformChart) platformChart.destroy();
     platformChart = new Chart(document.getElementById('platformChart'), {
         type: 'doughnut',
-        data: { labels: pLabels.length ? pLabels : ['No Data'], datasets: [{ data: pData.length ? pData : [1],
-            backgroundColor: ['#FF2D55', '#5AC8FA', '#FF9500', '#34C759', '#AF52DE', '#FF6B8A', '#30D158'],
+        data: { labels: pLabels.length ? pLabels : ['Keine Daten'], datasets: [{ data: pData.length ? pData : [1],
+            backgroundColor: ['#1652F0', '#12D48A', '#7c5cff', '#ff9d4c', '#F6465D', '#5b9dff'],
             borderWidth: 0 }] },
         options: { responsive: true, maintainAspectRatio: false, cutout: '70%',
-            plugins: { legend: { position: 'bottom', labels: { color: cc.text, padding: 16, font: { family: "'Inter'", size: 12 } } } } }
+            plugins: { legend: { position: 'bottom', labels: { color: cc.text, padding: 16, font: { family: "'Manrope'", size: 12 } } } } }
     });
 
     // Tier chart
     const tierData = data.topTraders.reduce((acc, t) => { acc[t.tier] = (acc[t.tier] || 0) + 1; return acc; }, {});
     if (tierChart) tierChart.destroy();
-    const tLabels = Object.keys(tierData).length ? Object.keys(tierData) : ['No Data'];
+    const tLabels = Object.keys(tierData).length ? Object.keys(tierData) : ['Keine Daten'];
     const tData = Object.values(tierData).length ? Object.values(tierData) : [1];
     tierChart = new Chart(document.getElementById('tierChart'), {
         type: 'bar',
-        data: { labels: tLabels, datasets: [{ label: 'Traders', data: tData,
-            backgroundColor: '#FF2D55', borderRadius: 6, barThickness: 32 }] },
+        data: { labels: tLabels, datasets: [{ label: 'Trader', data: tData,
+            backgroundColor: '#1652F0', borderRadius: 6, barThickness: 32 }] },
         options: { responsive: true, maintainAspectRatio: false,
-            scales: { x: { grid: { display: false }, ticks: { color: cc.text, font: { family: "'Inter'" } } },
-                      y: { grid: { color: cc.grid }, ticks: { color: cc.text, font: { family: "'Inter'" } } } },
+            scales: { x: { grid: { display: false }, ticks: { color: cc.text, font: { family: "'Manrope'" } } },
+                       y: { grid: { color: cc.grid }, ticks: { color: cc.text, font: { family: "'Manrope'" } } } },
             plugins: { legend: { display: false } } }
     });
 }
@@ -328,26 +433,24 @@ async function loadTraders() {
     });
 
     tbody.innerHTML = data.map((t, i) => `
-        <tr>
+        <tr onclick="viewTrader(${t.id})">
             <td>${i + 1}</td>
-            <td><strong><a href="#" onclick="viewTrader(${t.id}); return false;" style="color:var(--primary);text-decoration:none;">${t.displayName}</a></strong>${t.isSuspectedBot ? ' 🤖' : ''}</td>
+            <td><strong>${t.displayName}</strong>${t.isSuspectedBot ? ' 🤖' : ''}</td>
             <td>${t.platform}</td>
-            <td><strong>${Number(t.combinedScore).toFixed(1)}</strong></td>
-            <td>${Number(t.copytradingQualityScore || 0).toFixed(1)}</td>
-            <td>${Number(t.copytradingCopyabilityScore || 0).toFixed(1)}</td>
-            <td>${fmt.pct(t.winRate)}</td>
-            <td>${fmt.pnl(t.totalPnl)}</td>
+            <td class="num-col"><strong>${Number(t.combinedScore).toFixed(1)}</strong></td>
+            <td class="num-col">${Number(t.copytradingQualityScore || 0).toFixed(1)}</td>
+            <td class="num-col">${Number(t.copytradingCopyabilityScore || 0).toFixed(1)}</td>
+            <td class="num-col">${fmt.pct(t.winRate)}</td>
+            <td class="num-col">${fmt.pnl(t.totalPnl)}</td>
             <td>${t.trades30d} | ${t.totalTrades}</td>
             <td>
-                ${t.strategy}
-                ${t.traits ? '<div style="display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;">' + t.traits.map(tr => `<span style="font-size:10px; padding:2px 6px; background:var(--bg-input); border-radius:10px;">${tr}</span>`).join('') + '</div>' : ''}
-            </td>
-            <td>
-                <div style="display:flex; gap:4px;">
-                    <button class="btn-sm" onclick="viewTrader(${t.id})">Details</button>
-                    <button class="btn-sm" onclick="queueHistorySync(${t.id})" style="background:var(--bg-input); border:1px solid var(--border); color:var(--text)">Sync</button>
-                    <button class="btn-sm" onclick="queueTraderAnalysis(${t.id})" style="background:var(--bg-input); border:1px solid var(--border); color:var(--text)">Analyze</button>
-                </div>
+                ${t.strategy || '—'}
+                ${t.traits ? '<div style="display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;">' + t.traits.map(tr => {
+                    const rawKey = tr.trait || tr;
+                    const name = getTraitDisplayName(rawKey);
+                    const desc = getTraitDescription(rawKey);
+                    return `<span class="tier-badge ${getTraitClass(rawKey)}" title="${desc}">${name}</span>`;
+                }).join('') + '</div>' : ''}
             </td>
         </tr>
     `).join('');
@@ -454,17 +557,30 @@ async function viewTrader(id) {
     // Reset tabs to default (Analytics)
     switchTraderTab('td-tab-analytics');
 
-    document.getElementById('td-name').textContent = t.displayName;
+    document.getElementById('td-name').textContent = `Trader-Profil: ${t.displayName}`;
+    document.getElementById('td-displayName').textContent = t.displayName;
     document.getElementById('td-platform').textContent = t.platform;
     document.getElementById('td-platformId').textContent = t.platformUserId;
     document.getElementById('td-tier').innerHTML = fmt.tier(t.tier);
     document.getElementById('td-strategy').textContent = t.strategy;
+
+    const avatarEl = document.getElementById('td-avatar');
+    if (avatarEl) {
+        avatarEl.textContent = t.displayName ? t.displayName[0].toUpperCase() : 'P';
+        avatarEl.style.background = getAvatarBg(id);
+    }
     
     const traitsContainer = document.getElementById('td-traits-container');
     const traitsEl = document.getElementById('td-traits');
     if (t.traits && t.traits.length > 0) {
         traitsContainer.style.display = 'block';
-        traitsEl.innerHTML = t.traits.map(tr => `<span title="Value: ${Number(tr.value).toFixed(4)}" style="font-size:11px; padding:2px 8px; background:var(--bg-input); border-radius:12px; border:1px solid var(--border);">${tr.trait}</span>`).join('');
+        traitsEl.innerHTML = t.traits.map(tr => {
+            const rawKey = tr.trait || tr;
+            const name = getTraitDisplayName(rawKey);
+            const desc = getTraitDescription(rawKey);
+            const scoreVal = tr.value !== undefined ? ` (Value: ${Number(tr.value).toFixed(4)})` : '';
+            return `<span class="tier-badge ${getTraitClass(rawKey)}" title="${desc}${scoreVal}">${name}</span>`;
+        }).join('');
     } else {
         traitsContainer.style.display = 'none';
         traitsEl.innerHTML = '';
@@ -487,7 +603,7 @@ async function viewTrader(id) {
     document.getElementById('td-median-win-loss').innerHTML = `<span class="side-buy">+${Number(medianWin).toFixed(1)}%</span> / <span class="side-sell">${Number(medianLoss).toFixed(1)}%</span>`;
     document.getElementById('td-profit-factor').textContent = t.profitFactor ? Number(t.profitFactor).toFixed(2) : '—';
     document.getElementById('td-expectancy').innerHTML = expectancy > 0 ? `<span class="side-buy">+${expectancy.toFixed(1)}%</span>` : `<span class="side-sell">${expectancy.toFixed(1)}%</span>`;
-    document.getElementById('td-ai-summary').textContent = t.aiStrategySummary || 'Not analyzed yet.';
+    document.getElementById('td-ai-summary').textContent = t.aiStrategySummary || 'Bisher keine KI-Strategieanalyse durchgeführt.';
     
     const syncBtn = document.getElementById('btn-sync-trader');
     if (syncBtn) {
@@ -497,7 +613,7 @@ async function viewTrader(id) {
     const deepSyncBtn = document.getElementById('btn-deep-resync-trader');
     if (deepSyncBtn) {
         deepSyncBtn.onclick = () => {
-            if (confirm("Are you sure? This will delete all compacted trades and reset positions, then fetch all historical trades via pagination.")) {
+            if (confirm("Bist du sicher? Dies löscht alle komprimierten Trades, setzt die Positionen zurück und lädt den gesamten Verlauf neu.")) {
                 queueDeepResync(id);
             }
         };
@@ -509,7 +625,12 @@ async function viewTrader(id) {
     }
 
     const aiBtn = document.getElementById('btn-ai-analysis');
-    aiBtn.onclick = () => triggerAiAnalysis(id, true);
+    if (window.capabilities && !window.capabilities.canControl) {
+        aiBtn.style.display = 'none';
+    } else {
+        aiBtn.style.display = 'inline-block';
+        aiBtn.onclick = () => triggerAiAnalysis(id, true);
+    }
 
     const wlBtn = document.getElementById('btn-toggle-watchlist');
     wlBtn.textContent = t.isOnWatchlist ? 'Watchlist (Remove)' : 'Watchlist (Add)';
@@ -750,6 +871,27 @@ async function queueBacklogAnalysis() {
 
 // Initialize Dashboard
 document.addEventListener('DOMContentLoaded', async () => {
+    // Load capabilities first
+    try {
+        const caps = await api('/api/capabilities');
+        if (caps) {
+            window.capabilities = caps;
+            if (!caps.canControl) {
+                // Hide control-mode guarded elements
+                const jobsNav = document.getElementById('nav-jobs-container');
+                if (jobsNav) jobsNav.style.display = 'none';
+                
+                const addTraderPanel = document.getElementById('control-add-trader-panel');
+                if (addTraderPanel) addTraderPanel.style.display = 'none';
+
+                const traderActions = document.getElementById('control-trader-actions');
+                if (traderActions) traderActions.style.display = 'none';
+            }
+        }
+    } catch (e) {
+        console.error('Failed to load capabilities', e);
+    }
+
     // Load traits for filter
     try {
         const traits = await api('/api/traders/traits');
@@ -759,7 +901,7 @@ document.addEventListener('DOMContentLoaded', async () => {
                 traits.forEach(t => {
                     const opt = document.createElement('option');
                     opt.value = t;
-                    opt.textContent = t;
+                    opt.textContent = getTraitDisplayName(t);
                     filterTrait.appendChild(opt);
                 });
             }
diff --git a/src/Predictalytics.Api/wwwroot/landing.html b/src/Predictalytics.Api/wwwroot/landing.html
new file mode 100644
index 0000000..99a9f44
--- /dev/null
+++ b/src/Predictalytics.Api/wwwroot/landing.html
@@ -0,0 +1,302 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Predictalytics — See every trader and market before the crowd does</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body { margin: 0; background: #0a0d14; font-family: 'Manrope', system-ui, sans-serif; }
+    * { box-sizing: border-box; }
+    a { color: #5b9dff; text-decoration: none; transition: all 0.2s; }
+    a:hover { color: #8ab8ff; }
+    ::-webkit-scrollbar { width: 8px; }
+    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
+    
+    /* Animations */
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .fade-in { animation: fadeIn 0.4s ease-out; }
+  </style>
+</head>
+<body>
+
+<div style="position:relative; min-height:100vh; width:100%; background: radial-gradient(1100px 700px at 15% -10%, rgba(22,82,240,0.28), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(18,212,138,0.10), transparent 55%), #0a0d14; color:#EDEFF5; overflow-x:hidden;">
+
+  <!-- NAV -->
+  <header style="position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px 48px; backdrop-filter:blur(20px); background:rgba(10,13,20,0.6); border-bottom:1px solid rgba(255,255,255,0.07);">
+    <div style="display:flex; align-items:center; gap:10px;">
+      <div style="width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 0 20px rgba(22,82,240,0.6);"></div>
+      <div style="font-weight:800; font-size:17px; letter-spacing:-0.02em;">Predictalytics<span style="color:#5b9dff;">.</span></div>
+    </div>
+    <nav style="display:flex; align-items:center; gap:32px;">
+      <a href="#features" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Features</a>
+      <a href="#pricing" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Preise</a>
+      <a href="#faq" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">FAQ</a>
+      <a href="./docs.html" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">API Docs</a>
+    </nav>
+    <div style="display:flex; align-items:center; gap:10px;">
+      <div onclick="openAuth('login')" style="cursor:pointer; padding:9px 18px; border-radius:10px; font-size:13.5px; font-weight:700; color:#EDEFF5;">Login</div>
+      <div onclick="openAuth('register')" style="cursor:pointer; padding:9px 20px; border-radius:10px; font-size:13.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 4px 20px rgba(22,82,240,0.4);">Registrieren</div>
+    </div>
+  </header>
+
+  <!-- HERO -->
+  <section style="padding:100px 48px 80px; max-width:1080px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px;">
+    <div style="padding:6px 14px; border-radius:20px; background:rgba(22,82,240,0.12); border:1px solid rgba(22,82,240,0.3); font-size:12.5px; font-weight:700; color:#5b9dff;">Echtzeit-Onchain-Analysen · Polymarket &amp; Co.</div>
+    <h1 style="margin:0; font-size:52px; font-weight:800; letter-spacing:-0.03em; line-height:1.08; max-width:760px;">Erkenne jeden Trader und Markt vor der Masse</h1>
+    <p style="margin:0; font-size:17px; color:#8B93A7; max-width:600px; line-height:1.6;">Detaillierte Trader-Profilierung, Wallet-Clustering und Echtzeit-Marktanalysen für professionelle Akteure in Prognosemärkten.</p>
+    <div style="display:flex; gap:14px; margin-top:8px;">
+      <a href="./index.html" style="cursor:pointer; padding:14px 26px; border-radius:12px; font-size:14.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 30px rgba(22,82,240,0.4); color:white;">Dashboard starten</a>
+      <a href="#features" style="padding:14px 26px; border-radius:12px; font-size:14.5px; font-weight:700; color:#EDEFF5; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.04); white-space:nowrap;">Features ansehen</a>
+    </div>
+
+    <!-- Product Preview Mock -->
+    <div style="margin-top:40px; width:100%; border-radius:20px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(24px); box-shadow:0 20px 60px rgba(0,0,0,0.4); padding:20px; display:grid; grid-template-columns:1.4fr 1fr; gap:14px; text-align:left;">
+      <div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:18px;">
+        <div style="font-size:12px; font-weight:700; color:#8B93A7; margin-bottom:10px;">Kursverlauf YES-Token</div>
+        <svg viewBox="0 0 500 140" style="width:100%; height:140px;" id="heroChartSvg"></svg>
+      </div>
+      <div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:18px; display:flex; flex-direction:column; gap:10px;">
+        <div style="font-size:12px; font-weight:700; color:#8B93A7;">Top-Performer (24h)</div>
+        <div id="heroTradersContainer" style="display:flex; flex-direction:column; gap:12px;"></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES -->
+  <section id="features" style="padding:80px 48px; max-width:1200px; margin:0 auto;">
+    <div style="text-align:center; margin-bottom:48px;">
+      <div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">FEATURES</div>
+      <h2 style="margin:0 0 12px; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Alles was du brauchst, um den Markt zu lesen</h2>
+      <p style="margin:0; color:#8B93A7; font-size:15px;">Konstruiert für Trader, die echtes Signal statt Rauschen suchen.</p>
+    </div>
+    <div id="featuresContainer" style="display:grid; grid-template-columns:repeat(3,1fr); gap:18px;"></div>
+  </section>
+
+  <!-- PRICING -->
+  <section id="pricing" style="padding:80px 48px; max-width:1160px; margin:0 auto;">
+    <div style="text-align:center; margin-bottom:48px;">
+      <div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">PREISE</div>
+      <h2 style="margin:0 0 12px; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Flexible Pläne für jede Phase</h2>
+      <p style="margin:0; color:#8B93A7; font-size:15px;">Skaliere unkompliziert hoch, wenn deine Aktivität wächst.</p>
+    </div>
+    <div id="pricingContainer" style="display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;"></div>
+  </section>
+
+  <!-- FAQ -->
+  <section id="faq" style="padding:80px 48px 100px; max-width:820px; margin:0 auto;">
+    <div style="text-align:center; margin-bottom:44px;">
+      <div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">FAQ</div>
+      <h2 style="margin:0; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Häufige Fragen</h2>
+    </div>
+    <div id="faqContainer" style="display:flex; flex-direction:column; gap:10px;"></div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer style="padding:32px 48px; border-top:1px solid rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:space-between; color:#5B6377; font-size:12.5px;">
+    <div>© 2026 Predictalytics. Alle Rechte vorbehalten.</div>
+    <div style="display:flex; gap:20px;">
+      <a href="./docs.html" style="color:#5B6377;">API Docs</a>
+      <a href="#faq" style="color:#5B6377;">FAQ</a>
+      <a href="#pricing" style="color:#5B6377;">Preise</a>
+    </div>
+  </footer>
+
+  <!-- AUTH MODAL -->
+  <div id="authModal" onclick="closeAuth()" style="display:none; position:fixed; inset:0; z-index:100; background:rgba(6,8,13,0.7); backdrop-filter:blur(6px); align-items:center; justify-content:center;">
+    <div onclick="event.stopPropagation()" style="width:400px; max-width:92vw; border-radius:20px; background:rgba(16,20,29,0.9); border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(30px); box-shadow:0 30px 80px rgba(0,0,0,0.5); padding:32px;">
+      <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
+        <div style="font-size:19px; font-weight:800;" id="authTitle">Log in</div>
+        <div onclick="closeAuth()" style="cursor:pointer; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:14px; color:#8B93A7;">✕</div>
+      </div>
+      <div style="display:flex; flex-direction:column; gap:14px;">
+        <div id="authNameGroup" style="display:none; flex-direction:column; gap:6px;">
+          <label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Name</label>
+          <input placeholder="Jane Trader" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
+        </div>
+        <div style="display:flex; flex-direction:column; gap:6px;">
+          <label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">E-Mail</label>
+          <input placeholder="you@domain.com" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
+        </div>
+        <div style="display:flex; flex-direction:column; gap:6px;">
+          <label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Passwort</label>
+          <input type="password" placeholder="••••••••" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
+        </div>
+        <a href="./index.html" style="margin-top:6px; padding:13px; border-radius:11px; text-align:center; font-size:14px; font-weight:700; cursor:pointer; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 24px rgba(22,82,240,0.4); color:white;" id="authSubmitLabel">Anmelden</a>
+        <div style="text-align:center; font-size:12.5px; color:#8B93A7; margin-top:4px;">
+          <span id="authSwitchPrompt">Noch kein Konto?</span> <span onclick="switchAuthMode()" style="color:#5b9dff; font-weight:700; cursor:pointer;" id="authSwitchAction">Registrieren</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<script>
+  let currentAuthMode = 'login';
+
+  function openAuth(mode) {
+    currentAuthMode = mode;
+    const modal = document.getElementById('authModal');
+    modal.style.display = 'flex';
+    modal.classList.add('fade-in');
+    updateAuthUI();
+  }
+
+  function closeAuth() {
+    document.getElementById('authModal').style.display = 'none';
+  }
+
+  function switchAuthMode() {
+    currentAuthMode = currentAuthMode === 'login' ? 'register' : 'login';
+    updateAuthUI();
+  }
+
+  function updateAuthUI() {
+    const isReg = currentAuthMode === 'register';
+    document.getElementById('authTitle').textContent = isReg ? 'Konto erstellen' : 'Anmelden';
+    document.getElementById('authSubmitLabel').textContent = isReg ? 'Konto erstellen' : 'Anmelden';
+    document.getElementById('authNameGroup').style.display = isReg ? 'flex' : 'none';
+    document.getElementById('authSwitchPrompt').textContent = isReg ? 'Bereits registriert?' : 'Noch kein Konto?';
+    document.getElementById('authSwitchAction').textContent = isReg ? 'Anmelden' : 'Registrieren';
+  }
+
+  // --- Dynamic calculations and rendering ---
+  function buildPath(series, w, h, pad) {
+    const min = Math.min(...series);
+    const max = Math.max(...series);
+    const range = max - min || 1;
+    const innerW = w - pad * 2;
+    const innerH = h - pad * 2;
+    const pts = series.map((v, i) => {
+      const x = pad + (i / (series.length - 1)) * innerW;
+      const y = pad + innerH - ((v - min) / range) * innerH;
+      return [x, y];
+    });
+    let line = "M" + pts[0][0].toFixed(1) + "," + pts[0][1].toFixed(1);
+    for (let i = 1; i < pts.length; i++) line += " L" + pts[i][0].toFixed(1) + "," + pts[i][1].toFixed(1);
+    const area = line + ` L${pts[pts.length - 1][0].toFixed(1)},${h - pad} L${pts[0][0].toFixed(1)},${h - pad} Z`;
+    return { line, area };
+  }
+
+  // Render SVG Hero Chart
+  const heroSeries = [40, 44, 41, 48, 52, 50, 58, 55, 62, 66, 63, 70, 68, 74, 71.4];
+  const { line, area } = buildPath(heroSeries, 500, 140, 8);
+  document.getElementById('heroChartSvg').innerHTML = `
+    <defs>
+      <linearGradient id="hfill" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="#12D48A" stop-opacity="0.35"/>
+        <stop offset="100%" stop-color="#12D48A" stop-opacity="0"/>
+      </linearGradient>
+    </defs>
+    <path d="${area}" fill="url(#hfill)" stroke="none"></path>
+    <path d="${line}" fill="none" stroke="#12D48A" stroke-width="2.5"></path>
+  `;
+
+  // Render Hero Traders
+  const heroTraders = [
+    { handle: "quant_owl", pnl: "+$216.420", bg: "linear-gradient(135deg,#1652F0,#4c8dff)" },
+    { handle: "arb_meridian", pnl: "+$454.100", bg: "linear-gradient(135deg,#12D48A,#0a8f5f)" },
+    { handle: "resolvr", pnl: "+$105.800", bg: "linear-gradient(135deg,#7c5cff,#4c8dff)" },
+  ];
+  document.getElementById('heroTradersContainer').innerHTML = heroTraders.map(t => `
+    <div style="display:flex; align-items:center; gap:10px;">
+      <div style="width:24px; height:24px; border-radius:7px; background:${t.bg};"></div>
+      <div style="font-size:12.5px; font-weight:700; flex:1;">${t.handle}</div>
+      <div style="font-size:12px; font-family:'Roboto Mono'; font-weight:700; color:#12D48A;">${t.pnl}</div>
+    </div>
+  `).join('');
+
+  // Render Features
+  const features = [
+    { title: "Trader-Verfolgung", desc: "Verfolge das vollständige Portfolio, die P&L-Kurve und das Verhalten jedes Wallets plattformübergreifend.", iconBg: "rgba(22,82,240,0.14)", dotColor: "#5b9dff" },
+    { title: "Wallet-Clustering", desc: "Erkenne verknüpfte Wallets und koordinierte Accounts hinter einer gemeinsamen Handelsstrategie.", iconBg: "rgba(124,92,255,0.14)", dotColor: "#7c5cff" },
+    { title: "Markttiefe & Analysen", desc: "Orderbuch-Verläufe, Liquiditätsmetriken und Halterkonzentrationen für jeden aktiven Markt.", iconBg: "rgba(18,212,138,0.14)", dotColor: "#12D48A" },
+    { title: "Echtzeit-Alerts", desc: "Erhalte Benachrichtigungen, sobald ein beobachteter Trader eine neue Position öffnet oder der Markt dreht.", iconBg: "rgba(255,157,76,0.14)", dotColor: "#ff9d4c" },
+    { title: "Trader-Tags & Traits", desc: "Automatische Charakterisierung wie Arbitrageur, bot-ähnlich oder Market-Maker direkt auf einen Blick.", iconBg: "rgba(246,70,93,0.14)", dotColor: "#F6465D" },
+    { title: "Programmatischer API-Zugriff", desc: "Integriere alle gesammelten Rohdaten und Auswertungen direkt in deine eigenen Skripte.", iconBg: "rgba(22,82,240,0.14)", dotColor: "#5b9dff" },
+  ];
+  document.getElementById('featuresContainer').innerHTML = features.map(f => `
+    <div style="padding:26px; border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px);">
+      <div style="width:42px; height:42px; border-radius:12px; background:${f.iconBg}; margin-bottom:16px; display:flex; align-items:center; justify-content:center;">
+        <div style="width:16px; height:16px; border-radius:5px; background:${f.dotColor};"></div>
+      </div>
+      <div style="font-size:16px; font-weight:700; margin-bottom:8px;">${f.title}</div>
+      <div style="font-size:13.5px; color:#8B93A7; line-height:1.6;">${f.desc}</div>
+    </div>
+  `).join('');
+
+  // Render Pricing
+  const plans = [
+    { name: "Free", price: "$0", period: "/ Monat", featured: false, border: "rgba(255,255,255,0.08)", bg: "rgba(255,255,255,0.04)", btnBg: "rgba(255,255,255,0.06)", btnBorder: "rgba(255,255,255,0.12)", btnText: "#EDEFF5",
+      items: ["20 API-Calls / Tag", "Eingeschränkter Web-Zugang", "Grundlegende Marktübersicht", "Community-Support"] },
+    { name: "Pro", price: "$99", period: "/ Monat", featured: true, border: "rgba(22,82,240,0.35)", bg: "rgba(22,82,240,0.08)", btnBg: "linear-gradient(135deg,#1652F0,#4c8dff)", btnBorder: "none", btnText: "white",
+      items: ["2.000 API-Calls / Tag", "Erweiterte KI-Trader-Analysen", "Direkter MCP-Zugriff für deinen KI-Agenten", "Priority-Support"] },
+    { name: "Enterprise", price: "Kontakt", period: "", featured: false, border: "rgba(255,255,255,0.08)", bg: "rgba(255,255,255,0.04)", btnBg: "rgba(255,255,255,0.06)", btnBorder: "rgba(255,255,255,0.12)", btnText: "#EDEFF5",
+      items: ["10.000+ API-Calls / Tag", "Eigene Prompts für KI-Auswertungen", "Individuelle Quotas", "24/7 Enterprise-Support"] },
+  ];
+  document.getElementById('pricingContainer').innerHTML = plans.map(p => `
+    <div style="position:relative; padding:30px 26px; border-radius:20px; background:${p.bg}; border:1px solid ${p.border}; backdrop-filter:blur(24px); display:flex; flex-direction:column; ${p.featured ? 'box-shadow:0 20px 50px rgba(22,82,240,0.2);' : ''}">
+      ${p.featured ? '<div style="position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:5px 14px; border-radius:20px; background:linear-gradient(135deg,#1652F0,#4c8dff); font-size:11px; font-weight:800; letter-spacing:0.04em;">AM BELIEBTESTEN</div>' : ''}
+      <div style="font-size:15px; font-weight:700; margin-bottom:6px;">${p.name}</div>
+      <div style="display:flex; align-items:baseline; gap:4px; margin-bottom:18px;">
+        <div style="font-size:36px; font-weight:800; font-family:'Roboto Mono'; letter-spacing:-0.02em;">${p.price}</div>
+        <div style="font-size:13px; color:#8B93A7;">${p.period}</div>
+      </div>
+      <div style="display:flex; flex-direction:column; gap:10px; margin-bottom:22px;">
+        ${p.items.map(item => `
+          <div style="display:flex; align-items:center; gap:9px; font-size:13.5px; color:#C7CCDA;">
+            <div style="width:6px; height:6px; border-radius:50%; background:#12D48A; flex:none;"></div>
+            <span>${item}</span>
+          </div>
+        `).join('')}
+      </div>
+      <div onclick="openAuth('register')" style="cursor:pointer; padding:12px; border-radius:11px; text-align:center; font-size:13.5px; font-weight:700; margin-top:auto; background:${p.btnBg}; border:1px solid ${p.btnBorder}; color:${p.btnText}; ${p.featured ? 'box-shadow:0 8px 24px rgba(22,82,240,0.4);' : ''}">${p.name === 'Enterprise' ? 'Vertrieb kontaktieren' : 'Auswählen'}</div>
+    </div>
+  `).join('');
+
+  // Render FAQs
+  const faqs = [
+    { q: "Woher stammen die gezeigten Daten?", a: "Wir überwachen Onchain-Transaktionen direkt auf der Blockchain und über Subgraphs von Polymarket und anderen Prognosemärkten in Echtzeit, kombiniert mit Auflösungs-Metadaten." },
+    { q: "Wie stuft ihr Trader als Bots oder Arbitrageure ein?", a: "Unser System wertet Verhaltensmuster wie Transaktionstaktung, Order-Größe und marktübergreifende Ausführungen aus, um Wallets automatisch mit Traits wie 'Bot' oder 'Arbitrageur' zu taggen." },
+    { q: "Kann ich beliebige Wallets hinzufügen?", a: "Ja. Gib einfach ein Wallet im Dashboard ein, um die historische P&L, alle Trades und Verknüpfungen direkt analysieren zu lassen." },
+    { q: "Was bietet der API-Zugriff?", a: "Voller Lesezugriff auf aggregierte Bestenlisten, Detailstatistiken und Orderbuchverläufe, damit du diese Daten in deine eigenen Trading-Modelle einbetten kannst." },
+  ];
+  document.getElementById('faqContainer').innerHTML = faqs.map((f, i) => `
+    <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); overflow:hidden;">
+      <div onclick="toggleFaq(${i})" style="cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;">
+        <div style="font-size:14.5px; font-weight:700;">${f.q}</div>
+        <div id="faqIcon-${i}" style="flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#5b9dff; transition:transform 0.2s;">+</div>
+      </div>
+      <div id="faqAnswer-${i}" style="display:none; padding:0 22px 18px; font-size:13.5px; color:#8B93A7; line-height:1.7;">${f.a}</div>
+    </div>
+  `).join('');
+
+  let activeFaq = -1;
+  window.toggleFaq = function(i) {
+    const ans = document.getElementById(`faqAnswer-${i}`);
+    const icon = document.getElementById(`faqIcon-${i}`);
+    
+    if (activeFaq === i) {
+      ans.style.display = 'none';
+      icon.style.transform = 'rotate(0deg)';
+      activeFaq = -1;
+    } else {
+      // Close previous
+      if (activeFaq !== -1) {
+        document.getElementById(`faqAnswer-${activeFaq}`).style.display = 'none';
+        document.getElementById(`faqIcon-${activeFaq}`).style.transform = 'rotate(0deg)';
+      }
+      ans.style.display = 'block';
+      icon.style.transform = 'rotate(45deg)';
+      activeFaq = i;
+    }
+  };
+</script>
+
+</body>
+</html>
diff --git a/src/Predictalytics.Application.Tests/Services/BackendRedesignTests.cs b/src/Predictalytics.Application.Tests/Services/BackendRedesignTests.cs
new file mode 100644
index 0000000..e16e1b6
--- /dev/null
+++ b/src/Predictalytics.Application.Tests/Services/BackendRedesignTests.cs
@@ -0,0 +1,142 @@
+using System;
+using System.Collections.Generic;
+using System.Net;
+using System.Net.Http;
+using System.Net.Http.Json;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.Caching.Memory;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging.Abstractions;
+using Predictalytics.Application.Interfaces;
+using Predictalytics.Domain.Entities;
+using Predictalytics.Domain.Enums;
+using Predictalytics.Infrastructure.Data;
+using Predictalytics.Infrastructure.Providers.Polymarket;
+using Predictalytics.Infrastructure.Services;
+using Xunit;
+
+namespace Predictalytics.Application.Tests.Services;
+
+public class BackendRedesignTests
+{
+    [Fact]
+    public async Task AppDbContext_ShouldThrow_WhenReadOnlyDatabaseTrue()
+    {
+        // Arrange
+        var inMemorySettings = new Dictionary<string, string?> {
+            {"ApiSettings:ReadOnlyDatabase", "true"}
+        };
+        var configuration = new ConfigurationBuilder()
+            .AddInMemoryCollection(inMemorySettings)
+            .Build();
+
+        var options = new DbContextOptionsBuilder<AppDbContext>()
+            .UseInMemoryDatabase(databaseName: "ReadOnlyTestDb")
+            .Options;
+
+        using var db = new AppDbContext(options, configuration);
+
+        db.Traders.Add(new Trader
+        {
+            Id = 1,
+            Platform = PlatformType.Polymarket,
+            PlatformUserId = "0x123",
+            DisplayName = "Test"
+        });
+
+        // Act & Assert
+        await Assert.ThrowsAsync<InvalidOperationException>(async () => await db.SaveChangesAsync());
+    }
+
+    [Fact]
+    public async Task PolymarketApiClient_ShouldUseCache_ForGetMarketAsync()
+    {
+        // Arrange
+        var services = new ServiceCollection();
+        services.AddMemoryCache();
+        var serviceProvider = services.BuildServiceProvider();
+        var cache = serviceProvider.GetRequiredService<IMemoryCache>();
+
+        // Set up mock HTTP handler returning a list containing a GammaMarketResponse
+        var mockResponse = new List<GammaMarketResponse>
+        {
+            new() { ConditionId = "cond-1", Question = "Will it rain?" }
+        };
+
+        var handlerCallCount = 0;
+        var mockHandler = new MockHttpMessageHandler(req =>
+        {
+            handlerCallCount++;
+            var response = new HttpResponseMessage(HttpStatusCode.OK);
+            response.Content = JsonContent.Create(mockResponse);
+            return response;
+        });
+
+        var httpClient = new HttpClient(mockHandler);
+        var httpFactoryMock = new MockHttpClientFactory(httpClient);
+
+        var rateLimiterMock = new MockRateLimiter();
+        var egressPoolMock = new MockEgressPoolService();
+
+        var client = new PolymarketApiClient(
+            httpFactoryMock,
+            rateLimiterMock,
+            egressPoolMock,
+            cache,
+            NullLogger<PolymarketApiClient>.Instance
+        );
+
+        // Act
+        // 1. First fetch: should trigger HTTP handler
+        var m1 = await client.GetMarketAsync("cond-1");
+
+        // 2. Second fetch: should serve from cache
+        var m2 = await client.GetMarketAsync("cond-1");
+
+        // Assert
+        Assert.NotNull(m1);
+        Assert.Equal("cond-1", m1.ConditionId);
+        Assert.Equal("cond-1", m2?.ConditionId);
+        Assert.Equal(1, handlerCallCount); // Only 1 HTTP call made
+    }
+
+    private class MockHttpClientFactory : IHttpClientFactory
+    {
+        private readonly HttpClient _client;
+        public MockHttpClientFactory(HttpClient client) => _client = client;
+        public HttpClient CreateClient(string name) => _client;
+    }
+
+    private class MockRateLimiter : IRateLimiter
+    {
+        public Task WaitAsync(PlatformType platform, CancellationToken ct = default, string endpointGroup = "Default", string? channelId = null) => Task.CompletedTask;
+        public bool CanMakeRequest(PlatformType platform, string endpointGroup = "Default", string? channelId = null) => true;
+        public void ReportRateLimitExceeded(PlatformType platform, TimeSpan? retryAfter = null, string endpointGroup = "Default", string? channelId = null) { }
+    }
+
+    private class MockEgressPoolService : IEgressPoolService
+    {
+        public string? GetNextChannelId() => null;
+        public HttpMessageInvoker? GetInvoker(string channelId) => null;
+        public void ReportFailure(string channelId, Exception exception) { }
+        public void ReportSuccess(string channelId) { }
+    }
+
+    private class MockHttpMessageHandler : HttpMessageHandler
+    {
+        private readonly Func<HttpRequestMessage, HttpResponseMessage> _sender;
+
+        public MockHttpMessageHandler(Func<HttpRequestMessage, HttpResponseMessage> sender)
+        {
+            _sender = sender;
+        }
+
+        protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
+        {
+            return Task.FromResult(_sender(request));
+        }
+    }
+}
diff --git a/src/Predictalytics.Application.Tests/Services/EgressPoolTests.cs b/src/Predictalytics.Application.Tests/Services/EgressPoolTests.cs
new file mode 100644
index 0000000..d1c7964
--- /dev/null
+++ b/src/Predictalytics.Application.Tests/Services/EgressPoolTests.cs
@@ -0,0 +1,109 @@
+using System;
+using System.Collections.Generic;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.Extensions.Logging.Abstractions;
+using Microsoft.Extensions.Options;
+using Predictalytics.Application.Interfaces;
+using Predictalytics.Application.Services;
+using Predictalytics.Domain.Enums;
+using Predictalytics.Infrastructure.Configuration;
+using Predictalytics.Infrastructure.Services;
+using Xunit;
+
+namespace Predictalytics.Application.Tests.Services;
+
+public class EgressPoolTests
+{
+    [Fact]
+    public void EgressPoolService_ShouldRoundRobin()
+    {
+        // Arrange
+        var options = Options.Create(new EgressOptions
+        {
+            Channels = new List<EgressChannelOptions>
+            {
+                new() { Id = "ch-1", Type = EgressChannelType.Proxy, Value = "http://127.0.0.1:8080" },
+                new() { Id = "ch-2", Type = EgressChannelType.Proxy, Value = "http://127.0.0.1:8081" },
+            }
+        });
+
+        var service = new EgressPoolService(options, NullLogger<EgressPoolService>.Instance);
+
+        // Act & Assert
+        var first = service.GetNextChannelId();
+        var second = service.GetNextChannelId();
+        var third = service.GetNextChannelId();
+
+        Assert.Equal("ch-1", first);
+        Assert.Equal("ch-2", second);
+        Assert.Equal("ch-1", third);
+    }
+
+    [Fact]
+    public void EgressPoolService_ShouldFallbackToNull_WhenNoChannelsConfigured()
+    {
+        // Arrange
+        var options = Options.Create(new EgressOptions());
+        var service = new EgressPoolService(options, NullLogger<EgressPoolService>.Instance);
+
+        // Act
+        var channel = service.GetNextChannelId();
+
+        // Assert
+        Assert.Null(channel);
+    }
+
+    [Fact]
+    public void EgressPoolService_ShouldCooldown_OnFailures()
+    {
+        // Arrange
+        var options = Options.Create(new EgressOptions
+        {
+            Channels = new List<EgressChannelOptions>
+            {
+                new() { Id = "ch-1", Type = EgressChannelType.Proxy, Value = "http://127.0.0.1:8080" },
+                new() { Id = "ch-2", Type = EgressChannelType.Proxy, Value = "http://127.0.0.1:8081" },
+            }
+        });
+
+        var service = new EgressPoolService(options, NullLogger<EgressPoolService>.Instance);
+
+        // Fail ch-1 three times
+        service.ReportFailure("ch-1", new Exception("Fail 1"));
+        service.ReportFailure("ch-1", new Exception("Fail 2"));
+        service.ReportFailure("ch-1", new Exception("Fail 3"));
+
+        // Act
+        // ch-1 is in cooldown, so it should only return ch-2
+        var first = service.GetNextChannelId();
+        var second = service.GetNextChannelId();
+
+        // Assert
+        Assert.Equal("ch-2", first);
+        Assert.Equal("ch-2", second);
+    }
+
+    [Fact]
+    public async Task RateLimiterService_ShouldLimitPerChannel()
+    {
+        // Arrange
+        var limiter = new RateLimiterService();
+
+        // Act
+        // Set a block penalty for ch-1
+        limiter.ReportRateLimitExceeded(PlatformType.Polymarket, TimeSpan.FromSeconds(5), "Data", "ch-1");
+
+        // Assert
+        // ch-1 should be limited
+        var canRequestCh1 = limiter.CanMakeRequest(PlatformType.Polymarket, "Data", "ch-1");
+        // ch-2 should NOT be limited
+        var canRequestCh2 = limiter.CanMakeRequest(PlatformType.Polymarket, "Data", "ch-2");
+        // Global/Default channel should NOT be limited
+        var canRequestGlobal = limiter.CanMakeRequest(PlatformType.Polymarket, "Data");
+
+        Assert.False(canRequestCh1);
+        Assert.True(canRequestCh2);
+        Assert.True(canRequestGlobal);
+    }
+}
diff --git a/src/Predictalytics.Application.Tests/Services/MarketCategoryMapperTests.cs b/src/Predictalytics.Application.Tests/Services/MarketCategoryMapperTests.cs
index 7a4592e..2ef0d4a 100644
--- a/src/Predictalytics.Application.Tests/Services/MarketCategoryMapperTests.cs
+++ b/src/Predictalytics.Application.Tests/Services/MarketCategoryMapperTests.cs
@@ -52,4 +52,34 @@ public class MarketCategoryMapperTests
         var (_, subcategory) = MarketCategoryMapper.Map("", "NBA, Basketball", "Lakers to win?");
         Assert.Equal("NBA", subcategory);
     }
+
+    [Fact]
+    public void Map_CanonicalTag_WinsOverHeuristics()
+    {
+        // "Politics" is a canonical tag, even though it's last in tags, it should map to Politics.
+        var (category, subcategory) = MarketCategoryMapper.Map("", "Ethiopia, Elections, Politics", "Next PM of Ethiopia?");
+        Assert.Equal(MarketCategory.Politics, category);
+        Assert.Equal("Ethiopia", subcategory);
+    }
+
+    [Fact]
+    public void Map_Subcategory_FiltersNoiseAndCategorySelf()
+    {
+        // Category is Sports.
+        // "Sports" should be skipped as subcategory because it is the category itself.
+        // "Hide From New" and "2025 Predictions" should be skipped as noise tags.
+        // "Soccer" should be picked.
+        var (category, subcategory) = MarketCategoryMapper.Map("", "Hide From New, Sports, 2025 Predictions, Soccer, FIFA World Cup", "Lakers to win?");
+        Assert.Equal(MarketCategory.Sports, category);
+        Assert.Equal("Soccer", subcategory);
+    }
+
+    [Fact]
+    public void Map_Subcategory_EmptyNormalization()
+    {
+        // When all tags are noise or category names, subcategory should normalize to empty string.
+        var (category, subcategory) = MarketCategoryMapper.Map("", "Sports, Hide From New, 2026", "Lakers to win?");
+        Assert.Equal(MarketCategory.Sports, category);
+        Assert.Equal(string.Empty, subcategory);
+    }
 }
diff --git a/src/Predictalytics.Application/Interfaces/IEgressPoolService.cs b/src/Predictalytics.Application/Interfaces/IEgressPoolService.cs
new file mode 100644
index 0000000..65b0006
--- /dev/null
+++ b/src/Predictalytics.Application/Interfaces/IEgressPoolService.cs
@@ -0,0 +1,12 @@
+using System;
+using System.Net.Http;
+
+namespace Predictalytics.Application.Interfaces;
+
+public interface IEgressPoolService
+{
+    string? GetNextChannelId();
+    HttpMessageInvoker? GetInvoker(string channelId);
+    void ReportFailure(string channelId, Exception exception);
+    void ReportSuccess(string channelId);
+}
diff --git a/src/Predictalytics.Application/Interfaces/IRateLimiter.cs b/src/Predictalytics.Application/Interfaces/IRateLimiter.cs
index ac41e4e..99f5f43 100644
--- a/src/Predictalytics.Application/Interfaces/IRateLimiter.cs
+++ b/src/Predictalytics.Application/Interfaces/IRateLimiter.cs
@@ -8,11 +8,11 @@ namespace Predictalytics.Application.Interfaces;
 public interface IRateLimiter
 {
     /// <summary>Wait until a request can be made to the given platform.</summary>
-    Task WaitAsync(PlatformType platform, CancellationToken ct = default, string endpointGroup = "Default");
+    Task WaitAsync(PlatformType platform, CancellationToken ct = default, string endpointGroup = "Default", string? channelId = null);
 
     /// <summary>Check if a request can be made immediately.</summary>
-    bool CanMakeRequest(PlatformType platform, string endpointGroup = "Default");
+    bool CanMakeRequest(PlatformType platform, string endpointGroup = "Default", string? channelId = null);
 
     /// <summary>Report that a 429 Too Many Requests was received.</summary>
-    void ReportRateLimitExceeded(PlatformType platform, TimeSpan? retryAfter = null, string endpointGroup = "Default");
+    void ReportRateLimitExceeded(PlatformType platform, TimeSpan? retryAfter = null, string endpointGroup = "Default", string? channelId = null);
 }
diff --git a/src/Predictalytics.Application/Services/RateLimiterService.cs b/src/Predictalytics.Application/Services/RateLimiterService.cs
index dbcecde..8707c2e 100644
--- a/src/Predictalytics.Application/Services/RateLimiterService.cs
+++ b/src/Predictalytics.Application/Services/RateLimiterService.cs
@@ -28,10 +28,12 @@ public class RateLimiterService : IRateLimiter
         { "Stake-Default", 1000 }
     };
 
-    public async Task WaitAsync(PlatformType platform, CancellationToken ct = default, string endpointGroup = "Default")
+    public async Task WaitAsync(PlatformType platform, CancellationToken ct = default, string endpointGroup = "Default", string? channelId = null)
     {
-        var key = $"{platform}-{endpointGroup}";
-        if (!Delays.ContainsKey(key)) key = $"{platform}-Default";
+        var configKey = $"{platform}-{endpointGroup}";
+        if (!Delays.ContainsKey(configKey)) configKey = $"{platform}-Default";
+
+        var key = string.IsNullOrEmpty(channelId) ? configKey : $"{configKey}-{channelId}";
 
         var sem = _semaphores.GetOrAdd(key, _ => new SemaphoreSlim(1, 1));
         await sem.WaitAsync(ct);
@@ -48,7 +50,7 @@ public class RateLimiterService : IRateLimiter
 
             if (_lastRequest.TryGetValue(key, out var last))
             {
-                var delayMs = Delays.GetValueOrDefault(key, 1000);
+                var delayMs = Delays.GetValueOrDefault(configKey, 1000);
                 var elapsed = (DateTime.UtcNow - last).TotalMilliseconds;
                 if (elapsed < delayMs)
                     await Task.Delay((int)(delayMs - elapsed), ct);
@@ -58,23 +60,27 @@ public class RateLimiterService : IRateLimiter
         finally { sem.Release(); }
     }
 
-    public bool CanMakeRequest(PlatformType platform, string endpointGroup = "Default")
+    public bool CanMakeRequest(PlatformType platform, string endpointGroup = "Default", string? channelId = null)
     {
-        var key = $"{platform}-{endpointGroup}";
-        if (!Delays.ContainsKey(key)) key = $"{platform}-Default";
+        var configKey = $"{platform}-{endpointGroup}";
+        if (!Delays.ContainsKey(configKey)) configKey = $"{platform}-Default";
+
+        var key = string.IsNullOrEmpty(channelId) ? configKey : $"{configKey}-{channelId}";
 
         if (_blockedUntil.TryGetValue(key, out var blockedUntil) && blockedUntil > DateTime.UtcNow)
             return false;
 
         if (!_lastRequest.TryGetValue(key, out var last)) return true;
-        var delayMs = Delays.GetValueOrDefault(key, 1000);
+        var delayMs = Delays.GetValueOrDefault(configKey, 1000);
         return (DateTime.UtcNow - last).TotalMilliseconds >= delayMs;
     }
 
-    public void ReportRateLimitExceeded(PlatformType platform, TimeSpan? retryAfter = null, string endpointGroup = "Default")
+    public void ReportRateLimitExceeded(PlatformType platform, TimeSpan? retryAfter = null, string endpointGroup = "Default", string? channelId = null)
     {
-        var key = $"{platform}-{endpointGroup}";
-        if (!Delays.ContainsKey(key)) key = $"{platform}-Default";
+        var configKey = $"{platform}-{endpointGroup}";
+        if (!Delays.ContainsKey(configKey)) configKey = $"{platform}-Default";
+
+        var key = string.IsNullOrEmpty(channelId) ? configKey : $"{configKey}-{channelId}";
 
         var penalty = retryAfter ?? TimeSpan.FromSeconds(30);
         _blockedUntil[key] = DateTime.UtcNow.Add(penalty);
diff --git a/src/Predictalytics.Infrastructure/Configuration/EgressOptions.cs b/src/Predictalytics.Infrastructure/Configuration/EgressOptions.cs
new file mode 100644
index 0000000..87d7fee
--- /dev/null
+++ b/src/Predictalytics.Infrastructure/Configuration/EgressOptions.cs
@@ -0,0 +1,21 @@
+using System.Collections.Generic;
+
+namespace Predictalytics.Infrastructure.Configuration;
+
+public enum EgressChannelType
+{
+    SourceIp,
+    Proxy
+}
+
+public class EgressOptions
+{
+    public List<EgressChannelOptions> Channels { get; set; } = new();
+}
+
+public class EgressChannelOptions
+{
+    public string Id { get; set; } = string.Empty;
+    public EgressChannelType Type { get; set; }
+    public string Value { get; set; } = string.Empty;
+}
diff --git a/src/Predictalytics.Infrastructure/Data/AppDbContext.cs b/src/Predictalytics.Infrastructure/Data/AppDbContext.cs
index 1253453..25b8d49 100644
--- a/src/Predictalytics.Infrastructure/Data/AppDbContext.cs
+++ b/src/Predictalytics.Infrastructure/Data/AppDbContext.cs
@@ -1,5 +1,6 @@
 using Predictalytics.Domain.Entities;
 using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.Configuration;
 
 namespace Predictalytics.Infrastructure.Data;
 
@@ -25,7 +26,49 @@ public class AppDbContext : DbContext
     public DbSet<TraderTrait> TraderTraits => Set<TraderTrait>();
     public DbSet<TraderWindowMetrics> TraderWindowMetrics => Set<TraderWindowMetrics>();
 
-    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
+    private readonly bool _isReadOnly;
+
+    public AppDbContext(DbContextOptions<AppDbContext> options, Microsoft.Extensions.Configuration.IConfiguration? configuration = null) 
+        : base(options) 
+    {
+        _isReadOnly = configuration?.GetValue<bool>("ApiSettings:ReadOnlyDatabase", false) ?? false;
+    }
+
+    public override int SaveChanges()
+    {
+        if (_isReadOnly)
+        {
+            throw new System.InvalidOperationException("Database is configured as Read-Only.");
+        }
+        return base.SaveChanges();
+    }
+
+    public override int SaveChanges(bool acceptAllChangesOnSuccess)
+    {
+        if (_isReadOnly)
+        {
+            throw new System.InvalidOperationException("Database is configured as Read-Only.");
+        }
+        return base.SaveChanges(acceptAllChangesOnSuccess);
+    }
+
+    public override Task<int> SaveChangesAsync(CancellationToken cancellationToken = default)
+    {
+        if (_isReadOnly)
+        {
+            throw new System.InvalidOperationException("Database is configured as Read-Only.");
+        }
+        return base.SaveChangesAsync(cancellationToken);
+    }
+
+    public override Task<int> SaveChangesAsync(bool acceptAllChangesOnSuccess, CancellationToken cancellationToken = default)
+    {
+        if (_isReadOnly)
+        {
+            throw new System.InvalidOperationException("Database is configured as Read-Only.");
+        }
+        return base.SaveChangesAsync(acceptAllChangesOnSuccess, cancellationToken);
+    }
 
     protected override void OnModelCreating(ModelBuilder mb)
     {
diff --git a/src/Predictalytics.Infrastructure/DependencyInjection.cs b/src/Predictalytics.Infrastructure/DependencyInjection.cs
index eb9b2a6..c5a59ac 100644
--- a/src/Predictalytics.Infrastructure/DependencyInjection.cs
+++ b/src/Predictalytics.Infrastructure/DependencyInjection.cs
@@ -10,6 +10,7 @@ using Predictalytics.Infrastructure.Providers.Polymarket;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
+using Predictalytics.Infrastructure.Configuration;
 
 namespace Predictalytics.Infrastructure;
 
@@ -79,6 +80,12 @@ public static class DependencyInjection
         services.AddScoped<WatchlistService>();
         services.AddSingleton<IRateLimiter, RateLimiterService>();
         services.AddSingleton<IPlatformStatisticsService, PlatformStatisticsService>();
+        services.AddMemoryCache();
+
+        // Egress pool config & services
+        services.Configure<EgressOptions>(configuration.GetSection("Egress"));
+        services.AddSingleton<IEgressPoolService, EgressPoolService>();
+        services.AddTransient<EgressPoolHandler>();
 
         // Platform Providers
         services.AddHttpClient();
@@ -89,6 +96,15 @@ public static class DependencyInjection
             c.Timeout = TimeSpan.FromSeconds(60);
         });
 
+        services.AddHttpClient("PolymarketData")
+            .AddHttpMessageHandler<EgressPoolHandler>();
+
+        services.AddHttpClient("PolymarketGamma")
+            .AddHttpMessageHandler<EgressPoolHandler>();
+
+        services.AddHttpClient("PolymarketClob")
+            .AddHttpMessageHandler<EgressPoolHandler>();
+
         services.AddSingleton<PolymarketApiClient>();
         services.AddSingleton<LimitlessApiClient>();
         services.AddHttpClient<Predictalytics.Application.Interfaces.IOpenRouterApiClient, Predictalytics.Infrastructure.Providers.OpenRouter.OpenRouterApiClient>();
@@ -109,6 +125,14 @@ public static class DependencyInjection
     public static async Task EnsureDatabaseAsync(IServiceProvider services, bool dbDebug = false)
     {
         using var scope = services.CreateScope();
+
+        var config = scope.ServiceProvider.GetService<IConfiguration>();
+        if (config != null && config.GetValue<bool>("ApiSettings:ReadOnlyDatabase", false))
+        {
+            Serilog.Log.Warning("⚠️ EnsureDatabaseAsync: Skipping EF Core migrations and platform seeding because the database is configured as Read-Only.");
+            return;
+        }
+
         var db = scope.ServiceProvider.GetRequiredService<AppDbContext>();
 
         try
diff --git a/src/Predictalytics.Infrastructure/Helpers/MarketCategoryMapper.cs b/src/Predictalytics.Infrastructure/Helpers/MarketCategoryMapper.cs
index b76993f..7add487 100644
--- a/src/Predictalytics.Infrastructure/Helpers/MarketCategoryMapper.cs
+++ b/src/Predictalytics.Infrastructure/Helpers/MarketCategoryMapper.cs
@@ -57,6 +57,45 @@ public static class MarketCategoryMapper
             new[] { "fed", "fomc", "cpi", "gdp", "nasdaq", "dow", "ipo" }),
     };
 
+    private static readonly Dictionary<string, MarketCategory> CanonicalTags = new(StringComparer.OrdinalIgnoreCase)
+    {
+        { "politics", MarketCategory.Politics },
+        { "crypto", MarketCategory.Crypto },
+        { "sports", MarketCategory.Sports },
+        { "pop culture", MarketCategory.PopCulture },
+        { "popculture", MarketCategory.PopCulture },
+        { "science", MarketCategory.Science },
+        { "global news", MarketCategory.GlobalNews },
+        { "globalnews", MarketCategory.GlobalNews },
+        { "news", MarketCategory.GlobalNews },
+        { "economy", MarketCategory.Economy },
+        { "business", MarketCategory.Economy },
+        { "finance", MarketCategory.Economy }
+    };
+
+    private static readonly HashSet<string> BlacklistTags = new(StringComparer.OrdinalIgnoreCase)
+    {
+        "hide from new",
+        "hide_from_new",
+        "tournament futures",
+        "main election",
+        "recurring",
+        "exchange",
+        "overall",
+        "other",
+        "none"
+    };
+
+    private static bool IsNoiseTag(string tag)
+    {
+        if (string.IsNullOrWhiteSpace(tag)) return true;
+        var trimmed = tag.Trim();
+        if (BlacklistTags.Contains(trimmed)) return true;
+        if (int.TryParse(trimmed, out _)) return true;
+        if (Regex.IsMatch(trimmed, @"^\d{4}\s+predictions$", RegexOptions.IgnoreCase)) return true;
+        return false;
+    }
+
     /// <summary>
     /// Classifies a market. The question text is a first-class signal: the Gamma
     /// /markets endpoint delivers neither a category field nor event tags, so for
@@ -64,27 +103,60 @@ public static class MarketCategoryMapper
     /// </summary>
     public static (MarketCategory Category, string Subcategory) Map(string rawCategory, string tags, string question = "")
     {
+        var tagList = (tags ?? string.Empty).Split(',', StringSplitOptions.RemoveEmptyEntries)
+            .Select(t => t.Trim())
+            .Where(t => !string.IsNullOrEmpty(t))
+            .ToList();
+
+        if (!string.IsNullOrWhiteSpace(rawCategory))
+        {
+            tagList.Insert(0, rawCategory.Trim());
+        }
+
+        // F1: Check canonical tags first over the entire tag set
+        foreach (var tag in tagList)
+        {
+            if (CanonicalTags.TryGetValue(tag, out var canonicalCategory))
+            {
+                return (canonicalCategory, GetSubcategory(rawCategory, tags ?? string.Empty, canonicalCategory.ToString()));
+            }
+        }
+
+        // Fallback: heuristic search on rawCategory + tags + question
         var searchString = $"{rawCategory} {tags} {question}".ToLowerInvariant();
         var tokens = new HashSet<string>(Regex.Split(searchString, "[^a-z0-9.]+"));
 
         foreach (var rule in Rules)
         {
             if (rule.Words.Any(tokens.Contains) || rule.Substrings.Any(searchString.Contains))
-                return (rule.Category, GetSubcategory(rawCategory, tags, rule.Category.ToString()));
+                return (rule.Category, GetSubcategory(rawCategory, tags ?? string.Empty, rule.Category.ToString()));
         }
 
-        return (MarketCategory.Other, GetSubcategory(rawCategory, tags, "Other"));
+        return (MarketCategory.Other, GetSubcategory(rawCategory, tags ?? string.Empty, "Other"));
     }
 
-    private static string GetSubcategory(string rawCategory, string tags, string fallback)
+    private static string GetSubcategory(string rawCategory, string tags, string categoryName)
     {
-        if (!string.IsNullOrWhiteSpace(rawCategory) && !rawCategory.Equals("OVERALL", StringComparison.OrdinalIgnoreCase))
-            return rawCategory.Trim();
+        var candidates = tags.Split(',', StringSplitOptions.RemoveEmptyEntries)
+            .Select(t => t.Trim())
+            .ToList();
 
-        var firstTag = tags.Split(',', StringSplitOptions.RemoveEmptyEntries).FirstOrDefault()?.Trim();
-        if (!string.IsNullOrWhiteSpace(firstTag))
-            return firstTag;
+        if (!string.IsNullOrWhiteSpace(rawCategory))
+        {
+            candidates.Insert(0, rawCategory.Trim());
+        }
 
-        return fallback;
+        foreach (var c in candidates)
+        {
+            if (IsNoiseTag(c)) continue;
+            
+            // F2: Skip tag if it is the category itself or matches any canonical category tag
+            if (c.Equals(categoryName, StringComparison.OrdinalIgnoreCase)) continue;
+            if (CanonicalTags.ContainsKey(c)) continue;
+
+            return c;
+        }
+
+        return string.Empty;
     }
 }
diff --git a/src/Predictalytics.Infrastructure/Providers/Polymarket/PolymarketApiClient.cs b/src/Predictalytics.Infrastructure/Providers/Polymarket/PolymarketApiClient.cs
index 5c9a32e..8614e25 100644
--- a/src/Predictalytics.Infrastructure/Providers/Polymarket/PolymarketApiClient.cs
+++ b/src/Predictalytics.Infrastructure/Providers/Polymarket/PolymarketApiClient.cs
@@ -1,8 +1,10 @@
 using System.Net.Http.Json;
 using System.Text.Json.Serialization;
 using Microsoft.Extensions.Logging;
+using Microsoft.Extensions.Caching.Memory;
 using Predictalytics.Application.Interfaces;
 using Predictalytics.Domain.Enums;
+using Predictalytics.Infrastructure.Services;
 
 namespace Predictalytics.Infrastructure.Providers.Polymarket;
 
@@ -16,13 +18,15 @@ public class PolymarketApiClient
     private readonly HttpClient _gammaClient;
     private readonly HttpClient _clobClient;
     private readonly IRateLimiter _rateLimiter;
+    private readonly IEgressPoolService _egressPool;
+    private readonly IMemoryCache _cache;
     private readonly ILogger<PolymarketApiClient> _logger;
 
     private const string DataApiBase = "https://data-api.polymarket.com";
     private const string GammaApiBase = "https://gamma-api.polymarket.com";
     private const string ClobApiBase = "https://clob.polymarket.com";
 
-    public PolymarketApiClient(IHttpClientFactory httpFactory, IRateLimiter rateLimiter, ILogger<PolymarketApiClient> logger)
+    public PolymarketApiClient(IHttpClientFactory httpFactory, IRateLimiter rateLimiter, IEgressPoolService egressPool, IMemoryCache cache, ILogger<PolymarketApiClient> logger)
     {
         _client = httpFactory.CreateClient("PolymarketData");
         _client.BaseAddress = new Uri(DataApiBase);
@@ -37,6 +41,8 @@ public class PolymarketApiClient
         _clobClient.DefaultRequestHeaders.Add("Accept", "application/json");
 
         _rateLimiter = rateLimiter;
+        _egressPool = egressPool;
+        _cache = cache;
         _logger = logger;
     }
 
@@ -93,9 +99,42 @@ public class PolymarketApiClient
 
     public async Task<GammaMarketResponse?> GetMarketAsync(string conditionId, CancellationToken ct = default)
     {
+        var cacheKey = $"market-{conditionId}";
+        if (_cache.TryGetValue<GammaMarketResponse>(cacheKey, out var cached))
+        {
+            return cached;
+        }
+
         var url = $"/markets?condition_id={conditionId}";
         var results = await ExecuteWithRetryAsync<List<GammaMarketResponse>>(_gammaClient, url, "Gamma", ct);
-        return results?.FirstOrDefault();
+        var market = results?.FirstOrDefault();
+
+        if (market != null)
+        {
+            _cache.Set(cacheKey, market, TimeSpan.FromMinutes(30));
+        }
+
+        return market;
+    }
+
+    public async Task<GammaEventResponse?> GetEventAsync(long eventId, CancellationToken ct = default)
+    {
+        var cacheKey = $"event-{eventId}";
+        if (_cache.TryGetValue<GammaEventResponse>(cacheKey, out var cached))
+        {
+            return cached;
+        }
+
+        var url = $"/events?id={eventId}";
+        var results = await ExecuteWithRetryAsync<List<GammaEventResponse>>(_gammaClient, url, "Gamma", ct);
+        var ev = results?.FirstOrDefault();
+
+        if (ev != null)
+        {
+            _cache.Set(cacheKey, ev, TimeSpan.FromMinutes(60));
+        }
+
+        return ev;
     }
 
     /// <summary>
@@ -156,11 +195,18 @@ public class PolymarketApiClient
 
     private async Task<T?> ExecuteWithRetryAsync<T>(HttpClient client, string url, string endpointGroup, CancellationToken ct, int attempt = 1)
     {
-        await _rateLimiter.WaitAsync(PlatformType.Polymarket, ct, endpointGroup);
+        var channelId = _egressPool.GetNextChannelId();
+        await _rateLimiter.WaitAsync(PlatformType.Polymarket, ct, endpointGroup, channelId);
 
         try
         {
-            var response = await client.GetAsync(url, ct);
+            using var request = new HttpRequestMessage(HttpMethod.Get, url);
+            if (!string.IsNullOrEmpty(channelId))
+            {
+                request.Options.Set(EgressRequestOptions.ChannelIdKey, channelId);
+            }
+
+            var response = await client.SendAsync(request, ct);
 
             if (response.StatusCode == System.Net.HttpStatusCode.TooManyRequests)
             {
@@ -180,9 +226,9 @@ public class PolymarketApiClient
                     waitTime = TimeSpan.FromSeconds(30);
                 }
 
-                _logger.LogWarning("⚠️ Rate limit exceeded (429) for Polymarket {Group}. Pausing for {WaitTime}s...", endpointGroup, (int)waitTime.TotalSeconds);
+                _logger.LogWarning("⚠️ Rate limit exceeded (429) for Polymarket {Group} (Channel: {Channel}). Pausing for {WaitTime}s...", endpointGroup, channelId ?? "Default", (int)waitTime.TotalSeconds);
                 
-                _rateLimiter.ReportRateLimitExceeded(PlatformType.Polymarket, waitTime, endpointGroup);
+                _rateLimiter.ReportRateLimitExceeded(PlatformType.Polymarket, waitTime, endpointGroup, channelId);
                 
                 if (attempt < 3)
                 {
@@ -208,7 +254,7 @@ public class PolymarketApiClient
             {
                 _logger.LogCritical("Unhandled 429 in PolymarketApiClient for {Url}. This should have been caught by the status code check.", url);
             }
-            _logger.LogError(ex, "Failed to fetch from {Url} (attempt {Attempt})", url, attempt);
+            _logger.LogError(ex, "Failed to fetch from {Url} (attempt {Attempt}, Channel: {Channel})", url, attempt, channelId ?? "Default");
             return default;
         }
     }
diff --git a/src/Predictalytics.Infrastructure/Providers/Polymarket/PolymarketProvider.cs b/src/Predictalytics.Infrastructure/Providers/Polymarket/PolymarketProvider.cs
index 05fbf7a..ce672ff 100644
--- a/src/Predictalytics.Infrastructure/Providers/Polymarket/PolymarketProvider.cs
+++ b/src/Predictalytics.Infrastructure/Providers/Polymarket/PolymarketProvider.cs
@@ -175,7 +175,25 @@ public class PolymarketProvider : IPlatformProvider
         if (raw.Events != null && raw.Events.Count > 0)
         {
             var ev = raw.Events[0];
-            parentTags = ev.Tags != null ? string.Join(", ", ev.Tags.Select(t => t.Label)) : "";
+            parentTags = ev.Tags != null && ev.Tags.Count > 0 ? string.Join(", ", ev.Tags.Select(t => t.Label)) : "";
+
+            // F3: If parentTags is empty, try to fetch the event from Gamma API to load tags
+            if (string.IsNullOrEmpty(parentTags) && long.TryParse(ev.Id, out var eventId))
+            {
+                try
+                {
+                    var fetchedEv = await _api.GetEventAsync(eventId, ct);
+                    if (fetchedEv != null && fetchedEv.Tags != null && fetchedEv.Tags.Count > 0)
+                    {
+                        parentTags = string.Join(", ", fetchedEv.Tags.Select(t => t.Label));
+                        ev.Tags = fetchedEv.Tags;
+                    }
+                }
+                catch (Exception ex)
+                {
+                    _logger.LogWarning(ex, "Failed to fetch event {EventId} for tags", eventId);
+                }
+            }
         }
         var market = MapGammaMarket(raw, parentTags);
 
diff --git a/src/Predictalytics.Infrastructure/Services/EgressPoolHandler.cs b/src/Predictalytics.Infrastructure/Services/EgressPoolHandler.cs
new file mode 100644
index 0000000..924dad0
--- /dev/null
+++ b/src/Predictalytics.Infrastructure/Services/EgressPoolHandler.cs
@@ -0,0 +1,61 @@
+using System;
+using System.Net.Http;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.Extensions.Logging;
+using Predictalytics.Application.Interfaces;
+
+namespace Predictalytics.Infrastructure.Services;
+
+public static class EgressRequestOptions
+{
+    public static readonly HttpRequestOptionsKey<string> ChannelIdKey = new("EgressChannelId");
+}
+
+public class EgressPoolHandler : DelegatingHandler
+{
+    private readonly IEgressPoolService _egressPool;
+    private readonly ILogger<EgressPoolHandler> _logger;
+
+    public EgressPoolHandler(IEgressPoolService egressPool, ILogger<EgressPoolHandler> logger)
+    {
+        _egressPool = egressPool;
+        _logger = logger;
+    }
+
+    protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
+    {
+        string? channelId = null;
+        if (request.Options.TryGetValue(EgressRequestOptions.ChannelIdKey, out var cid))
+        {
+            channelId = cid;
+        }
+
+        if (string.IsNullOrEmpty(channelId))
+        {
+            _logger.LogDebug("🔌 Routing request to {Host} using default channel (fallback)", request.RequestUri?.Host);
+            return await base.SendAsync(request, cancellationToken);
+        }
+
+        var invoker = _egressPool.GetInvoker(channelId);
+        if (invoker == null)
+        {
+            _logger.LogWarning("🔌 Egress channel '{Id}' not found. Falling back to default channel.", channelId);
+            return await base.SendAsync(request, cancellationToken);
+        }
+
+        _logger.LogDebug("🔌 Routing request to {Host} using channel '{ChannelId}'", request.RequestUri?.Host, channelId);
+
+        try
+        {
+            var response = await invoker.SendAsync(request, cancellationToken);
+            _egressPool.ReportSuccess(channelId);
+            return response;
+        }
+        catch (Exception ex)
+        {
+            _egressPool.ReportFailure(channelId, ex);
+            throw;
+        }
+    }
+}
diff --git a/src/Predictalytics.Infrastructure/Services/EgressPoolService.cs b/src/Predictalytics.Infrastructure/Services/EgressPoolService.cs
new file mode 100644
index 0000000..f6ce263
--- /dev/null
+++ b/src/Predictalytics.Infrastructure/Services/EgressPoolService.cs
@@ -0,0 +1,178 @@
+using System;
+using System.Collections.Concurrent;
+using System.Collections.Generic;
+using System.Linq;
+using System.Net;
+using System.Net.Http;
+using System.Net.Sockets;
+using System.Threading;
+using Microsoft.Extensions.Logging;
+using Microsoft.Extensions.Options;
+using Predictalytics.Application.Interfaces;
+using Predictalytics.Infrastructure.Configuration;
+
+namespace Predictalytics.Infrastructure.Services;
+
+public class EgressPoolService : IEgressPoolService, IDisposable
+{
+    private class ChannelState
+    {
+        public EgressChannelOptions Options { get; }
+        public HttpMessageInvoker Invoker { get; }
+        public SocketsHttpHandler Handler { get; }
+        public int ConsecutiveFailures { get; set; }
+        public DateTime? CooldownUntil { get; set; }
+
+        public ChannelState(EgressChannelOptions options, HttpMessageInvoker invoker, SocketsHttpHandler handler)
+        {
+            Options = options;
+            Invoker = invoker;
+            Handler = handler;
+        }
+    }
+
+    private readonly List<ChannelState> _channels = new();
+    private readonly ConcurrentDictionary<string, ChannelState> _channelMap = new();
+    private readonly ILogger<EgressPoolService> _logger;
+    private int _roundRobinIndex = -1;
+
+    public EgressPoolService(IOptions<EgressOptions> options, ILogger<EgressPoolService> logger)
+    {
+        _logger = logger;
+        InitializeChannels(options.Value);
+    }
+
+    private void InitializeChannels(EgressOptions options)
+    {
+        if (options?.Channels == null || options.Channels.Count == 0)
+        {
+            _logger.LogInformation("🔌 EgressPoolService: No egress channels configured. Using default direct connection.");
+            return;
+        }
+
+        foreach (var config in options.Channels)
+        {
+            try
+            {
+                var handler = new SocketsHttpHandler
+                {
+                    PooledConnectionLifetime = TimeSpan.FromMinutes(2),
+                    KeepAlivePingDelay = TimeSpan.FromSeconds(15),
+                    KeepAlivePingTimeout = TimeSpan.FromSeconds(5)
+                };
+
+                if (config.Type == EgressChannelType.Proxy)
+                {
+                    handler.Proxy = new WebProxy(config.Value);
+                    handler.UseProxy = true;
+                    _logger.LogInformation("🔌 Registered Proxy Channel '{Id}' -> {Proxy}", config.Id, config.Value);
+                }
+                else if (config.Type == EgressChannelType.SourceIp)
+                {
+                    var ip = IPAddress.Parse(config.Value);
+                    handler.ConnectCallback = async (context, cancellationToken) =>
+                    {
+                        var socket = new Socket(ip.AddressFamily, SocketType.Stream, ProtocolType.Tcp);
+                        socket.Bind(new IPEndPoint(ip, 0));
+                        try
+                        {
+                            await socket.ConnectAsync(context.DnsEndPoint, cancellationToken);
+                            return new NetworkStream(socket, ownsSocket: true);
+                        }
+                        catch
+                        {
+                            socket.Dispose();
+                            throw;
+                        }
+                    };
+                    _logger.LogInformation("🔌 Registered SourceIp Channel '{Id}' -> {Ip}", config.Id, config.Value);
+                }
+                else
+                {
+                    _logger.LogWarning("🔌 EgressPoolService: Unknown channel type '{Type}' for channel '{Id}'. Skipping.", config.Type, config.Id);
+                    continue;
+                }
+
+                var invoker = new HttpMessageInvoker(handler, disposeHandler: true);
+                var state = new ChannelState(config, invoker, handler);
+                _channels.Add(state);
+                _channelMap[config.Id] = state;
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "🔌 EgressPoolService: Failed to initialize channel '{Id}' ({Type}) with value '{Value}'", config.Id, config.Type, config.Value);
+            }
+        }
+    }
+
+    public string? GetNextChannelId()
+    {
+        if (_channels.Count == 0) return null;
+
+        lock (_channels)
+        {
+            var now = DateTime.UtcNow;
+            // Filter out channels currently in cooldown
+            var available = _channels
+                .Where(c => !c.CooldownUntil.HasValue || c.CooldownUntil.Value < now)
+                .ToList();
+
+            if (available.Count == 0)
+            {
+                _logger.LogWarning("🔌 All egress channels are currently in cooldown! Falling back to default direct connection.");
+                return null;
+            }
+
+            _roundRobinIndex = (_roundRobinIndex + 1) % available.Count;
+            return available[_roundRobinIndex].Options.Id;
+        }
+    }
+
+    public HttpMessageInvoker? GetInvoker(string channelId)
+    {
+        return _channelMap.TryGetValue(channelId, out var state) ? state.Invoker : null;
+    }
+
+    public void ReportFailure(string channelId, Exception exception)
+    {
+        if (!_channelMap.TryGetValue(channelId, out var state)) return;
+
+        lock (state)
+        {
+            state.ConsecutiveFailures++;
+            _logger.LogWarning("🔌 Channel '{Id}' reported failure ({Count}/3): {Message}", channelId, state.ConsecutiveFailures, exception.Message);
+
+            if (state.ConsecutiveFailures >= 3)
+            {
+                var cooldown = TimeSpan.FromSeconds(30);
+                state.CooldownUntil = DateTime.UtcNow.Add(cooldown);
+                _logger.LogError("🔌 Channel '{Id}' has failed 3 times consecutively. Entering cooldown until {Time}", channelId, state.CooldownUntil);
+            }
+        }
+    }
+
+    public void ReportSuccess(string channelId)
+    {
+        if (!_channelMap.TryGetValue(channelId, out var state)) return;
+
+        lock (state)
+        {
+            if (state.ConsecutiveFailures > 0 || state.CooldownUntil.HasValue)
+            {
+                state.ConsecutiveFailures = 0;
+                state.CooldownUntil = null;
+                _logger.LogInformation("🔌 Channel '{Id}' recovered successfully.", channelId);
+            }
+        }
+    }
+
+    public void Dispose()
+    {
+        foreach (var state in _channels)
+        {
+            state.Invoker.Dispose();
+        }
+        _channels.Clear();
+        _channelMap.Clear();
+    }
+}
diff --git a/src/Predictalytics.WinFormsHost/AppSettings.cs b/src/Predictalytics.WinFormsHost/AppSettings.cs
index 3c4edb2..cd442bf 100644
--- a/src/Predictalytics.WinFormsHost/AppSettings.cs
+++ b/src/Predictalytics.WinFormsHost/AppSettings.cs
@@ -19,6 +19,14 @@ public class AppSettings
     [DefaultValue(false)]
     public bool DbConnectionDebug { get; set; } = false;
 
+    private string _egressChannelsText = "";
+
+    [Category("Egress (Proxy/IP)")]
+    [DisplayName("Egress Channels")]
+    [Description("Liste der Egress-Kanäle im Format: id|type|value (Zeilengetrennt). Beispiel: prox-1|Proxy|http://user:pass@proxy:8080\nip-1|SourceIp|192.168.1.100")]
+    [Editor("System.ComponentModel.Design.MultilineStringEditor, System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(System.Drawing.Design.UITypeEditor))]
+    public string EgressChannelsText { get => _egressChannelsText; set => _egressChannelsText = value ?? ""; }
+
     private string _dbServer = "localhost";
     private string _dbName = "";
     private string _dbUser = "";
diff --git a/src/Predictalytics.WinFormsHost/MainForm.cs b/src/Predictalytics.WinFormsHost/MainForm.cs
index f77cbb8..2f62794 100644
--- a/src/Predictalytics.WinFormsHost/MainForm.cs
+++ b/src/Predictalytics.WinFormsHost/MainForm.cs
@@ -38,12 +38,14 @@ public partial class MainForm : Form
             {
                 _webServer.ConnectionString = _settings.ConnectionString;
                 _webServer.DbConnectionDebug = _settings.DbConnectionDebug;
+                _webServer.EgressChannelsText = _settings.EgressChannelsText;
             }
         };
 
         _webServer = new EmbeddedWebServer();
         _webServer.ConnectionString = _settings.ConnectionString;
         _webServer.DbConnectionDebug = _settings.DbConnectionDebug;
+        _webServer.EgressChannelsText = _settings.EgressChannelsText;
         
         // Build Version (Date of compilation/file creation)
         try {
@@ -83,6 +85,7 @@ public partial class MainForm : Form
             {
                 _webServer!.ConnectionString = _settings.ConnectionString;
                 _webServer!.DbConnectionDebug = _settings.DbConnectionDebug;
+                _webServer!.EgressChannelsText = _settings.EgressChannelsText;
                 await _webServer!.StartWorkersAsync(_workerCts.Token);
             }
             catch (OperationCanceledException) { }
diff --git a/src/Predictalytics.WinFormsHost/Services/EmbeddedWebServer.cs b/src/Predictalytics.WinFormsHost/Services/EmbeddedWebServer.cs
index 61ae905..04fc68c 100644
--- a/src/Predictalytics.WinFormsHost/Services/EmbeddedWebServer.cs
+++ b/src/Predictalytics.WinFormsHost/Services/EmbeddedWebServer.cs
@@ -1,5 +1,6 @@
 using Microsoft.EntityFrameworkCore;
 using Microsoft.Extensions.Hosting;
+using Microsoft.Extensions.Configuration;
 using Predictalytics.Api;
 using Predictalytics.Api.Endpoints;
 using Predictalytics.Worker;
@@ -22,6 +23,7 @@ public class EmbeddedWebServer
     private readonly object _lock = new();
     public string? ConnectionString { get; set; }
     public bool DbConnectionDebug { get; set; }
+    public string? EgressChannelsText { get; set; }
 
     public async Task UpdateDatabaseAsync()
     {
@@ -58,6 +60,29 @@ public class EmbeddedWebServer
             WHERE m.IsResolved = 1 AND (m.ResolutionOutcome IS NULL OR m.ResolutionOutcome = '');", ct);
         Log.Information("Backfilled ResolutionOutcome for {Count} markets", backfilled);
 
+        // 1b. Offline Category/Subcategory backfill:
+        // Query all markets that have events with tags in the DB, and re-classify them
+        var dbMarkets = await db.Markets.Include(m => m.Event).ToListAsync(ct);
+        int categoryBackfilledCount = 0;
+        foreach (var m in dbMarkets)
+        {
+            if (m.Event != null && !string.IsNullOrEmpty(m.Event.Tags))
+            {
+                var (newCategory, newSubcategory) = Predictalytics.Infrastructure.Helpers.MarketCategoryMapper.Map(string.Empty, m.Event.Tags, m.Question);
+                if (m.Category != newCategory || m.Subcategory != newSubcategory)
+                {
+                    m.Category = newCategory;
+                    m.Subcategory = newSubcategory;
+                    categoryBackfilledCount++;
+                }
+            }
+        }
+        if (categoryBackfilledCount > 0)
+        {
+            await db.SaveChangesAsync(ct);
+            Log.Information("Backfilled Category/Subcategory for {Count} markets based on Event tags", categoryBackfilledCount);
+        }
+
         // 2. Wipe derived data computed by earlier engine versions.
         var snapshots = await db.Database.ExecuteSqlRawAsync("DELETE FROM TraderDailySnapshots;", ct);
         var catPerf = await db.Database.ExecuteSqlRawAsync("DELETE FROM TraderCategoryPerformances;", ct);
@@ -75,6 +100,7 @@ public class EmbeddedWebServer
         var traders = await db.Database.ExecuteSqlRawAsync("UPDATE Traders SET LastAnalyzedAt = NULL;", ct);
 
         var summary = $"ResolutionOutcome backfilled: {backfilled} markets\n" +
+                      $"Category/Subcategory backfilled: {categoryBackfilledCount} markets\n" +
                       $"Daily snapshots deleted: {snapshots}\n" +
                       $"Category stats deleted: {catPerf}\n" +
                       $"Positions reset: {positions}\n" +
@@ -104,11 +130,23 @@ public class EmbeddedWebServer
                 Log.Information("Initializing Predictalytics infrastructure with connection: {ConnectionString}", System.Text.RegularExpressions.Regex.Replace(effectiveConnString ?? "NULL", "Password=[^;]+", "Password=****"));
                 Predictalytics.Infrastructure.DependencyInjection.AddPredictalytics(builder.Services, builder.Configuration, effectiveConnString, DbConnectionDebug);
                 
+                if (!string.IsNullOrEmpty(EgressChannelsText))
+                {
+                    var egressOptions = ParseEgressOptions(EgressChannelsText);
+                    builder.Services.Configure<Predictalytics.Infrastructure.Configuration.EgressOptions>(options =>
+                    {
+                        options.Channels = egressOptions.Channels;
+                    });
+                }
+
                 builder.Services.AddEndpointsApiExplorer();
                 builder.Services.AddSwaggerGen(c => c.SwaggerDoc("v1",
                     new() { Title = "Predictalytics Analytics API", Version = "v1" }));
+                
+                var allowedOrigins = builder.Configuration.GetSection("ApiSettings:AllowedOrigins").Get<string[]>() 
+                    ?? new[] { "http://localhost:5000" };
                 builder.Services.AddCors(o => o.AddDefaultPolicy(p =>
-                    p.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()));
+                    p.WithOrigins(allowedOrigins).AllowAnyMethod().AllowAnyHeader()));
                 builder.Host.UseSerilog();
 
                 var app = builder.Build();
@@ -131,7 +169,8 @@ public class EmbeddedWebServer
 
                 // Single shared registration — see ApiConfiguration.MapPredictalyticsEndpoints.
                 // Do NOT map endpoints individually here.
-                app.MapPredictalyticsEndpoints();
+                app.MapPredictalyticsReadEndpoints();
+                app.MapPredictalyticsControlEndpoints();
 
                 await Predictalytics.Infrastructure.DependencyInjection.EnsureDatabaseAsync(app.Services, DbConnectionDebug);
 
@@ -174,6 +213,14 @@ public class EmbeddedWebServer
             {
                 Serilog.Log.Warning("🔌 [StartWorkers] Using ConnectionString: {ConnectionString}", System.Text.RegularExpressions.Regex.Replace(ConnectionString ?? "NULL", "Password=[^;]+", "Password=****"));
                 Predictalytics.Infrastructure.DependencyInjection.AddPredictalytics(services, ctx.Configuration, ConnectionString, DbConnectionDebug);
+                if (!string.IsNullOrEmpty(EgressChannelsText))
+                {
+                    var egressOptions = ParseEgressOptions(EgressChannelsText);
+                    services.Configure<Predictalytics.Infrastructure.Configuration.EgressOptions>(options =>
+                    {
+                        options.Channels = egressOptions.Channels;
+                    });
+                }
                 services.AddWorkerServices();
             })
             .Build();
@@ -286,4 +333,33 @@ public class EmbeddedWebServer
         Log.Warning("wwwroot directory not found! Searched: {Paths}", string.Join(", ", candidates));
         return null;
     }
+
+    private Predictalytics.Infrastructure.Configuration.EgressOptions ParseEgressOptions(string text)
+    {
+        var options = new Predictalytics.Infrastructure.Configuration.EgressOptions();
+        if (string.IsNullOrWhiteSpace(text)) return options;
+
+        var lines = text.Split(new[] { '\r', '\n' }, StringSplitOptions.RemoveEmptyEntries);
+        foreach (var line in lines)
+        {
+            var parts = line.Split('|');
+            if (parts.Length >= 3)
+            {
+                var id = parts[0].Trim();
+                var typeStr = parts[1].Trim();
+                var val = parts[2].Trim();
+
+                if (Enum.TryParse<Predictalytics.Infrastructure.Configuration.EgressChannelType>(typeStr, true, out var type))
+                {
+                    options.Channels.Add(new Predictalytics.Infrastructure.Configuration.EgressChannelOptions
+                    {
+                        Id = id,
+                        Type = type,
+                        Value = val
+                    });
+                }
+            }
+        }
+        return options;
+    }
 }
diff --git a/src/Predictalytics.WinFormsHost/appsettings.json b/src/Predictalytics.WinFormsHost/appsettings.json
index 5a3b75a..6a8fd23 100644
--- a/src/Predictalytics.WinFormsHost/appsettings.json
+++ b/src/Predictalytics.WinFormsHost/appsettings.json
@@ -28,5 +28,14 @@
     "Azuro": {
       "EnableCrawling": false
     }
+  },
+  "Egress": {
+    "Channels": []
+  },
+  "ApiSettings": {
+    "CanControl": true,
+    "AuthRequired": false,
+    "AllowedOrigins": [ "http://localhost:5000" ],
+    "ReadOnlyDatabase": false
   }
 }
diff --git a/temp_new_design/.thumbnail b/temp_new_design/.thumbnail
new file mode 100644
index 0000000..ff3041e
Binary files /dev/null and b/temp_new_design/.thumbnail differ
diff --git a/temp_new_design/API Docs.dc.html b/temp_new_design/API Docs.dc.html
new file mode 100644
index 0000000..719d748
--- /dev/null
+++ b/temp_new_design/API Docs.dc.html	
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body { margin: 0; background: #0a0d14; font-family: 'Manrope', system-ui, sans-serif; }
+    * { box-sizing: border-box; }
+    a { color: #5b9dff; text-decoration: none; }
+    a:hover { color: #8ab8ff; }
+    ::-webkit-scrollbar { width: 8px; }
+    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
+    pre { margin: 0; }
+  </style>
+</helmet>
+
+<div style="position:relative; min-height:100vh; width:100%; background: radial-gradient(1100px 700px at 15% -10%, rgba(22,82,240,0.22), transparent 60%), #0a0d14; color:#EDEFF5;">
+
+  <header style="position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px 48px; backdrop-filter:blur(20px); background:rgba(10,13,20,0.6); border-bottom:1px solid rgba(255,255,255,0.07);">
+    <div style="display:flex; align-items:center; gap:10px;">
+      <div style="width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 0 20px rgba(22,82,240,0.6);"></div>
+      <div style="font-weight:800; font-size:17px; letter-spacing:-0.02em;">{{ brandName }}<span style="color:#5b9dff;">.</span></div>
+    </div>
+    <nav style="display:flex; align-items:center; gap:32px;">
+      <a href="./Landing.dc.html#features" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Features</a>
+      <a href="./Landing.dc.html#pricing" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Pricing</a>
+      <a href="./Landing.dc.html#faq" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">FAQ</a>
+      <div style="font-size:13.5px; font-weight:700; color:#5b9dff;">API Docs</div>
+    </nav>
+    <a href="./Landing.dc.html" style="padding:9px 20px; border-radius:10px; font-size:13.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff);">Get API key</a>
+  </header>
+
+  <div style="display:flex; max-width:1280px; margin:0 auto;">
+    <!-- SIDEBAR -->
+    <aside style="width:230px; flex:none; padding:36px 16px; position:sticky; top:68px; align-self:flex-start; height:calc(100vh - 68px); overflow-y:auto;">
+      <div style="font-size:11px; font-weight:700; color:#5B6377; letter-spacing:0.06em; padding:0 12px 8px;">GETTING STARTED</div>
+      <sc-for list="{{ sidebarTop }}" as="s" hint-placeholder-count="3">
+        <div onClick="{{ s.onClick }}" style="cursor:pointer; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:{{ s.color }}; background:{{ s.bg }}; margin-bottom:2px;">{{ s.label }}</div>
+      </sc-for>
+      <div style="font-size:11px; font-weight:700; color:#5B6377; letter-spacing:0.06em; padding:16px 12px 8px;">ENDPOINTS</div>
+      <sc-for list="{{ sidebarEndpoints }}" as="s" hint-placeholder-count="6">
+        <div onClick="{{ s.onClick }}" style="cursor:pointer; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px; font-size:13px; font-weight:600; color:{{ s.color }}; background:{{ s.bg }}; margin-bottom:2px;">
+          <span style="font-size:10px; font-weight:800; font-family:'Roboto Mono'; color:{{ s.methodColor }};">{{ s.method }}</span>
+          <span>{{ s.label }}</span>
+        </div>
+      </sc-for>
+    </aside>
+
+    <!-- CONTENT -->
+    <main style="flex:1; min-width:0; padding:36px 40px 100px;">
+      <h1 style="margin:0 0 10px; font-size:30px; font-weight:800; letter-spacing:-0.02em;">API Reference</h1>
+      <p style="margin:0 0 32px; color:#8B93A7; font-size:14.5px; max-width:640px; line-height:1.6;">Programmatic access to every trader and market metric in {{ brandName }}. All endpoints return JSON over HTTPS.</p>
+
+      <!-- Auth -->
+      <section style="margin-bottom:40px;">
+        <h2 style="font-size:19px; font-weight:800; margin:0 0 12px;">Authentication</h2>
+        <p style="color:#8B93A7; font-size:13.5px; line-height:1.7; margin:0 0 14px;">Pass your API key as a bearer token on every request. Keys are available from your account dashboard after signing up.</p>
+        <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:18px 20px; font-family:'Roboto Mono'; font-size:13px; color:#C7CCDA; overflow-x:auto;">
+<pre>curl https://api.predictalytics.io/v1/markets \
+  -H "Authorization: Bearer YOUR_API_KEY"</pre>
+        </div>
+      </section>
+
+      <!-- Rate limits -->
+      <section style="margin-bottom:40px;">
+        <h2 style="font-size:19px; font-weight:800; margin:0 0 12px;">Rate limits</h2>
+        <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:14px;">
+          <sc-for list="{{ rateLimits }}" as="r" hint-placeholder-count="3">
+            <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:16px 18px;">
+              <div style="font-size:12.5px; font-weight:700; color:#8B93A7; margin-bottom:6px;">{{ r.plan }}</div>
+              <div style="font-size:20px; font-weight:800; font-family:'Roboto Mono';">{{ r.limit }}</div>
+            </div>
+          </sc-for>
+        </div>
+      </section>
+
+      <!-- Endpoints -->
+      <sc-for list="{{ endpoints }}" as="ep" hint-placeholder-count="6">
+        <section id="{{ ep.id }}" style="margin-bottom:40px; scroll-margin-top:80px;">
+          <div style="display:flex; align-items:center; gap:12px; margin-bottom:10px;">
+            <span style="font-size:11px; font-weight:800; font-family:'Roboto Mono'; padding:4px 9px; border-radius:6px; background:{{ ep.methodBg }}; color:{{ ep.methodColor }};">{{ ep.method }}</span>
+            <span style="font-family:'Roboto Mono'; font-size:14.5px; font-weight:700; color:#EDEFF5;">{{ ep.path }}</span>
+          </div>
+          <p style="color:#8B93A7; font-size:13.5px; line-height:1.6; margin:0 0 14px;">{{ ep.desc }}</p>
+
+          <div style="display:grid; grid-template-columns:1fr 1fr; gap:14px;">
+            <div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:16px 18px;">
+              <div style="font-size:11px; font-weight:700; color:#5B6377; text-transform:uppercase; margin-bottom:10px;">Parameters</div>
+              <sc-for list="{{ ep.params }}" as="p" hint-placeholder-count="2">
+                <div style="display:flex; align-items:baseline; gap:8px; margin-bottom:8px; font-size:12.5px;">
+                  <span style="font-family:'Roboto Mono'; font-weight:700; color:#5b9dff;">{{ p.name }}</span>
+                  <span style="color:#5B6377; font-size:11.5px;">{{ p.type }}</span>
+                  <span style="color:#8B93A7;">{{ p.desc }}</span>
+                </div>
+              </sc-for>
+            </div>
+            <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:16px 18px; font-family:'Roboto Mono'; font-size:12px; color:#C7CCDA; overflow-x:auto;">
+              <pre>{{ ep.example }}</pre>
+            </div>
+          </div>
+        </section>
+      </sc-for>
+    </main>
+  </div>
+</div>
+
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;: {&quot;width&quot;: 1440}, &quot;brandName&quot;: {&quot;editor&quot;: &quot;text&quot;, &quot;default&quot;: &quot;Predictalytics&quot;, &quot;tsType&quot;: &quot;string&quot;}}">
+class Component extends DCLogic {
+  scrollTo(id) {
+    const el = document.getElementById(id);
+    if (el) el.scrollIntoView({ block: "start" });
+  }
+
+  renderVals() {
+    const brandName = this.props.brandName ?? "Predictalytics";
+
+    const endpoints = [
+      { id: "get-markets", method: "GET", path: "/v1/markets", methodBg: "rgba(18,212,138,0.14)", methodColor: "#12D48A",
+        desc: "List all markets with current price, volume, and liquidity.",
+        params: [{ name: "category", type: "string", desc: "Filter by category" }, { name: "status", type: "string", desc: "active | resolved" }],
+        example: `{\n  "id": "fed-sep-cut",\n  "question": "Fed cuts rates...",\n  "yesPrice": 71.4,\n  "volume24h": 2840000\n}` },
+      { id: "get-market", method: "GET", path: "/v1/markets/{id}", methodBg: "rgba(18,212,138,0.14)", methodColor: "#12D48A",
+        desc: "Get detailed data for a single market including order book and holders.",
+        params: [{ name: "id", type: "string", desc: "Market identifier" }],
+        example: `{\n  "orderBook": { "bids": [...], "asks": [...] },\n  "holders": [ { "trader": "0xA1...", "size": 420000 } ]\n}` },
+      { id: "get-traders", method: "GET", path: "/v1/traders", methodBg: "rgba(18,212,138,0.14)", methodColor: "#12D48A",
+        desc: "Search and list traders with P&L, win rate, and traits.",
+        params: [{ name: "trait", type: "string", desc: "Bot | Arbitrage Trader | Resolution Farming" }, { name: "sort", type: "string", desc: "pnl | volume" }],
+        example: `{\n  "handle": "quant_owl",\n  "traits": ["Arbitrage Trader"],\n  "winRate": 68.4\n}` },
+      { id: "get-trader", method: "GET", path: "/v1/traders/{id}", methodBg: "rgba(18,212,138,0.14)", methodColor: "#12D48A",
+        desc: "Get a trader's full position history and connected wallets.",
+        params: [{ name: "id", type: "string", desc: "Trader handle or wallet" }],
+        example: `{\n  "positions": [...],\n  "connectedWallets": ["0x88Ac...2f01"]\n}` },
+      { id: "post-alerts", method: "POST", path: "/v1/alerts", methodBg: "rgba(22,82,240,0.16)", methodColor: "#5b9dff",
+        desc: "Create an alert on a trader or market.",
+        params: [{ name: "target", type: "string", desc: "Trader or market id" }, { name: "condition", type: "string", desc: "price_move | new_position" }],
+        example: `{\n  "id": "alert_881",\n  "target": "arb_meridian",\n  "condition": "new_position"\n}` },
+      { id: "get-agent", method: "GET", path: "/v1/mcp/context", methodBg: "rgba(18,212,138,0.14)", methodColor: "#12D48A",
+        desc: "Enterprise only. MCP-compatible context feed for your own AI agent.",
+        params: [{ name: "scope", type: "string", desc: "markets | traders | both" }],
+        example: `{\n  "mcp_version": "1.0",\n  "resources": ["markets", "traders"]\n}` },
+    ];
+
+    const sidebarTop = [
+      { label: "Authentication", color: "#C7CCDA", bg: "transparent", onClick: () => this.scrollTo("auth") },
+      { label: "Rate limits", color: "#C7CCDA", bg: "transparent", onClick: () => this.scrollTo("rate-limits") },
+    ];
+    const sidebarEndpoints = endpoints.map((ep) => ({
+      label: ep.path, method: ep.method, methodColor: ep.methodColor, color: "#C7CCDA", bg: "transparent",
+      onClick: () => this.scrollTo(ep.id),
+    }));
+
+    const rateLimits = [
+      { plan: "Free", limit: "20 / day" },
+      { plan: "Basic", limit: "200 / day" },
+      { plan: "Enterprise", limit: "2,000 / day" },
+    ];
+
+    return { brandName, endpoints, sidebarTop, sidebarEndpoints, rateLimits };
+  }
+}
+
+</script>
+</body>
+</html>
diff --git a/temp_new_design/Landing.dc.html b/temp_new_design/Landing.dc.html
new file mode 100644
index 0000000..162484b
--- /dev/null
+++ b/temp_new_design/Landing.dc.html
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body { margin: 0; background: #0a0d14; font-family: 'Manrope', system-ui, sans-serif; }
+    * { box-sizing: border-box; }
+    a { color: #5b9dff; text-decoration: none; }
+    a:hover { color: #8ab8ff; }
+    ::-webkit-scrollbar { width: 8px; }
+    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
+  </style>
+</helmet>
+
+<div style="position:relative; min-height:100vh; width:100%; background: radial-gradient(1100px 700px at 15% -10%, rgba(22,82,240,0.28), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(18,212,138,0.10), transparent 55%), #0a0d14; color:#EDEFF5; overflow-x:hidden;">
+
+  <!-- NAV -->
+  <header style="position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px 48px; backdrop-filter:blur(20px); background:rgba(10,13,20,0.6); border-bottom:1px solid rgba(255,255,255,0.07);">
+    <div style="display:flex; align-items:center; gap:10px;">
+      <div style="width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 0 20px rgba(22,82,240,0.6);"></div>
+      <div style="font-weight:800; font-size:17px; letter-spacing:-0.02em;">{{ brandName }}<span style="color:#5b9dff;">.</span></div>
+    </div>
+    <nav style="display:flex; align-items:center; gap:32px;">
+      <a href="#features" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Features</a>
+      <a href="#pricing" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Pricing</a>
+      <a href="#faq" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">FAQ</a>
+      <a href="./API Docs.dc.html" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">API Docs</a>
+    </nav>
+    <div style="display:flex; align-items:center; gap:10px;">
+      <div onClick="{{ openLogin }}" style="cursor:pointer; padding:9px 18px; border-radius:10px; font-size:13.5px; font-weight:700; color:#EDEFF5;">Log in</div>
+      <div onClick="{{ openRegister }}" style="cursor:pointer; padding:9px 20px; border-radius:10px; font-size:13.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 4px 20px rgba(22,82,240,0.4);">Sign up</div>
+    </div>
+  </header>
+
+  <!-- HERO -->
+  <section style="padding:100px 48px 80px; max-width:1080px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px;">
+    <div style="padding:6px 14px; border-radius:20px; background:rgba(22,82,240,0.12); border:1px solid rgba(22,82,240,0.3); font-size:12.5px; font-weight:700; color:#5b9dff;">Live on-chain analytics · Polymarket &amp; beyond</div>
+    <h1 style="margin:0; font-size:52px; font-weight:800; letter-spacing:-0.03em; line-height:1.08; max-width:760px;">See every trader and market before the crowd does</h1>
+    <p style="margin:0; font-size:17px; color:#8B93A7; max-width:600px; line-height:1.6;">Deep trader profiling, wallet clustering, and real-time market analytics for professional prediction market traders.</p>
+    <div style="display:flex; gap:14px; margin-top:8px;">
+      <div onClick="{{ openRegister }}" style="cursor:pointer; padding:14px 26px; border-radius:12px; font-size:14.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 30px rgba(22,82,240,0.4);">Start free</div>
+      <a href="#features" style="padding:14px 26px; border-radius:12px; font-size:14.5px; font-weight:700; color:#EDEFF5; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.04); white-space:nowrap;">See features</a>
+    </div>
+
+    <!-- product preview mock -->
+    <div style="margin-top:40px; width:100%; border-radius:20px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(24px); box-shadow:0 20px 60px rgba(0,0,0,0.4); padding:20px; display:grid; grid-template-columns:1.4fr 1fr; gap:14px; text-align:left;">
+      <div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:18px;">
+        <div style="font-size:12px; font-weight:700; color:#8B93A7; margin-bottom:10px;">Yes Price History</div>
+        <svg viewBox="0 0 500 140" style="width:100%; height:140px;">
+          <defs>
+            <linearGradient id="hfill" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#12D48A" stop-opacity="0.35"/>
+              <stop offset="100%" stop-color="#12D48A" stop-opacity="0"/>
+            </linearGradient>
+          </defs>
+          <path d="{{ heroArea }}" fill="url(#hfill)" stroke="none"></path>
+          <path d="{{ heroLine }}" fill="none" stroke="#12D48A" stroke-width="2.5"></path>
+        </svg>
+      </div>
+      <div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:18px; display:flex; flex-direction:column; gap:10px;">
+        <div style="font-size:12px; font-weight:700; color:#8B93A7;">Top Traders</div>
+        <sc-for list="{{ heroTraders }}" as="t" hint-placeholder-count="3">
+          <div style="display:flex; align-items:center; gap:10px;">
+            <div style="width:24px; height:24px; border-radius:7px; background:{{ t.bg }};"></div>
+            <div style="font-size:12.5px; font-weight:700; flex:1;">{{ t.handle }}</div>
+            <div style="font-size:12px; font-family:'Roboto Mono'; font-weight:700; color:#12D48A;">{{ t.pnl }}</div>
+          </div>
+        </sc-for>
+      </div>
+    </div>
+  </section>
+
+  <!-- FEATURES -->
+  <section id="features" style="padding:80px 48px; max-width:1200px; margin:0 auto;">
+    <div style="text-align:center; margin-bottom:48px;">
+      <div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">FEATURES</div>
+      <h2 style="margin:0 0 12px; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Everything you need to read the market</h2>
+      <p style="margin:0; color:#8B93A7; font-size:15px;">Built for quants who need signal, not noise.</p>
+    </div>
+    <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:18px;">
+      <sc-for list="{{ features }}" as="f" hint-placeholder-count="6">
+        <div style="padding:26px; border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px);">
+          <div style="width:42px; height:42px; border-radius:12px; background:{{ f.iconBg }}; margin-bottom:16px; display:flex; align-items:center; justify-content:center;">
+            <div style="width:16px; height:16px; border-radius:5px; background:{{ f.dotColor }};"></div>
+          </div>
+          <div style="font-size:16px; font-weight:700; margin-bottom:8px;">{{ f.title }}</div>
+          <div style="font-size:13.5px; color:#8B93A7; line-height:1.6;">{{ f.desc }}</div>
+        </div>
+      </sc-for>
+    </div>
+  </section>
+
+  <!-- PRICING -->
+  <section id="pricing" style="padding:80px 48px; max-width:1160px; margin:0 auto;">
+    <div style="text-align:center; margin-bottom:48px;">
+      <div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">PRICING</div>
+      <h2 style="margin:0 0 12px; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Simple, usage-based plans</h2>
+      <p style="margin:0; color:#8B93A7; font-size:15px;">Upgrade any time as your call volume grows.</p>
+    </div>
+    <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;">
+      <sc-for list="{{ plans }}" as="p" hint-placeholder-count="3">
+        <div style="{{ p.cardStyle }}">
+          <sc-if value="{{ p.featured }}" hint-placeholder-val="{{ false }}">
+            <div style="position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:5px 14px; border-radius:20px; background:linear-gradient(135deg,#1652F0,#4c8dff); font-size:11px; font-weight:800; letter-spacing:0.04em;">MOST POPULAR</div>
+          </sc-if>
+          <div style="font-size:15px; font-weight:700; margin-bottom:6px;">{{ p.name }}</div>
+          <div style="display:flex; align-items:baseline; gap:4px; margin-bottom:18px;">
+            <div style="font-size:36px; font-weight:800; font-family:'Roboto Mono'; letter-spacing:-0.02em;">{{ p.price }}</div>
+            <div style="font-size:13px; color:#8B93A7;">{{ p.period }}</div>
+          </div>
+          <div style="display:flex; flex-direction:column; gap:10px; margin-bottom:22px;">
+            <sc-for list="{{ p.items }}" as="item" hint-placeholder-count="4">
+              <div style="display:flex; align-items:center; gap:9px; font-size:13.5px; color:#C7CCDA;">
+                <div style="width:6px; height:6px; border-radius:50%; background:#12D48A; flex:none;"></div>
+                <span>{{ item }}</span>
+              </div>
+            </sc-for>
+          </div>
+          <div onClick="{{ openRegister }}" style="{{ p.btnStyle }}">{{ p.btnLabel }}</div>
+        </div>
+      </sc-for>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section id="faq" style="padding:80px 48px 100px; max-width:820px; margin:0 auto;">
+    <div style="text-align:center; margin-bottom:44px;">
+      <div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">FAQ</div>
+      <h2 style="margin:0; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Common questions</h2>
+    </div>
+    <div style="display:flex; flex-direction:column; gap:10px;">
+      <sc-for list="{{ faqs }}" as="q" hint-placeholder-count="6">
+        <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); overflow:hidden;">
+          <div onClick="{{ q.onToggle }}" style="cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;">
+            <div style="font-size:14.5px; font-weight:700;">{{ q.question }}</div>
+            <div style="flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#5b9dff; transform:{{ q.iconTransform }};">+</div>
+          </div>
+          <sc-if value="{{ q.open }}" hint-placeholder-val="{{ false }}">
+            <div style="padding:0 22px 18px; font-size:13.5px; color:#8B93A7; line-height:1.7;">{{ q.answer }}</div>
+          </sc-if>
+        </div>
+      </sc-for>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer style="padding:32px 48px; border-top:1px solid rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:space-between; color:#5B6377; font-size:12.5px;">
+    <div>© 2026 {{ brandName }}. All rights reserved.</div>
+    <div style="display:flex; gap:20px;">
+      <a href="./API Docs.dc.html" style="color:#5B6377;">API Docs</a>
+      <a href="#faq" style="color:#5B6377;">FAQ</a>
+      <a href="#pricing" style="color:#5B6377;">Pricing</a>
+    </div>
+  </footer>
+
+  <!-- AUTH MODAL -->
+  <sc-if value="{{ authOpen }}" hint-placeholder-val="{{ false }}">
+    <div onClick="{{ closeAuth }}" style="position:fixed; inset:0; z-index:100; background:rgba(6,8,13,0.7); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;">
+      <div onClick="{{ stopProp }}" style="width:400px; max-width:92vw; border-radius:20px; background:rgba(16,20,29,0.9); border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(30px); box-shadow:0 30px 80px rgba(0,0,0,0.5); padding:32px;">
+        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
+          <div style="font-size:19px; font-weight:800;">{{ authTitle }}</div>
+          <div onClick="{{ closeAuth }}" style="cursor:pointer; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:14px; color:#8B93A7;">✕</div>
+        </div>
+        <div style="display:flex; flex-direction:column; gap:14px;">
+          <sc-if value="{{ isRegisterMode }}" hint-placeholder-val="{{ false }}">
+            <div style="display:flex; flex-direction:column; gap:6px;">
+              <label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Full name</label>
+              <input placeholder="Jane Trader" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
+            </div>
+          </sc-if>
+          <div style="display:flex; flex-direction:column; gap:6px;">
+            <label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Email</label>
+            <input placeholder="you@domain.com" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
+          </div>
+          <div style="display:flex; flex-direction:column; gap:6px;">
+            <label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Password</label>
+            <input type="password" placeholder="••••••••" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
+          </div>
+          <div style="margin-top:6px; padding:13px; border-radius:11px; text-align:center; font-size:14px; font-weight:700; cursor:pointer; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 24px rgba(22,82,240,0.4);">{{ authSubmitLabel }}</div>
+          <div style="text-align:center; font-size:12.5px; color:#8B93A7; margin-top:4px;">
+            {{ authSwitchPrompt }} <span onClick="{{ switchAuthMode }}" style="color:#5b9dff; font-weight:700; cursor:pointer;">{{ authSwitchAction }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </sc-if>
+
+</div>
+
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;: {&quot;width&quot;: 1440}, &quot;brandName&quot;: {&quot;editor&quot;: &quot;text&quot;, &quot;default&quot;: &quot;Predictalytics&quot;, &quot;tsType&quot;: &quot;string&quot;}}">
+class Component extends DCLogic {
+  state = {
+    authOpen: false,
+    authMode: "login",
+    openFaq: 0,
+  };
+
+  openLogin = () => this.setState({ authOpen: true, authMode: "login" });
+  openRegister = () => this.setState({ authOpen: true, authMode: "register" });
+  closeAuth = () => this.setState({ authOpen: false });
+  switchAuthMode = () => this.setState((s) => ({ authMode: s.authMode === "login" ? "register" : "login" }));
+  stopProp = (e) => e.stopPropagation();
+  toggleFaq = (i) => this.setState((s) => ({ openFaq: s.openFaq === i ? -1 : i }));
+
+  buildPath(series, w, h, pad) {
+    const min = Math.min(...series);
+    const max = Math.max(...series);
+    const range = max - min || 1;
+    const innerW = w - pad * 2;
+    const innerH = h - pad * 2;
+    const pts = series.map((v, i) => {
+      const x = pad + (i / (series.length - 1)) * innerW;
+      const y = pad + innerH - ((v - min) / range) * innerH;
+      return [x, y];
+    });
+    let line = "M" + pts[0][0].toFixed(1) + "," + pts[0][1].toFixed(1);
+    for (let i = 1; i < pts.length; i++) line += " L" + pts[i][0].toFixed(1) + "," + pts[i][1].toFixed(1);
+    const area = line + ` L${pts[pts.length - 1][0].toFixed(1)},${h - pad} L${pts[0][0].toFixed(1)},${h - pad} Z`;
+    return { line, area };
+  }
+
+  renderVals() {
+    const brandName = this.props.brandName ?? "Predictalytics";
+    const heroSeries = [40, 44, 41, 48, 52, 50, 58, 55, 62, 66, 63, 70, 68, 74, 71.4];
+    const { line, area } = this.buildPath(heroSeries, 500, 140, 8);
+
+    const features = [
+      { title: "Trader Tracking", desc: "Follow any wallet's full position history, P&L, and behavior patterns across every market.", iconBg: "rgba(22,82,240,0.14)", dotColor: "#5b9dff" },
+      { title: "Wallet Clustering", desc: "Detect connected wallets and coordinated accounts behind a single trading strategy.", iconBg: "rgba(124,92,255,0.14)", dotColor: "#7c5cff" },
+      { title: "Market Analysis", desc: "Order book depth, liquidity, and holder concentration for every active market.", iconBg: "rgba(18,212,138,0.14)", dotColor: "#12D48A" },
+      { title: "Custom Alerts", desc: "Get notified the moment a tracked trader opens a position or a market shifts sharply.", iconBg: "rgba(255,157,76,0.14)", dotColor: "#ff9d4c" },
+      { title: "Trader Traits", desc: "Automatic tagging — arbitrage traders, resolution farmers, bots — at a glance.", iconBg: "rgba(246,70,93,0.14)", dotColor: "#F6465D" },
+      { title: "API Access", desc: "Pull every metric programmatically into your own models and dashboards.", iconBg: "rgba(22,82,240,0.14)", dotColor: "#5b9dff" },
+    ];
+
+    const baseCard = "position:relative; padding:30px 26px; border-radius:20px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); display:flex; flex-direction:column;";
+    const featuredCard = "position:relative; padding:30px 26px; border-radius:20px; background:rgba(22,82,240,0.08); border:1px solid rgba(22,82,240,0.35); backdrop-filter:blur(24px); display:flex; flex-direction:column; box-shadow:0 20px 50px rgba(22,82,240,0.2);";
+    const btnPrimary = "cursor:pointer; padding:12px; border-radius:11px; text-align:center; font-size:13.5px; font-weight:700; margin-top:auto; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 24px rgba(22,82,240,0.4);";
+    const btnSecondary = "cursor:pointer; padding:12px; border-radius:11px; text-align:center; font-size:13.5px; font-weight:700; margin-top:auto; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#EDEFF5;";
+
+    const plans = [
+      { name: "Free", price: "$0", period: "/ month", featured: false, cardStyle: baseCard, btnStyle: btnSecondary, btnLabel: "Get started",
+        items: ["20 API calls / day", "Restricted web access", "Market overview only", "Community support"] },
+      { name: "Pro", price: "$99", period: "/ month", featured: true, cardStyle: featuredCard, btnStyle: btnPrimary, btnLabel: "Start Pro",
+        items: ["2,000 API calls / day", "Enhanced AI trader analytics", "MCP access for your AI agent", "Priority support"] },
+      { name: "Enterprise", price: "Contact us", period: "", featured: false, cardStyle: baseCard, btnStyle: btnSecondary, btnLabel: "Contact sales",
+        items: ["10,000+ API calls / day", "Ready to use AI analytics with your individual prompts", "MCP access for your AI agent", "Priority support"] },
+    ];
+
+    const faqDefs = [
+      { q: "What data sources power your analytics?", a: "We index on-chain activity directly from Polymarket and related prediction market contracts in real time, plus supplementary off-chain resolution data." },
+      { q: "How do you identify traders as bots or arbitrageurs?", a: "We apply behavioral heuristics — trade timing, position sizing, cross-market correlation — to automatically tag wallets with traits like Bot, Arbitrage Trader, or Resolution Farming." },
+      { q: "Can I track a specific wallet or trader?", a: "Yes. Search any wallet address or handle to pull up its full position history, P&L, and connected wallets." },
+      { q: "What's included in the API?", a: "Market and trader endpoints covering prices, order books, holders, and trader metrics. Call limits scale with your plan, from 20 to 2,000 requests per day." },
+      { q: "Do you support alerts?", a: "Yes, set alerts on tracked traders or markets and get notified the moment a position opens or a price moves sharply." },
+      { q: "Can I cancel or change my plan anytime?", a: "Yes, upgrade, downgrade, or cancel at any time from your account settings — changes apply at the next billing cycle." },
+    ];
+    const faqs = faqDefs.map((f, i) => ({
+      question: f.q,
+      answer: f.a,
+      open: this.state.openFaq === i,
+      iconTransform: this.state.openFaq === i ? "rotate(45deg)" : "rotate(0deg)",
+      onToggle: () => this.toggleFaq(i),
+    }));
+
+    const heroTraders = [
+      { handle: "quant_owl", pnl: "+$216K", bg: "linear-gradient(135deg,#1652F0,#4c8dff)" },
+      { handle: "arb_meridian", pnl: "+$454K", bg: "linear-gradient(135deg,#12D48A,#0a8f5f)" },
+      { handle: "resolvr", pnl: "+$105K", bg: "linear-gradient(135deg,#7c5cff,#4c8dff)" },
+    ];
+
+    return {
+      brandName,
+      heroLine: line,
+      heroArea: area,
+      heroTraders,
+      features,
+      plans,
+      faqs,
+      authOpen: this.state.authOpen,
+      isRegisterMode: this.state.authMode === "register",
+      authTitle: this.state.authMode === "login" ? "Log in" : "Create your account",
+      authSubmitLabel: this.state.authMode === "login" ? "Log in" : "Create account",
+      authSwitchPrompt: this.state.authMode === "login" ? "Don't have an account?" : "Already have an account?",
+      authSwitchAction: this.state.authMode === "login" ? "Sign up" : "Log in",
+      openLogin: this.openLogin,
+      openRegister: this.openRegister,
+      closeAuth: this.closeAuth,
+      switchAuthMode: this.switchAuthMode,
+      stopProp: this.stopProp,
+    };
+  }
+}
+
+</script>
+</body>
+</html>
diff --git a/temp_new_design/Prediction Analytics.dc.html b/temp_new_design/Prediction Analytics.dc.html
new file mode 100644
index 0000000..e2d72db
--- /dev/null
+++ b/temp_new_design/Prediction Analytics.dc.html	
@@ -0,0 +1,875 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body { margin: 0; background: #0a0d14; font-family: 'Manrope', system-ui, sans-serif; overflow-x: auto; }
+    * { box-sizing: border-box; }
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    a { color: #5b9dff; text-decoration: none; }
+    a:hover { color: #8ab8ff; }
+    table { border-collapse: collapse; }
+    .dual-range { -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; margin: 0; position: absolute; top: 0; left: 0; width: 100%; height: 20px; }
+    .dual-range::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: #5b9dff; border: 2px solid #0a0d14; cursor: pointer; box-shadow: 0 0 6px rgba(91,157,255,0.7); margin-top: 0; }
+    .dual-range::-moz-range-thumb { pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: #5b9dff; border: 2px solid #0a0d14; cursor: pointer; box-shadow: 0 0 6px rgba(91,157,255,0.7); }
+    .dual-range::-webkit-slider-runnable-track { background: transparent; }
+    .dual-range::-moz-range-track { background: transparent; }
+  </style>
+</helmet>
+
+<div style="position:relative; min-height:100vh; min-width:1440px; width:100%; background: radial-gradient(1100px 700px at 15% -10%, rgba(22,82,240,0.28), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(18,212,138,0.10), transparent 55%), #0a0d14; color:#EDEFF5;">
+
+  <!-- decorative glow layer -->
+  <div style="position:fixed; inset:0; pointer-events:none; background: radial-gradient(600px 400px at 80% 85%, rgba(76,141,255,0.10), transparent 60%); z-index:0;"></div>
+
+  <div style="position:relative; z-index:1; display:flex; min-height:100vh;">
+
+    <!-- SIDEBAR -->
+    <aside style="width:236px; flex:none; padding:24px 16px; display:flex; flex-direction:column; gap:28px; border-right:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.015);">
+      <div style="display:flex; align-items:center; gap:10px; padding:4px 8px;">
+        <div style="width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 0 20px rgba(22,82,240,0.6);"></div>
+        <div style="font-weight:800; font-size:17px; letter-spacing:-0.02em;">Lucid<span style="color:#5b9dff;">.</span></div>
+      </div>
+
+      <nav style="display:flex; flex-direction:column; gap:2px;">
+        <div style="font:600 10px/1 'Manrope'; letter-spacing:0.08em; color:#5B6377; padding:0 12px 8px;">NAVIGATION</div>
+        <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="4">
+          <div onClick="{{ item.onClick }}" style="{{ item.style }}">
+            <div style="{{ item.dotStyle }}"></div>
+            <span>{{ item.label }}</span>
+          </div>
+        </sc-for>
+      </nav>
+
+      <div style="margin-top:auto; display:flex; flex-direction:column; gap:10px;">
+        <div style="padding:14px; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(20px);">
+          <div style="font-size:11px; color:#8B93A7; margin-bottom:6px;">Data feed</div>
+          <div style="display:flex; align-items:center; gap:7px;">
+            <div style="width:7px; height:7px; border-radius:50%; background:#12D48A; box-shadow:0 0 8px #12D48A;"></div>
+            <div style="font-size:12.5px; font-weight:600;">Live · on-chain</div>
+          </div>
+        </div>
+        <div style="display:flex; align-items:center; gap:10px; padding:8px 10px;">
+          <div style="width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#2a2f3d,#1a1e28); border:1px solid rgba(255,255,255,0.1);"></div>
+          <div>
+            <div style="font-size:12.5px; font-weight:700;">Analyst</div>
+            <div style="font-size:11px; color:#5B6377;">Pro workspace</div>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <!-- MAIN -->
+    <main style="flex:1; min-width:0; padding:22px 32px 60px;">
+
+      <!-- TOPBAR -->
+      <div style="display:flex; align-items:center; gap:16px; margin-bottom:22px;">
+        <div style="flex:1; position:relative; max-width:420px;">
+          <input placeholder="Search markets, traders, wallets…" style="width:100%; padding:11px 14px 11px 38px; border-radius:11px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); color:#EDEFF5; font-size:13px; font-family:'Manrope'; outline:none;" />
+          <div style="position:absolute; left:13px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; border:2px solid #5B6377;"></div>
+        </div>
+        <div style="margin-left:auto; display:flex; align-items:center; gap:10px;">
+          <div style="padding:8px 14px; border-radius:10px; background:rgba(18,212,138,0.10); border:1px solid rgba(18,212,138,0.25); font-size:12px; font-weight:700; color:#12D48A; font-family:'Roboto Mono';">24H VOL {{ headerVolume }}</div>
+          <div style="width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center;">
+            <div style="width:8px; height:8px; border-radius:50%; background:#F6465D;"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- breadcrumb -->
+      <div style="display:flex; align-items:center; gap:8px; font-size:12.5px; margin-bottom:18px; font-weight:600;">
+        <sc-for list="{{ breadcrumbItems }}" as="crumb" hint-placeholder-count="1">
+          <span onClick="{{ crumb.onClick }}" style="{{ crumb.style }}">{{ crumb.label }}</span>
+          <sc-if value="{{ crumb.sep }}" hint-placeholder-val="{{ false }}">
+            <span style="color:#3a4152;">›</span>
+          </sc-if>
+        </sc-for>
+      </div>
+
+      <sc-if value="{{ isOverview }}" hint-placeholder-val="{{ true }}">
+        <!-- ================= OVERVIEW ================= -->
+        <div>
+          <div style="display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px;">
+            <div>
+              <h1 style="margin:0 0 4px; font-size:26px; font-weight:800; letter-spacing:-0.02em;">Markets Overview</h1>
+              <div style="font-size:13px; color:#8B93A7;">Real-time analytics across all active prediction markets</div>
+            </div>
+          </div>
+
+          <!-- stat cards -->
+          <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px;">
+            <sc-for list="{{ globalStats }}" as="stat" hint-placeholder-count="4">
+              <div style="padding:18px 20px; border-radius:16px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(24px); box-shadow:0 8px 30px rgba(0,0,0,0.25);">
+                <div style="font-size:12px; color:#8B93A7; font-weight:600; margin-bottom:10px;">{{ stat.label }}</div>
+                <div style="font-size:24px; font-weight:800; font-family:'Roboto Mono'; letter-spacing:-0.02em;">{{ stat.value }}</div>
+                <div style="font-size:12px; font-weight:700; margin-top:6px; font-family:'Roboto Mono'; color:{{ stat.deltaColor }};">{{ stat.delta }}</div>
+              </div>
+            </sc-for>
+          </div>
+
+          <div style="display:grid; grid-template-columns:1.7fr 1fr; gap:16px; align-items:start;">
+            <!-- markets table -->
+            <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
+              <div style="padding:18px 22px 14px; font-size:15px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06);">All Markets</div>
+              <table style="width:100%; font-size:13px;">
+                <thead>
+                  <tr style="color:#5B6377; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;">
+                    <td style="padding:10px 22px;">Market</td>
+                    <td style="padding:10px 10px; text-align:right;">Yes %</td>
+                    <td style="padding:10px 10px; text-align:right;">24h</td>
+                    <td style="padding:10px 10px; text-align:right;">Volume</td>
+                    <td style="padding:10px 22px; text-align:right;">Traders</td>
+                  </tr>
+                </thead>
+                <tbody>
+                  <sc-for list="{{ marketRows }}" as="m" hint-placeholder-count="6">
+                    <tr onClick="{{ m.onClick }}" style="cursor:pointer; border-top:1px solid rgba(255,255,255,0.05);" style-hover="background:rgba(255,255,255,0.03);">
+                      <td style="padding:13px 22px;">
+                        <div style="font-weight:700; font-size:13.5px; margin-bottom:3px;">{{ m.question }}</div>
+                        <div style="font-size:11.5px; color:#5B6377;">{{ m.category }} · {{ m.statusLabel }}</div>
+                      </td>
+                      <td style="padding:13px 10px; text-align:right; font-family:'Roboto Mono'; font-weight:700;">{{ m.yesPriceLabel }}</td>
+                      <td style="padding:13px 10px; text-align:right; font-family:'Roboto Mono'; font-weight:700; color:{{ m.changeColor }};">{{ m.changeLabel }}</td>
+                      <td style="padding:13px 10px; text-align:right; font-family:'Roboto Mono'; color:#C7CCDA;">{{ m.volumeLabel }}</td>
+                      <td style="padding:13px 22px; text-align:right; font-family:'Roboto Mono'; color:#8B93A7;">{{ m.tradersLabel }}</td>
+                    </tr>
+                  </sc-for>
+                </tbody>
+              </table>
+            </div>
+
+            <!-- leaderboard -->
+            <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
+              <div style="padding:18px 22px 14px; font-size:15px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06);">Top Traders</div>
+              <div style="display:flex; flex-direction:column;">
+                <sc-for list="{{ leaderboard }}" as="t" hint-placeholder-count="6">
+                  <div onClick="{{ t.onClick }}" style="cursor:pointer; display:flex; align-items:center; gap:12px; padding:12px 22px; border-top:1px solid rgba(255,255,255,0.05);" style-hover="background:rgba(255,255,255,0.03);">
+                    <div style="width:30px; height:30px; border-radius:9px; flex:none; background:{{ t.avatarBg }}; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;">{{ t.initial }}</div>
+                    <div style="min-width:0; flex:1;">
+                      <div style="font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ t.handle }}</div>
+                      <div style="font-size:11px; color:#5B6377;">{{ t.trait }}</div>
+                    </div>
+                    <div style="text-align:right; flex:none;">
+                      <div style="font-family:'Roboto Mono'; font-weight:700; font-size:13px; color:#12D48A;">{{ t.pnlLabel }}</div>
+                      <div style="font-size:10.5px; color:#5B6377;">P&amp;L</div>
+                    </div>
+                  </div>
+                </sc-for>
+              </div>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+
+      <sc-if value="{{ isMarket }}" hint-placeholder-val="{{ false }}">
+        <!-- ================= MARKET DETAIL ================= -->
+        <div>
+          <div style="display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:20px;">
+            <div>
+              <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
+                <div style="font-size:11px; font-weight:700; padding:4px 10px; border-radius:7px; background:rgba(22,82,240,0.14); border:1px solid rgba(22,82,240,0.3); color:#5b9dff;">{{ marketDetail.category }}</div>
+                <div style="font-size:11px; font-weight:700; padding:4px 10px; border-radius:7px; background:{{ marketDetail.statusBg }}; color:{{ marketDetail.statusColor }};">{{ marketDetail.status }}</div>
+              </div>
+              <h1 style="margin:0 0 6px; font-size:24px; font-weight:800; letter-spacing:-0.02em; max-width:640px;">{{ marketDetail.question }}</h1>
+              <div style="font-size:12.5px; color:#8B93A7;">Resolves {{ marketDetail.resolves }}</div>
+            </div>
+            <div style="text-align:right; flex:none;">
+              <div style="font-size:34px; font-weight:800; font-family:'Roboto Mono'; color:#12D48A;">{{ marketDetail.yesPriceBig }}</div>
+              <div style="font-size:12px; color:#8B93A7; font-weight:600;">YES probability</div>
+            </div>
+          </div>
+
+          <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px;">
+            <sc-for list="{{ marketStats }}" as="stat" hint-placeholder-count="4">
+              <div style="padding:16px 18px; border-radius:14px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(24px);">
+                <div style="font-size:11.5px; color:#8B93A7; font-weight:600; margin-bottom:8px;">{{ stat.label }}</div>
+                <div style="font-size:19px; font-weight:800; font-family:'Roboto Mono';">{{ stat.value }}</div>
+              </div>
+            </sc-for>
+          </div>
+
+          <div style="display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:16px; align-items:start;">
+            <!-- price chart -->
+            <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); padding:20px 22px;">
+              <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
+                <div style="font-size:14px; font-weight:700;">Yes Price History</div>
+                <div style="display:flex; gap:6px;">
+                  <div style="font-size:11px; padding:5px 10px; border-radius:7px; background:rgba(22,82,240,0.18); color:#5b9dff; font-weight:700;">30D</div>
+                </div>
+              </div>
+              <svg viewBox="0 0 600 220" style="width:100%; height:220px; overflow:visible;">
+                <defs>
+                  <linearGradient id="fillGrad" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="#12D48A" stop-opacity="0.35"/>
+                    <stop offset="100%" stop-color="#12D48A" stop-opacity="0"/>
+                  </linearGradient>
+                  <filter id="glow"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
+                </defs>
+                <path d="{{ marketDetail.areaPath }}" fill="url(#fillGrad)" stroke="none"></path>
+                <path d="{{ marketDetail.linePath }}" fill="none" stroke="#12D48A" stroke-width="2.5" filter="url(#glow)"></path>
+              </svg>
+            </div>
+
+            <!-- order book -->
+            <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); padding:18px 20px;">
+              <div style="font-size:14px; font-weight:700; margin-bottom:12px;">Order Book Depth</div>
+              <div style="font-size:10.5px; color:#5B6377; font-weight:700; text-transform:uppercase; margin-bottom:6px;">Asks</div>
+              <sc-for list="{{ marketDetail.asks }}" as="row" hint-placeholder-count="5">
+                <div style="position:relative; margin-bottom:3px; height:20px;">
+                  <div style="position:absolute; right:0; top:0; bottom:0; width:{{ row.barWidth }}; background:rgba(246,70,93,0.16); border-radius:4px;"></div>
+                  <div style="position:relative; display:flex; justify-content:space-between; padding:0 8px; font-size:11.5px; font-family:'Roboto Mono'; line-height:20px;">
+                    <span style="color:#F6465D; font-weight:700;">{{ row.priceLabel }}</span>
+                    <span style="color:#8B93A7;">{{ row.sizeLabel }}</span>
+                  </div>
+                </div>
+              </sc-for>
+              <div style="height:1px; background:rgba(255,255,255,0.08); margin:8px 0;"></div>
+              <div style="font-size:10.5px; color:#5B6377; font-weight:700; text-transform:uppercase; margin-bottom:6px;">Bids</div>
+              <sc-for list="{{ marketDetail.bids }}" as="row" hint-placeholder-count="5">
+                <div style="position:relative; margin-bottom:3px; height:20px;">
+                  <div style="position:absolute; right:0; top:0; bottom:0; width:{{ row.barWidth }}; background:rgba(18,212,138,0.16); border-radius:4px;"></div>
+                  <div style="position:relative; display:flex; justify-content:space-between; padding:0 8px; font-size:11.5px; font-family:'Roboto Mono'; line-height:20px;">
+                    <span style="color:#12D48A; font-weight:700;">{{ row.priceLabel }}</span>
+                    <span style="color:#8B93A7;">{{ row.sizeLabel }}</span>
+                  </div>
+                </div>
+              </sc-for>
+            </div>
+          </div>
+
+          <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
+            <!-- biggest holders -->
+            <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
+              <div style="padding:16px 20px 12px; font-size:14px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06);">Biggest Holders</div>
+              <table style="width:100%; font-size:12.5px;">
+                <tbody>
+                  <sc-for list="{{ marketDetail.holders }}" as="h" hint-placeholder-count="5">
+                    <tr onClick="{{ h.onClick }}" style="cursor:pointer; border-top:1px solid rgba(255,255,255,0.05);" style-hover="background:rgba(255,255,255,0.03);">
+                      <td style="padding:11px 20px; font-family:'Roboto Mono'; font-weight:700;">{{ h.trader }}</td>
+                      <td style="padding:11px 6px; text-align:center;"><span style="padding:3px 9px; border-radius:6px; font-size:11px; font-weight:700; background:{{ h.sideBg }}; color:{{ h.sideColor }};">{{ h.side }}</span></td>
+                      <td style="padding:11px 20px; text-align:right; font-family:'Roboto Mono'; color:#C7CCDA;">{{ h.valueLabel }}</td>
+                    </tr>
+                  </sc-for>
+                </tbody>
+              </table>
+            </div>
+
+            <!-- top traders in market -->
+            <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
+              <div style="padding:16px 20px 12px; font-size:14px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06);">Top Traders Here</div>
+              <div style="display:flex; flex-direction:column;">
+                <sc-for list="{{ marketDetail.topTraders }}" as="t" hint-placeholder-count="4">
+                  <div onClick="{{ t.onClick }}" style="cursor:pointer; display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid rgba(255,255,255,0.05);" style-hover="background:rgba(255,255,255,0.03);">
+                    <div style="width:28px; height:28px; border-radius:8px; flex:none; background:{{ t.avatarBg }}; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;">{{ t.initial }}</div>
+                    <div style="font-weight:700; font-size:13px; flex:1;">{{ t.handle }}</div>
+                    <div style="font-size:11px; color:#8B93A7;">{{ t.trait }}</div>
+                  </div>
+                </sc-for>
+              </div>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+
+      <sc-if value="{{ isTraderSearch }}" hint-placeholder-val="{{ false }}">
+        <!-- ================= TRADER SEARCH ================= -->
+        <div>
+          <div style="margin-bottom:20px;">
+            <h1 style="margin:0 0 4px; font-size:26px; font-weight:800; letter-spacing:-0.02em;">Trader Search</h1>
+            <div style="font-size:13px; color:#8B93A7;">Filter by traits and metric ranges to find the traders you care about</div>
+          </div>
+
+          <div style="display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start;">
+            <!-- filter panel -->
+            <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); padding:20px; display:flex; flex-direction:column; gap:22px; position:sticky; top:22px;">
+              <div>
+                <input value="{{ searchText }}" onChange="{{ onSearchTextChange }}" placeholder="Handle or wallet…" style="width:100%; padding:10px 13px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13px; font-family:'Manrope'; outline:none;" />
+              </div>
+
+              <div>
+                <div style="font-size:12px; font-weight:700; color:#C7CCDA; margin-bottom:10px;">Traits</div>
+                <div style="display:flex; flex-wrap:wrap; gap:7px;">
+                  <sc-for list="{{ traitFilterChips }}" as="chip" hint-placeholder-count="5">
+                    <div onClick="{{ chip.onClick }}" style="{{ chip.style }}">{{ chip.label }}</div>
+                  </sc-for>
+                </div>
+              </div>
+
+              <div>
+                <div style="display:flex; justify-content:space-between; margin-bottom:10px;">
+                  <span style="font-size:12px; font-weight:700; color:#C7CCDA;">Win Rate</span>
+                  <span style="font-size:11px; font-family:'Roboto Mono'; color:#8B93A7;">{{ winRateSlider.minLabel }} – {{ winRateSlider.maxLabel }}</span>
+                </div>
+                <div style="position:relative; height:20px; margin-bottom:10px;">
+                  <div style="position:absolute; top:8px; left:0; right:0; height:4px; border-radius:2px; background:rgba(255,255,255,0.1);"></div>
+                  <div style="position:absolute; top:8px; height:4px; border-radius:2px; background:#5b9dff; left:{{ winRateSlider.fillLeft }}; right:{{ winRateSlider.fillRight }};"></div>
+                  <input class="dual-range" type="range" min="{{ winRateSlider.lo }}" max="{{ winRateSlider.hi }}" value="{{ winRateSlider.minVal }}" onInput="{{ winRateSlider.onMinInput }}" />
+                  <input class="dual-range" type="range" min="{{ winRateSlider.lo }}" max="{{ winRateSlider.hi }}" value="{{ winRateSlider.maxVal }}" onInput="{{ winRateSlider.onMaxInput }}" />
+                </div>
+                <div style="display:flex; align-items:center; gap:8px;">
+                  <input value="{{ winRateSlider.minVal }}" onBlur="{{ winRateSlider.onMinTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
+                  <span style="color:#5B6377; font-size:11px;">–</span>
+                  <input value="{{ winRateSlider.maxVal }}" onBlur="{{ winRateSlider.onMaxTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
+                </div>
+              </div>
+
+              <div>
+                <div style="display:flex; justify-content:space-between; margin-bottom:10px;">
+                  <span style="font-size:12px; font-weight:700; color:#C7CCDA;">Volume</span>
+                  <span style="font-size:11px; font-family:'Roboto Mono'; color:#8B93A7;">{{ volumeSlider.minLabel }} – {{ volumeSlider.maxLabel }}</span>
+                </div>
+                <div style="position:relative; height:20px; margin-bottom:10px;">
+                  <div style="position:absolute; top:8px; left:0; right:0; height:4px; border-radius:2px; background:rgba(255,255,255,0.1);"></div>
+                  <div style="position:absolute; top:8px; height:4px; border-radius:2px; background:#5b9dff; left:{{ volumeSlider.fillLeft }}; right:{{ volumeSlider.fillRight }};"></div>
+                  <input class="dual-range" type="range" min="{{ volumeSlider.lo }}" max="{{ volumeSlider.hi }}" step="500000" value="{{ volumeSlider.minVal }}" onInput="{{ volumeSlider.onMinInput }}" />
+                  <input class="dual-range" type="range" min="{{ volumeSlider.lo }}" max="{{ volumeSlider.hi }}" step="500000" value="{{ volumeSlider.maxVal }}" onInput="{{ volumeSlider.onMaxInput }}" />
+                </div>
+                <div style="display:flex; align-items:center; gap:8px;">
+                  <input value="{{ volumeSlider.minVal }}" onBlur="{{ volumeSlider.onMinTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
+                  <span style="color:#5B6377; font-size:11px;">–</span>
+                  <input value="{{ volumeSlider.maxVal }}" onBlur="{{ volumeSlider.onMaxTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
+                </div>
+              </div>
+
+              <div>
+                <div style="display:flex; justify-content:space-between; margin-bottom:10px;">
+                  <span style="font-size:12px; font-weight:700; color:#C7CCDA;">Total P&amp;L</span>
+                  <span style="font-size:11px; font-family:'Roboto Mono'; color:#8B93A7;">{{ pnlSlider.minLabel }} – {{ pnlSlider.maxLabel }}</span>
+                </div>
+                <div style="position:relative; height:20px; margin-bottom:10px;">
+                  <div style="position:absolute; top:8px; left:0; right:0; height:4px; border-radius:2px; background:rgba(255,255,255,0.1);"></div>
+                  <div style="position:absolute; top:8px; height:4px; border-radius:2px; background:#5b9dff; left:{{ pnlSlider.fillLeft }}; right:{{ pnlSlider.fillRight }};"></div>
+                  <input class="dual-range" type="range" min="{{ pnlSlider.lo }}" max="{{ pnlSlider.hi }}" step="10000" value="{{ pnlSlider.minVal }}" onInput="{{ pnlSlider.onMinInput }}" />
+                  <input class="dual-range" type="range" min="{{ pnlSlider.lo }}" max="{{ pnlSlider.hi }}" step="10000" value="{{ pnlSlider.maxVal }}" onInput="{{ pnlSlider.onMaxInput }}" />
+                </div>
+                <div style="display:flex; align-items:center; gap:8px;">
+                  <input value="{{ pnlSlider.minVal }}" onBlur="{{ pnlSlider.onMinTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
+                  <span style="color:#5B6377; font-size:11px;">–</span>
+                  <input value="{{ pnlSlider.maxVal }}" onBlur="{{ pnlSlider.onMaxTextBlur }}" style="width:0; flex:1; min-width:0; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:12px; font-family:'Roboto Mono'; outline:none; text-align:center;" />
+                </div>
+              </div>
+
+              <div onClick="{{ onResetFilters }}" style="cursor:pointer; text-align:center; padding:10px; border-radius:10px; font-size:12.5px; font-weight:700; color:#8B93A7; border:1px solid rgba(255,255,255,0.1);">Reset filters</div>
+            </div>
+
+            <!-- results -->
+            <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
+              <div style="padding:16px 22px; font-size:14px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; justify-content:space-between;">
+                <span>Results</span><span style="color:#5B6377; font-weight:600;">{{ searchResultsCount }} traders</span>
+              </div>
+              <table style="width:100%; font-size:13px;">
+                <thead>
+                  <tr style="color:#5B6377; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;">
+                    <td style="padding:10px 22px;">Trader</td>
+                    <td style="padding:10px 10px;">Traits</td>
+                    <td style="padding:10px 10px; text-align:right;">Win Rate</td>
+                    <td style="padding:10px 10px; text-align:right;">Volume</td>
+                    <td style="padding:10px 22px; text-align:right;">P&amp;L</td>
+                  </tr>
+                </thead>
+                <tbody>
+                  <sc-for list="{{ searchResults }}" as="t" hint-placeholder-count="6">
+                    <tr onClick="{{ t.onClick }}" style="cursor:pointer; border-top:1px solid rgba(255,255,255,0.05);" style-hover="background:rgba(255,255,255,0.03);">
+                      <td style="padding:12px 22px;">
+                        <div style="display:flex; align-items:center; gap:10px;">
+                          <div style="width:26px; height:26px; border-radius:8px; flex:none; background:{{ t.avatarBg }}; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;">{{ t.initial }}</div>
+                          <span style="font-weight:700;">{{ t.handle }}</span>
+                        </div>
+                      </td>
+                      <td style="padding:12px 10px;">
+                        <div style="display:flex; gap:5px; flex-wrap:wrap;">
+                          <sc-for list="{{ t.traitChips }}" as="chip" hint-placeholder-count="2">
+                            <div style="font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px; background:{{ chip.bg }}; color:{{ chip.color }};">{{ chip.label }}</div>
+                          </sc-for>
+                        </div>
+                      </td>
+                      <td style="padding:12px 10px; text-align:right; font-family:'Roboto Mono'; font-weight:700;">{{ t.winRateLabel }}</td>
+                      <td style="padding:12px 10px; text-align:right; font-family:'Roboto Mono'; color:#C7CCDA;">{{ t.volumeLabel }}</td>
+                      <td style="padding:12px 22px; text-align:right; font-family:'Roboto Mono'; font-weight:700; color:{{ t.pnlColor }};">{{ t.pnlLabel }}</td>
+                    </tr>
+                  </sc-for>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+
+      <sc-if value="{{ isTrader }}" hint-placeholder-val="{{ false }}">
+        <!-- ================= TRADER DETAIL ================= -->
+        <div>
+          <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:20px;">
+            <div style="display:flex; align-items:center; gap:16px;">
+              <div style="width:56px; height:56px; border-radius:16px; background:{{ traderDetail.avatarBg }}; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; box-shadow:0 0 24px rgba(22,82,240,0.3);">{{ traderDetail.initial }}</div>
+              <div>
+                <div style="display:flex; align-items:center; gap:10px; margin-bottom:4px;">
+                  <h1 style="margin:0; font-size:22px; font-weight:800; letter-spacing:-0.02em;">{{ traderDetail.handle }}</h1>
+                  <div style="font-size:12px; font-family:'Roboto Mono'; color:#5B6377;">{{ traderDetail.wallet }}</div>
+                </div>
+                <div style="display:flex; gap:6px;">
+                  <sc-for list="{{ traderDetail.traitChips }}" as="chip" hint-placeholder-count="2">
+                    <div style="font-size:11px; font-weight:700; padding:4px 10px; border-radius:7px; background:{{ chip.bg }}; color:{{ chip.color }}; border:1px solid {{ chip.border }};">{{ chip.label }}</div>
+                  </sc-for>
+                </div>
+              </div>
+            </div>
+            <div style="text-align:right;">
+              <div style="font-size:11.5px; color:#8B93A7; margin-bottom:2px;">Member since {{ traderDetail.joined }}</div>
+              <div style="font-size:11.5px; color:#8B93A7;">{{ traderDetail.activePositionsLabel }} active positions</div>
+            </div>
+          </div>
+
+          <div style="display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:18px;">
+            <sc-for list="{{ traderStats }}" as="stat" hint-placeholder-count="5">
+              <div style="padding:16px 18px; border-radius:14px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(24px);">
+                <div style="font-size:11px; color:#8B93A7; font-weight:600; margin-bottom:8px;">{{ stat.label }}</div>
+                <div style="font-size:18px; font-weight:800; font-family:'Roboto Mono'; color:{{ stat.color }};">{{ stat.value }}</div>
+              </div>
+            </sc-for>
+          </div>
+
+          <div style="display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:16px; align-items:start;">
+            <!-- pnl chart -->
+            <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); padding:20px 22px;">
+              <div style="font-size:14px; font-weight:700; margin-bottom:14px;">P&amp;L Over Time</div>
+              <svg viewBox="0 0 600 200" style="width:100%; height:200px; overflow:visible;">
+                <defs>
+                  <linearGradient id="pnlFill" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stop-color="#5b9dff" stop-opacity="0.35"/>
+                    <stop offset="100%" stop-color="#5b9dff" stop-opacity="0"/>
+                  </linearGradient>
+                  <filter id="glow2"><feGaussianBlur stdDeviation="3.5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
+                </defs>
+                <path d="{{ traderDetail.areaPath }}" fill="url(#pnlFill)" stroke="none"></path>
+                <path d="{{ traderDetail.linePath }}" fill="none" stroke="#5b9dff" stroke-width="2.5" filter="url(#glow2)"></path>
+              </svg>
+            </div>
+
+            <!-- network -->
+            <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); padding:18px 20px;">
+              <div style="font-size:14px; font-weight:700; margin-bottom:10px;">Connected Wallets</div>
+              <sc-if value="{{ traderDetail.hasConnections }}" hint-placeholder-val="{{ true }}">
+                <sc-for list="{{ traderDetail.connections }}" as="w" hint-placeholder-count="2">
+                  <div style="display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid rgba(255,255,255,0.05);">
+                    <div style="width:8px; height:8px; border-radius:50%; background:#F6465D; box-shadow:0 0 6px #F6465D;"></div>
+                    <div style="font-family:'Roboto Mono'; font-size:12.5px; color:#C7CCDA;">{{ w }}</div>
+                  </div>
+                </sc-for>
+              </sc-if>
+              <sc-if value="{{ traderDetail.noConnections }}" hint-placeholder-val="{{ false }}">
+                <div style="font-size:12.5px; color:#5B6377; padding:10px 0;">No linked wallets detected.</div>
+              </sc-if>
+            </div>
+          </div>
+
+          <!-- positions table -->
+          <div style="border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); overflow:hidden;">
+            <div style="padding:16px 22px 12px; font-size:14px; font-weight:700; border-bottom:1px solid rgba(255,255,255,0.06);">Positions</div>
+            <table style="width:100%; font-size:12.5px;">
+              <thead>
+                <tr style="color:#5B6377; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;">
+                  <td style="padding:10px 22px;">Market</td>
+                  <td style="padding:10px 10px; text-align:center;">Side</td>
+                  <td style="padding:10px 10px; text-align:right;">Size</td>
+                  <td style="padding:10px 10px; text-align:right;">Entry</td>
+                  <td style="padding:10px 10px; text-align:right;">Current</td>
+                  <td style="padding:10px 22px; text-align:right;">P&amp;L</td>
+                </tr>
+              </thead>
+              <tbody>
+                <sc-for list="{{ traderDetail.positions }}" as="p" hint-placeholder-count="4">
+                  <tr style="border-top:1px solid rgba(255,255,255,0.05);">
+                    <td style="padding:12px 22px; font-weight:600;">{{ p.market }}</td>
+                    <td style="padding:12px 10px; text-align:center;"><span style="padding:3px 9px; border-radius:6px; font-size:11px; font-weight:700; background:{{ p.sideBg }}; color:{{ p.sideColor }};">{{ p.side }}</span></td>
+                    <td style="padding:12px 10px; text-align:right; font-family:'Roboto Mono';">{{ p.sizeLabel }}</td>
+                    <td style="padding:12px 10px; text-align:right; font-family:'Roboto Mono'; color:#8B93A7;">{{ p.entryLabel }}</td>
+                    <td style="padding:12px 10px; text-align:right; font-family:'Roboto Mono'; color:#8B93A7;">{{ p.currentLabel }}</td>
+                    <td style="padding:12px 22px; text-align:right; font-family:'Roboto Mono'; font-weight:700; color:{{ p.pnlColor }};">{{ p.pnlLabel }}</td>
+                  </tr>
+                </sc-for>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </sc-if>
+
+    </main>
+  </div>
+</div>
+
+</x-dc>
+<script type="text/x-dc" data-dc-script>
+class Component extends DCLogic {
+  state = {
+    view: "overview",
+    selectedMarketId: null,
+    selectedTraderId: null,
+    markets: null,
+    traders: null,
+    searchText: "",
+    filterTraits: [],
+    winRateMin: 0,
+    winRateMax: 100,
+    volumeMin: 0,
+    volumeMax: 25000000,
+    pnlMin: -50000,
+    pnlMax: 500000,
+  };
+
+  componentDidMount() {
+    import("./market-data.js").then((m) => {
+      this.setState({ markets: m.MARKETS, traders: m.TRADERS });
+    });
+  }
+
+  goOverview = () => this.setState({ view: "overview" });
+  goMarket = (id) => this.setState({ view: "market", selectedMarketId: id });
+  goTrader = (id) => this.setState({ view: "trader", selectedTraderId: id });
+  goTraderSearch = () => this.setState({ view: "traderSearch" });
+
+  setSearchText = (e) => this.setState({ searchText: e.target.value });
+  toggleTrait = (trait) => this.setState((s) => ({
+    filterTraits: s.filterTraits.includes(trait) ? s.filterTraits.filter((t) => t !== trait) : [...s.filterTraits, trait],
+  }));
+  setRange = (key) => (e) => this.setState({ [key]: Number(e.target.value) });
+  resetFilters = () => this.setState({
+    searchText: "", filterTraits: [], winRateMin: 0, winRateMax: 100,
+    volumeMin: 0, volumeMax: 25000000, pnlMin: -50000, pnlMax: 500000,
+  });
+
+  parseClamp(raw, lo, hi) {
+    const n = Number(String(raw).replace(/[^0-9.\-]/g, ""));
+    if (Number.isNaN(n)) return null;
+    return Math.max(lo, Math.min(hi, n));
+  }
+  onMinTextBlur = (key, lo, hi) => (e) => {
+    const n = this.parseClamp(e.target.value, lo, hi);
+    this.setState({ [key]: n === null ? lo : n });
+  };
+  onMaxTextBlur = (key, lo, hi) => (e) => {
+    const n = this.parseClamp(e.target.value, lo, hi);
+    this.setState({ [key]: n === null ? hi : n });
+  };
+
+  fmtMoney(n) {
+    if (n >= 1000000) return "$" + (n / 1000000).toFixed(2) + "M";
+    if (n >= 1000) return "$" + (n / 1000).toFixed(1) + "K";
+    return "$" + Math.round(n);
+  }
+  fmtNum(n) {
+    if (n >= 1000) return (n / 1000).toFixed(1) + "K";
+    return String(Math.round(n));
+  }
+  fmtSigned(n, suffix) {
+    const s = n >= 0 ? "+" : "";
+    return s + n.toFixed(1) + (suffix || "");
+  }
+
+  traitStyle(trait) {
+    const map = {
+      "Arbitrage Bot": { bg: "rgba(22,82,240,0.14)", color: "#5b9dff", border: "rgba(22,82,240,0.3)" },
+      "Resolution Farming": { bg: "rgba(246,70,93,0.12)", color: "#F6465D", border: "rgba(246,70,93,0.28)" },
+      "Trading Bot": { bg: "rgba(255,255,255,0.08)", color: "#C7CCDA", border: "rgba(255,255,255,0.15)" },
+      "Human": { bg: "rgba(124,92,255,0.12)", color: "#a78bff", border: "rgba(124,92,255,0.28)" },
+      "High Volume": { bg: "rgba(18,212,138,0.12)", color: "#12D48A", border: "rgba(18,212,138,0.28)" },
+    };
+    return map[trait] || { bg: "rgba(255,255,255,0.08)", color: "#C7CCDA", border: "rgba(255,255,255,0.15)" };
+  }
+
+  ALL_TRAITS = ["Human", "Trading Bot", "Arbitrage Bot", "Resolution Farming", "High Volume"];
+
+  avatarBg(seed) {
+    const palettes = [
+      "linear-gradient(135deg,#1652F0,#4c8dff)",
+      "linear-gradient(135deg,#12D48A,#0a8f5f)",
+      "linear-gradient(135deg,#F6465D,#a8283a)",
+      "linear-gradient(135deg,#7c5cff,#4c8dff)",
+      "linear-gradient(135deg,#ff9d4c,#F6465D)",
+    ];
+    let h = 0;
+    for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
+    return palettes[h % palettes.length];
+  }
+
+  buildDualSlider(minKey, maxKey, lo, hi, fmt) {
+    const minVal = this.state[minKey];
+    const maxVal = this.state[maxKey];
+    const pctMin = ((minVal - lo) / (hi - lo)) * 100;
+    const pctMax = ((maxVal - lo) / (hi - lo)) * 100;
+    return {
+      lo, hi, minVal, maxVal,
+      minLabel: fmt(minVal), maxLabel: fmt(maxVal),
+      fillLeft: pctMin.toFixed(1) + "%",
+      fillRight: (100 - pctMax).toFixed(1) + "%",
+      onMinInput: (e) => this.setState({ [minKey]: Math.min(Number(e.target.value), this.state[maxKey]) }),
+      onMaxInput: (e) => this.setState({ [maxKey]: Math.max(Number(e.target.value), this.state[minKey]) }),
+      onMinTextBlur: this.onMinTextBlur(minKey, lo, hi),
+      onMaxTextBlur: this.onMaxTextBlur(maxKey, lo, hi),
+    };
+  }
+
+  buildPath(series, w, h, pad) {
+    if (!series || series.length < 2) return { line: "", area: "" };
+    const min = Math.min(...series);
+    const max = Math.max(...series);
+    const range = max - min || 1;
+    const innerW = w - pad * 2;
+    const innerH = h - pad * 2;
+    const pts = series.map((v, i) => {
+      const x = pad + (i / (series.length - 1)) * innerW;
+      const y = pad + innerH - ((v - min) / range) * innerH;
+      return [x, y];
+    });
+    let line = "M" + pts[0][0].toFixed(1) + "," + pts[0][1].toFixed(1);
+    for (let i = 1; i < pts.length; i++) line += " L" + pts[i][0].toFixed(1) + "," + pts[i][1].toFixed(1);
+    const area = line + ` L${pts[pts.length - 1][0].toFixed(1)},${h - pad} L${pts[0][0].toFixed(1)},${h - pad} Z`;
+    return { line, area };
+  }
+
+  renderVals() {
+    const markets = this.state.markets || [];
+    const traders = this.state.traders || [];
+    const view = this.state.view;
+
+    const navDefs = [
+      { key: "overview", label: "Markets" },
+      { key: "traders", label: "Traders" },
+      { key: "watchlist", label: "Watchlist" },
+      { key: "settings", label: "Settings" },
+    ];
+    const navItems = navDefs.map((n) => {
+      const active = (n.key === "overview" && view === "overview") ||
+        (n.key === "traders" && (view === "trader" || view === "traderSearch")) ||
+        (n.key === "watchlist" && false) ||
+        (n.key === "settings" && false);
+      return {
+        label: n.label,
+        onClick: n.key === "overview" ? this.goOverview : (n.key === "traders" ? this.goTraderSearch : this.goOverview),
+        style: `display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600; cursor:pointer; color:${active ? "#EDEFF5" : "#8B93A7"}; background:${active ? "rgba(22,82,240,0.14)" : "transparent"};`,
+        dotStyle: `width:6px; height:6px; border-radius:50%; background:${active ? "#5b9dff" : "#3a4152"};`,
+      };
+    });
+
+    // ---- global stats
+    const totalVol24 = markets.reduce((s, m) => s + m.volume24h, 0);
+    const openMarkets = markets.filter((m) => m.status === "Active").length;
+    const totalTraders = new Set(traders.map((t) => t.id)).size + markets.reduce((s, m) => s + m.traders, 0) * 0; // display sum below
+    const totalActiveTraders = markets.reduce((s, m) => s + m.traders, 0);
+    const avgLiquidity = markets.length ? markets.reduce((s, m) => s + m.liquidity, 0) / markets.length : 0;
+
+    const globalStats = [
+      { label: "24H Volume", value: this.fmtMoney(totalVol24), delta: this.fmtSigned(3.4, "%"), deltaColor: "#12D48A" },
+      { label: "Open Markets", value: String(openMarkets), delta: "+2 today", deltaColor: "#12D48A" },
+      { label: "Active Traders", value: this.fmtNum(totalActiveTraders), delta: this.fmtSigned(1.8, "%"), deltaColor: "#12D48A" },
+      { label: "Avg. Liquidity", value: this.fmtMoney(avgLiquidity), delta: this.fmtSigned(-0.6, "%"), deltaColor: "#F6465D" },
+    ];
+
+    const marketRows = markets.map((m) => ({
+      question: m.question,
+      category: m.category,
+      statusLabel: m.status,
+      yesPriceLabel: m.yesPrice.toFixed(1) + "%",
+      changeLabel: this.fmtSigned(m.change24h, "%"),
+      changeColor: m.change24h >= 0 ? "#12D48A" : "#F6465D",
+      volumeLabel: this.fmtMoney(m.volume24h),
+      tradersLabel: this.fmtNum(m.traders),
+      onClick: () => this.goMarket(m.id),
+    }));
+
+    const leaderboard = [...traders].sort((a, b) => (b.pnlRealized + b.pnlUnrealized) - (a.pnlRealized + a.pnlUnrealized)).slice(0, 6).map((t) => ({
+      handle: t.handle,
+      trait: t.traits[0],
+      initial: t.handle[0].toUpperCase(),
+      avatarBg: this.avatarBg(t.id),
+      pnlLabel: this.fmtMoney(t.pnlRealized + t.pnlUnrealized),
+      onClick: () => this.goTrader(t.id),
+    }));
+
+    const headerVolume = this.fmtMoney(totalVol24);
+    const crumbDefs = view === "overview" ? [["Markets Overview", null]] :
+      view === "market" ? [["Markets Overview", this.goOverview], ["Market Detail", null]] :
+      view === "traderSearch" ? [["Trader Search", null]] :
+      [["Trader Search", this.goTraderSearch], ["Trader Detail", null]];
+    const breadcrumbItems = crumbDefs.map(([label, onClick], i) => ({
+      label, onClick,
+      style: onClick ? "cursor:pointer; color:#8B93A7;" : "color:#EDEFF5; cursor:default;",
+      sep: i < crumbDefs.length - 1,
+    }));
+
+    // ---- trader search
+    let searchResults = [];
+    let traitFilterChips = [];
+    if (view === "traderSearch") {
+      const q = this.state.searchText.trim().toLowerCase();
+      traitFilterChips = this.ALL_TRAITS.map((tr) => {
+        const active = this.state.filterTraits.includes(tr);
+        const s = this.traitStyle(tr);
+        return {
+          label: tr,
+          onClick: () => this.toggleTrait(tr),
+          style: `cursor:pointer; font-size:12px; font-weight:700; padding:7px 13px; border-radius:9px; background:${active ? s.bg : "rgba(255,255,255,0.04)"}; color:${active ? s.color : "#8B93A7"}; border:1px solid ${active ? s.border : "rgba(255,255,255,0.09)"};`,
+        };
+      });
+      searchResults = traders.filter((t) => {
+        if (q && !t.handle.toLowerCase().includes(q) && !t.wallet.toLowerCase().includes(q)) return false;
+        if (this.state.filterTraits.length && !this.state.filterTraits.every((tr) => t.traits.includes(tr))) return false;
+        if (t.winRate < this.state.winRateMin || t.winRate > this.state.winRateMax) return false;
+        if (t.volume < this.state.volumeMin || t.volume > this.state.volumeMax) return false;
+        const totalPnl = t.pnlRealized + t.pnlUnrealized;
+        if (totalPnl < this.state.pnlMin || totalPnl > this.state.pnlMax) return false;
+        return true;
+      }).map((t) => ({
+        id: t.id,
+        handle: t.handle,
+        initial: t.handle[0].toUpperCase(),
+        avatarBg: this.avatarBg(t.id),
+        traitChips: t.traits.map((tr) => {
+          const s = this.traitStyle(tr);
+          return { label: tr, bg: s.bg, color: s.color, border: s.border };
+        }),
+        winRateLabel: t.winRate.toFixed(1) + "%",
+        volumeLabel: this.fmtMoney(t.volume),
+        pnlLabel: ((t.pnlRealized + t.pnlUnrealized) >= 0 ? "+" : "-") + this.fmtMoney(Math.abs(t.pnlRealized + t.pnlUnrealized)),
+        pnlColor: (t.pnlRealized + t.pnlUnrealized) >= 0 ? "#12D48A" : "#F6465D",
+        onClick: () => this.goTrader(t.id),
+      }));
+    }
+
+    // ---- market detail
+    let marketDetail = null;
+    let marketStats = [];
+    if (view === "market") {
+      const m = markets.find((x) => x.id === this.state.selectedMarketId) || markets[0];
+      if (m) {
+        const { line, area } = this.buildPath(m.yesSeries, 600, 220, 14);
+        const maxBookSize = Math.max(1, ...m.orderBook.bids.map((b) => b[1]), ...m.orderBook.asks.map((a) => a[1]));
+        marketDetail = {
+          question: m.question,
+          category: m.category,
+          status: m.status,
+          statusBg: m.status === "Active" ? "rgba(18,212,138,0.12)" : "rgba(255,255,255,0.08)",
+          statusColor: m.status === "Active" ? "#12D48A" : "#8B93A7",
+          resolves: m.resolves,
+          yesPriceBig: m.yesPrice.toFixed(1) + "%",
+          linePath: line,
+          areaPath: area,
+          asks: [...m.orderBook.asks].reverse().map(([p, s]) => ({ priceLabel: p.toFixed(1) + "%", sizeLabel: this.fmtMoney(s), barWidth: Math.round((s / maxBookSize) * 100) + "%" })),
+          bids: m.orderBook.bids.map(([p, s]) => ({ priceLabel: p.toFixed(1) + "%", sizeLabel: this.fmtMoney(s), barWidth: Math.round((s / maxBookSize) * 100) + "%" })),
+          holders: m.holders.map((h) => ({
+            trader: h.trader,
+            side: h.side,
+            sideBg: h.side === "Yes" ? "rgba(18,212,138,0.14)" : "rgba(246,70,93,0.14)",
+            sideColor: h.side === "Yes" ? "#12D48A" : "#F6465D",
+            valueLabel: this.fmtMoney(h.value),
+            onClick: () => {
+              const t = traders.find((tr) => tr.handle === h.trader || tr.wallet === h.trader);
+              if (t) this.goTrader(t.id);
+            },
+          })),
+          topTraders: m.topTraders.map((handle) => {
+            const t = traders.find((tr) => tr.handle === handle);
+            return t ? {
+              handle: t.handle,
+              trait: t.traits[0],
+              initial: t.handle[0].toUpperCase(),
+              avatarBg: this.avatarBg(t.id),
+              onClick: () => this.goTrader(t.id),
+            } : { handle, trait: "", initial: handle[0].toUpperCase(), avatarBg: "#333", onClick: () => {} };
+          }),
+        };
+        marketStats = [
+          { label: "24H Volume", value: this.fmtMoney(m.volume24h) },
+          { label: "Total Volume", value: this.fmtMoney(m.volumeTotal) },
+          { label: "Liquidity", value: this.fmtMoney(m.liquidity) },
+          { label: "Open Interest", value: this.fmtMoney(m.openInterest) },
+        ];
+      }
+    }
+
+    // ---- trader detail
+    let traderDetail = null;
+    let traderStats = [];
+    if (view === "trader") {
+      const t = traders.find((x) => x.id === this.state.selectedTraderId) || traders[0];
+      if (t) {
+        const { line, area } = this.buildPath(t.pnlSeries, 600, 200, 14);
+        const totalPnl = t.pnlRealized + t.pnlUnrealized;
+        traderDetail = {
+          handle: t.handle,
+          wallet: t.wallet,
+          initial: t.handle[0].toUpperCase(),
+          avatarBg: this.avatarBg(t.id),
+          joined: t.joined,
+          activePositionsLabel: String(t.activePositions),
+          traitChips: t.traits.map((tr) => {
+            const s = this.traitStyle(tr);
+            return { label: tr, bg: s.bg, color: s.color, border: s.border };
+          }),
+          linePath: line,
+          areaPath: area,
+          hasConnections: t.connectedWallets.length > 0,
+          noConnections: t.connectedWallets.length === 0,
+          connections: t.connectedWallets,
+          positions: t.positions.map((p) => ({
+            market: p.market,
+            side: p.side,
+            sideBg: p.side === "Yes" ? "rgba(18,212,138,0.14)" : "rgba(246,70,93,0.14)",
+            sideColor: p.side === "Yes" ? "#12D48A" : "#F6465D",
+            sizeLabel: this.fmtMoney(p.size),
+            entryLabel: p.entry.toFixed(1) + "%",
+            currentLabel: p.current.toFixed(1) + "%",
+            pnlLabel: this.fmtSigned(0, "").slice(0,0) + (p.pnl >= 0 ? "+" : "-") + this.fmtMoney(Math.abs(p.pnl)),
+            pnlColor: p.pnl >= 0 ? "#12D48A" : "#F6465D",
+          })),
+        };
+        traderStats = [
+          { label: "Realized P&L", value: (t.pnlRealized >= 0 ? "+" : "-") + this.fmtMoney(Math.abs(t.pnlRealized)), color: t.pnlRealized >= 0 ? "#12D48A" : "#F6465D" },
+          { label: "Unrealized P&L", value: (t.pnlUnrealized >= 0 ? "+" : "-") + this.fmtMoney(Math.abs(t.pnlUnrealized)), color: t.pnlUnrealized >= 0 ? "#12D48A" : "#F6465D" },
+          { label: "Win Rate", value: t.winRate.toFixed(1) + "%", color: "#EDEFF5" },
+          { label: "Total Volume", value: this.fmtMoney(t.volume), color: "#EDEFF5" },
+          { label: "Avg Position", value: this.fmtMoney(t.avgPositionSize), color: "#EDEFF5" },
+        ];
+      }
+    }
+
+    return {
+      navItems,
+      headerVolume,
+      breadcrumbItems,
+      isOverview: view === "overview",
+      isMarket: view === "market",
+      isTrader: view === "trader",
+      isTraderSearch: view === "traderSearch",
+      searchResultsCount: String(searchResults.length),
+      searchResults,
+      traitFilterChips,
+      searchText: this.state.searchText,
+      onSearchTextChange: this.setSearchText,
+      winRateSlider: this.buildDualSlider("winRateMin", "winRateMax", 0, 100, (v) => v.toFixed(0) + "%"),
+      volumeSlider: this.buildDualSlider("volumeMin", "volumeMax", 0, 25000000, (v) => this.fmtMoney(v)),
+      pnlSlider: this.buildDualSlider("pnlMin", "pnlMax", -50000, 500000, (v) => (v >= 0 ? "+" : "-") + this.fmtMoney(Math.abs(v))),
+      onResetFilters: this.resetFilters,
+      globalStats,
+      marketRows,
+      leaderboard,
+      marketDetail,
+      marketStats,
+      traderDetail,
+      traderStats,
+    };
+  }
+}
+
+</script>
+</body>
+</html>
diff --git a/temp_new_design/market-data.js b/temp_new_design/market-data.js
new file mode 100644
index 0000000..d8b8472
--- /dev/null
+++ b/temp_new_design/market-data.js
@@ -0,0 +1,290 @@
+// Mock data for prediction market analytics prototype
+
+function genSeries(n, start, vol, drift) {
+  const pts = [start];
+  for (let i = 1; i < n; i++) {
+    const next = Math.max(2, Math.min(98, pts[i - 1] + (Math.random() - 0.5 + drift) * vol));
+    pts.push(Math.round(next * 10) / 10);
+  }
+  return pts;
+}
+
+export const MARKETS = [
+  {
+    id: "fed-sep-cut",
+    question: "Fed cuts rates at September meeting?",
+    category: "Economics",
+    status: "Active",
+    resolves: "Sep 18, 2026",
+    yesPrice: 71.4,
+    change24h: 4.2,
+    volume24h: 2840000,
+    volumeTotal: 41200000,
+    liquidity: 6120000,
+    openInterest: 18400000,
+    traders: 8340,
+    yesSeries: genSeries(40, 55, 4, 0.06),
+    noSeries: null,
+    orderBook: {
+      bids: [[71.0, 182000], [70.5, 240000], [70.0, 310000], [69.5, 198000], [69.0, 145000]],
+      asks: [[71.5, 165000], [72.0, 221000], [72.5, 290000], [73.0, 176000], [73.5, 130000]]
+    },
+    holders: [
+      { trader: "0xA13f…9c2", side: "Yes", size: 420000, value: 300000 },
+      { trader: "quant_owl", side: "Yes", size: 318000, value: 227000 },
+      { trader: "0x77Bd…41a", side: "No", size: 275000, value: 78600 },
+      { trader: "resolvr", side: "Yes", size: 210000, value: 150000 },
+      { trader: "0x9F02…c88", side: "No", size: 188000, value: 53700 }
+    ],
+    topTraders: ["quant_owl", "resolvr", "arb_meridian", "0xA13f…9c2"]
+  },
+  {
+    id: "btc-150k",
+    question: "Bitcoin above $150,000 by year end?",
+    category: "Crypto",
+    status: "Active",
+    resolves: "Dec 31, 2026",
+    yesPrice: 38.2,
+    change24h: -2.8,
+    volume24h: 5120000,
+    volumeTotal: 88900000,
+    liquidity: 11400000,
+    openInterest: 34200000,
+    traders: 21300,
+    yesSeries: genSeries(40, 45, 5, -0.02),
+    noSeries: null,
+    orderBook: {
+      bids: [[38.0, 410000], [37.5, 380000], [37.0, 512000], [36.5, 290000], [36.0, 210000]],
+      asks: [[38.5, 390000], [39.0, 460000], [39.5, 330000], [40.0, 280000], [40.5, 190000]]
+    },
+    holders: [
+      { trader: "satoshi_fan", side: "Yes", size: 890000, value: 340000 },
+      { trader: "0x4Ac1…d02", side: "No", size: 720000, value: 445000 },
+      { trader: "bot_delta_9", side: "No", size: 610000, value: 377000 },
+      { trader: "arb_meridian", side: "Yes", size: 540000, value: 206000 },
+      { trader: "0xE221…7b4", side: "Yes", size: 480000, value: 183000 }
+    ],
+    topTraders: ["satoshi_fan", "bot_delta_9", "arb_meridian", "0x4Ac1…d02"]
+  },
+  {
+    id: "ucl-winner",
+    question: "Real Madrid win Champions League 2027?",
+    category: "Sports",
+    status: "Active",
+    resolves: "May 30, 2027",
+    yesPrice: 22.6,
+    change24h: 1.1,
+    volume24h: 980000,
+    volumeTotal: 14300000,
+    liquidity: 3210000,
+    openInterest: 7600000,
+    traders: 5120,
+    yesSeries: genSeries(40, 20, 3, 0.03),
+    noSeries: null,
+    orderBook: {
+      bids: [[22.0, 92000], [21.5, 110000], [21.0, 88000], [20.5, 64000], [20.0, 51000]],
+      asks: [[22.5, 87000], [23.0, 101000], [23.5, 76000], [24.0, 55000], [24.5, 40000]]
+    },
+    holders: [
+      { trader: "resolvr", side: "Yes", size: 210000, value: 47000 },
+      { trader: "0xB901…5e3", side: "No", size: 198000, value: 153000 },
+      { trader: "quant_owl", side: "Yes", size: 155000, value: 35000 },
+      { trader: "farmer_jo", side: "Yes", size: 121000, value: 27000 }
+    ],
+    topTraders: ["resolvr", "quant_owl", "0xB901…5e3"]
+  },
+  {
+    id: "us-election-28",
+    question: "Democratic candidate wins 2028 election?",
+    category: "Politics",
+    status: "Active",
+    resolves: "Nov 7, 2028",
+    yesPrice: 54.8,
+    change24h: 0.6,
+    volume24h: 3620000,
+    volumeTotal: 61500000,
+    liquidity: 9870000,
+    openInterest: 28100000,
+    traders: 14700,
+    yesSeries: genSeries(40, 50, 3.5, 0.01),
+    noSeries: null,
+    orderBook: {
+      bids: [[54.5, 260000], [54.0, 310000], [53.5, 220000], [53.0, 190000], [52.5, 140000]],
+      asks: [[55.0, 245000], [55.5, 300000], [56.0, 210000], [56.5, 175000], [57.0, 120000]]
+    },
+    holders: [
+      { trader: "0x2Ff8…a10", side: "Yes", size: 610000, value: 334000 },
+      { trader: "arb_meridian", side: "No", size: 540000, value: 244000 },
+      { trader: "night_owl_88", side: "Yes", size: 410000, value: 224000 },
+      { trader: "0xC450…9d1", side: "Yes", size: 380000, value: 208000 }
+    ],
+    topTraders: ["0x2Ff8…a10", "arb_meridian", "night_owl_88"]
+  },
+  {
+    id: "openai-ipo",
+    question: "OpenAI IPOs before end of 2027?",
+    category: "Business",
+    status: "Active",
+    resolves: "Dec 31, 2027",
+    yesPrice: 16.9,
+    change24h: -0.4,
+    volume24h: 740000,
+    volumeTotal: 9800000,
+    liquidity: 2140000,
+    openInterest: 5300000,
+    traders: 3980,
+    yesSeries: genSeries(40, 18, 2.5, -0.01),
+    noSeries: null,
+    orderBook: {
+      bids: [[16.5, 61000], [16.0, 72000], [15.5, 58000], [15.0, 40000], [14.5, 33000]],
+      asks: [[17.0, 55000], [17.5, 63000], [18.0, 47000], [18.5, 36000], [19.0, 28000]]
+    },
+    holders: [
+      { trader: "bot_delta_9", side: "No", size: 310000, value: 258000 },
+      { trader: "0x9F02…c88", side: "Yes", size: 190000, value: 32000 },
+      { trader: "farmer_jo", side: "No", size: 140000, value: 116000 }
+    ],
+    topTraders: ["bot_delta_9", "0x9F02…c88"]
+  },
+  {
+    id: "fifa-worldcup",
+    question: "Brazil wins 2026 FIFA World Cup?",
+    category: "Sports",
+    status: "Resolved · No",
+    resolves: "Jul 19, 2026",
+    yesPrice: 0,
+    change24h: 0,
+    volume24h: 0,
+    volumeTotal: 27600000,
+    liquidity: 0,
+    openInterest: 0,
+    traders: 19200,
+    yesSeries: genSeries(40, 30, 5, 0.1).map((v,i,a)=> i>34 ? Math.max(0, 30 - (i-34)*6) : v),
+    noSeries: null,
+    orderBook: { bids: [], asks: [] },
+    holders: [
+      { trader: "night_owl_88", side: "No", size: 520000, value: 520000 },
+      { trader: "0xC450…9d1", side: "Yes", size: 300000, value: 0 }
+    ],
+    topTraders: ["night_owl_88", "0xC450…9d1"]
+  }
+];
+
+export const TRADERS = [
+  {
+    id: "quant_owl",
+    handle: "quant_owl",
+    wallet: "0x1a4F…88bC",
+    traits: ["Arbitrage Bot", "High Volume"],
+    joined: "Mar 2024",
+    pnlRealized: 184200,
+    pnlUnrealized: 32100,
+    winRate: 68.4,
+    volume: 4820000,
+    avgPositionSize: 41200,
+    activePositions: 14,
+    pnlSeries: genSeries(30, 40, 6, 0.08),
+    positions: [
+      { market: "Fed cuts rates at September meeting?", side: "Yes", size: 318000, entry: 62.1, current: 71.4, pnl: 29580, status: "Open" },
+      { market: "Real Madrid win Champions League 2027?", side: "Yes", size: 155000, entry: 18.4, current: 22.6, pnl: 6510, status: "Open" },
+      { market: "US Presidential Election 2028", side: "No", size: 96000, entry: 48.2, current: 45.2, pnl: 2880, status: "Open" },
+      { market: "Bitcoin above $100k Jan 2026", side: "Yes", size: 210000, entry: 55.0, current: 100, pnl: 94500, status: "Resolved" }
+    ],
+    connectedWallets: ["0x88Ac…2f01", "0x5b0D…e410"]
+  },
+  {
+    id: "bot_delta_9",
+    handle: "bot_delta_9",
+    wallet: "0x5C90…14fA",
+    traits: ["Trading Bot", "Resolution Farming"],
+    joined: "Jan 2025",
+    pnlRealized: 61400,
+    pnlUnrealized: -8200,
+    winRate: 54.1,
+    volume: 12400000,
+    avgPositionSize: 18300,
+    activePositions: 62,
+    pnlSeries: genSeries(30, 30, 3, 0.02),
+    positions: [
+      { market: "Bitcoin above $150,000 by year end?", side: "No", size: 610000, entry: 41.0, current: 38.2, pnl: 17080, status: "Open" },
+      { market: "OpenAI IPOs before end of 2027?", side: "No", size: 310000, entry: 84.2, current: 83.1, pnl: 3410, status: "Open" },
+      { market: "Brazil wins 2026 FIFA World Cup?", side: "No", size: 520000, entry: 71.0, current: 100, pnl: 150800, status: "Resolved" }
+    ],
+    connectedWallets: ["0x14fA…C90D", "0x77b2…9e11", "0x0021…aabc"]
+  },
+  {
+    id: "arb_meridian",
+    handle: "arb_meridian",
+    wallet: "0x902D…7Ac1",
+    traits: ["Arbitrage Bot"],
+    joined: "Aug 2023",
+    pnlRealized: 402800,
+    pnlUnrealized: 51200,
+    winRate: 71.9,
+    volume: 22100000,
+    avgPositionSize: 68400,
+    activePositions: 9,
+    pnlSeries: genSeries(30, 60, 5, 0.05),
+    positions: [
+      { market: "Bitcoin above $150,000 by year end?", side: "Yes", size: 540000, entry: 30.5, current: 38.2, pnl: 41580, status: "Open" },
+      { market: "Democratic candidate wins 2028 election?", side: "No", size: 540000, entry: 47.0, current: 45.2, pnl: 9720, status: "Open" },
+      { market: "Fed cuts rates at September meeting?", side: "Yes", size: 180000, entry: 58.0, current: 71.4, pnl: 24120, status: "Open" }
+    ],
+    connectedWallets: []
+  },
+  {
+    id: "resolvr",
+    handle: "resolvr",
+    wallet: "0xF001…22Cd",
+    traits: ["Human", "Resolution Farming"],
+    joined: "Nov 2024",
+    pnlRealized: 92300,
+    pnlUnrealized: 12800,
+    winRate: 59.7,
+    volume: 6740000,
+    avgPositionSize: 27600,
+    activePositions: 22,
+    pnlSeries: genSeries(30, 35, 4, 0.03),
+    positions: [
+      { market: "Fed cuts rates at September meeting?", side: "Yes", size: 210000, entry: 60.0, current: 71.4, pnl: 23940, status: "Open" },
+      { market: "Real Madrid win Champions League 2027?", side: "Yes", size: 210000, entry: 15.2, current: 22.6, pnl: 15540, status: "Open" }
+    ],
+    connectedWallets: ["0x22Cd…F001"]
+  },
+  {
+    id: "night_owl_88",
+    handle: "night_owl_88",
+    wallet: "0x3E77…B420",
+    traits: ["Human", "High Volume"],
+    pnlRealized: 128900,
+    pnlUnrealized: 4100,
+    winRate: 62.2,
+    volume: 9120000,
+    avgPositionSize: 35200,
+    activePositions: 11,
+    pnlSeries: genSeries(30, 42, 4, 0.04),
+    positions: [
+      { market: "Democratic candidate wins 2028 election?", side: "Yes", size: 410000, entry: 51.0, current: 54.8, pnl: 15580, status: "Open" },
+      { market: "Brazil wins 2026 FIFA World Cup?", side: "No", size: 520000, entry: 68.0, current: 100, pnl: 166400, status: "Resolved" }
+    ],
+    connectedWallets: []
+  },
+  {
+    id: "farmer_jo",
+    handle: "farmer_jo",
+    wallet: "0xA210…6Bf0",
+    traits: ["Human", "Resolution Farming"],
+    pnlRealized: 21400,
+    pnlUnrealized: -3100,
+    winRate: 48.9,
+    volume: 1840000,
+    avgPositionSize: 9200,
+    activePositions: 31,
+    pnlSeries: genSeries(30, 20, 3, -0.01),
+    positions: [
+      { market: "Real Madrid win Champions League 2027?", side: "Yes", size: 121000, entry: 24.0, current: 22.6, pnl: -1690, status: "Open" },
+      { market: "OpenAI IPOs before end of 2027?", side: "No", size: 140000, entry: 80.0, current: 83.1, pnl: -4340, status: "Open" }
+    ],
+    connectedWallets: ["0x6Bf0…A210", "0x9021…4Ccb"]
+  }
+];
diff --git a/temp_new_design/support.js b/temp_new_design/support.js
new file mode 100644
index 0000000..6ca00e3
--- /dev/null
+++ b/temp_new_design/support.js
@@ -0,0 +1,1768 @@
+// GENERATED from dc-runtime/src/*.ts — do not edit. Rebuild with `cd dc-runtime && bun run build`.
+"use strict";
+(() => {
+  var __defProp = Object.defineProperty;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  // src/react.ts
+  function getReact() {
+    const R = window.React;
+    if (!R) throw new Error("dc-runtime: window.React is not available yet");
+    return R;
+  }
+  function getReactDOM() {
+    const RD = window.ReactDOM;
+    if (!RD) throw new Error("dc-runtime: window.ReactDOM is not available yet");
+    return RD;
+  }
+  var h = ((...args) => getReact().createElement(
+    ...args
+  ));
+
+  // src/parse.ts
+  function parseDcDocument(doc) {
+    const dc = doc.querySelector("x-dc");
+    if (!dc) return null;
+    const scriptEl = doc.querySelector("script[data-dc-script]");
+    const { props, preview } = parseDataProps(
+      scriptEl?.getAttribute("data-props") ?? null
+    );
+    return {
+      template: dc.innerHTML,
+      js: scriptEl ? scriptEl.textContent || "" : "",
+      props,
+      preview
+    };
+  }
+  function parseDcText(src) {
+    const openMatch = /<x-dc(?:\s[^>]*)?>/.exec(src);
+    if (!openMatch) return null;
+    const close = src.lastIndexOf("</x-dc>");
+    if (close === -1 || close < openMatch.index) return null;
+    const template = src.slice(openMatch.index + openMatch[0].length, close);
+    const doc = new DOMParser().parseFromString(src, "text/html");
+    const scriptEl = doc.querySelector("script[data-dc-script]");
+    const { props, preview } = parseDataProps(
+      scriptEl?.getAttribute("data-props") ?? null
+    );
+    return {
+      template,
+      js: scriptEl ? scriptEl.textContent || "" : "",
+      props,
+      preview
+    };
+  }
+  function parseDataProps(raw) {
+    if (!raw) return { props: null, preview: null };
+    let parsed;
+    try {
+      parsed = JSON.parse(raw);
+    } catch {
+      return { props: null, preview: null };
+    }
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return { props: null, preview: null };
+    }
+    const obj = parsed;
+    const preview = obj.$preview && typeof obj.$preview === "object" ? obj.$preview : null;
+    const rest = {};
+    for (const k of Object.keys(obj)) {
+      if (k[0] !== "$") rest[k] = obj[k];
+    }
+    return { props: Object.keys(rest).length ? rest : null, preview };
+  }
+  function dcNameFromPath(pathname) {
+    let p = pathname || "";
+    try {
+      p = decodeURIComponent(p);
+    } catch {
+    }
+    const base = p.split("/").pop() || "Root";
+    return base.replace(/\.dc\.html$/, "").replace(/\.html?$/, "") || "Root";
+  }
+
+  // src/boot.ts
+  var BASE_CSS = `
+    .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
+      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
+      border-radius:2px;box-sizing:border-box;overflow:hidden}
+    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
+    html.sc-dc-streaming .sc-placeholder,
+    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
+      background:color-mix(in srgb,currentColor 5%,transparent);
+      border-color:transparent}
+    html.sc-dc-streaming .sc-placeholder::before,
+    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
+      position:absolute;inset:0;pointer-events:none;
+      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
+      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
+    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
+    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
+      background:color-mix(in srgb,currentColor 8%,transparent)}
+    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
+      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
+    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
+      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
+      border-radius:2px;box-sizing:border-box;color:transparent;
+      user-select:none}
+    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
+      color:color-mix(in srgb,currentColor 50%,transparent);
+      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
+      padding:0 3px}
+    .sc-host.sc-has-error{position:relative}
+    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
+      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
+      border-radius:4px;white-space:pre-wrap;pointer-events:none}
+    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts \u2014 keep both
+       in sync until dc-runtime regains a build step. */
+    @media print {
+      @page { margin: 0.5cm; }
+      figure, table { break-inside: avoid; }
+      #dc-root, #dc-root > .sc-host { height: auto; }
+      *, *::before, *::after {
+        print-color-adjust: exact; -webkit-print-color-adjust: exact;
+        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
+        animation-delay: -99s !important; animation-duration: .001s !important;
+        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
+        animation-play-state: running !important; transition-duration: 0s !important;
+      }
+    }
+  `;
+  var FULL_PAGE_CSS = "html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}";
+  function rootNameForDocument(doc, loc) {
+    let bootPath = loc.pathname || "";
+    if (!/\.dc\.html?$/i.test(safeDecode(bootPath))) {
+      try {
+        bootPath = new URL(doc.baseURI || "/").pathname;
+      } catch {
+      }
+    }
+    return dcNameFromPath(bootPath);
+  }
+  function safeDecode(s) {
+    try {
+      return decodeURIComponent(s);
+    } catch {
+      return s;
+    }
+  }
+  function boot(runtime, doc = document) {
+    const parsed = parseDcDocument(doc);
+    if (!parsed) return null;
+    const React = getReact();
+    const rootName = rootNameForDocument(doc, location);
+    runtime.markFetched(rootName);
+    runtime.setRootName(rootName);
+    runtime.adoptParsed(rootName, parsed);
+    if (!window.__resources) {
+      fetch(location.href).then((res) => res.ok ? res.text() : "").then((t) => {
+        const raw = t ? parseDcText(t) : null;
+        if (raw?.template) runtime.updateHtml(rootName, raw.template);
+      }).catch(() => {
+      });
+    }
+    const dc = doc.querySelector("x-dc");
+    const hostEl = doc.createElement("div");
+    hostEl.id = "dc-root";
+    dc.replaceWith(hostEl);
+    if (!parsed.preview) {
+      const s = doc.createElement("style");
+      s.textContent = FULL_PAGE_CSS;
+      doc.head.appendChild(s);
+    }
+    const Root = runtime.getDC(rootName);
+    const entry = runtime.registry.get(rootName);
+    function StandaloneRoot() {
+      const [, setTick] = React.useState(0);
+      React.useEffect(() => {
+        const sub = () => setTick((n) => n + 1);
+        entry.subs.add(sub);
+        return () => {
+          entry.subs.delete(sub);
+        };
+      }, []);
+      const defaults = React.useMemo(() => {
+        const d = {};
+        for (const k in entry.propsMeta || {}) {
+          const v = entry.propsMeta?.[k]?.default;
+          if (v !== void 0) d[k] = v;
+        }
+        return d;
+      }, [entry.propsMeta]);
+      return h(Root, { ...defaults, ...entry.propOverrides || {} });
+    }
+    const ReactDOM = getReactDOM();
+    if (ReactDOM.createRoot)
+      ReactDOM.createRoot(hostEl).render(h(StandaloneRoot));
+    else ReactDOM.render(h(StandaloneRoot), hostEl);
+    return rootName;
+  }
+
+  // src/expr.ts
+  var IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*/;
+  var NUMBER_RE = /^-?\d+(\.\d+)?$/;
+  function resolve(vals, src) {
+    const expr = String(src).trim();
+    if (!expr) return void 0;
+    if (expr[0] === "(" && expr[expr.length - 1] === ")" && parensWrapWhole(expr)) {
+      return resolve(vals, expr.slice(1, -1));
+    }
+    const eq = findTopLevelEquality(expr);
+    if (eq) {
+      const lv = resolve(vals, expr.slice(0, eq.index));
+      const rv = resolve(vals, expr.slice(eq.index + eq.op.length));
+      switch (eq.op) {
+        case "===":
+          return lv === rv;
+        case "!==":
+          return lv !== rv;
+        case "==":
+          return lv == rv;
+        default:
+          return lv != rv;
+      }
+    }
+    if (expr[0] === "!") return !resolve(vals, expr.slice(1));
+    if (expr === "true") return true;
+    if (expr === "false") return false;
+    if (expr === "null") return null;
+    if (expr === "undefined") return void 0;
+    if (NUMBER_RE.test(expr)) return Number(expr);
+    if (expr.length >= 2 && (expr[0] === '"' || expr[0] === "'") && expr[expr.length - 1] === expr[0]) {
+      return expr.slice(1, -1);
+    }
+    return resolvePath(vals, expr);
+  }
+  function parensWrapWhole(expr) {
+    let depth = 0;
+    for (let i = 0; i < expr.length - 1; i++) {
+      if (expr[i] === "(") depth++;
+      else if (expr[i] === ")") {
+        depth--;
+        if (depth === 0) return false;
+      }
+    }
+    return true;
+  }
+  function findTopLevelEquality(expr) {
+    let depth = 0;
+    for (let i = 0; i < expr.length; i++) {
+      const c = expr[i];
+      if (c === "[" || c === "(") depth++;
+      else if (c === "]" || c === ")") depth--;
+      else if (depth === 0 && (c === "=" || c === "!") && expr[i + 1] === "=") {
+        if (i > 0 && (expr[i - 1] === "=" || expr[i - 1] === "!")) continue;
+        if (!expr.slice(0, i).trim()) continue;
+        const op = expr[i + 2] === "=" ? c + "==" : c + "=";
+        return { index: i, op };
+      }
+    }
+    return null;
+  }
+  function resolvePath(vals, expr) {
+    const head = expr.match(IDENT_RE);
+    if (!head) return void 0;
+    let cur = vals == null ? void 0 : vals[head[0]];
+    let i = head[0].length;
+    while (i < expr.length) {
+      if (expr[i] === ".") {
+        const m = expr.slice(i + 1).match(IDENT_RE) || expr.slice(i + 1).match(/^\d+/);
+        if (!m) return void 0;
+        cur = cur == null ? void 0 : cur[m[0]];
+        i += 1 + m[0].length;
+      } else if (expr[i] === "[") {
+        let depth = 1;
+        let j = i + 1;
+        while (j < expr.length && depth > 0) {
+          if (expr[j] === "[") depth++;
+          else if (expr[j] === "]") {
+            depth--;
+            if (depth === 0) break;
+          }
+          j++;
+        }
+        if (depth !== 0) return void 0;
+        const key = resolve(vals, expr.slice(i + 1, j));
+        cur = cur == null ? void 0 : cur[key];
+        i = j + 1;
+      } else {
+        return void 0;
+      }
+    }
+    return cur;
+  }
+
+  // src/encode.ts
+  var CAMEL_ATTR = "sc-camel-";
+  var INLINE_TEXT_TAGS = new Set(
+    "a abbr b bdi bdo br cite code del dfn em i ins kbd mark q s samp small span strike strong sub sup u var wbr".split(
+      " "
+    )
+  );
+  var RAW_WRAP = {
+    select: "sc-raw-select",
+    table: "sc-raw-table",
+    tbody: "sc-raw-tbody",
+    thead: "sc-raw-thead",
+    tfoot: "sc-raw-tfoot",
+    tr: "sc-raw-tr",
+    td: "sc-raw-td",
+    th: "sc-raw-th",
+    caption: "sc-raw-caption"
+  };
+  var RAW_UNWRAP = Object.fromEntries(
+    Object.entries(RAW_WRAP).map(([k, v]) => [v, k])
+  );
+  var EVENT_MAP = {
+    onclick: "onClick",
+    onchange: "onChange",
+    oninput: "onInput",
+    onsubmit: "onSubmit",
+    onkeydown: "onKeyDown",
+    onkeyup: "onKeyUp",
+    onkeypress: "onKeyPress",
+    onmousedown: "onMouseDown",
+    onmouseup: "onMouseUp",
+    onmouseenter: "onMouseEnter",
+    onmouseleave: "onMouseLeave",
+    onfocus: "onFocus",
+    onblur: "onBlur",
+    ondoubleclick: "onDoubleClick",
+    oncontextmenu: "onContextMenu",
+    onmousemove: "onMouseMove",
+    onmouseover: "onMouseOver",
+    onmouseout: "onMouseOut",
+    onpointerdown: "onPointerDown",
+    onpointerup: "onPointerUp",
+    onpointermove: "onPointerMove",
+    onpointerenter: "onPointerEnter",
+    onpointerleave: "onPointerLeave",
+    onpointercancel: "onPointerCancel",
+    onpointerover: "onPointerOver",
+    onpointerout: "onPointerOut",
+    ongotpointercapture: "onGotPointerCapture",
+    onlostpointercapture: "onLostPointerCapture",
+    ontouchstart: "onTouchStart",
+    ontouchend: "onTouchEnd",
+    ontouchmove: "onTouchMove",
+    ontouchcancel: "onTouchCancel",
+    ondragstart: "onDragStart",
+    ondragend: "onDragEnd",
+    ondragenter: "onDragEnter",
+    ondragleave: "onDragLeave",
+    ondragover: "onDragOver",
+    onanimationstart: "onAnimationStart",
+    onanimationend: "onAnimationEnd",
+    onanimationiteration: "onAnimationIteration",
+    ontransitionend: "onTransitionEnd"
+  };
+  var ATTRS = `(?:[^>"']|"[^"]*"|'[^']*')*`;
+  var IMPORT_SELF_CLOSE_RE = new RegExp(
+    "<(x-import|dc-import)(" + ATTRS + ")/>",
+    "gi"
+  );
+  var CAMEL_ATTR_RE = /(\s)([a-z]+[A-Z][A-Za-z0-9]*)(\s*=)/g;
+  function encodeCamelAttrs(html) {
+    return html.replace(
+      CAMEL_ATTR_RE,
+      (_, sp, name, eq) => sp + CAMEL_ATTR + name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()) + eq
+    );
+  }
+  function encodeCase(html) {
+    html = html.replace(
+      IMPORT_SELF_CLOSE_RE,
+      (_, t, a) => "<" + t + a + "></" + t + ">"
+    );
+    html = html.replace(/<helmet(\s|>)/gi, "<sc-helmet$1");
+    html = html.replace(/<\/helmet\s*>/gi, "</sc-helmet>");
+    html = encodeCamelAttrs(html);
+    for (const [real, alias] of Object.entries(RAW_WRAP)) {
+      html = html.replace(
+        new RegExp("(</?)" + real + "(?=[\\s>])", "gi"),
+        "$1" + alias
+      );
+    }
+    return html;
+  }
+  function kebabToCamel(s) {
+    return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+  }
+  function cssToObj(css) {
+    const o = {};
+    for (const decl of css.split(";")) {
+      const i = decl.indexOf(":");
+      if (i < 0) continue;
+      const prop = decl.slice(0, i).trim();
+      o[prop.startsWith("--") ? prop : kebabToCamel(prop)] = decl.slice(i + 1).trim();
+    }
+    return o;
+  }
+  function compileAttr(raw) {
+    const whole = raw.match(/^\s*\{\{([\s\S]+?)\}\}\s*$/);
+    if (whole) {
+      const path = whole[1];
+      return (vals) => resolve(vals, path);
+    }
+    if (raw.includes("{{")) {
+      const parts = raw.split(/\{\{([\s\S]+?)\}\}/g);
+      return (vals) => parts.map((s, i) => i & 1 ? resolve(vals, s) ?? "" : s).join("");
+    }
+    return () => raw;
+  }
+
+  // src/compile.ts
+  function collectProps(node, kind, host) {
+    const propGetters = [];
+    const pseudoClasses = [];
+    let hintSize = null;
+    for (const { name, value } of [...node.attributes]) {
+      if (name === "sc-name" || name === "data-dc-tpl") continue;
+      let key = name;
+      if (key.startsWith(CAMEL_ATTR))
+        key = kebabToCamel(key.slice(CAMEL_ATTR.length));
+      if (key === "hint-size") {
+        hintSize = value;
+        continue;
+      }
+      if (key.startsWith("style-")) {
+        pseudoClasses.push(host.pseudoClass(key.slice(6), value));
+        continue;
+      }
+      if (kind !== "dom") {
+        if (key.includes("-") && !(kind === "x-import" && (key.startsWith("aria-") || key.startsWith("data-"))))
+          key = kebabToCamel(key);
+      } else {
+        if (key === "class") key = "className";
+        else if (key === "for") key = "htmlFor";
+        else if (key.startsWith("on"))
+          key = EVENT_MAP[key] || "on" + key[2].toUpperCase() + key.slice(3);
+      }
+      propGetters.push([key, compileAttr(value)]);
+    }
+    return { propGetters, pseudoClasses, hintSize };
+  }
+  var HOST_STYLE_PROPS = /* @__PURE__ */ new Set([
+    "position",
+    "left",
+    "right",
+    "top",
+    "bottom",
+    "inset",
+    "width",
+    "height",
+    "z-index",
+    "transform"
+  ]);
+  function hostPositionStyle(style) {
+    const all = typeof style === "string" ? cssToObj(style) : style != null && typeof style === "object" ? style : null;
+    if (!all) return void 0;
+    const out = {};
+    for (const [k, v] of Object.entries(all)) {
+      const kebab = k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+      if (HOST_STYLE_PROPS.has(kebab)) out[k] = v;
+    }
+    return Object.keys(out).length ? out : void 0;
+  }
+  function compileTemplate(html, host) {
+    const tpl = document.createElement("template");
+    //! nosemgrep: direct-inner-html-assignment
+    tpl.innerHTML = encodeCase(html);
+    let tplN = 0;
+    (function stamp(node) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        node.setAttribute("data-dc-tpl", String(tplN++));
+      }
+      for (const c of node.childNodes) stamp(c);
+    })(tpl.content);
+    const builders = walkChildren(tpl.content, host);
+    const render = ((vals, ctx) => builders.map((b, i) => b(vals || {}, ctx, i)));
+    render.__annotated = tpl.innerHTML;
+    return render;
+  }
+  function walkChildren(node, host) {
+    return [...node.childNodes].map((c) => walk(c, host)).filter((b) => b != null);
+  }
+  function walk(node, host) {
+    if (node.nodeType === Node.TEXT_NODE) return walkText(node);
+    if (node.nodeType !== Node.ELEMENT_NODE) return null;
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "sc-for") return walkFor(el, host);
+    if (tag === "sc-if") return walkIf(el, host);
+    if (tag === "x-import") return walkXImport(el, host);
+    if (tag === "sc-helmet") return host.helmet(el);
+    if (tag === "dc-import") return walkComponent(el, host);
+    return walkElement(el, host);
+  }
+  var warnedHoles = /* @__PURE__ */ new Set();
+  function warnUnresolved(ctx, what) {
+    const key = (ctx?.__name || "?") + "\0" + what;
+    if (warnedHoles.has(key)) return;
+    warnedHoles.add(key);
+    console.warn("[dc-runtime] " + (ctx?.__name || "template") + ": " + what);
+  }
+  function walkText(node) {
+    const txt = node.nodeValue ?? "";
+    if (!txt.includes("{{")) {
+      if (!txt.trim() && !txt.includes(" ")) return null;
+      return () => txt;
+    }
+    const parts = txt.split(/\{\{([\s\S]+?)\}\}/g);
+    return (vals, ctx, key) => h(
+      getReact().Fragment,
+      { key },
+      ...parts.map((p, i) => {
+        if (!(i & 1)) return p;
+        const v = resolve(vals, p);
+        if (v === void 0) {
+          if (!ctx?.__streamingNow) {
+            if (document.body?.hasAttribute("data-dc-editor-on")) {
+              return h(
+                "span",
+                { key: i, className: "sc-interp sc-unresolved" },
+                "{{ " + p.trim() + " }}"
+              );
+            }
+            warnUnresolved(
+              ctx,
+              "{{ " + p.trim() + " }} never resolved \u2014 rendered as empty"
+            );
+            return null;
+          }
+          return h(
+            "span",
+            { key: i, className: "sc-interp sc-missing" },
+            p.trim()
+          );
+        }
+        if (getReact().isValidElement(v) || Array.isArray(v)) {
+          return h(getReact().Fragment, { key: i }, v);
+        }
+        if (v === null || typeof v === "boolean") return null;
+        return h("span", { key: i, className: "sc-interp" }, String(v));
+      })
+    );
+  }
+  function walkFor(el, host) {
+    const listGet = compileAttr(el.getAttribute("list") || "");
+    const asName = el.getAttribute("as") || "item";
+    const hintN = parseInt(el.getAttribute("hint-placeholder-count") || "0", 10);
+    const kids = walkChildren(el, host);
+    const listSrc = el.getAttribute("list") || "";
+    return (vals, ctx, key) => {
+      let list = listGet(vals);
+      if (!Array.isArray(list)) {
+        if (!ctx?.__streamingNow) {
+          if (list !== void 0 && list !== null) {
+            warnUnresolved(
+              ctx,
+              'sc-for list="' + listSrc + '" is not an array (' + typeof list + ")"
+            );
+          }
+          list = [];
+        } else {
+          list = hintN > 0 ? Array(hintN).fill(void 0) : [];
+        }
+      }
+      return h(
+        getReact().Fragment,
+        { key },
+        list.map((item, i) => {
+          const sub = { ...vals, [asName]: item, $index: i };
+          return h(
+            getReact().Fragment,
+            { key: i },
+            kids.map((b, j) => b(sub, ctx, j))
+          );
+        })
+      );
+    };
+  }
+  function walkIf(el, host) {
+    const valGet = compileAttr(el.getAttribute("value") || "");
+    const hintRaw = el.getAttribute("hint-placeholder-val");
+    const hintGet = hintRaw != null ? compileAttr(hintRaw) : null;
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      let v = valGet(vals);
+      if (v === void 0 && hintGet && ctx?.__streamingNow) v = hintGet(vals);
+      return v ? h(
+        getReact().Fragment,
+        { key },
+        kids.map((b, j) => b(vals, ctx, j))
+      ) : null;
+    };
+  }
+  function walkComponent(el, host) {
+    const name = el.getAttribute("name") || el.getAttribute("component") || "";
+    el.removeAttribute("name");
+    el.removeAttribute("component");
+    const tplId = el.getAttribute("data-dc-tpl");
+    const styleRaw = el.getAttribute("style");
+    el.removeAttribute("style");
+    const styleGet = styleRaw != null ? compileAttr(styleRaw) : null;
+    const { propGetters, hintSize } = collectProps(el, "dc-import", host);
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      const props = {
+        key,
+        __hintSize: hintSize,
+        __tplId: tplId,
+        __hostStyle: styleGet ? hostPositionStyle(styleGet(vals)) : void 0
+      };
+      for (const [k, g] of propGetters) {
+        const v = g(vals);
+        if (k === "dcProps") {
+          if (v && typeof v === "object") Object.assign(props, v);
+          continue;
+        }
+        props[k] = v;
+      }
+      if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j));
+      return h(host.component(name), props);
+    };
+  }
+  function walkXImport(el, host) {
+    const globalNameGet = compileAttr(
+      el.getAttribute("component-from-global-scope") || ""
+    );
+    const exportNameGet = compileAttr(
+      el.getAttribute("component") || el.getAttribute("name") || ""
+    );
+    const fromRaw = el.getAttribute("from") || (el.getAttribute("component-from-global-scope") ? "" : el.getAttribute("src") || el.getAttribute("import") || "");
+    const urls = fromRaw.trim() ? fromRaw.trim().split(/\s+/) : [];
+    const url = urls.length ? urls[urls.length - 1] : "";
+    const kindOf = (u) => /\.(jsx|tsx)(\?|#|$)/i.test(u) ? "jsx" : "js";
+    const tplId = el.getAttribute("data-dc-tpl");
+    const styleRaw = el.getAttribute("style");
+    el.removeAttribute("style");
+    const styleGet = styleRaw != null ? compileAttr(styleRaw) : null;
+    const wrap = tplId != null || styleGet != null;
+    const { propGetters, hintSize } = collectProps(el, "x-import", host);
+    const hasContent = el.children.length > 0 || !!(el.textContent || "").trim();
+    const kids = hasContent ? walkChildren(el, host) : [];
+    const urlBindable = fromRaw.includes("{{");
+    if (urls.length && !urlBindable) {
+      let prev;
+      for (const u of urls) prev = host.loadExternal(kindOf(u), u, prev);
+    }
+    const evalName = (g, vals) => {
+      const v = g(vals);
+      const s = v == null ? "" : String(v);
+      return s.includes("{{") ? "" : s;
+    };
+    return (vals, ctx, key) => {
+      const globalName = evalName(globalNameGet, vals);
+      const name = globalName || evalName(exportNameGet, vals);
+      const C = !name || urlBindable ? null : globalName ? host.resolveExternalGlobal(url, globalName) : host.resolveExternal(url, name);
+      const hostStyle = styleGet ? hostPositionStyle(styleGet(vals)) : void 0;
+      const wrapper = wrap ? {
+        key,
+        className: "sc-host-x",
+        "data-dc-tpl": tplId,
+        style: hostStyle || { display: "contents" }
+      } : null;
+      if (!C) {
+        const error = urlBindable ? "x-import `from` cannot contain {{ \u2026 }} \u2014 module URLs are resolved at parse time; use a literal URL" : host.resolveExternalError(url, name);
+        const ph = host.placeholder({
+          key: wrapper ? void 0 : key,
+          name,
+          hintSize,
+          error
+        });
+        return wrapper ? h("div", wrapper, ph) : ph;
+      }
+      const props = wrapper ? {} : { key };
+      let unresolvedHole = false;
+      for (const [k, g] of propGetters) {
+        if (k === "component" || k === "componentFromGlobalScope" || k === "from") {
+          continue;
+        }
+        const v = g(vals);
+        if (v === void 0) unresolvedHole = true;
+        if (k === "dcProps") {
+          if (v && typeof v === "object") Object.assign(props, v);
+          continue;
+        }
+        props[k] = v;
+      }
+      if (unresolvedHole && ctx?.__htmlStreamingNow) {
+        const ph = host.placeholder({
+          key: wrapper ? void 0 : key,
+          name,
+          hintSize,
+          error: null
+        });
+        return wrapper ? h("div", wrapper, ph) : ph;
+      }
+      if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j));
+      return wrapper ? h("div", wrapper, h(C, props)) : h(C, props);
+    };
+  }
+  function contentKey(el) {
+    const clone = el.cloneNode(true);
+    for (const d of clone.querySelectorAll("*")) {
+      while (d.attributes.length) d.removeAttribute(d.attributes[0].name);
+    }
+    const s = clone.innerHTML;
+    let h2 = 5381;
+    for (let i = 0; i < s.length; i++) h2 = (h2 << 5) + h2 + s.charCodeAt(i) | 0;
+    return s.length + "." + (h2 >>> 0).toString(36);
+  }
+  var NEVER_CONTENT_KEYED = new Set(
+    "script style textarea option title select canvas iframe video audio".split(
+      " "
+    )
+  );
+  var NOT_INLINE_SELECTOR = ":not(" + [...INLINE_TEXT_TAGS].join(",") + ")";
+  function walkElement(el, host) {
+    const realTag = RAW_UNWRAP[el.localName] || el.localName;
+    const tplId = el.getAttribute("data-dc-tpl");
+    const inlineOnly = el.childNodes.length > 0 && !NEVER_CONTENT_KEYED.has(realTag) && el.querySelector(NOT_INLINE_SELECTOR) === null;
+    const keySuffix = inlineOnly ? "|" + contentKey(el) : "";
+    const { propGetters, pseudoClasses } = collectProps(el, "dom", host);
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      const props = {
+        key: key + keySuffix,
+        "data-dc-tpl": tplId
+      };
+      for (const [k, g] of propGetters) {
+        let v = g(vals);
+        if (k === "style" && typeof v === "string") v = cssToObj(v);
+        if ((k === "value" || k === "checked") && v === void 0) {
+          v = k === "checked" ? false : "";
+        }
+        props[k] = v;
+      }
+      if (pseudoClasses.length) {
+        props.className = [props.className, ...pseudoClasses].filter(Boolean).join(" ");
+      }
+      return h(realTag, props, ...kids.map((b, j) => b(vals, ctx, j)));
+    };
+  }
+
+  // src/logic.ts
+  var StreamableLogic = class {
+    constructor(props) {
+      __publicField(this, "props");
+      __publicField(this, "state", {});
+      /** Back-pointer to the wrapper component, installed after construction. */
+      __publicField(this, "__host");
+      this.props = props || {};
+    }
+    setState(update, cb) {
+      this.__host && this.__host.__setLogicState(update, cb);
+    }
+    forceUpdate() {
+      this.__host && this.__host.forceUpdate();
+    }
+    componentDidMount() {
+    }
+    componentDidUpdate(_prevProps) {
+    }
+    componentWillUnmount() {
+    }
+    /** The flat object the template renders against (merged over props). */
+    renderVals() {
+      return {};
+    }
+  };
+  function evalDcLogic(src) {
+    //! nosemgrep: eval-and-function-constructor
+    const fn = new Function(
+      "DCLogic",
+      "StreamableLogic",
+      "React",
+      src + '\n;return (typeof Component!=="undefined"&&Component)||undefined;'
+    );
+    return fn(StreamableLogic, StreamableLogic, getReact());
+  }
+
+  // src/component.ts
+  function shallowEqual(a, b) {
+    if (!b) return false;
+    const ak = Object.keys(a).filter((k) => k !== "children");
+    const bk = Object.keys(b).filter((k) => k !== "children");
+    if (ak.length !== bk.length) return false;
+    for (const k of ak) if (a[k] !== b[k]) return false;
+    return true;
+  }
+  function Placeholder({
+    name,
+    hintSize,
+    streaming,
+    error
+  }) {
+    const [w, hgt] = (hintSize || "100%,60px").split(",");
+    return h(
+      "div",
+      {
+        className: "sc-placeholder" + (streaming ? " sc-streaming" : ""),
+        style: { width: w.trim(), height: hgt && hgt.trim() },
+        title: name
+      },
+      error ? h(
+        "div",
+        { className: "sc-placeholder-error" },
+        (name ? name + ": " : "") + error
+      ) : null
+    );
+  }
+  function hintToMin(hint) {
+    if (!hint) return void 0;
+    const [w, hgt] = hint.split(",");
+    return { minWidth: w.trim(), minHeight: hgt && hgt.trim() };
+  }
+  function createComponentFactory(registry, ensureFetched) {
+    const React = getReact();
+    const AncestorContext = React.createContext([]);
+    class StreamableComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        __publicField(this, "__name");
+        __publicField(this, "__sub");
+        __publicField(this, "__needsDidMount", false);
+        /** Snapshot of the registry's streaming flags taken at render time —
+         *  builders read it off the RenderCtx (this) to pick placeholder vs
+         *  render-nothing for unresolved values. */
+        __publicField(this, "__streamingNow", false);
+        __publicField(this, "__htmlStreamingNow", false);
+        /** When a construct throws, remember the (class, registry.ver, props)
+         *  triple so render-time reconcile doesn't re-attempt it on every parent
+         *  re-render. A registry bump (new class, template, external module
+         *  resolving via bumpAll) changes `ver` and breaks the memo so an
+         *  env-dependent constructor can self-heal. */
+        __publicField(this, "__failedLogic", null);
+        __publicField(this, "__failedUserProps", null);
+        __publicField(this, "__failedVer", -1);
+        /** Per-instance constructor error — kept here (not on the registry entry)
+         *  so one instance's successful construct can't hide a sibling's failure,
+         *  and a construct can never wipe an eval error `updateJs` recorded on
+         *  `r.logicError`. */
+        __publicField(this, "__ctorError", null);
+        __publicField(this, "logic");
+        this.__name = props.__name;
+        this.state = { __v: 0, __err: null };
+        this.__sub = () => {
+          if (this.state.__err) this.setState({ __err: null });
+          this.forceUpdate();
+        };
+        this.__makeLogic(registry.get(this.__name).Logic, null);
+        ensureFetched(this.__name);
+      }
+      /** Error-boundary hook: a render crash anywhere in this DC's subtree
+       *  (its own template, an x-import'd component, a child DC without its
+       *  own deeper boundary) lands here instead of unmounting the page. */
+      static getDerivedStateFromError(e) {
+        return { __err: e instanceof Error && e.message ? e.message : String(e) };
+      }
+      componentDidCatch(e, info) {
+        console.error(
+          "[dc-runtime] render error in <" + this.__name + ">:",
+          e,
+          info?.componentStack || ""
+        );
+      }
+      /** Instantiate the logic class (or the no-op base) and adopt `prevState`
+       *  over its initial state — used both at mount and on hot-swap. */
+      __makeLogic(Logic, prevState) {
+        const L = Logic || StreamableLogic;
+        try {
+          this.logic = new L(this.__userProps());
+          this.__failedLogic = null;
+          this.__failedUserProps = null;
+          this.__ctorError = null;
+        } catch (e) {
+          console.error(e);
+          this.__failedLogic = Logic;
+          this.__failedUserProps = this.__userProps();
+          this.__failedVer = registry.get(this.__name).ver;
+          this.__ctorError = this.__name + ": " + (e instanceof Error && e.message ? e.message : String(e));
+          this.logic = new StreamableLogic(
+            this.__userProps()
+          );
+        }
+        this.logic.__host = this;
+        if (prevState)
+          this.logic.state = { ...this.logic.state || {}, ...prevState };
+      }
+      /** The props the author's logic + template see — internal __-prefixed
+       *  wiring stripped. */
+      __userProps() {
+        const { __name, __hintSize, __tplId, __hostStyle, ...rest } = this.props;
+        return rest;
+      }
+      __setLogicState(update, cb) {
+        const prev = this.logic.state;
+        const patch = typeof update === "function" ? update(prev) : update;
+        this.logic.state = { ...prev, ...patch };
+        this.setState((s) => ({ __v: s.__v + 1 }), cb);
+      }
+      /** Swap the logic instance when the registry's Logic class changed
+       *  (streaming completion, hot reload). State carries over; didMount
+       *  re-fires after the swap commits so refs exist. */
+      __reconcileLogic() {
+        const r = registry.get(this.__name);
+        const Next = r.Logic;
+        const Cur = this.logic.constructor;
+        if (Next === Cur || !Next && Cur === StreamableLogic || Next === this.__failedLogic && r.ver === this.__failedVer && shallowEqual(this.__userProps(), this.__failedUserProps)) {
+          return;
+        }
+        if (!this.__needsDidMount) {
+          try {
+            this.logic.componentWillUnmount();
+          } catch (e) {
+            console.error(e);
+          }
+        }
+        this.__makeLogic(Next, this.logic.state);
+        this.__needsDidMount = true;
+      }
+      componentDidMount() {
+        registry.get(this.__name).subs.add(this.__sub);
+        try {
+          this.logic.componentDidMount();
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      componentDidUpdate(prevProps) {
+        this.logic.props = this.__userProps();
+        if (this.__needsDidMount) {
+          if (this.state.__err || !registry.get(this.__name).tpl) return;
+          this.__needsDidMount = false;
+          try {
+            this.logic.componentDidMount();
+          } catch (e) {
+            console.error(e);
+          }
+        } else {
+          try {
+            this.logic.componentDidUpdate(prevProps);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+      componentWillUnmount() {
+        registry.get(this.__name).subs.delete(this.__sub);
+        if (!this.__needsDidMount) {
+          try {
+            this.logic.componentWillUnmount();
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+      render() {
+        const r = registry.get(this.__name);
+        const cls = "sc-host" + (r.htmlStreaming ? " sc-streaming-html" : "") + (r.jsStreaming ? " sc-streaming-js" : "");
+        const hintStyle = r.htmlStreaming ? hintToMin(this.props.__hintSize) : void 0;
+        const hostStyle = this.props.__hostStyle || hintStyle ? { ...hintStyle || {}, ...this.props.__hostStyle || {} } : void 0;
+        const hostBase = {
+          className: cls,
+          style: hostStyle,
+          "data-sc-name": this.__name,
+          "data-dc-tpl": this.props.__tplId
+        };
+        const chain = Array.isArray(this.context) ? this.context : [];
+        if (chain.includes(this.__name)) {
+          const cycle = [
+            ...chain.slice(chain.indexOf(this.__name)),
+            this.__name
+          ].join(" \u2192 ");
+          return h(
+            "div",
+            { ...hostBase, className: cls + " sc-has-error" },
+            h(Placeholder, {
+              name: this.__name,
+              hintSize: this.props.__hintSize,
+              error: "circular import: " + cycle
+            })
+          );
+        }
+        if (this.state.__err) {
+          return h(
+            "div",
+            { ...hostBase, className: cls + " sc-has-error" },
+            h(
+              "div",
+              { className: "sc-logic-error", "data-omelette-chrome": "" },
+              this.__name + ": " + this.state.__err
+            ),
+            h(Placeholder, {
+              name: this.__name,
+              hintSize: this.props.__hintSize,
+              error: this.state.__err
+            })
+          );
+        }
+        this.__reconcileLogic();
+        if (!r.tpl) {
+          return h(
+            "div",
+            hostBase,
+            h(Placeholder, { name: this.__name, hintSize: this.props.__hintSize })
+          );
+        }
+        const userProps = this.__userProps();
+        this.logic.props = userProps;
+        let vals = userProps;
+        let renderErr = r.logicError || this.__ctorError;
+        try {
+          vals = { ...userProps, ...this.logic.renderVals() || {} };
+        } catch (e) {
+          console.error(e);
+          renderErr = this.__name + ".renderVals(): " + (e instanceof Error && e.message ? e.message : String(e));
+        }
+        this.__streamingNow = !!(r.htmlStreaming || r.jsStreaming);
+        this.__htmlStreamingNow = !!r.htmlStreaming;
+        return h(
+          "div",
+          { ...hostBase, className: cls + (renderErr ? " sc-has-error" : "") },
+          renderErr && h(
+            "div",
+            { className: "sc-logic-error", "data-omelette-chrome": "" },
+            renderErr
+          ),
+          h(
+            AncestorContext.Provider,
+            { value: [...chain, this.__name] },
+            r.tpl(vals, this)
+          )
+        );
+      }
+    }
+    __publicField(StreamableComponent, "contextType", AncestorContext);
+    const named = /* @__PURE__ */ new Map();
+    function getDC(name) {
+      const hit = named.get(name);
+      if (hit) return hit;
+      function Dispatcher(p) {
+        const [, setTick] = React.useState(0);
+        React.useEffect(() => {
+          const sub = () => setTick((n) => n + 1);
+          registry.get(name).subs.add(sub);
+          return () => {
+            registry.get(name).subs.delete(sub);
+          };
+        }, []);
+        ensureFetched(name);
+        return h(StreamableComponent, { ...p, __name: name });
+      }
+      Dispatcher.displayName = name;
+      named.set(name, Dispatcher);
+      return Dispatcher;
+    }
+    return {
+      getDC,
+      StreamableComponent
+    };
+  }
+
+  // src/bundled.ts
+  function bundledBlob(url) {
+    const blobs = window.__resourceBlobs;
+    const b = blobs ? blobs[url.split("#")[0]] : void 0;
+    return b instanceof Blob ? b : null;
+  }
+
+  // src/cdn.ts
+  var REACT_URL = "https://unpkg.com/react@18.3.1/umd/react.production.min.js";
+  var REACT_SRI = "sha384-DGyLxAyjq0f9SPpVevD6IgztCFlnMF6oW/XQGmfe+IsZ8TqEiDrcHkMLKI6fiB/Z";
+  var REACT_DOM_URL = "https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js";
+  var REACT_DOM_SRI = "sha384-gTGxhz21lVGYNMcdJOyq01Edg0jhn/c22nsx0kyqP0TxaV5WVdsSH1fSDUf5YJj1";
+  var BABEL_URL = "https://unpkg.com/@babel/standalone@7.29.0/babel.min.js";
+  var BABEL_SRI = "sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y";
+  function cdnScriptFor(url, sri) {
+    const res = window.__resources;
+    const v = res ? res[url] : void 0;
+    return typeof v === "string" && v ? { src: v } : { src: url, integrity: sri };
+  }
+
+  // src/external.ts
+  var isCustomElementName = (n) => !n.includes(".") && n.includes("-");
+  function isRenderableType(g) {
+    if (typeof g === "function") return !isElementClass(g);
+    return typeof g === "object" && g !== null && typeof g.$$typeof === "symbol";
+  }
+  function resolveDottedPath(root, name) {
+    let cur = root;
+    for (const seg of name.split(".")) {
+      if (cur == null) return void 0;
+      cur = cur[seg];
+    }
+    return cur;
+  }
+  var GLOBAL_POLL_INTERVAL_MS = 50;
+  var GLOBAL_POLL_TIMEOUT_MS = 3e4;
+  function createExternalModules(onResolved) {
+    const cache = /* @__PURE__ */ new Map();
+    let babelLoading = null;
+    const reportedMissing = /* @__PURE__ */ new Map();
+    const polling = /* @__PURE__ */ new Set();
+    function ensureBabel() {
+      if (window.Babel) return Promise.resolve();
+      if (babelLoading) return babelLoading;
+      const babel = cdnScriptFor(BABEL_URL, BABEL_SRI);
+      babelLoading = new Promise((res, rej) => {
+        const s = document.createElement("script");
+        s.src = babel.src;
+        if (babel.integrity) {
+          s.integrity = babel.integrity;
+          s.crossOrigin = "anonymous";
+        }
+        s.onload = () => res();
+        s.onerror = rej;
+        document.head.appendChild(s);
+      });
+      return babelLoading;
+    }
+    const pending = /* @__PURE__ */ new Map();
+    function load(kind, url, after) {
+      const existing = pending.get(url);
+      if (existing) return existing;
+      cache.set(url, null);
+      console.info("[dc-runtime] x-import: loading", url, "(" + kind + ")");
+      const ready = Promise.all([
+        kind === "jsx" ? ensureBabel() : Promise.resolve(),
+        after ?? Promise.resolve()
+      ]);
+      const p = ready.then(() => {
+        const pre = bundledBlob(url);
+        if (pre) return pre.text();
+        return fetch(url).then((r) => {
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.text();
+        });
+      }).then((src) => {
+        const code = kind === "jsx" ? window.Babel.transform(src, {
+          filename: url,
+          presets: ["react", "typescript"]
+        }).code : src;
+        const module = { exports: {} };
+        const before = new Set(Object.keys(window));
+        //! nosemgrep: eval-and-function-constructor
+        new Function("React", "module", "exports", "require", code)(
+          getReact(),
+          module,
+          module.exports,
+          () => ({})
+        );
+        const globals = {};
+        for (const k of Object.keys(window)) {
+          if (!before.has(k) && typeof window[k] === "function") {
+            globals[k] = window[k];
+          }
+        }
+        cache.set(url, { mod: module.exports, globals });
+        console.info(
+          "[dc-runtime] x-import: loaded",
+          url,
+          "\u2014 exports:",
+          Object.keys(module.exports),
+          "window globals:",
+          Object.keys(globals)
+        );
+        onResolved();
+      }).catch((e) => {
+        cache.set(url, {
+          mod: {},
+          globals: {},
+          error: "failed to load: " + (e instanceof Error && e.message ? e.message : String(e))
+        });
+        console.error(
+          "[dc-runtime] x-import: FAILED to load",
+          url,
+          "(" + kind + ")",
+          e
+        );
+        onResolved();
+      });
+      pending.set(url, p);
+      return p;
+    }
+    function resolve2(url, name) {
+      const entry = cache.get(url);
+      if (!entry) return null;
+      const { mod, globals } = entry;
+      const C = mod && mod[name] || globals && globals[name] || typeof window !== "undefined" && window[name] || mod && mod.default;
+      if (typeof C === "function") return C;
+      const key = url + "\0" + name;
+      if (!reportedMissing.has(key)) {
+        reportedMissing.set(
+          key,
+          entry.error || 'no export named "' + name + '" (has: ' + Object.keys(mod).join(", ") + ")"
+        );
+        console.error(
+          "[dc-runtime] x-import: module",
+          url,
+          "loaded but has no component named",
+          JSON.stringify(name),
+          "\u2014 available exports:",
+          Object.keys(mod),
+          "window globals:",
+          Object.keys(globals),
+          ". The module must `module.exports = {" + name + "}` or set `window." + name + "`."
+        );
+      }
+      return null;
+    }
+    function waitForGlobal(name) {
+      if (polling.has(name)) return;
+      polling.add(name);
+      const started = Date.now();
+      const isCE = isCustomElementName(name);
+      const tick = () => {
+        const found = isCE ? customElements.get(name) : isRenderableType(resolveDottedPath(window, name));
+        if (found) {
+          polling.delete(name);
+          onResolved();
+          return;
+        }
+        if (Date.now() - started >= GLOBAL_POLL_TIMEOUT_MS) {
+          console.warn(
+            "[dc-runtime] x-import: global",
+            JSON.stringify(name),
+            "never appeared on window after " + GLOBAL_POLL_TIMEOUT_MS + "ms"
+          );
+          return;
+        }
+        setTimeout(tick, GLOBAL_POLL_INTERVAL_MS);
+      };
+      setTimeout(tick, GLOBAL_POLL_INTERVAL_MS);
+    }
+    function resolveGlobal(url, name) {
+      const isCE = isCustomElementName(name);
+      if (!url) {
+        if (isCE) {
+          if (customElements.get(name)) return name;
+          waitForGlobal(name);
+          return null;
+        }
+        const g2 = resolveDottedPath(window, name);
+        if (isRenderableType(g2)) return g2;
+        waitForGlobal(name);
+        return null;
+      }
+      const entry = cache.get(url);
+      if (!entry) return null;
+      if (isCE && customElements.get(name)) return name;
+      const g = entry.globals[name] ?? resolveDottedPath(window, name);
+      if (isRenderableType(g)) return g;
+      if (name.includes(".")) return null;
+      const key = url + "\0global\0" + name;
+      if (!reportedMissing.has(key)) {
+        reportedMissing.set(key, null);
+        if (isCE && !customElements.get(name)) {
+          console.warn(
+            "[dc-runtime] x-import:",
+            url,
+            "loaded but no custom element",
+            JSON.stringify(name),
+            "is registered and window." + name + " is not a function \u2014 rendering <" + name + "> as an unknown element."
+          );
+        }
+      }
+      return name;
+    }
+    function getError(url, name) {
+      const entry = cache.get(url);
+      if (entry?.error) return entry.error;
+      return reportedMissing.get(url + "\0" + name) || null;
+    }
+    return { load, resolve: resolve2, resolveGlobal, getError };
+  }
+  function isElementClass(g) {
+    try {
+      return typeof g === "function" && typeof HTMLElement !== "undefined" && g.prototype instanceof HTMLElement;
+    } catch {
+      return false;
+    }
+  }
+
+  // src/atomics.ts
+  var ATOMIC_CSS = (
+    // layout
+    ".fx{display:flex}.col{display:flex;flex-direction:column}.grid{display:grid}.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs20{font-size:20px}.fs22{font-size:22px}.upper{text-transform:uppercase}.tc{text-align:center}.nowrap{white-space:nowrap}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.m0{margin:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.posrel{position:relative}.posabs{position:absolute}.round{border-radius:50%}.ohide{overflow:hidden}.bbox{box-sizing:border-box}.pointer{cursor:pointer}.w100{width:100%}.b0{border:none}"
+  );
+
+  // src/helmet.ts
+  var DESIGN_DOC_MODE_RE = /<meta\b[^>]*\bname\s*=\s*["']design_doc_mode["'][^>]*\b(?:content|value)\s*=\s*["'](\w+)["']/i;
+  var CANVAS_BG_LIGHT = "#f0eee6";
+  var CANVAS_BG_DARK = "#2e2c26";
+  function createHelmetManager(doc, isStreaming) {
+    const mounted = /* @__PURE__ */ new Set();
+    const live = /* @__PURE__ */ new Map();
+    let designDocMode = null;
+    let canvasStyleEl = null;
+    let appTheme = "light";
+    try {
+      const ds = doc.documentElement.dataset.theme;
+      appTheme = ds === "dark" || ds === "light" ? ds : new URLSearchParams(doc.defaultView?.location.search ?? "").get(
+        "theme"
+      ) === "dark" ? "dark" : "light";
+    } catch {
+    }
+    function applyCanvasBg() {
+      if (!canvasStyleEl) return;
+      const bg = appTheme === "dark" ? CANVAS_BG_DARK : CANVAS_BG_LIGHT;
+      canvasStyleEl.textContent = `html,body{background:${bg}}#dc-root>.sc-host{position:relative}`;
+    }
+    function postDesignMode(mode) {
+      if (window.parent === window) return;
+      try {
+        window.parent.postMessage({ type: "__dc_design_mode", mode }, "*");
+      } catch {
+      }
+    }
+    function setDesignDocMode(mode) {
+      if (mode === designDocMode) return;
+      designDocMode = mode;
+      postDesignMode(mode);
+      if (mode === "canvas") {
+        doc.documentElement.setAttribute("data-dc-canvas", "");
+        canvasStyleEl = doc.createElement("style");
+        canvasStyleEl.setAttribute("data-dc-canvas", "");
+        applyCanvasBg();
+        doc.head.appendChild(canvasStyleEl);
+      } else {
+        doc.documentElement.removeAttribute("data-dc-canvas");
+        canvasStyleEl?.remove();
+        canvasStyleEl = null;
+      }
+    }
+    window.addEventListener("message", (e) => {
+      const type = e.data && e.data.type;
+      if (type === "__dc_theme") {
+        const t = e.data.theme;
+        if (t === "light" || t === "dark") {
+          appTheme = t;
+          applyCanvasBg();
+        }
+        return;
+      }
+      if (!designDocMode || type !== "__dc_probe") return;
+      postDesignMode(designDocMode);
+    });
+    function compile(node) {
+      const raw = [...node.children];
+      const helmetClosed = node.nextSibling != null || node.parentNode?.nextSibling != null;
+      if (node.hasAttribute("data-dc-atomics") && !mounted.has("__dc-atomics")) {
+        mounted.add("__dc-atomics");
+        const el = doc.createElement("style");
+        el.id = "__dc-atomics";
+        el.textContent = ATOMIC_CSS;
+        doc.head.appendChild(el);
+      }
+      return (_vals, ctx) => {
+        const name = ctx && ctx.__name || "";
+        const streaming = !!(name && isStreaming(name));
+        for (let i = 0; i < raw.length; i++) {
+          const child = raw[i];
+          const tag = child.tagName;
+          const mayBePartial = streaming && !helmetClosed && i === raw.length - 1;
+          if (tag === "SCRIPT") {
+            if (mayBePartial) continue;
+            const key = "SCRIPT|" + (child.getAttribute("src") || child.textContent || "");
+            if (mounted.has(key)) continue;
+            mounted.add(key);
+            const el = doc.createElement("script");
+            for (const { name: an, value } of [...child.attributes])
+              el.setAttribute(an, value);
+            if (child.textContent) el.textContent = child.textContent;
+            doc.head.appendChild(el);
+          } else if (tag === "LINK" || tag === "META") {
+            if (mayBePartial) continue;
+            const key = tag + "|" + (child.getAttribute("href") || child.getAttribute("src") || child.outerHTML);
+            if (mounted.has(key)) continue;
+            mounted.add(key);
+            if (tag === "LINK") {
+              const rel = (child.getAttribute("rel") || "").toLowerCase().split(/\s+/);
+              const href = (child.getAttribute("href") || "").trim();
+              const res = window.__resources;
+              const pre = res && rel.includes("stylesheet") && !rel.includes("alternate") ? res[href] : void 0;
+              const blob = typeof pre === "string" && pre ? bundledBlob(pre) : null;
+              if (blob) {
+                const el = doc.createElement("style");
+                if (child.hasAttribute("disabled")) {
+                  el.setAttribute("media", "not all");
+                } else if (child.getAttribute("media")) {
+                  el.setAttribute("media", child.getAttribute("media"));
+                }
+                if (child.getAttribute("title"))
+                  el.setAttribute("title", child.getAttribute("title"));
+                void blob.text().then((css) => {
+                  el.textContent = css;
+                });
+                doc.head.appendChild(el);
+                continue;
+              }
+            }
+            doc.head.appendChild(child.cloneNode(true));
+          } else {
+            const key = name + "|" + i;
+            let el = live.get(key);
+            if (!el || el.tagName !== tag) {
+              if (el) el.remove();
+              el = doc.createElement(tag.toLowerCase());
+              live.set(key, el);
+              doc.head.appendChild(el);
+            }
+            for (const { name: an, value } of [...child.attributes]) {
+              if (el.getAttribute(an) !== value) el.setAttribute(an, value);
+            }
+            if (el.textContent !== child.textContent)
+              el.textContent = child.textContent;
+          }
+        }
+        return null;
+      };
+    }
+    return { compile, setDesignDocMode };
+  }
+
+  // src/pseudo.ts
+  function createPseudoSheet(doc) {
+    let el = null;
+    const cache = /* @__PURE__ */ new Map();
+    let n = 0;
+    return (pseudo, css) => {
+      const k = pseudo + "|" + css;
+      const hit = cache.get(k);
+      if (hit) return hit;
+      if (!el) {
+        el = doc.createElement("style");
+        doc.head.appendChild(el);
+      }
+      const cls = "scp" + (n++).toString(36);
+      const sel = pseudo === "before" || pseudo === "after" ? "." + cls + "::" + pseudo : "." + cls + ":" + pseudo;
+      el.sheet.insertRule(sel + "{" + css + "}", el.sheet.cssRules.length);
+      cache.set(k, cls);
+      return cls;
+    };
+  }
+
+  // src/registry.ts
+  function createRegistry() {
+    const entries = /* @__PURE__ */ Object.create(null);
+    function get(name) {
+      return entries[name] || (entries[name] = {
+        html: "",
+        tpl: null,
+        Logic: null,
+        jsStreaming: false,
+        htmlStreaming: false,
+        ver: 0,
+        subs: /* @__PURE__ */ new Set(),
+        fetched: false
+      });
+    }
+    function bump(name) {
+      const r = get(name);
+      r.ver++;
+      for (const fn of r.subs) fn();
+    }
+    return {
+      entries,
+      get,
+      bump,
+      bumpAll() {
+        for (const n in entries) bump(n);
+      }
+    };
+  }
+
+  // src/runtime.ts
+  var COMPONENT_DIR = ".";
+  function createRuntime(doc = document) {
+    const registry = createRegistry();
+    const pseudoClass = createPseudoSheet(doc);
+    const helmet = createHelmetManager(
+      doc,
+      (name) => registry.get(name).htmlStreaming
+    );
+    const external = createExternalModules(() => registry.bumpAll());
+    const factory = createComponentFactory(registry, ensureFetched);
+    const host = {
+      component: (name) => factory.getDC(name),
+      placeholder: (props) => h(Placeholder, props),
+      helmet: (node) => helmet.compile(node),
+      loadExternal: (kind, url, after) => external.load(kind, url, after),
+      resolveExternal: (url, name) => external.resolve(url, name),
+      resolveExternalGlobal: (url, name) => external.resolveGlobal(url, name),
+      resolveExternalError: (url, name) => external.getError(url, name),
+      pseudoClass
+    };
+    function ensureFetched(name) {
+      const r = registry.get(name);
+      if (r.fetched) return;
+      r.fetched = true;
+      const url = COMPONENT_DIR + "/" + encodeURIComponent(name) + ".dc.html";
+      const res = window.__resources;
+      const pre = res ? res[url] : void 0;
+      const target = typeof pre === "string" && pre ? pre : url;
+      const blob = bundledBlob(target);
+      (blob ? blob.text() : fetch(target).then((res2) => {
+        if (!res2.ok) {
+          console.error(
+            '[dc-runtime] sibling fetch for "' + name + '" failed:',
+            url,
+            "returned",
+            res2.status,
+            "\u2014 the reference renders as an empty placeholder."
+          );
+          return "";
+        }
+        return res2.text();
+      })).then((t) => {
+        if (!t) return;
+        const parsed = parseDcText(t);
+        if (!parsed) {
+          console.error(
+            '[dc-runtime] sibling fetch for "' + name + '":',
+            url,
+            "has no <x-dc> block \u2014 not a Design Component."
+          );
+          return;
+        }
+        if (parsed.props) r.propsMeta = parsed.props;
+        if (parsed.preview) r.preview = parsed.preview;
+        if (parsed.template && !r.html) updateHtml(name, parsed.template);
+        if (parsed.js && !r.Logic) updateJs(name, parsed.js);
+      }).catch(
+        (e) => console.error(
+          '[dc-runtime] sibling fetch for "' + name + '" threw:',
+          url,
+          e
+        )
+      );
+    }
+    let rootName = null;
+    function updateHtml(name, html) {
+      const r = registry.get(name);
+      r.html = html;
+      if (name === rootName) {
+        const mode = DESIGN_DOC_MODE_RE.exec(html)?.[1] ?? null;
+        if (mode || !r.htmlStreaming) helmet.setDesignDocMode(mode);
+      }
+      try {
+        r.tpl = compileTemplate(html, host);
+      } catch (e) {
+        console.error("[dc-runtime] template compile FAILED for", name, e);
+      }
+      registry.bump(name);
+    }
+    function updateJs(name, src) {
+      const r = registry.get(name);
+      const seq = r.jsSeq = (r.jsSeq || 0) + 1;
+      try {
+        const Cls = evalDcLogic(src);
+        if (r.jsSeq !== seq) return;
+        if (typeof Cls !== "function") {
+          r.logicError = name + ".dc.html: <script data-dc-script> must define `class Component extends DCLogic`";
+        } else {
+          r.logicError = null;
+          r.Logic = Cls;
+        }
+      } catch (e) {
+        if (r.jsSeq !== seq) return;
+        console.error(
+          "[dc-runtime] logic class eval FAILED for",
+          name,
+          "\u2014 the template renders with props only.",
+          e
+        );
+        r.logicError = name + ": " + (e instanceof Error && e.message ? e.message : String(e));
+      }
+      registry.bump(name);
+    }
+    function setStreaming(name, kind, on) {
+      const r = registry.get(name);
+      if (kind === "html") r.htmlStreaming = !!on;
+      else r.jsStreaming = !!on;
+      let any = false;
+      for (const n in registry.entries) {
+        const e = registry.entries[n];
+        if (e && (e.htmlStreaming || e.jsStreaming)) {
+          any = true;
+          break;
+        }
+      }
+      doc.documentElement.classList.toggle("sc-dc-streaming", any);
+      registry.bump(name);
+    }
+    function dcUpdate(name, kind, content, streaming) {
+      if (streaming) registry.get(name).fetched = true;
+      if (kind === "html") {
+        setStreaming(name, "html", !!streaming);
+        updateHtml(name, content);
+      } else if (kind === "js") {
+        setStreaming(name, "js", !!streaming);
+        if (!streaming) updateJs(name, content);
+      } else if (kind === "props") {
+        const { props, preview } = parseDataProps(content);
+        const r = registry.get(name);
+        r.propsMeta = props ?? void 0;
+        r.preview = preview;
+        registry.bump(name);
+      }
+    }
+    function setProps(name, overrides) {
+      registry.get(name).propOverrides = overrides && typeof overrides === "object" ? { ...overrides } : null;
+      registry.bump(name);
+    }
+    function adoptParsed(name, parsed) {
+      if (!parsed) return;
+      const r = registry.get(name);
+      if (parsed.props) r.propsMeta = parsed.props;
+      if (parsed.preview) r.preview = parsed.preview;
+      if (parsed.template) updateHtml(name, parsed.template);
+      if (parsed.js) updateJs(name, parsed.js);
+    }
+    return {
+      registry,
+      getDC: factory.getDC,
+      updateHtml,
+      updateJs,
+      dcUpdate,
+      setProps,
+      adoptParsed,
+      setRootName: (name) => {
+        rootName = name;
+      },
+      markFetched: (name) => {
+        registry.get(name).fetched = true;
+      },
+      annotatedTemplate: (name) => {
+        const r = registry.get(name);
+        return r.tpl && r.tpl.__annotated || null;
+      },
+      templateSource: (name) => registry.get(name).html || null,
+      StreamableLogic
+    };
+  }
+
+  // src/stream-state.ts
+  function createStreamTracker(staleMs = 6e4, now = Date.now) {
+    const since = /* @__PURE__ */ new Map();
+    const liveOne = (n) => {
+      const t = since.get(n);
+      if (t === void 0) return false;
+      if (now() - t > staleMs) {
+        since.delete(n);
+        return false;
+      }
+      return true;
+    };
+    return {
+      push(name, streaming, viewportKey) {
+        if (viewportKey === "dc-model") return;
+        if (streaming) since.set(name, now());
+        else since.delete(name);
+      },
+      live(name) {
+        if (name !== void 0) return liveOne(name);
+        for (const n of [...since.keys()]) if (liveOne(n)) return true;
+        return false;
+      }
+    };
+  }
+
+  // src/index.ts
+  function hideRawTemplate() {
+    const s = document.createElement("style");
+    s.textContent = "x-dc{display:none!important}";
+    document.head.appendChild(s);
+  }
+  function loadScript(src, integrity) {
+    return new Promise((resolve2, reject) => {
+      //! nosemgrep: create-script-element
+      const s = document.createElement("script");
+      s.src = src;
+      if (integrity) {
+        s.integrity = integrity;
+        s.crossOrigin = "anonymous";
+      }
+      s.async = false;
+      s.onload = () => resolve2();
+      s.onerror = () => reject(new Error(`failed to load ${src}`));
+      document.head.appendChild(s);
+    });
+  }
+  function loadReactUmd() {
+    const w = window;
+    if (w.React && w.ReactDOM) return Promise.resolve();
+    const react = cdnScriptFor(REACT_URL, REACT_SRI);
+    const reactDom = cdnScriptFor(REACT_DOM_URL, REACT_DOM_SRI);
+    return Promise.all([
+      loadScript(react.src, react.integrity),
+      loadScript(reactDom.src, reactDom.integrity)
+    ]).then(() => void 0);
+  }
+  function init() {
+    const runtime = createRuntime(document);
+    let rootName = "Root";
+    const baseCss = document.createElement("style");
+    baseCss.textContent = BASE_CSS;
+    document.head.prepend(baseCss);
+    const notifyHost = () => {
+      if (window.parent === window) return;
+      const r = runtime.registry.entries[rootName];
+      try {
+        window.parent.postMessage(
+          {
+            type: "__dc_booted",
+            rootName,
+            propsMeta: r && r.propsMeta || null,
+            preview: r && r.preview || null
+          },
+          "*"
+        );
+      } catch {
+      }
+    };
+    const streams = createStreamTracker();
+    const api = {
+      __dcUpdate: (name, kind, content, streaming, viewportKey) => {
+        streams.push(name, streaming, viewportKey);
+        runtime.dcUpdate(name, kind, content, streaming);
+        if (name === rootName && !streaming && kind === "props") notifyHost();
+      },
+      __dcStreaming: (name) => streams.live(name),
+      __dcSetProps: (name, overrides) => runtime.setProps(name, overrides),
+      /** Name of the component currently mounted as the page root — DC tools
+       *  push their template-stream here when targeting "the open page". */
+      __dcRootName: () => rootName,
+      /** Editor bridge — the encoded, `data-dc-tpl`-annotated template source.
+       *  The host editor parses this into its own template DOM so it can map a
+       *  rendered node (carrying the same `data-dc-tpl`) back to the source
+       *  node that emitted it. Returns the encoded form (`sc-camel-*` attrs,
+       *  `<sc-raw-*>`/`<sc-helmet>` tags); the editor decodes on serialize. */
+      __dcAnnotatedTemplate: (name) => runtime.annotatedTemplate(name),
+      /** Editor bridge — the *original* (decoded) template source. */
+      __dcTemplateSource: (name) => runtime.templateSource(name),
+      __dcBoot: () => {
+        rootName = boot(runtime, document) ?? rootName;
+        notifyHost();
+      },
+      __dcRegistry: runtime.registry.entries,
+      getDC: (name) => runtime.getDC(name),
+      // `DCLogic` is the documented base class name; `StreamableLogic` is the
+      // implementation alias kept for any project that already references it.
+      DCLogic: runtime.StreamableLogic,
+      StreamableLogic: runtime.StreamableLogic
+    };
+    Object.assign(window, api);
+    window.__dcContentKeyed = true;
+    if (document.readyState !== "loading") api.__dcBoot();
+    else document.addEventListener("DOMContentLoaded", () => api.__dcBoot());
+  }
+  hideRawTemplate();
+  loadReactUmd().then(init).catch((err) => {
+    console.error("[dc] failed to load React or boot:", err);
+    throw err;
+  });
+})();
diff --git a/temp_new_design/uploads/dribbble_screenshot-1783968419442.webp b/temp_new_design/uploads/dribbble_screenshot-1783968419442.webp
new file mode 100644
index 0000000..197f98d
Binary files /dev/null and b/temp_new_design/uploads/dribbble_screenshot-1783968419442.webp differ