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>

app/[locale]/settings/SettingsClient.tsx

@@ -29,17 +29,73 @@ export default function SettingsClient() {
   useEffect(() => { setMounted(true) }, [])
   const locale = pathname.split('/')[1] || 'en'
   const href = (path: string) => `/${locale}${path}`
+  const walletLabel = mounted && isConnected && address
+    ? `${address.slice(0, 6)}…${address.slice(-4)}`
+    : 'Not connected'
 
   return (
-    <div className="page">
-      <div className="page-head">
+    <>
+      <div className="settings-control-center">
         <div>
-          <h1 className="page-title">{isZh ? '设置' : 'Settings'}</h1>
-          <PageHint>
-            Everything that controls your account — subscription, Hyperliquid
-            API key, bot risk parameters, and Telegram alerts.
-          </PageHint>
+          <div className="settings-control-kicker">Control center</div>
+          <div className="settings-control-title">One place to arm, limit, and verify the bot</div>
+          <div className="settings-control-copy">
+            Subscription, execution permissions, per-system risk, and alert delivery all live here.
+          </div>
         </div>
+        <div className="settings-control-meta">
+          <div className="settings-meta-card">
+            <span className="settings-meta-label">Wallet</span>
+            <strong className="mono">{walletLabel}</strong>
+          </div>
+          <div className="settings-meta-card">
+            <span className="settings-meta-label">Private data</span>
+            <strong>{mounted && isConnected ? 'Ready to unlock' : 'Connect first'}</strong>
+          </div>
+          <div className="settings-meta-card">
+            <span className="settings-meta-label">Main actions</span>
+            <strong>Load settings, save limits, link API</strong>
+          </div>
+        </div>
+      </div>
+
+      <div className="settings-scope-intro">
+        <PageHint>
+          Everything that controls your account — subscription, Hyperliquid
+          API key, bot risk parameters, and Telegram alerts.
+        </PageHint>
+        <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 8 }}>
+          Trump settings control event-driven entries. Macro Vibes settings control BTC manage-only behavior. Global limits apply account-wide.
+        </div>
+      </div>
+
+      <div className="settings-scope-grid" style={{ marginBottom: 16 }}>
+        <section id="trump-settings" className="settings-scope-card trump">
+          <div className="settings-scope-eyebrow">Trump Signal</div>
+          <div className="settings-scope-title">Event-driven entry settings</div>
+          <div className="settings-scope-copy">
+            Position size, Trump leverage, and minimum AI confidence used when a Truth Social post becomes actionable.
+          </div>
+          <a href="#trump-settings-panel" className="settings-scope-link">Open panel ↓</a>
+        </section>
+
+        <section id="btc-settings" className="settings-scope-card btc">
+          <div className="settings-scope-eyebrow">Macro Vibes</div>
+          <div className="settings-scope-title">BTC manage-only settings</div>
+          <div className="settings-scope-copy">
+            Strategy mode, BTC leverage, and de-risk behavior used by the Macro Vibes sleeve.
+          </div>
+          <a href="#btc-settings-panel" className="settings-scope-link">Open panel ↓</a>
+        </section>
+
+        <section id="global-settings" className="settings-scope-card global">
+          <div className="settings-scope-eyebrow">Global</div>
+          <div className="settings-scope-title">Account-wide execution controls</div>
+          <div className="settings-scope-copy">
+            Subscription, Hyperliquid API wallet, manual window, schedule, and guardrails that apply across the account.
+          </div>
+          <a href="#global-settings-panel" className="settings-scope-link">Open panel ↓</a>
+        </section>
       </div>
 
       {/* Account card — quick "who am I logged in as" */}
@@ -70,25 +126,55 @@ export default function SettingsClient() {
         </div>
       </div>
 
-      {/* The full bot config UI (subscribe, HL key, risk settings, schedule) */}
-      <BotConfigPanel />
-
-      {/* Telegram push alerts — only renders something useful when wallet
-          connected + server configured + (eventually) subscribed. */}
-      <TelegramCard />
-
-      {/* Legal & support */}
-      <div className="card" style={{ padding: 20 }}>
-        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
-                      textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 12 }}>
-          {isZh ? '法律与支持' : 'Legal & support'}
+      <div className="settings-section-shell">
+        <div className="settings-section-head">
+          <div>
+            <div className="settings-section-kicker">Execution setup</div>
+            <div className="settings-section-title">Trading permissions and risk controls</div>
+          </div>
+          <div className="settings-section-note">
+            Load once, then adjust by module without leaving the page.
+          </div>
         </div>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-          <Link href={href('/privacy')} style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>{isZh ? '隐私政策 →' : 'Privacy Policy →'}</Link>
-          <Link href={href('/terms')}   style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>{isZh ? '服务条款 →' : 'Terms of Service →'}</Link>
-          <Link href={href('/contact')} style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>{isZh ? '联系我们 →' : 'Contact Us →'}</Link>
+
+        {/* The full bot config UI (subscribe, HL key, risk settings, schedule) */}
+        <BotConfigPanel />
+      </div>
+
+      <div className="settings-section-shell">
+        <div className="settings-section-head">
+          <div>
+            <div className="settings-section-kicker">Delivery</div>
+            <div className="settings-section-title">Telegram alerts</div>
+          </div>
+          <div className="settings-section-note">
+            Bind notifications after the trading path is configured.
+          </div>
+        </div>
+        <TelegramCard />
+      </div>
+
+      <div className="settings-section-shell">
+        <div className="settings-section-head">
+          <div>
+            <div className="settings-section-kicker">Support</div>
+            <div className="settings-section-title">Legal and contact</div>
+          </div>
+        </div>
+
+        {/* Legal & support */}
+        <div className="card" style={{ padding: 20 }}>
+          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
+                        textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 12 }}>
+            {isZh ? '法律与支持' : 'Legal & support'}
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <Link href={href('/privacy')} style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>{isZh ? '隐私政策 →' : 'Privacy Policy →'}</Link>
+            <Link href={href('/terms')}   style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>{isZh ? '服务条款 →' : 'Terms of Service →'}</Link>
+            <Link href={href('/contact')} style={{ fontSize: 13, color: 'var(--ink-2)', textDecoration: 'none' }}>{isZh ? '联系我们 →' : 'Contact Us →'}</Link>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }