style(dashboard): unify Macro composite into one card + dark-mode fix

for Performance accent

User flagged the macro index box on the overview page as feeling
disjointed. Reshaped it from three stacked elements (band → track →
scale) into a single bordered card so it reads as ONE component.

  - JSX: wrap the three pieces in <div className="overview-macro-card">
  - CSS: new .overview-macro-card with tone-coloured rim (bull/bear/neutral)
  - Solid neutral-gray filled needle (was a hollow ring — looked like a
    placeholder); tone-coloured background + white inner ring + double
    shadow so it stands out on any gradient position
  - Removed the .overview-score-fill overlay — the gradient already
    encodes the spectrum; layering an opaque fill obscured it near 0
  - Thinner track (14px vs 22px), tighter scale labels, smaller pill
  - Added "TODAY · 8 INDICATORS" stamp next to the title — gives users
    a quick anchor of what they're looking at + freshness

Plus: dark-mode override for .overview-stat-card.accent (the Performance
card). It was using a cream gradient that floated as a glaring
out-of-theme block on dark mode. Mirrored the existing .kpi.accent dark
treatment so it stays visually grouped with the rest of the dashboard.

Also includes the in-flight overview rewrite from the other AI tool
(legacy /btc redirect to /macro, middleware.ts replacing proxy.ts for
Next.js routing, refactored several dashboard panels). TypeScript clean,
production build passes.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

components/telegram/TelegramCard.tsx

@@ -37,7 +37,11 @@ export default function TelegramCard() {
   useEffect(() => { setMounted(true) }, [])
 
   const refresh = useCallback(async () => {
-    if (!address) return
+    if (!address) {
+      setLoading(false)
+      setStatus(null)
+      return
+    }
     setLoading(true)
     try {
       const s = await getTelegramStatus(address.toLowerCase())
@@ -101,7 +105,18 @@ export default function TelegramCard() {
   // ── Render ───────────────────────────────────────────────────────────────
 
   if (!mounted) return null
-  if (!isConnected) return null
+  if (!isConnected) {
+    return (
+      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
+        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 6 }}>
+          Telegram alerts
+        </div>
+        <div style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.6 }}>
+          Connect your wallet first. After that, you can link Telegram for alert delivery and Pro wallet-bound notifications.
+        </div>
+      </div>
+    )
+  }
 
   return (
     <div className="card" style={{ padding: 20, marginBottom: 16 }}>