Change settings

src/components/CompareChartE.vue

@@ -1,284 +1,398 @@
 <template>
-  <div class="live-view px-4 py-3 space-y-3">
-    <!-- Asset tabs (logos, no prices) -->
-    <AssetTabs v-model="asset" />
-
-    <!-- $ / % mode switch -->
-    <div class="flex items-center gap-2">
-      <button
-        class="switch-btn"
-        :class="mode==='usd' ? 'switch-btn--active' : ''"
-        @click="mode='usd'">
-        $
-      </button>
-      <button
-        class="switch-btn"
-        :class="mode==='pct' ? 'switch-btn--active' : ''"
-        @click="mode='pct'">
-        %
-      </button>
-    </div>
-
-    <!-- Chart -->
-    <CompareChartE
-      v-if="winnersForChart.length"
-      :selected="winnersForChart"
-      :visible="true"
-      :mode="mode"
-    />
-    <div v-else class="empty">
-      No data for <strong>{{ asset }}</strong> yet. Check Supabase runs or try another asset.
-    </div>
-
-    <!-- Winner cards (best final equity per agent; computed like the chart) -->
-    <div v-if="winnersSorted.length" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-      <div
-        v-for="row in winnersSorted"
-        :key="row.agent_name+'|'+row.asset+'|'+row.model"
-        class="card">
-        <div class="min-w-0">
-          <div class="card-title truncate" :title="row.agent_name">{{ row.agent_name }}</div>
-          <div class="card-sub truncate" :title="row.model">{{ row.model }}</div>
-        </div>
-        <div class="text-right">
-          <div class="card-balance">{{ fmtUSD(row.balance) }}</div>
-          <div class="card-sub">
-            EOD {{ row.end_date ? new Date(row.end_date).toLocaleDateString() : (row.last_nav_ts ? new Date(row.last_nav_ts).toLocaleDateString() : '-') }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-else class="empty">
-      No winners for <strong>{{ asset }}</strong> yet.
-    </div>
+  <div class="chart-wrap">
+    <v-chart :option="option" autoresize class="h-96 w-full" />
   </div>
 </template>
 
-<script setup>
-import { ref, computed, onMounted, shallowRef, watch } from 'vue'
-import AssetTabs from '../components/AssetTabs.vue'
-import CompareChartE from '../components/CompareChartE.vue'
-import { dataService } from '../lib/dataService'
+<script>
+import { defineComponent } from 'vue'
+import VChart from 'vue-echarts'
+import * as echarts from 'echarts/core'
+import { LineChart, ScatterChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TooltipComponent, DataZoomComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
 
-/* === use the same helpers as the chart === */
 import { getAllDecisions } from '../lib/dataCache'
 import { readAllRawDecisions } from '../lib/idb'
 import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
 import { STRATEGIES } from '../lib/strategies'
 import { computeBuyHoldEquity, computeStrategyEquity } from '../lib/perf'
-
-/* ---- state ---- */
-const mode = ref('usd') // 'usd' | 'pct'
-const asset = ref('BTC')
-const agents = ref([])   // leaderboard/table rows
-let allDecisions = []    // raw decisions used for perf compute
-
-/* keep chart parity: cut BTC before Aug 1, 2025 */
-const ASSET_CUTOFF = { BTC: '2025-08-01' }
-const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
-
-/* ---- load once ---- */
-onMounted(async () => {
-  try {
-    if (!dataService.loaded && !dataService.loading) {
-      await dataService.load(false)  // populates tableRows & cache
-    }
-  } catch (e) {
-    console.error('LiveView: dataService.load failed', e)
-  }
-  agents.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
-
-  // decisions cache for perf (same source the chart uses)
-  allDecisions = getAllDecisions() || []
-  if (!allDecisions.length) {
-    try {
-      const cached = await readAllRawDecisions()
-      if (cached?.length) allDecisions = cached
-    } catch {}
-  }
-})
-
-/* ---- helpers ---- */
-function score(row) {
-  return typeof row.balance === 'number' ? row.balance : -Infinity
+import { getStrategyColor } from '../lib/chartColors'
+
+echarts.use([LineChart, GridComponent, ScatterChart, LegendComponent, TooltipComponent, DataZoomComponent, CanvasRenderer])
+
+const ASSET_CUTOFF = {
+  BTC: '2025-08-01',
+  // ETH: '2025-08-15',
+};
+
+// Stable palette per agent (tweak as you like)
+const AGENT_PALETTE = [
+  '#6D4CFE', // indigo
+  '#FF6B6B', // coral
+  '#10B981', // emerald
+  '#F59E0B', // amber
+  '#06B6D4', // cyan
+  '#A855F7', // violet
+  '#64748B', // slate
+  '#E11D48', // rose
+  '#0EA5E9', // sky
+  '#84CC16', // lime
+]
+
+// pick color by agent name + index (from agentColorIndex map)
+function getAgentColor(agent, idx = 0) {
+  // keep simple + deterministic
+  return AGENT_PALETTE[idx % AGENT_PALETTE.length]
 }
-const fmtUSD = (n) =>
-  (n ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
-
-/* winners by agent (from leaderboard rows), filtered by asset & excluding vanilla/vinilla */
-const winners = computed(() => {
-  const rows = (agents.value || []).filter(r => {
-    if (r.asset !== asset.value) return false
-    const name = (r?.agent_name || '').toLowerCase()
-    return !EXCLUDED_AGENT_NAMES.has(name)
-  })
-  const byAgent = new Map()
-  for (const r of rows) {
-    const k = r.agent_name
-    const cur = byAgent.get(k)
-    if (!cur || score(r) > score(cur)) byAgent.set(k, r)
-  }
-  return [...byAgent.values()]
-})
 
-/* selections for the chart */
-const winnersForChart = computed(() =>
-  winners.value.map(w => ({
-    agent_name: w.agent_name,
-    asset:      w.asset,
-    model:      w.model,
-    strategy:   w.strategy,
-    decision_ids: Array.isArray(w.decision_ids) ? w.decision_ids : undefined
-  }))
-)
-
-/* stable key to avoid watcher re-trigger due to new object identities */
-const winnersKey = computed(() => {
-  const sels = winnersForChart.value || []
-  return sels
-    .map(s => `${s.agent_name}|${s.asset}|${s.model}|${s.strategy}|${(s.decision_ids?.length||0)}`)
-    .join('||')
-})
-
-/* ========== PERF: compute bottom-card balances exactly like the chart ========== */
+function drawImageInCircle(ctx, img, cx, cy, radius, { mode = 'contain', padding = 0 } = {}) {
+  if (!img) return;
+  const r = Math.max(0, radius - padding);
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.clip();
+
+  const iw = img.naturalWidth || img.width;
+  const ih = img.naturalHeight || img.height;
+  if (!iw || !ih) { ctx.restore(); return; }
+
+  // target box (square) that we want to fill with the image
+  const tw = r * 2;
+  const th = r * 2;
+
+  // scale (cover vs contain)
+  const scale = (mode === 'contain')
+    ? Math.min(tw / iw, th / ih)
+    : Math.max(tw / iw, th / ih); // cover (default)
+
+  const dw = iw * scale;
+  const dh = ih * scale;
+
+  // center align
+  const dx = cx - dw / 2;
+  const dy = cy - dh / 2;
+
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  ctx.drawImage(img, dx, dy, dw, dh);
+  ctx.restore();
+}
 
-/** async: build ordered decision seq for a selection (await NYSE filter; apply cutoff) */
-async function buildSeq(sel) {
-  const { agent_name: agentName, asset: assetCode, model } = sel
-  const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
-  let seq = ids.length
-    ? allDecisions.filter(r => ids.includes(r.id))
-    : allDecisions.filter(r => r.agent_name === agentName && r.asset === assetCode && r.model === model)
 
-  seq.sort((a,b) => (a.date > b.date ? 1 : -1))
+// helper: convert [ [date, y], ... ] into % since first y
+function toPct(points){
+  if (!Array.isArray(points) || !points.length) return points
+  const y0 = points[0][1]
+  if (typeof y0 !== 'number' || !isFinite(y0) || y0 === 0) return points
+  return points.map(([t, y]) => [t, ((y / y0) - 1) * 100])
+}
 
-  const isCrypto = assetCode === 'BTC' || assetCode === 'ETH'
-  let filtered = seq
-  if (!isCrypto) {
-    filtered = await filterRowsToNyseTradingDays(seq)
+// --- Agent & Model logo registries (fill with your actual assets)
+const AGENT_LOGOS = {
+  'HedgeFundAgent': new URL('../assets/images/agents_images/hedgefund.png', import.meta.url).href,
+  'DeepFundAgent': new URL('../assets/images/agents_images/deepfund.png', import.meta.url).href,
+  'TradeAgent': new URL('../assets/images/agents_images/trade.png', import.meta.url).href,
+  'InvestorAgent': new URL('../assets/images/agents_images/investor.png', import.meta.url).href,
+  'BTC': new URL('../assets/images/assets_images/BTC.png', import.meta.url).href,
+  'ETH': new URL('../assets/images/assets_images/ETH.png', import.meta.url).href,
+  'MSFT': new URL('../assets/images/assets_images/MSFT.png', import.meta.url).href,
+  'BMRN': new URL('../assets/images/assets_images/BMRN.png', import.meta.url).href,
+  'MRNA': new URL('../assets/images/assets_images/MRNA.png', import.meta.url).href,
+  'TSLA': new URL('../assets/images/assets_images/TSLA.png', import.meta.url).href,
+  // 'InvestorAgent': new URL('../assets/images/agents_images/investor.png', import.meta.url).href,
+};
+const MODEL_LOGOS = {
+  'claude_3_5_haiku_20241022': new URL('../assets/images/models_images/claude.png', import.meta.url).href,
+  'claude_sonnet_4_2025051': new URL('../assets/images/models_images/claude.png', import.meta.url).href,
+  'gpt_4o': new URL('../assets/images/models_images/gpt.png', import.meta.url).href,
+  'gpt_4.1': new URL('../assets/images/models_images/gpt.png', import.meta.url).href,
+  'gemini_2.0_flash': new URL('../assets/images/models_images/gemini.png', import.meta.url).href,
+};
+
+// Canvas badge cache: key = `${agent}|${model}|${color}`
+const BADGE_CACHE = new Map();
+
+const loadImg = (url) => new Promise((resolve, reject) => {
+  if (!url) return resolve(null);
+  const img = new Image();
+  img.crossOrigin = 'anonymous';
+  img.onload = () => resolve(img);
+  img.onerror = () => resolve(null); // fail soft
+  img.src = url;
+});
+
+// Compose a badge: [ colored circle with agent logo ] + [ white rounded square with model logo ]
+async function composeBadge(agent, model, color = '#666') {
+  const key = `circ|${agent}|${model ?? ''}|${color}`;
+  if (BADGE_CACHE.has(key)) return BADGE_CACHE.get(key);
+
+  const aImg = await loadImg(AGENT_LOGOS[agent]);
+  const mImg = await loadImg(MODEL_LOGOS[model]);
+
+  // uniform canvas
+  const S = 30;                   // badge size (px)
+  const R = S / 2;
+  const canvas = document.createElement('canvas');
+  canvas.width = S; canvas.height = S;
+  const ctx = canvas.getContext('2d');
+
+  const ring = 3;           // outer colored ring thickness
+  const padImg = 4;         // extra breathing room for the logo
+
+  // base colored circle (ring)
+  ctx.fillStyle = color;
+  ctx.beginPath(); ctx.arc(R, R, R, 0, Math.PI * 2); ctx.fill();
+
+  // inner white disk
+  ctx.fillStyle = '#fff';
+  ctx.beginPath(); ctx.arc(R, R, R - ring, 0, Math.PI * 2); ctx.fill();
+
+  // agent logo (fit into inner circle)
+  if (aImg) {
+    drawImageInCircle(ctx, aImg, R, R, R - ring, { mode: 'contain', padding: padImg });
   }
 
-  const cutoff = ASSET_CUTOFF[assetCode]
-  if (cutoff) {
-    const t0 = new Date(cutoff + 'T00:00:00Z')
-    filtered = filtered.filter(r => new Date(r.date + 'T00:00:00Z') >= t0)
+  // model puck (bottom-right)
+  if (mImg) {
+    const d = 20, r = d / 2;                  // puck diameter
+    const cx = S - r + 1, cy = S - r + 1;     // slight outside bias
+    // white border
+    ctx.fillStyle = '#fff';
+    ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.fill();
+    // inner image circle
+    ctx.save();
+    ctx.beginPath(); ctx.arc(cx, cy, r - 1.5, 0, Math.PI * 2); ctx.clip();
+    const imgInset = 3;
+    ctx.drawImage(mImg, cx - r + imgInset, cy - r + imgInset, d - imgInset * 2, d - imgInset * 2);
+    ctx.restore();
   }
-  return filtered
-}
-
-/** async: compute final equity for strategy & B&H using perf helpers */
-async function computeFinals(sel) {
-  const seq = await buildSeq(sel)
-  if (!seq.length) return null
-
-  const cfg =
-    (STRATEGIES || []).find(s => s.id === sel.strategy) ||
-    { strategy: 'long_only', tradingMode: 'aggressive', fee: 0.0005 }
-
-  const stratY = computeStrategyEquity(seq, 100000, cfg.fee, cfg.strategy, cfg.tradingMode) || []
-  const bhY    = computeBuyHoldEquity(seq, 100000) || []
 
-  const n = Math.min(stratY.length, bhY.length)
-  if (!n) return null
-
-  return {
-    date: seq[n-1].date,
-    stratLast: stratY[n-1],
-    bhLast: bhY[n-1],
-  }
+  const url = canvas.toDataURL('image/png');
+  BADGE_CACHE.set(key, url);
+  return url;
 }
 
-/* winnersSorted used by the simple cards list (values recomputed via perf) */
-const winnersSorted = shallowRef([])
-
-/* serialized async watcher to compute the cards (avoid re-entrancy & identity churn) */
-let computing = false
-watch(
-  () => [asset.value, winnersKey.value],   // stable deps
-  async () => {
-    if (!allDecisions.length) { winnersSorted.value = []; return }
-    if (computing) return
-    computing = true
-    try {
-      const sels = winnersForChart.value || []
-      if (!sels.length) { winnersSorted.value = []; return }
-
-      const perfs = (await Promise.all(
-        sels.map(async sel => ({ sel, perf: await computeFinals(sel) }))
-      )).filter(x => x.perf)
-
-      const uiRows = perfs.map(({ sel, perf }) => ({
-        agent_name: sel.agent_name,
-        model:      sel.model,
-        asset:      sel.asset,
-        strategy:   sel.strategy,
-        balance:    perf.stratLast, // final strategy equity (matches chart right edge)
-        end_date:   perf.date,
-        last_nav_ts: perf.date
-      }))
-
-      winnersSorted.value = uiRows.sort((a,b) => (b.balance ?? -Infinity) - (a.balance ?? -Infinity))
-    } catch (e) {
-      console.error('LiveView: perf compute failed', e)
-      winnersSorted.value = []
-    } finally {
-      computing = false
-    }
+let markerToLine = new Map()
+
+export default defineComponent({
+  name: 'CompareChartE',
+  components: { VChart },
+  props: {
+    selected: { type: Array, default: () => [] },
+    visible: { type: Boolean, default: true },
+    // NEW: $/% toggle
+    mode: { type: String, default: 'usd' } // 'usd' | 'pct'
   },
-  { immediate: true }
-)
+  data(){ return { option: {} } },
+  watch: {
+    selected: { deep: true, handler(){ this.rebuild() } },
+    visible(v){ if (v) this.$nextTick(() => this.rebuild()) },
+    // NEW: rebuild when the toggle changes
+    mode(){ this.rebuild() }
+  },
+  mounted(){ this.$nextTick(() => this.rebuild()) },
+  methods: {
+    async getAll(){
+      let all = getAllDecisions() || []
+      if (!all.length) {
+        try { const cached = await readAllRawDecisions(); if (cached?.length) all = cached } catch {}
+      }
+      return all
+    },
+    async rebuild(){
+      if (!this.visible) return
+      const selected = Array.isArray(this.selected) ? this.selected : []
+      const all = await this.getAll()
+      const groupKeyToSeq = new Map()
+
+      // 1) Build sequences exactly like CompareChart.vue
+      for (const sel of selected) {
+        const { agent_name: agent, asset, model } = sel
+        const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
+        let seq = ids.length ? all.filter(r => ids.includes(r.id))
+                             : all.filter(r => r.agent_name === agent && r.asset === asset && r.model === model)
+        seq.sort((a,b) => (a.date > b.date ? 1 : -1))
+        const isCrypto = asset === 'BTC' || asset === 'ETH'
+        let filtered = isCrypto ? seq : await filterRowsToNyseTradingDays(seq)
+
+        // --- asset-specific cutoff ---
+        const cutoff = ASSET_CUTOFF[asset]
+        if (cutoff) {
+          const t0 = new Date(cutoff + 'T00:00:00Z')
+          filtered = filtered.filter(r => new Date(r.date + 'T00:00:00Z') >= t0)
+        }
+        groupKeyToSeq.set(`${agent}|${asset}|${model}`, { sel, seq: filtered })
+      }
+
+      // 2) Build series using (time,value) pairs
+      const series = []
+      const legend = []
+      const assets = new Set()
+      const agentColorIndex = new Map()
+
+      for (const [_, { sel, seq }] of groupKeyToSeq.entries()) {
+        if (!seq.length) continue
+        const agent = sel.agent_name
+        const asset = sel.asset
+        assets.add(asset)
+
+        const idx = agentColorIndex.get(agent) ?? agentColorIndex.size
+        agentColorIndex.set(agent, idx)
+
+        const cfg = (STRATEGIES || []).find(s => s.id === sel.strategy) || { strategy: 'long_only', tradingMode: 'aggressive', fee: 0.0005, label: 'Selected' }
+        const stratY = computeStrategyEquity(seq, 100000, cfg.fee, cfg.strategy, cfg.tradingMode) || []
+        let points = seq.map((row, i) => [row.date, stratY[i]])
+
+        // NEW: convert to % mode if requested
+        if (this.mode === 'pct') points = toPct(points)
+
+        const name = `${agent} · ${sel.model} · ${cfg.label}`
+        legend.push(name)
+        series.push({
+          name,
+          type: 'line',
+          showSymbol: false,
+          smooth: false,
+          emphasis: {
+            focus: 'series',
+            lineStyle: { width: 3.5 },
+          },
+          lineStyle: { width: 2, color: getAgentColor(agent, idx) },
+          data: points
+        })
+        const lineSeriesIndex = series.length - 1;
+        const last = points?.[points.length - 1];
+        if (last && Number.isFinite(last[1])) {
+          const lineColor = getAgentColor(agent, idx);
+          const badgeUrl = await composeBadge(agent, null, lineColor);  // ← NEW
+          series.push({
+            name: name + ' •badge',
+            type: 'scatter',
+            data: [ last ],
+            symbol: badgeUrl ? `image://${badgeUrl}` : 'circle',
+            symbolSize: 30,
+            z: 20,
+            tooltip: {
+              trigger: 'item',
+              appendToBody: true,
+              formatter: (p) => {
+                const v = p.value?.[1]
+                const val = this.mode === 'pct'
+                  ? `${v >= 0 ? '+' : ''}${Number(v).toFixed(2)}%`
+                  : Number(v ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
+                return [
+                  `<div style="font-weight:600">${sel.agent_name}</div>`,
+                  sel.model ? `<div style="opacity:.8">${sel.model}</div>` : '',
+                  `<div style="opacity:.8">${sel.asset}</div>`,
+                  `<div style="margin-top:4px">${val}</div>`
+                ].join('')
+              }
+            },
+            label: {
+              show: true,
+              position: 'right',
+              padding: [4,8],
+              borderRadius: 10,
+              backgroundColor: lineColor,
+              color: '#fff',
+              fontWeight: 700,
+              formatter: (p) => {
+                const v = p.value?.[1];
+                if (this.mode === 'pct') return (v >= 0 ? '+' : '') + (Number(v).toFixed(2)) + '%';
+                return Number(v ?? 0).toLocaleString(undefined, { style:'currency', currency:'USD', maximumFractionDigits: 2 });
+              }
+            },
+            itemStyle: { color: lineColor }
+          });
+        }
+      }
+
+      // 3) Buy & Hold baseline per asset
+      for (const asset of assets) {
+        const entry = [...groupKeyToSeq.values()].find(v => v.sel.asset === asset)
+        if (!entry) continue
+        const bhY = computeBuyHoldEquity(entry.seq, 100000) || []
+        let bhPoints = entry.seq.map((row, i) => [row.date, bhY[i]])
+
+        // NEW: % mode for baseline too
+        if (this.mode === 'pct') bhPoints = toPct(bhPoints)
+
+        series.push({
+          name: `${asset} · Buy&Hold`,
+          type: 'line',
+          showSymbol: false,
+          lineStyle: { width: 1.5, type: 'dashed' },
+          color: getStrategyColor('', true, 0),
+          data: bhPoints
+        })
+        const lastBH = bhPoints[bhPoints.length - 1]
+        if (lastBH && Number.isFinite(lastBH[1])) {
+          const baseColor = getStrategyColor('', true, 0);
+          const badgeUrl = await composeBadge(asset, null, baseColor);  // ← NEW
+          series.push({
+            name: `${asset} · Buy&Hold •badge`,
+            type: 'scatter',
+            data: [ lastBH ],
+            symbol: badgeUrl ? `image://${badgeUrl}` : 'circle',
+            symbolSize: 30,
+            z: 19,
+            tooltip: { show: false },
+            label: {
+              show: true,
+              position: 'right',
+              padding: [4,8],
+              borderRadius: 10,
+              backgroundColor: baseColor,
+              color: '#fff',
+              fontWeight: 700,
+              formatter: (p) => {
+                const v = p.value?.[1];
+                if (this.mode === 'pct') return (v >= 0 ? '+' : '') + (Number(v).toFixed(2)) + '%';
+                return Number(v ?? 0).toLocaleString(undefined, { style:'currency', currency:'USD', maximumFractionDigits: 2 });
+              }
+            },
+            itemStyle: { color: baseColor }
+          });
+        }
+        legend.push(`${asset} · Buy&Hold`)
+      }
+
+      this.option = {
+        animation: true,
+        grid: { left: 64, right: 200, top: 8, bottom: 52 },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'line' },
+          // NEW: format per mode
+          valueFormatter: v => {
+            if (typeof v !== 'number') return v
+            return this.mode === 'pct'
+              ? `${v.toFixed(2)}%`
+              : v.toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
+          }
+        },
+        legend: { show: false },
+        xAxis: { type: 'time' },
+        yAxis: this.mode === 'pct'
+          ? {
+              type: 'value', scale: true,
+              axisLabel: { formatter: v => `${Number(v).toLocaleString(undefined, { maximumFractionDigits: 0 })}%` }
+            }
+          : {
+              type: 'value', scale: true,
+              axisLabel: { formatter: v => Number(v).toLocaleString(undefined, {style:'currency', currency:'USD', maximumFractionDigits:0 }) }
+            },
+        dataZoom: [{ type: 'inside', throttle: 50 }, { type: 'slider', height: 14, bottom: 36 }],
+        series
+      }
+    }
+  }
+})
 </script>
 
 <style scoped>
-.live-view { max-width: 1400px; margin: 0 auto; }
-
-/* toggle buttons */
-.switch-btn {
-  padding: 6px 10px;
-  border: 1px solid #1f2937; /* gray-800 */
-  border-radius: 8px;
-  background: #fff;
-  font-weight: 700;
-  line-height: 1;
-  transition: background .12s ease, color .12s ease, transform .06s ease;
-}
-.switch-btn:hover { transform: translateY(-1px); }
-.switch-btn--active {
-  background: #111827; /* gray-900 */
-  color: #fff;
-  border-color: #111827;
-}
-
-/* empty state */
-.empty {
-  padding: 12px 14px;
-  border: 1px dashed #d1d5db; /* gray-300 */
-  border-radius: 12px;
-  color: #6b7280; /* gray-500 */
-  font-size: 0.9rem;
-}
-
-/* winner cards */
-.card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-  border: 1px solid #e5e7eb; /* gray-200 */
-  border-radius: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
-  background: #fff;
-}
-.card-title { font-weight: 600; }
-.card-sub { font-size: 12px; opacity: 0.65; }
-.card-balance { font-weight: 800; font-size: 18px; line-height: 1.1; }
-
-/* small util */
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+.chart-wrap { width: 100%; }
+.h-96 { height: 24rem; }
 </style>