UI/UX redesign: unified refined-glass design system

- Add shared UI primitives: Button, Field/Input/Select, PageHeader,
  Section, Callout, Tabs, Disclosure
- Replace gradient buttons with single blue-accent btn-primary
- Reserve gradient text for the brand wordmark only
- Rework Scanner page onto the glass system; collapse explainer and
  glossary into a disclosure, move filters into a glass toolbar
- Restructure Ticker Detail into tabs (Analysis / Indicators / S/R)
  with chart and recommendation always visible
- Align Watchlist, Rankings, Admin, Login/Register to shared primitives
- Unify stray indigo/violet/gray accents into the blue family

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/pages/TickerDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTickerDetail } from '../hooks/useTickerDetail';
 import { useFetchSymbolData } from '../hooks/useFetchSymbolData';
@@ -9,19 +9,21 @@ import { SentimentPanel } from '../components/ticker/SentimentPanel';
 import { FundamentalsPanel } from '../components/ticker/FundamentalsPanel';
 import { IndicatorSelector } from '../components/ticker/IndicatorSelector';
 import { RecommendationPanel } from '../components/ticker/RecommendationPanel';
+import { Button } from '../components/ui/Button';
+import { Callout } from '../components/ui/Callout';
+import { Section } from '../components/ui/Section';
+import { Tabs } from '../components/ui/Tabs';
 import { formatPrice } from '../lib/format';
 import type { TradeSetup } from '../lib/types';
 
+const detailTabs = ['Analysis', 'Indicators', 'S/R Levels'] as const;
+type DetailTab = (typeof detailTabs)[number];
+
 function SectionError({ message, onRetry }: { message: string; onRetry?: () => void }) {
   return (
-    <div className="glass-sm bg-red-500/10 border-red-500/20 p-4 text-sm text-red-400">
-      <p>{message}</p>
-      {onRetry && (
-        <button onClick={onRetry} className="mt-2 text-xs font-medium text-red-300 underline hover:text-red-200">
-          Retry
-        </button>
-      )}
-    </div>
+    <Callout variant="error" onRetry={onRetry}>
+      {message}
+    </Callout>
   );
 }
 
@@ -67,6 +69,7 @@ export default function TickerDetailPage() {
   const { symbol = '' } = useParams<{ symbol: string }>();
   const { ohlcv, scores, srLevels, sentiment, fundamentals, trades } = useTickerDetail(symbol);
   const ingestion = useFetchSymbolData();
+  const [activeTab, setActiveTab] = useState<DetailTab>('Analysis');
 
   const dataStatus: DataStatusItem[] = useMemo(() => [
     {
@@ -134,24 +137,14 @@ export default function TickerDetailPage() {
   return (
     <div className="space-y-6 animate-slide-up">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-wrap items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-bold text-gradient">{symbol.toUpperCase()}</h1>
+          <h1 className="text-3xl font-semibold text-gray-100">{symbol.toUpperCase()}</h1>
           <p className="text-sm text-gray-500 mt-0.5">Ticker Detail</p>
         </div>
-        <button
-          onClick={() => ingestion.mutate(symbol)}
-          disabled={ingestion.isPending}
-          className="btn-gradient inline-flex items-center gap-2 px-5 py-2.5 text-sm disabled:opacity-60 disabled:cursor-not-allowed"
-        >
-          {ingestion.isPending && (
-            <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-            </svg>
-          )}
-          <span>{ingestion.isPending ? 'Fetching…' : 'Fetch Data'}</span>
-        </button>
+        <Button onClick={() => ingestion.mutate(symbol)} loading={ingestion.isPending}>
+          {ingestion.isPending ? 'Fetching…' : 'Fetch Data'}
+        </Button>
       </div>
 
       {/* Data freshness bar */}
@@ -159,9 +152,8 @@ export default function TickerDetailPage() {
 
       <RecommendationPanel symbol={symbol} longSetup={longSetup} shortSetup={shortSetup} />
 
-      {/* Chart Section */}
-      <section>
-        <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Price Chart</h2>
+      {/* Chart — always visible */}
+      <Section title="Price Chart">
         {ohlcv.isLoading && <SkeletonCard className="h-[400px]" />}
         {ohlcv.isError && (
           <SectionError
@@ -173,82 +165,86 @@ export default function TickerDetailPage() {
           <div className="glass p-5">
             <CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} zones={srLevels.data?.zones} tradeSetup={tradeSetup} />
             {srLevels.isError && (
-              <p className="mt-2 text-xs text-yellow-500/80">S/R levels unavailable — chart shown without overlays</p>
+              <p className="mt-2 text-xs text-amber-500/80">S/R levels unavailable — chart shown without overlays</p>
             )}
           </div>
         )}
-      </section>
+      </Section>
 
-      {/* Scores + Side Panels */}
-      <div className="grid gap-6 lg:grid-cols-3">
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Scores</h2>
-          {scores.isLoading && <SkeletonCard />}
-          {scores.isError && (
-            <SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
-          )}
-          {scores.data && (
-            <ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions} compositeBreakdown={scores.data.composite_breakdown} />
-          )}
-        </section>
+      {/* Detail tabs */}
+      <Tabs tabs={detailTabs} active={activeTab} onChange={setActiveTab} />
 
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Sentiment</h2>
-          {sentiment.isLoading && <SkeletonCard />}
-          {sentiment.isError && (
-            <SectionError message={sentiment.error instanceof Error ? sentiment.error.message : 'Failed to load sentiment'} onRetry={() => sentiment.refetch()} />
-          )}
-          {sentiment.data && <SentimentPanel data={sentiment.data} />}
-        </section>
+      {activeTab === 'Analysis' && (
+        <div className="grid gap-6 lg:grid-cols-3 animate-fade-in">
+          <Section title="Scores">
+            {scores.isLoading && <SkeletonCard />}
+            {scores.isError && (
+              <SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
+            )}
+            {scores.data && (
+              <ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions} compositeBreakdown={scores.data.composite_breakdown} />
+            )}
+          </Section>
 
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Fundamentals</h2>
-          {fundamentals.isLoading && <SkeletonCard />}
-          {fundamentals.isError && (
-            <SectionError message={fundamentals.error instanceof Error ? fundamentals.error.message : 'Failed to load fundamentals'} onRetry={() => fundamentals.refetch()} />
-          )}
-          {fundamentals.data && <FundamentalsPanel data={fundamentals.data} />}
-        </section>
-      </div>
+          <Section title="Sentiment">
+            {sentiment.isLoading && <SkeletonCard />}
+            {sentiment.isError && (
+              <SectionError message={sentiment.error instanceof Error ? sentiment.error.message : 'Failed to load sentiment'} onRetry={() => sentiment.refetch()} />
+            )}
+            {sentiment.data && <SentimentPanel data={sentiment.data} />}
+          </Section>
 
-      {/* Indicators */}
-      <section>
-        <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Technical Indicators</h2>
-        <IndicatorSelector symbol={symbol} />
-      </section>
+          <Section title="Fundamentals">
+            {fundamentals.isLoading && <SkeletonCard />}
+            {fundamentals.isError && (
+              <SectionError message={fundamentals.error instanceof Error ? fundamentals.error.message : 'Failed to load fundamentals'} onRetry={() => fundamentals.refetch()} />
+            )}
+            {fundamentals.data && <FundamentalsPanel data={fundamentals.data} />}
+          </Section>
+        </div>
+      )}
 
-      {/* S/R Levels Table — sorted by strength */}
-      {sortedLevels.length > 0 && (
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">
-            Support &amp; Resistance Levels
-            <span className="ml-2 text-gray-600 normal-case tracking-normal">sorted by strength</span>
-          </h2>
-          <div className="glass overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
-                  <th className="px-4 py-3">Type</th>
-                  <th className="px-4 py-3">Price Level</th>
-                  <th className="px-4 py-3">Strength</th>
-                  <th className="px-4 py-3">Method</th>
-                </tr>
-              </thead>
-              <tbody>
-                {sortedLevels.map((level) => (
-                  <tr key={level.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
-                    <td className="px-4 py-3">
-                      <span className={level.type === 'support' ? 'text-emerald-400' : 'text-red-400'}>{level.type}</span>
-                    </td>
-                    <td className="px-4 py-3 text-gray-200 font-mono">{formatPrice(level.price_level)}</td>
-                    <td className="px-4 py-3 text-gray-200">{level.strength}</td>
-                    <td className="px-4 py-3 text-gray-400">{level.detection_method}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
+      {activeTab === 'Indicators' && (
+        <div className="animate-fade-in">
+          <Section title="Technical Indicators">
+            <IndicatorSelector symbol={symbol} />
+          </Section>
+        </div>
+      )}
+
+      {activeTab === 'S/R Levels' && (
+        <div className="animate-fade-in">
+          <Section title="Support & Resistance Levels" hint="sorted by strength">
+            {sortedLevels.length === 0 ? (
+              <Callout variant="empty">No S/R levels detected for this ticker yet.</Callout>
+            ) : (
+              <div className="glass overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
+                      <th className="px-4 py-3">Type</th>
+                      <th className="px-4 py-3">Price Level</th>
+                      <th className="px-4 py-3">Strength</th>
+                      <th className="px-4 py-3">Method</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {sortedLevels.map((level) => (
+                      <tr key={level.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
+                        <td className="px-4 py-3">
+                          <span className={level.type === 'support' ? 'text-emerald-400' : 'text-red-400'}>{level.type}</span>
+                        </td>
+                        <td className="px-4 py-3 text-gray-200 font-mono">{formatPrice(level.price_level)}</td>
+                        <td className="px-4 py-3 text-gray-200">{level.strength}</td>
+                        <td className="px-4 py-3 text-gray-400">{level.detection_method}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </Section>
+        </div>
       )}
     </div>
   );