From 2107bcbfad32ed7de8d8117925d7cc8f76932ecd Mon Sep 17 00:00:00 2001
From: Ishita Sharma <ishitasharma@Ishitas-MacBook-Pro.local>
Date: Sat, 21 Mar 2026 18:48:42 -0700
Subject: [PATCH] UI change

---
 demo/frontend/src/App.tsx                     |  67 +++-
 demo/frontend/src/components/CallHistory.tsx  |  14 +-
 demo/frontend/src/components/CallScreen.tsx   |  68 ++--
 demo/frontend/src/components/DemoControls.tsx |  65 ++--
 .../src/components/FeatureBreakdown.tsx       | 145 ++++++---
 .../src/components/FederatedDashboard.tsx     |  16 +-
 demo/frontend/src/components/FraudAlert.tsx   |  11 +-
 .../src/components/PhoneSimulator.tsx         |  39 ++-
 demo/frontend/src/components/PrivacyDemo.tsx  |  24 +-
 demo/frontend/src/components/ScoreGauge.tsx   | 223 ++++++++-----
 .../src/components/TranscriptPanel.tsx        | 138 ++++++--
 demo/frontend/src/styles/index.css            |  66 ++++
 demo/frontend/src/styles/phone.css            | 297 +++++++++++++++++-
 13 files changed, 912 insertions(+), 261 deletions(-)

diff --git a/demo/frontend/src/App.tsx b/demo/frontend/src/App.tsx
index 862155d..c4ada4b 100644
--- a/demo/frontend/src/App.tsx
+++ b/demo/frontend/src/App.tsx
@@ -279,12 +279,13 @@ export default function App() {
     { id: 'privacy', label: 'Privacy Demo', icon: <Lock className="w-4 h-4" /> },
     { id: 'federated', label: 'Federated Learning', icon: <GitBranch className="w-4 h-4" /> },
   ]
+  const isDetectionLoading = isCallActive && sentences.length === 0
 
   return (
     <div className="min-h-screen bg-dark-bg text-gray-100 font-sans">
       {/* Header */}
       <header className="border-b border-dark-border/50 bg-dark-card/50 backdrop-blur-xl sticky top-0 z-50">
-        <div className="max-w-[1440px] mx-auto px-6 py-4 flex items-center justify-between">
+        <div className="mx-auto flex max-w-[1440px] flex-col gap-4 px-4 py-4 sm:px-6 lg:flex-row lg:items-center lg:justify-between">
           <div className="flex items-center gap-3">
             <div className="relative">
               <Shield className="w-8 h-8 text-brand-teal" />
@@ -302,14 +303,14 @@ export default function App() {
           </div>
 
           {/* Tabs */}
-          <nav className="flex items-center gap-1">
+          <nav className="flex flex-wrap items-center gap-2">
             {tabs.map(tab => (
               <button
                 key={tab.id}
                 onClick={() => setActiveTab(tab.id)}
-                className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 rounded-lg ${
+                className={`control-button px-3 py-2 text-sm font-medium sm:px-4 ${
                   activeTab === tab.id
-                    ? 'bg-brand-teal/10 text-brand-teal'
+                    ? 'border-brand-teal/30 bg-brand-teal/10 text-brand-teal'
                     : 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
                 }`}
               >
@@ -320,7 +321,7 @@ export default function App() {
           </nav>
 
           {/* Status indicator */}
-          <div className="flex items-center gap-2 text-xs">
+          <div className="flex items-center gap-2 text-xs lg:justify-end">
             <Activity className={`w-3.5 h-3.5 ${isConnected ? 'text-safe' : 'text-gray-500'}`} />
             <span className={isConnected ? 'text-safe' : 'text-gray-500'}>
               {isConnected ? 'Backend Connected' : 'Local Playback Mode'}
@@ -330,7 +331,7 @@ export default function App() {
       </header>
 
       {/* Main Content */}
-      <main className="max-w-[1440px] mx-auto px-6 py-6">
+      <main className="mx-auto max-w-[1440px] px-4 py-5 sm:px-6 sm:py-6">
         {activeTab === 'detection' && (
           <div className="space-y-6">
             {/* Demo Controls */}
@@ -343,9 +344,9 @@ export default function App() {
             />
 
             {/* Main detection layout */}
-            <div className="grid grid-cols-12 gap-6">
+            <div className="grid grid-cols-1 gap-6 lg:grid-cols-12">
               {/* Phone Simulator */}
-              <div className="col-span-4 flex justify-center">
+              <div className="flex justify-center lg:col-span-4 lg:justify-start">
                 <PhoneSimulator>
                   <CallScreen
                     callerName={currentCallId ? callerNames[currentCallId] ?? 'Unknown' : 'No Active Call'}
@@ -368,23 +369,57 @@ export default function App() {
               </div>
 
               {/* Right side panels */}
-              <div className="col-span-8 space-y-6">
+              <div className="space-y-6 lg:col-span-8">
                 {/* Score + Features row */}
-                <div className="grid grid-cols-2 gap-6">
+                <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
                   <div className="glass-card p-6 glow-teal">
-                    <ScoreGauge score={emaScore} label="Fraud Score (EMA)" />
+                    {isDetectionLoading ? (
+                      <div className="panel-skeleton">
+                        <div className="mx-auto h-48 w-48 rounded-full skeleton-block" />
+                        <div className="mx-auto h-4 w-32 skeleton-block" />
+                        <div className="mx-auto h-3 w-40 skeleton-block" />
+                      </div>
+                    ) : (
+                      <ScoreGauge score={emaScore} label="Fraud Score (EMA)" />
+                    )}
                   </div>
                   <div className="glass-card p-6">
-                    <FeatureBreakdown features={features} />
+                    {isDetectionLoading ? (
+                      <div className="panel-skeleton">
+                        {[0, 1, 2, 3].map(item => (
+                          <div key={item} className="panel-skeleton-card space-y-2">
+                            <div className="flex items-center justify-between gap-3">
+                              <div className="h-3 w-24 skeleton-block" />
+                              <div className="h-3 w-10 skeleton-block" />
+                            </div>
+                            <div className="h-2 w-full rounded-full skeleton-block" />
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <FeatureBreakdown features={features} />
+                    )}
                   </div>
                 </div>
 
                 {/* Transcript */}
                 <div className="glass-card p-6">
-                  <TranscriptPanel
-                    sentences={sentences}
-                    isStreaming={isCallActive}
-                  />
+                  {isDetectionLoading ? (
+                    <div className="panel-skeleton">
+                      {[0, 1, 2].map(item => (
+                        <div key={item} className="panel-skeleton-card space-y-3">
+                          <div className="h-3 w-20 skeleton-block" />
+                          <div className="h-3 w-full skeleton-block" />
+                          <div className="h-3 w-5/6 skeleton-block" />
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <TranscriptPanel
+                      sentences={sentences}
+                      isStreaming={isCallActive}
+                    />
+                  )}
                 </div>
               </div>
             </div>
diff --git a/demo/frontend/src/components/CallHistory.tsx b/demo/frontend/src/components/CallHistory.tsx
index 18392e0..c4f457d 100644
--- a/demo/frontend/src/components/CallHistory.tsx
+++ b/demo/frontend/src/components/CallHistory.tsx
@@ -109,7 +109,7 @@ export default function CallHistory({ entries }: CallHistoryProps) {
       {/* Collapsible header */}
       <button
         onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full flex items-center justify-between px-6 py-4 hover:bg-white/[0.02] transition-colors"
+        className="w-full flex items-center justify-between px-4 py-4 hover:bg-white/[0.02] transition-colors sm:px-6"
       >
         <div className="flex items-center gap-2.5">
           <Clock className="w-4 h-4 text-brand-teal" />
@@ -144,7 +144,7 @@ export default function CallHistory({ entries }: CallHistoryProps) {
                   {/* Row */}
                   <button
                     onClick={() => setSelectedId(selectedId === entry.id ? null : entry.id)}
-                    className="w-full flex items-center gap-4 px-6 py-3.5 hover:bg-white/[0.02] transition-colors text-left"
+                    className="w-full flex flex-col items-start gap-3 px-4 py-3.5 text-left hover:bg-white/[0.02] transition-colors sm:px-6 lg:flex-row lg:items-center lg:gap-4"
                   >
                     {/* Call type icon */}
                     <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${getCallIconColor(entry.callType)}`}>
@@ -162,7 +162,7 @@ export default function CallHistory({ entries }: CallHistoryProps) {
                     </div>
 
                     {/* Duration */}
-                    <div className="flex items-center gap-1.5 text-xs text-gray-400 flex-shrink-0">
+                    <div className="flex items-center gap-1.5 text-xs text-gray-400 lg:flex-shrink-0">
                       <Clock className="w-3 h-3" />
                       <span className="font-mono tabular-nums">{formatDuration(entry.duration)}</span>
                     </div>
@@ -175,7 +175,7 @@ export default function CallHistory({ entries }: CallHistoryProps) {
                     </div>
 
                     {/* Outcome badge */}
-                    <div className="flex-shrink-0">
+                    <div>
                       <span className={`text-[10px] font-semibold px-2 py-1 rounded-full ${getOutcomeStyle(entry.outcome).bg} ${getOutcomeStyle(entry.outcome).text}`}>
                         {entry.outcome}
                       </span>
@@ -191,10 +191,10 @@ export default function CallHistory({ entries }: CallHistoryProps) {
 
                   {/* Expanded detail */}
                   {selectedId === entry.id && (
-                    <div className="px-6 pb-4 animate-fade-in">
-                      <div className="ml-12 bg-dark-bg/50 rounded-xl p-4 border border-dark-border/20 space-y-3">
+                    <div className="px-4 pb-4 animate-fade-in sm:px-6">
+                      <div className="rounded-xl border border-dark-border/20 bg-dark-bg/50 p-4 space-y-3 lg:ml-12">
                         {/* Summary row */}
-                        <div className="grid grid-cols-3 gap-4">
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
                           <div>
                             <p className="text-[10px] text-gray-600 uppercase tracking-wider mb-1">Total Sentences</p>
                             <p className="text-sm font-bold text-gray-200 tabular-nums">{entry.totalSentences}</p>
diff --git a/demo/frontend/src/components/CallScreen.tsx b/demo/frontend/src/components/CallScreen.tsx
index 85e5d04..4a5f292 100644
--- a/demo/frontend/src/components/CallScreen.tsx
+++ b/demo/frontend/src/components/CallScreen.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   Phone,
   PhoneOff,
@@ -6,10 +6,11 @@ import {
   MicOff,
   Volume2,
   Grid3X3,
-  UserCircle,
+  UserCircle2,
   Wifi,
   Battery,
   Signal,
+  Camera,
 } from 'lucide-react'
 import FraudAlert from './FraudAlert'
 
@@ -51,24 +52,43 @@ export default function CallScreen({
 }: CallScreenProps) {
   const [isMuted, setIsMuted] = useState(false)
   const [isSpeaker, setIsSpeaker] = useState(false)
+  const [isScreenShaking, setIsScreenShaking] = useState(false)
 
   const showAlert = isActive && (alertLevel === 'high' || alertLevel === 'critical' || alertLevel === 'medium')
+  const callerInitials = callerName
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(part => part[0]?.toUpperCase())
+    .join('')
+
+  useEffect(() => {
+    if (!showAlert) return
+
+    setIsScreenShaking(true)
+    const timeout = window.setTimeout(() => {
+      setIsScreenShaking(false)
+    }, 480)
+
+    return () => window.clearTimeout(timeout)
+  }, [showAlert, alertLevel])
 
   return (
-    <div className="w-full h-full flex flex-col bg-gradient-to-b from-dark-bg via-dark-card to-dark-bg">
+    <div className={`w-full h-full flex flex-col bg-gradient-to-b from-dark-bg via-dark-card to-dark-bg ${isScreenShaking ? 'phone-screen-shake' : ''}`}>
       {/* Status bar */}
-      <div className="flex items-center justify-between px-6 pt-10 pb-1 text-[10px] text-gray-400">
-        <span className="font-medium">{getCurrentTime()}</span>
-        <div className="flex items-center gap-1.5">
-          <Signal className="w-3 h-3" />
-          <Wifi className="w-3 h-3" />
-          <Battery className="w-3 h-3" />
+      <div className="relative z-30 flex items-center justify-between px-7 pt-4 pb-2 text-[11px] text-white/85">
+        <span className="min-w-[52px] font-semibold tracking-[0.01em]">{getCurrentTime()}</span>
+        <div className="w-[126px]" />
+        <div className="flex min-w-[56px] items-center justify-end gap-1.5">
+          <Signal className="h-3.5 w-3.5 stroke-[2.2]" />
+          <Wifi className="h-3.5 w-3.5 stroke-[2.2]" />
+          <Battery className="h-3.5 w-3.5 stroke-[2.2]" />
         </div>
       </div>
 
       {/* Fraud Alert Overlay */}
       {showAlert && (
-        <div className="absolute inset-0 z-20 pt-10">
+        <div className="absolute inset-0 z-20 pt-[42px]">
           <FraudAlert
             riskLevel={alertLevel as 'medium' | 'high' | 'critical'}
             score={fraudScore}
@@ -85,17 +105,25 @@ export default function CallScreen({
           <>
             {/* Caller avatar */}
             <div className="relative mb-4">
-              <div className={`w-20 h-20 rounded-full flex items-center justify-center ${
-                alertLevel === 'critical' ? 'bg-alert/20 ring-2 ring-alert animate-pulse-alert' :
-                alertLevel === 'high' ? 'bg-warning/20 ring-2 ring-warning' :
-                'bg-brand-teal/20 ring-2 ring-brand-teal/50'
+              <div className={`relative w-[92px] h-[92px] rounded-full flex items-center justify-center overflow-hidden shadow-[0_20px_45px_rgba(15,23,42,0.38)] ${
+                alertLevel === 'critical' ? 'ring-2 ring-alert/80 animate-pulse-alert' :
+                alertLevel === 'high' ? 'ring-2 ring-warning/80' :
+                'ring-2 ring-brand-teal/50'
               }`}>
-                <UserCircle className={`w-12 h-12 ${
-                  alertLevel === 'critical' ? 'text-alert' :
-                  alertLevel === 'high' ? 'text-warning' :
-                  'text-brand-teal'
-                }`} />
+                <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_28%,rgba(255,255,255,0.28),transparent_28%),linear-gradient(160deg,#8892a6_0%,#646f84_45%,#3b4456_100%)]" />
+                <div className="absolute inset-x-5 bottom-0 h-[44px] rounded-t-[28px] bg-white/18 blur-[1px]" />
+                <div className="absolute left-1/2 top-[18px] h-[26px] w-[26px] -translate-x-1/2 rounded-full bg-white/28" />
+                <div className="absolute left-1/2 top-[38px] h-[34px] w-[54px] -translate-x-1/2 rounded-t-[26px] bg-white/22" />
+                <div className="absolute inset-0 bg-gradient-to-b from-white/5 via-transparent to-black/25" />
+                <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/28 px-2 py-0.5 backdrop-blur-sm">
+                  <span className="text-[10px] font-semibold tracking-[0.2em] text-white/88">{callerInitials || 'CP'}</span>
+                </div>
               </div>
+
+              <div className="absolute -top-1 -right-1 rounded-full border border-white/10 bg-black/45 p-1.5 shadow-lg backdrop-blur-md">
+                <Camera className="h-3.5 w-3.5 text-white/75" />
+              </div>
+
               {/* SentinelEdge protection badge */}
               <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-dark-card border-2 border-brand-teal flex items-center justify-center">
                 <div className="w-2 h-2 rounded-full bg-brand-teal" />
@@ -180,7 +208,7 @@ export default function CallScreen({
 
             <button className="flex flex-col items-center gap-1">
               <div className="w-11 h-11 rounded-full bg-dark-surface/80 flex items-center justify-center text-white">
-                <UserCircle className="w-5 h-5" />
+                <UserCircle2 className="w-5 h-5" />
               </div>
               <span className="text-[9px] text-gray-400">contacts</span>
             </button>
diff --git a/demo/frontend/src/components/DemoControls.tsx b/demo/frontend/src/components/DemoControls.tsx
index 076e491..41cf1a4 100644
--- a/demo/frontend/src/components/DemoControls.tsx
+++ b/demo/frontend/src/components/DemoControls.tsx
@@ -35,56 +35,53 @@ export default function DemoControls({
   availableCalls,
 }: DemoControlsProps) {
   return (
-    <div className="glass-card p-4">
-      <div className="flex items-center justify-between">
+    <div className="glass-card p-4 sm:p-5">
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
         {/* Left: sample calls */}
-        <div className="flex items-center gap-3">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
           <div className="flex items-center gap-2 mr-2">
             <Phone className="w-4 h-4 text-brand-teal" />
             <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
               Sample Calls
             </span>
           </div>
-          {availableCalls.map((call) => {
-            const config = callIcons[call.id] || {
-              icon: <Play className="w-3.5 h-3.5" />,
-              color: 'hover:bg-brand-teal/10 hover:text-brand-teal hover:border-brand-teal/30',
-            }
-            return (
-              <button
-                key={call.id}
-                onClick={() => onSelectCall(call.id)}
-                disabled={isCallActive}
-                className={`
-                  flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium
-                  border border-dark-border/50 transition-all duration-200
-                  ${isCallActive
-                    ? 'opacity-40 cursor-not-allowed bg-dark-card text-gray-600'
-                    : `bg-dark-card text-gray-300 ${config.color} active:scale-[0.97]`
-                  }
-                `}
-              >
-                <Play className="w-3 h-3" />
-                {call.description}
-              </button>
-            )
-          })}
+          <div className="flex flex-wrap gap-2">
+            {availableCalls.map((call) => {
+              const config = callIcons[call.id] || {
+                icon: <Play className="w-3.5 h-3.5" />,
+                color: 'hover:bg-brand-teal/10 hover:text-brand-teal hover:border-brand-teal/30',
+              }
+              return (
+                <button
+                  key={call.id}
+                  onClick={() => onSelectCall(call.id)}
+                  disabled={isCallActive}
+                  className={`
+                    control-button px-3 py-2 text-xs font-medium
+                    ${isCallActive ? '' : config.color}
+                  `}
+                >
+                  <Play className="w-3 h-3" />
+                  {call.description}
+                </button>
+              )
+            })}
+          </div>
         </div>
 
         {/* Right: mic toggle */}
-        <div className="flex items-center gap-3">
-          <div className="h-6 w-px bg-dark-border/30" />
+        <div className="flex flex-wrap items-center gap-3 xl:justify-end">
+          <div className="hidden h-6 w-px bg-dark-border/30 xl:block" />
           <button
             onClick={onToggleMic}
             disabled={isCallActive}
             className={`
-              flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-medium
-              transition-all duration-200 border
+              control-button px-4 py-2 text-xs font-medium
               ${isMicActive
                 ? 'bg-brand-teal/10 text-brand-teal border-brand-teal/30'
-                : isCallActive
-                  ? 'opacity-40 cursor-not-allowed bg-dark-card text-gray-600 border-dark-border/50'
-                  : 'bg-dark-card text-gray-300 border-dark-border/50 hover:bg-brand-teal/10 hover:text-brand-teal hover:border-brand-teal/30'
+                : !isCallActive
+                  ? 'hover:bg-brand-teal/10 hover:text-brand-teal hover:border-brand-teal/30'
+                  : ''
               }
             `}
           >
diff --git a/demo/frontend/src/components/FeatureBreakdown.tsx b/demo/frontend/src/components/FeatureBreakdown.tsx
index 55bc68c..cf133b5 100644
--- a/demo/frontend/src/components/FeatureBreakdown.tsx
+++ b/demo/frontend/src/components/FeatureBreakdown.tsx
@@ -1,20 +1,61 @@
-import { BarChart3 } from 'lucide-react'
+import { BarChart3, Info } from 'lucide-react'
+import type { CSSProperties } from 'react'
 
 interface FeatureBreakdownProps {
   features: Record<string, number>
 }
 
-function getBarColor(value: number): string {
-  if (value < 0.3) return 'bg-brand-teal'
-  if (value < 0.5) return 'bg-warning'
-  if (value < 0.75) return 'bg-orange-500'
-  return 'bg-alert'
+const FEATURE_EXPLANATIONS: Record<string, string> = {
+  authority_claim: 'The caller is presenting themselves as a trusted institution or official authority.',
+  coercion: 'Language is pressuring the recipient into acting before they can think or verify.',
+  credential_request: 'The conversation is attempting to obtain passwords, PINs, codes, or other secrets.',
+  fear_induction: 'The caller is using fear to reduce skepticism and speed up compliance.',
+  financial_terms: 'Money, payments, balances, or banking language is becoming central to the call.',
+  gift_card_mention: 'Requesting gift cards is a strong scam indicator because they are hard to trace or reverse.',
+  mfa_bypass: 'The caller is trying to capture one-time codes or verification steps meant to protect the user.',
+  pii_request: 'The caller is asking for sensitive personal information that should not be shared casually.',
+  remote_access: 'The caller is steering the user toward remote-control tools or device access.',
+  specific_amount: 'Using a precise dollar amount can make a scam feel more legitimate and urgent.',
+  specific_detail: 'Specific details are being used to create a false sense of credibility.',
+  tech_jargon: 'Technical language may be used to intimidate or confuse the recipient.',
+  threat_language: 'Threats of punishment, loss, or legal action are a major fraud signal.',
+  time_pressure: 'The caller is creating a countdown or deadline to force a rushed decision.',
+  trust_request: 'The caller is explicitly pushing the recipient to trust them or follow instructions without verification.',
+  unusual_payment: 'The requested payment method is uncommon for legitimate businesses or institutions.',
+  urgency: 'The tone suggests immediate action is required, which is common in scam escalation.',
 }
 
-function getBarGlow(value: number): string {
-  if (value < 0.3) return ''
-  if (value < 0.75) return ''
-  return 'shadow-sm shadow-alert/20'
+function getSeverity(value: number) {
+  if (value < 0.3) {
+    return {
+      label: 'Low',
+      color: '#14B8A6',
+      glow: 'rgba(20, 184, 166, 0.16)',
+      track: 'rgba(20, 184, 166, 0.12)',
+    }
+  }
+  if (value < 0.5) {
+    return {
+      label: 'Medium',
+      color: '#FBBF24',
+      glow: 'rgba(251, 191, 36, 0.18)',
+      track: 'rgba(251, 191, 36, 0.12)',
+    }
+  }
+  if (value < 0.75) {
+    return {
+      label: 'High',
+      color: '#FB923C',
+      glow: 'rgba(251, 146, 60, 0.2)',
+      track: 'rgba(251, 146, 60, 0.12)',
+    }
+  }
+  return {
+    label: 'Critical',
+    color: '#F87171',
+    glow: 'rgba(248, 113, 113, 0.22)',
+    track: 'rgba(248, 113, 113, 0.12)',
+  }
 }
 
 function formatFeatureName(name: string): string {
@@ -24,21 +65,18 @@ function formatFeatureName(name: string): string {
 }
 
 export default function FeatureBreakdown({ features }: FeatureBreakdownProps) {
-  // Sort features by value descending, filter out zero values
   const sortedFeatures = Object.entries(features)
     .filter(([, value]) => value > 0)
     .sort(([, a], [, b]) => b - a)
-    .slice(0, 8) // Show top 8
+    .slice(0, 8)
 
   return (
     <div>
-      {/* Header */}
-      <div className="flex items-center gap-2 mb-4">
+      <div className="mb-4 flex items-center gap-2">
         <BarChart3 className="w-4 h-4 text-brand-teal" />
         <h3 className="text-sm font-semibold text-gray-200">Feature Breakdown</h3>
       </div>
 
-      {/* Feature bars */}
       <div className="space-y-2.5">
         {sortedFeatures.length === 0 ? (
           <div className="flex items-center justify-center py-12 text-gray-600">
@@ -49,43 +87,72 @@ export default function FeatureBreakdown({ features }: FeatureBreakdownProps) {
             </div>
           </div>
         ) : (
-          sortedFeatures.map(([name, value]) => (
-            <div key={name} className="group">
-              <div className="flex items-center justify-between mb-1">
-                <span className="text-xs text-gray-400 group-hover:text-gray-200 transition-colors truncate max-w-[140px]">
-                  {formatFeatureName(name)}
-                </span>
-                <span className="text-xs font-mono text-gray-500 tabular-nums">
-                  {(value * 100).toFixed(0)}%
-                </span>
-              </div>
-              <div className="h-2 bg-dark-bg rounded-full overflow-hidden">
-                <div
-                  className={`h-full rounded-full transition-all duration-700 ease-out ${getBarColor(value)} ${getBarGlow(value)}`}
-                  style={{ width: `${Math.max(value * 100, 2)}%` }}
-                />
+          sortedFeatures.map(([name, value], index) => {
+            const severity = getSeverity(value)
+            const description = FEATURE_EXPLANATIONS[name] ?? 'This signal contributes to the overall fraud risk score.'
+
+            return (
+              <div
+                key={name}
+                className="feature-bar-container group relative"
+                style={
+                  {
+                    '--feature-color': severity.color,
+                    '--feature-glow': severity.glow,
+                    '--feature-track': severity.track,
+                    animationDelay: `${index * 70}ms`,
+                  } as CSSProperties
+                }
+              >
+                <div className="mb-1 flex items-center justify-between gap-3">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <span className="truncate text-xs text-gray-400 transition-colors duration-300 group-hover:text-gray-100">
+                      {formatFeatureName(name)}
+                    </span>
+                    <div className="feature-tooltip-trigger relative flex-shrink-0">
+                      <Info className="h-3.5 w-3.5 text-gray-600 transition-colors duration-300 group-hover:text-gray-300" />
+                      <div className="feature-tooltip pointer-events-none absolute left-1/2 top-[calc(100%+10px)] z-20 w-56 -translate-x-1/2 rounded-xl border border-white/10 bg-slate-950/95 p-3 text-[11px] leading-relaxed text-gray-200 shadow-[0_18px_45px_rgba(2,6,23,0.5)] backdrop-blur-md">
+                        <p className="font-semibold text-white">{formatFeatureName(name)}</p>
+                        <p className="mt-1 text-gray-300">{description}</p>
+                        <div className="mt-2 flex items-center gap-1.5 text-[10px] uppercase tracking-[0.18em] text-gray-500">
+                          <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: severity.color }} />
+                          {severity.label} Signal
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <span className="font-mono text-xs tabular-nums text-gray-500">
+                    {(value * 100).toFixed(0)}%
+                  </span>
+                </div>
+
+                <div className="feature-track h-2 overflow-hidden rounded-full bg-dark-bg">
+                  <div
+                    className="feature-bar h-full rounded-full"
+                    style={{ width: `${Math.max(value * 100, 2)}%` }}
+                  />
+                </div>
               </div>
-            </div>
-          ))
+            )
+          })
         )}
       </div>
 
-      {/* Legend footer */}
       {sortedFeatures.length > 0 && (
-        <div className="mt-4 pt-3 border-t border-dark-border/30">
+        <div className="mt-4 border-t border-dark-border/30 pt-3">
           <div className="flex items-center justify-between">
             <span className="text-[10px] text-gray-600">
               {sortedFeatures.length} active indicator{sortedFeatures.length !== 1 ? 's' : ''}
             </span>
             <div className="flex gap-2">
               {[
-                { label: 'Low', color: 'bg-brand-teal' },
-                { label: 'Med', color: 'bg-warning' },
-                { label: 'High', color: 'bg-orange-500' },
-                { label: 'Crit', color: 'bg-alert' },
+                { label: 'Low', color: '#14B8A6' },
+                { label: 'Med', color: '#FBBF24' },
+                { label: 'High', color: '#FB923C' },
+                { label: 'Crit', color: '#F87171' },
               ].map(item => (
                 <div key={item.label} className="flex items-center gap-1">
-                  <div className={`w-1.5 h-1.5 rounded-full ${item.color}`} />
+                  <div className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: item.color }} />
                   <span className="text-[9px] text-gray-600">{item.label}</span>
                 </div>
               ))}
diff --git a/demo/frontend/src/components/FederatedDashboard.tsx b/demo/frontend/src/components/FederatedDashboard.tsx
index 37dd144..cde1f8a 100644
--- a/demo/frontend/src/components/FederatedDashboard.tsx
+++ b/demo/frontend/src/components/FederatedDashboard.tsx
@@ -327,7 +327,7 @@ export default function FederatedDashboard() {
       )}
 
       {/* Header with action */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
         <div className="flex items-center gap-3">
           <div className="w-10 h-10 rounded-xl bg-brand-teal/10 flex items-center justify-center">
             <GitBranch className="w-5 h-5 text-brand-teal" />
@@ -350,10 +350,10 @@ export default function FederatedDashboard() {
           onClick={runSimulationRound}
           disabled={isSimulating}
           className={`
-            flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all
+            control-button px-4 py-2 text-sm font-medium
             ${isSimulating
-              ? 'bg-brand-teal/20 text-brand-teal/50 cursor-not-allowed'
-              : 'bg-brand-teal text-white hover:bg-brand-teal-light active:scale-[0.98] shadow-lg shadow-brand-teal/20'
+              ? 'bg-brand-teal/20 text-brand-teal/50 border-brand-teal/20'
+              : 'border-brand-teal bg-brand-teal text-white hover:bg-brand-teal-light hover:text-white shadow-lg shadow-brand-teal/20'
             }
           `}
         >
@@ -367,7 +367,7 @@ export default function FederatedDashboard() {
       </div>
 
       {/* Stats cards */}
-      <div className="grid grid-cols-6 gap-4">
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-6">
         {stats.map((stat) => (
           <div key={stat.label} className="glass-card p-4">
             <div className="flex items-center gap-2 mb-2">
@@ -382,7 +382,7 @@ export default function FederatedDashboard() {
       </div>
 
       {/* Charts */}
-      <div className="grid grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
         {/* Accuracy & F1 over rounds */}
         <div className="glass-card p-6">
           <h3 className="text-sm font-semibold text-gray-200 mb-4 flex items-center gap-2">
@@ -492,7 +492,7 @@ export default function FederatedDashboard() {
           <Users className="w-4 h-4 text-brand-teal" />
           Per-Device Sample Contributions
         </h3>
-        <div className="grid grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
           <ResponsiveContainer width="100%" height={200}>
             <BarChart data={deviceData} layout="vertical">
               <CartesianGrid strokeDasharray="3 3" stroke="#1E293B" horizontal={false} />
@@ -564,7 +564,7 @@ export default function FederatedDashboard() {
       {/* FL Process explanation */}
       <div className="glass-card p-6">
         <h3 className="text-sm font-semibold text-gray-200 mb-4">How Federated Learning Works</h3>
-        <div className="grid grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
           {[
             { step: '1', title: 'Local Training', desc: 'Each device trains on its own call data', icon: <Smartphone className="w-5 h-5" />, color: 'text-brand-teal' },
             { step: '2', title: 'Add DP Noise', desc: 'Differential privacy noise added to gradients', icon: <Lock className="w-5 h-5" />, color: 'text-safe' },
diff --git a/demo/frontend/src/components/FraudAlert.tsx b/demo/frontend/src/components/FraudAlert.tsx
index c3de6c2..e0fcdda 100644
--- a/demo/frontend/src/components/FraudAlert.tsx
+++ b/demo/frontend/src/components/FraudAlert.tsx
@@ -22,7 +22,7 @@ export default function FraudAlert({
       icon: <ShieldX className="w-10 h-10 text-white drop-shadow-lg" />,
       title: 'FRAUD DETECTED',
       subtitle: 'This call exhibits strong fraud indicators',
-      containerClass: 'animate-slide-down animate-pulse-alert',
+      containerClass: 'alert-overlay alert-overlay-critical',
       badgeClass: 'bg-white/20 text-white',
     },
     high: {
@@ -31,7 +31,7 @@ export default function FraudAlert({
       icon: <AlertTriangle className="w-10 h-10 text-white drop-shadow-lg" />,
       title: 'HIGH RISK CALL',
       subtitle: 'Suspicious patterns detected',
-      containerClass: 'animate-slide-down',
+      containerClass: 'alert-overlay',
       badgeClass: 'bg-white/20 text-white',
     },
     medium: {
@@ -40,7 +40,7 @@ export default function FraudAlert({
       icon: <Info className="w-6 h-6 text-warning" />,
       title: 'Caution',
       subtitle: 'Some suspicious indicators present',
-      containerClass: 'animate-slide-down',
+      containerClass: 'alert-banner',
       badgeClass: 'bg-warning/20 text-warning',
     },
   }
@@ -49,10 +49,9 @@ export default function FraudAlert({
   const percentage = Math.round(score * 100)
 
   if (riskLevel === 'medium') {
-    // Compact banner for medium risk
     return (
       <div className={`mx-3 mt-2 ${config.containerClass}`}>
-        <div className={`${config.bg} backdrop-blur-xl rounded-xl border ${config.border} p-3`}>
+        <div className={`${config.bg} alert-banner-card backdrop-blur-xl rounded-xl border ${config.border} p-3 shadow-[0_18px_45px_rgba(15,23,42,0.4)]`}>
           <div className="flex items-center gap-3">
             {config.icon}
             <div className="flex-1">
@@ -80,7 +79,7 @@ export default function FraudAlert({
   // Full overlay for high/critical
   return (
     <div className={`w-full h-full ${config.containerClass}`}>
-      <div className={`w-full h-full ${config.bg} backdrop-blur-xl border-y ${config.border} flex flex-col items-center justify-center px-6`}>
+      <div className={`alert-overlay-panel w-full h-full ${config.bg} backdrop-blur-xl border-y ${config.border} flex flex-col items-center justify-center px-6`}>
         {/* Risk icon */}
         <div className="relative mb-4">
           <div className={`w-20 h-20 rounded-full ${
diff --git a/demo/frontend/src/components/PhoneSimulator.tsx b/demo/frontend/src/components/PhoneSimulator.tsx
index f141d54..6193644 100644
--- a/demo/frontend/src/components/PhoneSimulator.tsx
+++ b/demo/frontend/src/components/PhoneSimulator.tsx
@@ -7,34 +7,31 @@ interface PhoneSimulatorProps {
 export default function PhoneSimulator({ children }: PhoneSimulatorProps) {
   return (
     <div className="phone-frame">
-      {/* Outer bezel */}
-      <div className="relative w-[290px] h-[600px] bg-gradient-to-b from-gray-800 to-gray-900 rounded-[44px] p-[3px] shadow-2xl shadow-black/50">
-        {/* Inner bezel with subtle highlight */}
-        <div className="relative w-full h-full bg-gradient-to-b from-gray-900 via-black to-gray-900 rounded-[42px] p-[8px] overflow-hidden">
-          {/* Side buttons */}
-          <div className="absolute -left-[3px] top-[100px] w-[3px] h-[28px] bg-gray-700 rounded-l-sm" />
-          <div className="absolute -left-[3px] top-[145px] w-[3px] h-[50px] bg-gray-700 rounded-l-sm" />
-          <div className="absolute -left-[3px] top-[205px] w-[3px] h-[50px] bg-gray-700 rounded-l-sm" />
-          <div className="absolute -right-[3px] top-[140px] w-[3px] h-[65px] bg-gray-700 rounded-r-sm" />
+      <div className="relative w-[290px] h-[600px] rounded-[46px] bg-[#111215] p-[4px] shadow-2xl shadow-black/60">
+        <div className="pointer-events-none absolute inset-[1px] rounded-[45px] border border-white/10" />
+        <div className="pointer-events-none absolute inset-x-[18px] top-[10px] h-[22px] rounded-full bg-white/5 blur-md" />
 
-          {/* Screen area */}
-          <div className="relative w-full h-full bg-dark-bg rounded-[36px] overflow-hidden">
-            {/* Dynamic Island / Notch */}
-            <div className="absolute top-0 left-0 right-0 z-30 flex justify-center pt-2">
-              <div className="w-[100px] h-[28px] bg-black rounded-full flex items-center justify-center gap-2">
-                <div className="w-[8px] h-[8px] rounded-full bg-gray-800 ring-1 ring-gray-700" />
-                <div className="w-[4px] h-[4px] rounded-full bg-gray-700" />
-              </div>
+        <div className="relative h-full w-full overflow-hidden rounded-[42px] bg-gradient-to-b from-[#2a2b31] via-[#111216] to-[#050608] p-[7px]">
+          <div className="absolute -left-[3px] top-[116px] h-[34px] w-[3px] rounded-l-sm bg-zinc-500/70" />
+          <div className="absolute -left-[3px] top-[172px] h-[58px] w-[3px] rounded-l-sm bg-zinc-500/70" />
+          <div className="absolute -left-[3px] top-[240px] h-[58px] w-[3px] rounded-l-sm bg-zinc-500/70" />
+          <div className="absolute -right-[3px] top-[182px] h-[78px] w-[3px] rounded-r-sm bg-zinc-500/70" />
+
+          <div className="relative h-full w-full overflow-hidden rounded-[35px] border border-black/70 bg-dark-bg shadow-[inset_0_0_0_1px_rgba(255,255,255,0.03)]">
+            <div className="pointer-events-none absolute inset-0 rounded-[35px] shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-18px_40px_rgba(0,0,0,0.32)]" />
+
+            <div className="absolute left-1/2 top-[7px] z-30 h-[34px] w-[124px] -translate-x-1/2 rounded-[20px] bg-black shadow-[0_4px_14px_rgba(0,0,0,0.55)]">
+              <div className="absolute left-[18px] top-1/2 h-[10px] w-[10px] -translate-y-1/2 rounded-full bg-zinc-900 ring-1 ring-white/5" />
+              <div className="absolute left-[35px] top-1/2 h-[7px] w-[7px] -translate-y-1/2 rounded-full bg-zinc-800 ring-1 ring-white/5" />
+              <div className="absolute right-[18px] top-1/2 h-[8px] w-[40px] -translate-y-1/2 rounded-full bg-zinc-950/90" />
             </div>
 
-            {/* Screen content */}
-            <div className="relative w-full h-full overflow-hidden">
+            <div className="relative h-full w-full overflow-hidden rounded-[35px]">
               {children}
             </div>
 
-            {/* Home indicator */}
             <div className="absolute bottom-1.5 left-0 right-0 z-30 flex justify-center">
-              <div className="w-[120px] h-[4px] bg-gray-600 rounded-full opacity-60" />
+              <div className="h-[4px] w-[118px] rounded-full bg-white/38" />
             </div>
           </div>
         </div>
diff --git a/demo/frontend/src/components/PrivacyDemo.tsx b/demo/frontend/src/components/PrivacyDemo.tsx
index 0bcbf93..e14ffe1 100644
--- a/demo/frontend/src/components/PrivacyDemo.tsx
+++ b/demo/frontend/src/components/PrivacyDemo.tsx
@@ -150,8 +150,6 @@ export default function PrivacyDemo({ sentences, gradientVectors, isCallActive }
         }))
       : fallbackEntries
 
-  const hasNoData = displayEntries.length === 0 && !isCallActive
-
   // Replay: cycle through fallback examples one by one
   const startReplay = useCallback(() => {
     if (isReplaying) return
@@ -184,8 +182,8 @@ export default function PrivacyDemo({ sentences, gradientVectors, isCallActive }
   return (
     <div className="space-y-6">
       {/* Intro banner */}
-      <div className="glass-card p-6 glow-teal">
-        <div className="flex items-start gap-4">
+      <div className="glass-card p-5 sm:p-6 glow-teal">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
           <div className="w-12 h-12 rounded-xl bg-brand-teal/10 flex items-center justify-center flex-shrink-0">
             <Lock className="w-6 h-6 text-brand-teal" />
           </div>
@@ -197,7 +195,7 @@ export default function PrivacyDemo({ sentences, gradientVectors, isCallActive }
               to reconstruct your conversations or personal information.
             </p>
           </div>
-          <div className="flex items-center gap-3 flex-shrink-0">
+          <div className="flex flex-wrap items-center gap-3 lg:flex-shrink-0">
             {/* Connection status */}
             <div className="flex items-center gap-1.5 text-xs">
               {wsConnected ? (
@@ -217,10 +215,10 @@ export default function PrivacyDemo({ sentences, gradientVectors, isCallActive }
               onClick={startReplay}
               disabled={isReplaying || isCallActive}
               className={`
-                flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all
+                control-button px-3 py-1.5 text-xs font-medium
                 ${isReplaying || isCallActive
-                  ? 'bg-gray-700/30 text-gray-600 cursor-not-allowed'
-                  : 'bg-brand-teal/10 text-brand-teal border border-brand-teal/20 hover:bg-brand-teal/20 active:scale-[0.97]'
+                  ? ''
+                  : 'border-brand-teal/20 bg-brand-teal/10 text-brand-teal hover:bg-brand-teal/20'
                 }
               `}
             >
@@ -232,7 +230,7 @@ export default function PrivacyDemo({ sentences, gradientVectors, isCallActive }
       </div>
 
       {/* Side by side panels with noise wall */}
-      <div className="grid grid-cols-[1fr_auto_1fr] gap-0">
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[1fr_auto_1fr] xl:gap-0">
         {/* Device panel */}
         <div className="glass-card border-brand-teal/30 overflow-hidden">
           {/* Header */}
@@ -373,7 +371,7 @@ export default function PrivacyDemo({ sentences, gradientVectors, isCallActive }
                       <p className="text-xs text-gray-600 font-medium">
                         Gradient Update #{i + 1}
                       </p>
-                      <span className="text-[9px] px-1.5 py-0.5 bg-gray-700/30 text-gray-500 rounded-full">
+                        <span className="text-[9px] px-1.5 py-0.5 bg-gray-700/30 text-gray-500 rounded-full">
                         DP-SGD
                       </span>
                     </div>
@@ -412,9 +410,9 @@ export default function PrivacyDemo({ sentences, gradientVectors, isCallActive }
       </div>
 
       {/* Bottom explanation */}
-      <div className="glass-card p-6">
-        <div className="flex items-center gap-6">
-          <div className="flex items-center gap-3 flex-shrink-0">
+      <div className="glass-card p-5 sm:p-6">
+        <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:gap-6">
+          <div className="flex items-center gap-3 overflow-x-auto pb-1 lg:flex-shrink-0">
             <div className="w-10 h-10 rounded-full bg-brand-teal/10 flex items-center justify-center">
               <Smartphone className="w-5 h-5 text-brand-teal" />
             </div>
diff --git a/demo/frontend/src/components/ScoreGauge.tsx b/demo/frontend/src/components/ScoreGauge.tsx
index 58563f3..94310f7 100644
--- a/demo/frontend/src/components/ScoreGauge.tsx
+++ b/demo/frontend/src/components/ScoreGauge.tsx
@@ -1,23 +1,57 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react'
 import { ShieldCheck, ShieldAlert, ShieldX } from 'lucide-react'
 
 interface ScoreGaugeProps {
-  score: number  // 0.0 to 1.0
+  score: number
   label?: string
 }
 
-function getGaugeColor(score: number): string {
-  if (score < 0.3) return '#10B981'   // safe green
-  if (score < 0.5) return '#F59E0B'   // warning amber
-  if (score < 0.75) return '#F97316'  // orange
-  return '#EF4444'                     // alert red
+interface ParticleBurst {
+  id: number
+  color: string
 }
 
-function getGaugeGlow(score: number): string {
-  if (score < 0.3) return 'drop-shadow(0 0 8px rgba(16, 185, 129, 0.4))'
-  if (score < 0.5) return 'drop-shadow(0 0 8px rgba(245, 158, 11, 0.4))'
-  if (score < 0.75) return 'drop-shadow(0 0 8px rgba(249, 115, 22, 0.4))'
-  return 'drop-shadow(0 0 12px rgba(239, 68, 68, 0.5))'
+const THRESHOLDS = [0.3, 0.5, 0.75]
+const GRADIENT_STOPS = [
+  { score: 0, color: '#10B981' },
+  { score: 0.3, color: '#EAB308' },
+  { score: 0.5, color: '#F59E0B' },
+  { score: 0.75, color: '#F97316' },
+  { score: 1, color: '#EF4444' },
+]
+
+function hexToRgb(hex: string) {
+  const normalized = hex.replace('#', '')
+  const value = Number.parseInt(normalized, 16)
+  return {
+    r: (value >> 16) & 255,
+    g: (value >> 8) & 255,
+    b: value & 255,
+  }
+}
+
+function interpolateColor(score: number): string {
+  const safeScore = Math.max(0, Math.min(1, score))
+
+  for (let index = 1; index < GRADIENT_STOPS.length; index += 1) {
+    const start = GRADIENT_STOPS[index - 1]
+    const end = GRADIENT_STOPS[index]
+
+    if (safeScore <= end.score) {
+      const range = end.score - start.score || 1
+      const progress = (safeScore - start.score) / range
+      const startRgb = hexToRgb(start.color)
+      const endRgb = hexToRgb(end.color)
+
+      const r = Math.round(startRgb.r + (endRgb.r - startRgb.r) * progress)
+      const g = Math.round(startRgb.g + (endRgb.g - startRgb.g) * progress)
+      const b = Math.round(startRgb.b + (endRgb.b - startRgb.b) * progress)
+
+      return `rgb(${r}, ${g}, ${b})`
+    }
+  }
+
+  return GRADIENT_STOPS[GRADIENT_STOPS.length - 1].color
 }
 
 function getLevelText(score: number): string {
@@ -35,69 +69,125 @@ function getLevelIcon(score: number) {
 }
 
 export default function ScoreGauge({ score, label = 'Fraud Score' }: ScoreGaugeProps) {
-  const [animatedScore, setAnimatedScore] = useState(0)
+  const clampedScore = Math.max(0, Math.min(1, score))
+  const previousScoreRef = useRef(clampedScore)
+  const burstIdRef = useRef(0)
+  const [bursts, setBursts] = useState<ParticleBurst[]>([])
+  const [isThresholdPulseActive, setIsThresholdPulseActive] = useState(false)
 
-  // Smooth animation towards target score
-  useEffect(() => {
-    const duration = 600
-    const startScore = animatedScore
-    const startTime = performance.now()
-
-    const animate = (currentTime: number) => {
-      const elapsed = currentTime - startTime
-      const progress = Math.min(elapsed / duration, 1)
-      // Ease out cubic
-      const eased = 1 - Math.pow(1 - progress, 3)
-      const newScore = startScore + (score - startScore) * eased
-      setAnimatedScore(newScore)
-
-      if (progress < 1) {
-        requestAnimationFrame(animate)
-      }
-    }
-
-    requestAnimationFrame(animate)
-  }, [score])
-
-  const percentage = Math.round(animatedScore * 100)
-  const color = getGaugeColor(animatedScore)
-  const glow = getGaugeGlow(animatedScore)
+  const percentage = Math.round(clampedScore * 100)
+  const color = useMemo(() => interpolateColor(clampedScore), [clampedScore])
 
-  // SVG arc calculations
   const size = 200
   const strokeWidth = 12
   const radius = (size - strokeWidth) / 2
-  const circumference = Math.PI * radius // Semicircle
-  const offset = circumference - (animatedScore * circumference)
-
-  // Arc path for semicircle (bottom half open)
+  const circumference = Math.PI * radius
+  const offset = circumference - clampedScore * circumference
   const centerX = size / 2
   const centerY = size / 2
 
+  useEffect(() => {
+    const previousScore = previousScoreRef.current
+    const crossedThreshold = THRESHOLDS.some(
+      threshold =>
+        (previousScore < threshold && clampedScore >= threshold) ||
+        (previousScore > threshold && clampedScore <= threshold)
+    )
+
+    previousScoreRef.current = clampedScore
+
+    if (!crossedThreshold) return
+
+    const burst = {
+      id: burstIdRef.current,
+      color,
+    }
+    burstIdRef.current += 1
+
+    setBursts(current => [...current, burst])
+    setIsThresholdPulseActive(true)
+
+    const pulseTimeout = window.setTimeout(() => {
+      setIsThresholdPulseActive(false)
+    }, 700)
+
+    const cleanupTimeout = window.setTimeout(() => {
+      setBursts(current => current.filter(item => item.id !== burst.id))
+    }, 1300)
+
+    return () => {
+      window.clearTimeout(pulseTimeout)
+      window.clearTimeout(cleanupTimeout)
+    }
+  }, [clampedScore, color])
+
   return (
     <div className="flex flex-col items-center">
-      <div className="relative" style={{ width: size, height: size }}>
+      <div
+        className={`score-gauge-shell relative ${isThresholdPulseActive ? 'score-gauge-threshold-pulse' : ''}`}
+        style={
+          {
+            width: size,
+            height: size,
+            '--gauge-color': color,
+          } as CSSProperties
+        }
+      >
+        <div className="score-gauge-glow absolute inset-[24px] rounded-full" />
+
+        {bursts.map(burst => (
+          <div
+            key={burst.id}
+            className="score-gauge-burst pointer-events-none absolute inset-0"
+            style={{ '--burst-color': burst.color } as CSSProperties}
+            aria-hidden="true"
+          >
+            {Array.from({ length: 10 }).map((_, index) => {
+              const angle = (360 / 10) * index
+              const distance = 36 + (index % 3) * 10
+              const delay = `${index * 35}ms`
+              return (
+                <span
+                  key={index}
+                  className="score-gauge-particle absolute left-1/2 top-1/2"
+                  style={
+                    {
+                      '--particle-angle': `${angle}deg`,
+                      '--particle-distance': `${distance}px`,
+                      animationDelay: delay,
+                    } as CSSProperties
+                  }
+                />
+              )
+            })}
+          </div>
+        ))}
+
         <svg
           width={size}
           height={size}
           viewBox={`0 0 ${size} ${size}`}
-          className="transform -rotate-90"
-          style={{ filter: glow }}
+          className="score-gauge-svg transform -rotate-90"
         >
-          {/* Background track */}
+          <defs>
+            <linearGradient id="scoreGaugeTrack" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#0f172a" />
+              <stop offset="100%" stopColor="#1e293b" />
+            </linearGradient>
+          </defs>
+
           <circle
             cx={centerX}
             cy={centerY}
             r={radius}
             fill="none"
-            stroke="#1E293B"
+            stroke="url(#scoreGaugeTrack)"
             strokeWidth={strokeWidth}
             strokeLinecap="round"
             strokeDasharray={`${circumference} ${circumference * 2}`}
             transform={`rotate(90, ${centerX}, ${centerY})`}
           />
 
-          {/* Score arc */}
           <circle
             cx={centerX}
             cy={centerY}
@@ -109,11 +199,10 @@ export default function ScoreGauge({ score, label = 'Fraud Score' }: ScoreGaugeP
             strokeDasharray={`${circumference} ${circumference * 2}`}
             strokeDashoffset={offset}
             transform={`rotate(90, ${centerX}, ${centerY})`}
-            className="transition-all duration-300"
+            className="gauge-arc"
           />
 
-          {/* Tick marks */}
-          {[0, 0.25, 0.5, 0.75, 1].map((tick) => {
+          {[0, 0.25, 0.5, 0.75, 1].map(tick => {
             const angle = (tick * 180 - 90) * (Math.PI / 180)
             const outerR = radius + strokeWidth / 2 + 4
             const innerR = radius + strokeWidth / 2 + 10
@@ -124,7 +213,10 @@ export default function ScoreGauge({ score, label = 'Fraud Score' }: ScoreGaugeP
             return (
               <line
                 key={tick}
-                x1={x1} y1={y1} x2={x2} y2={y2}
+                x1={x1}
+                y1={y1}
+                x2={x2}
+                y2={y2}
                 stroke="#475569"
                 strokeWidth={1.5}
                 strokeLinecap="round"
@@ -134,40 +226,31 @@ export default function ScoreGauge({ score, label = 'Fraud Score' }: ScoreGaugeP
           })}
         </svg>
 
-        {/* Center content */}
         <div className="absolute inset-0 flex flex-col items-center justify-center">
-          <div style={{ color }} className="mb-1">
-            {getLevelIcon(animatedScore)}
+          <div className="mb-1 score-gauge-center" style={{ color }}>
+            {getLevelIcon(clampedScore)}
           </div>
-          <span
-            className="text-4xl font-bold tabular-nums tracking-tight"
-            style={{ color }}
-          >
+          <span className="score-gauge-center text-4xl font-bold tabular-nums tracking-tight" style={{ color }}>
             {percentage}
             <span className="text-lg font-normal text-gray-500">%</span>
           </span>
-          <span
-            className="text-xs font-semibold mt-0.5 tracking-wide uppercase"
-            style={{ color }}
-          >
-            {getLevelText(animatedScore)}
+          <span className="score-gauge-center mt-0.5 text-xs font-semibold uppercase tracking-wide" style={{ color }}>
+            {getLevelText(clampedScore)}
           </span>
         </div>
       </div>
 
-      {/* Label */}
       <p className="text-xs text-gray-500 font-medium mt-2">{label}</p>
 
-      {/* Mini color legend */}
-      <div className="flex items-center gap-3 mt-3">
+      <div className="mt-3 flex items-center gap-3">
         {[
           { label: 'Safe', color: '#10B981' },
-          { label: 'Warning', color: '#F59E0B' },
+          { label: 'Warning', color: '#EAB308' },
           { label: 'High', color: '#F97316' },
           { label: 'Critical', color: '#EF4444' },
         ].map(item => (
           <div key={item.label} className="flex items-center gap-1">
-            <div className="w-2 h-2 rounded-full" style={{ backgroundColor: item.color }} />
+            <div className="h-2 w-2 rounded-full" style={{ backgroundColor: item.color }} />
             <span className="text-[9px] text-gray-500">{item.label}</span>
           </div>
         ))}
diff --git a/demo/frontend/src/components/TranscriptPanel.tsx b/demo/frontend/src/components/TranscriptPanel.tsx
index 2d7a654..e83ce8c 100644
--- a/demo/frontend/src/components/TranscriptPanel.tsx
+++ b/demo/frontend/src/components/TranscriptPanel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { MessageSquare, Radio } from 'lucide-react'
 
 interface TranscriptPanelProps {
@@ -10,6 +10,14 @@ interface TranscriptPanelProps {
   isStreaming: boolean
 }
 
+const KEYWORD_STYLES: Array<{ pattern: RegExp; className: string }> = [
+  { pattern: /\b(immediately|urgent|hurry|deadline|today|now)\b/gi, className: 'transcript-keyword transcript-keyword-urgent' },
+  { pattern: /\b(gift cards?|google play|codes?)\b/gi, className: 'transcript-keyword transcript-keyword-payment' },
+  { pattern: /\b(password|pin|social security|verification code|bank details?|ssn)\b/gi, className: 'transcript-keyword transcript-keyword-credential' },
+  { pattern: /\b(arrest|warrant|prosecution|criminal)\b/gi, className: 'transcript-keyword transcript-keyword-threat' },
+  { pattern: /\b(remote access|download|website|click|login)\b/gi, className: 'transcript-keyword transcript-keyword-action' },
+]
+
 function getScoreColor(score: number): string {
   if (score < 0.3) return 'border-safe'
   if (score < 0.5) return 'border-warning'
@@ -24,17 +32,101 @@ function getScoreBg(score: number): string {
   return 'bg-alert/5'
 }
 
-function getScoreBadge(score: number): { bg: string; text: string } {
-  if (score < 0.3) return { bg: 'bg-safe/10 text-safe', text: 'Safe' }
-  if (score < 0.5) return { bg: 'bg-warning/10 text-warning', text: 'Caution' }
-  if (score < 0.75) return { bg: 'bg-orange-500/10 text-orange-400', text: 'Suspicious' }
-  return { bg: 'bg-alert/10 text-alert', text: 'Danger' }
+function getScoreBadge(score: number): { bg: string; text: string; pulse: boolean } {
+  if (score < 0.3) return { bg: 'bg-safe/10 text-safe', text: 'Safe', pulse: false }
+  if (score < 0.5) return { bg: 'bg-warning/10 text-warning', text: 'Caution', pulse: false }
+  if (score < 0.75) return { bg: 'bg-orange-500/10 text-orange-400', text: 'Suspicious', pulse: true }
+  return { bg: 'bg-alert/10 text-alert', text: 'Danger', pulse: true }
+}
+
+function highlightKeywords(text: string) {
+  if (!text) return null
+
+  const matches: Array<{ start: number; end: number; className: string }> = []
+
+  KEYWORD_STYLES.forEach(({ pattern, className }) => {
+    const regex = new RegExp(pattern.source, pattern.flags)
+    let match = regex.exec(text)
+    while (match) {
+      matches.push({
+        start: match.index,
+        end: match.index + match[0].length,
+        className,
+      })
+      match = regex.exec(text)
+    }
+  })
+
+  matches.sort((a, b) => a.start - b.start || b.end - a.end)
+
+  const segments: Array<{ text: string; className?: string }> = []
+  let cursor = 0
+
+  matches.forEach(match => {
+    if (match.start < cursor) return
+    if (match.start > cursor) {
+      segments.push({ text: text.slice(cursor, match.start) })
+    }
+    segments.push({
+      text: text.slice(match.start, match.end),
+      className: match.className,
+    })
+    cursor = match.end
+  })
+
+  if (cursor < text.length) {
+    segments.push({ text: text.slice(cursor) })
+  }
+
+  return segments.map((segment, index) => (
+    <span key={`${segment.text}-${index}`} className={segment.className}>
+      {segment.text}
+    </span>
+  ))
+}
+
+interface TypewriterSentenceProps {
+  text: string
+  isLatest: boolean
+}
+
+function TypewriterSentence({ text, isLatest }: TypewriterSentenceProps) {
+  const [visibleLength, setVisibleLength] = useState(isLatest ? 0 : text.length)
+
+  useEffect(() => {
+    if (!isLatest) {
+      setVisibleLength(text.length)
+      return
+    }
+
+    setVisibleLength(0)
+    const stepMs = Math.max(16, Math.min(34, 520 / Math.max(text.length, 1)))
+    const interval = window.setInterval(() => {
+      setVisibleLength(current => {
+        if (current >= text.length) {
+          window.clearInterval(interval)
+          return current
+        }
+        return current + 1
+      })
+    }, stepMs)
+
+    return () => window.clearInterval(interval)
+  }, [isLatest, text])
+
+  const visibleText = useMemo(() => text.slice(0, visibleLength), [text, visibleLength])
+  const isTyping = isLatest && visibleLength < text.length
+
+  return (
+    <span className={isTyping ? 'typewriter-cursor' : undefined}>
+      {highlightKeywords(visibleText)}
+    </span>
+  )
 }
 
 export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPanelProps) {
   const scrollRef = useRef<HTMLDivElement>(null)
 
-  // Auto-scroll to bottom when new sentences arrive
   useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight
@@ -43,8 +135,7 @@ export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPa
 
   return (
     <div>
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4">
+      <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
           <MessageSquare className="w-4 h-4 text-brand-teal" />
           <h3 className="text-sm font-semibold text-gray-200">Live Transcript</h3>
@@ -57,10 +148,9 @@ export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPa
         )}
       </div>
 
-      {/* Transcript lines */}
       <div
         ref={scrollRef}
-        className="space-y-2 max-h-[280px] overflow-y-auto pr-2 scroll-smooth"
+        className="transcript-scroll space-y-2 max-h-[280px] overflow-y-auto pr-2 scroll-smooth"
       >
         {sentences.length === 0 ? (
           <div className="flex items-center justify-center py-12 text-gray-600">
@@ -73,29 +163,28 @@ export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPa
         ) : (
           sentences.map((sentence, i) => {
             const badge = getScoreBadge(sentence.score)
+            const isLatest = i === sentences.length - 1
+
             return (
               <div
-                key={i}
+                key={sentence.index}
                 className={`
-                  flex items-start gap-3 p-3 rounded-lg border-l-[3px]
+                  flex items-start gap-3 rounded-lg border-l-[3px] p-3
                   ${getScoreColor(sentence.score)} ${getScoreBg(sentence.score)}
                   animate-fade-in
                 `}
                 style={{ animationDelay: `${i * 50}ms` }}
               >
-                {/* Line number */}
-                <span className="text-[10px] text-gray-600 font-mono mt-0.5 flex-shrink-0 w-4 text-right">
+                <span className="mt-0.5 w-4 flex-shrink-0 text-right font-mono text-[10px] text-gray-600">
                   {sentence.index + 1}
                 </span>
 
-                {/* Text */}
-                <p className="flex-1 text-sm text-gray-300 font-mono leading-relaxed">
-                  {sentence.text}
+                <p className="flex-1 font-mono text-sm leading-relaxed text-gray-300">
+                  <TypewriterSentence text={sentence.text} isLatest={isLatest} />
                 </p>
 
-                {/* Score badge */}
-                <div className="flex-shrink-0 flex flex-col items-end gap-1">
-                  <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded ${badge.bg}`}>
+                <div className="flex flex-shrink-0 flex-col items-end gap-1">
+                  <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded ${badge.bg} ${badge.pulse ? 'transcript-score-badge-pulse' : ''}`}>
                     {badge.text}
                   </span>
                   <span className="text-[10px] text-gray-500 font-mono tabular-nums">
@@ -107,13 +196,12 @@ export default function TranscriptPanel({ sentences, isStreaming }: TranscriptPa
           })
         )}
 
-        {/* Streaming indicator */}
         {isStreaming && sentences.length > 0 && (
           <div className="flex items-center gap-2 px-3 py-2">
             <div className="flex gap-1">
-              <div className="w-1.5 h-1.5 rounded-full bg-brand-teal animate-bounce" style={{ animationDelay: '0ms' }} />
-              <div className="w-1.5 h-1.5 rounded-full bg-brand-teal animate-bounce" style={{ animationDelay: '150ms' }} />
-              <div className="w-1.5 h-1.5 rounded-full bg-brand-teal animate-bounce" style={{ animationDelay: '300ms' }} />
+              <div className="streaming-dot w-1.5 h-1.5 rounded-full bg-brand-teal" />
+              <div className="streaming-dot w-1.5 h-1.5 rounded-full bg-brand-teal" />
+              <div className="streaming-dot w-1.5 h-1.5 rounded-full bg-brand-teal" />
             </div>
             <span className="text-[10px] text-gray-500">Listening...</span>
           </div>
diff --git a/demo/frontend/src/styles/index.css b/demo/frontend/src/styles/index.css
index 2998ccd..705967c 100644
--- a/demo/frontend/src/styles/index.css
+++ b/demo/frontend/src/styles/index.css
@@ -13,6 +13,33 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
+  button {
+    transition:
+      transform 180ms ease,
+      background-color 180ms ease,
+      border-color 180ms ease,
+      color 180ms ease,
+      box-shadow 180ms ease,
+      opacity 180ms ease;
+  }
+
+  button:hover:not(:disabled) {
+    transform: translateY(-1px);
+  }
+
+  button:active:not(:disabled) {
+    transform: translateY(0) scale(0.98);
+  }
+
+  button:disabled {
+    cursor: not-allowed;
+  }
+
+  button:focus-visible {
+    outline: 2px solid rgba(20, 184, 166, 0.5);
+    outline-offset: 2px;
+  }
+
   ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -36,6 +63,45 @@
     @apply bg-dark-card/80 backdrop-blur-xl border border-dark-border/50 rounded-2xl;
   }
 
+  .control-button {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg border border-dark-border/50 bg-dark-card text-gray-300 shadow-sm shadow-black/10;
+  }
+
+  .control-button:hover:not(:disabled) {
+    @apply border-brand-teal/30 bg-brand-teal/10 text-brand-teal;
+    box-shadow: 0 10px 25px rgba(13, 148, 136, 0.08);
+  }
+
+  .control-button:disabled {
+    @apply bg-dark-card/70 text-gray-600 border-dark-border/40 opacity-50;
+  }
+
+  .skeleton-block {
+    position: relative;
+    overflow: hidden;
+    border-radius: 0.75rem;
+    background: linear-gradient(90deg, rgba(51, 65, 85, 0.55) 0%, rgba(71, 85, 105, 0.75) 50%, rgba(51, 65, 85, 0.55) 100%);
+    background-size: 200% 100%;
+    animation: skeleton-wave 1.6s ease-in-out infinite;
+  }
+
+  .panel-skeleton {
+    @apply space-y-3;
+  }
+
+  .panel-skeleton-card {
+    @apply rounded-2xl border border-dark-border/30 bg-dark-bg/30 p-4;
+  }
+
+  @keyframes skeleton-wave {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
   .glow-teal {
     box-shadow: 0 0 20px rgba(13, 148, 136, 0.15), 0 0 60px rgba(13, 148, 136, 0.05);
   }
diff --git a/demo/frontend/src/styles/phone.css b/demo/frontend/src/styles/phone.css
index 57e177c..92fd2cf 100644
--- a/demo/frontend/src/styles/phone.css
+++ b/demo/frontend/src/styles/phone.css
@@ -11,6 +11,29 @@
   transition: transform 0.3s ease;
 }
 
+.phone-screen-shake {
+  animation: phone-screen-shake 480ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+
+@keyframes phone-screen-shake {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  18% {
+    transform: translate3d(-1.5px, 0, 0);
+  }
+  36% {
+    transform: translate3d(1.25px, 0, 0);
+  }
+  54% {
+    transform: translate3d(-1px, 0.4px, 0);
+  }
+  72% {
+    transform: translate3d(0.8px, -0.4px, 0);
+  }
+}
+
 /* ===== Pulse Animation for Critical Alerts ===== */
 
 @keyframes pulse-border {
@@ -46,6 +69,55 @@
   animation: typewriter-cursor 0.8s ease-in-out infinite;
   color: #0d9488;
   font-weight: bold;
+  margin-left: 1px;
+}
+
+.transcript-keyword {
+  font-weight: 700;
+  border-radius: 0.35rem;
+  padding: 0 0.12rem;
+}
+
+.transcript-keyword-urgent {
+  color: #fbbf24;
+  background: rgba(245, 158, 11, 0.12);
+}
+
+.transcript-keyword-payment {
+  color: #fb923c;
+  background: rgba(249, 115, 22, 0.12);
+}
+
+.transcript-keyword-credential {
+  color: #f87171;
+  background: rgba(239, 68, 68, 0.12);
+}
+
+.transcript-keyword-threat {
+  color: #ef4444;
+  background: rgba(127, 29, 29, 0.24);
+}
+
+.transcript-keyword-action {
+  color: #2dd4bf;
+  background: rgba(13, 148, 136, 0.12);
+}
+
+.transcript-score-badge-pulse {
+  animation: transcript-badge-pulse 1.25s ease-in-out infinite;
+  box-shadow: 0 0 0 rgba(249, 115, 22, 0);
+}
+
+@keyframes transcript-badge-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
+  }
+  50% {
+    transform: scale(1.06);
+    box-shadow: 0 0 18px 0 rgba(249, 115, 22, 0.18);
+  }
 }
 
 /* ===== Slide Down for Alert Overlay ===== */
@@ -54,6 +126,27 @@
   animation: alert-slide 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
 }
 
+.alert-overlay {
+  animation: alert-overlay-fade 420ms ease-out both;
+}
+
+.alert-overlay-critical {
+  animation: alert-overlay-fade 420ms ease-out both;
+}
+
+.alert-overlay-panel {
+  transform-origin: top center;
+  animation: alert-overlay-spring 620ms cubic-bezier(0.18, 0.9, 0.22, 1.16) both;
+}
+
+.alert-banner {
+  animation: alert-banner-spring 560ms cubic-bezier(0.22, 0.88, 0.28, 1.14) both;
+}
+
+.alert-banner-card {
+  transform-origin: top center;
+}
+
 @keyframes alert-slide {
   0% {
     transform: translateY(-100%);
@@ -68,11 +161,58 @@
   }
 }
 
+@keyframes alert-overlay-fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes alert-overlay-spring {
+  0% {
+    transform: translateY(-30px) scale(0.97);
+    opacity: 0;
+  }
+  55% {
+    transform: translateY(8px) scale(1.01);
+    opacity: 1;
+  }
+  78% {
+    transform: translateY(-3px) scale(0.998);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes alert-banner-spring {
+  0% {
+    transform: translateY(-22px) scale(0.96);
+    opacity: 0;
+  }
+  60% {
+    transform: translateY(4px) scale(1.01);
+    opacity: 1;
+  }
+  82% {
+    transform: translateY(-2px) scale(0.998);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
 /* ===== Smooth Gauge Transitions ===== */
 
 .gauge-arc {
-  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1),
-    stroke 0.3s ease;
+  transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1),
+    stroke 0.45s ease,
+    filter 0.45s ease;
+  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gauge-color) 40%, transparent));
 }
 
 .gauge-needle {
@@ -80,6 +220,94 @@
   transform-origin: center center;
 }
 
+.score-gauge-shell {
+  isolation: isolate;
+}
+
+.score-gauge-svg {
+  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gauge-color) 28%, transparent));
+  transition: filter 0.45s ease;
+}
+
+.score-gauge-glow {
+  background:
+    radial-gradient(circle at center, color-mix(in srgb, var(--gauge-color) 22%, transparent) 0%, transparent 68%);
+  filter: blur(8px);
+  opacity: 0.95;
+  transition: background 0.45s ease, opacity 0.45s ease, transform 0.7s ease;
+}
+
+.score-gauge-center {
+  transition: color 0.45s ease, transform 0.35s ease, filter 0.45s ease;
+}
+
+.score-gauge-threshold-pulse .score-gauge-glow {
+  animation: score-gauge-threshold-glow 700ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.score-gauge-threshold-pulse .score-gauge-center {
+  animation: score-gauge-center-pop 520ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.score-gauge-burst {
+  overflow: visible;
+}
+
+.score-gauge-particle {
+  width: 6px;
+  height: 6px;
+  margin-left: -3px;
+  margin-top: -3px;
+  border-radius: 9999px;
+  background:
+    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), var(--burst-color) 58%, transparent 72%);
+  box-shadow: 0 0 14px color-mix(in srgb, var(--burst-color) 60%, transparent);
+  opacity: 0;
+  transform: rotate(var(--particle-angle)) translateY(0) scale(0.4);
+  animation: score-gauge-particle-burst 860ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
+}
+
+@keyframes score-gauge-threshold-glow {
+  0% {
+    transform: scale(0.92);
+    opacity: 0.55;
+  }
+  55% {
+    transform: scale(1.08);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.95;
+  }
+}
+
+@keyframes score-gauge-center-pop {
+  0% {
+    transform: scale(0.96);
+  }
+  55% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes score-gauge-particle-burst {
+  0% {
+    opacity: 0;
+    transform: rotate(var(--particle-angle)) translateY(0) scale(0.4);
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(var(--particle-angle)) translateY(calc(-1 * var(--particle-distance))) scale(0.95);
+  }
+}
+
 /* ===== Score Bar Animations ===== */
 
 .score-bar {
@@ -167,6 +395,71 @@
   filter: brightness(1.2);
 }
 
+.feature-bar-container {
+  animation: feature-bar-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.feature-track {
+  background:
+    linear-gradient(90deg, var(--feature-track), rgba(15, 23, 42, 0.26));
+  transition: background 0.35s ease;
+}
+
+.feature-bar {
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--feature-color) 80%, white 8%) 0%, var(--feature-color) 55%, color-mix(in srgb, var(--feature-color) 75%, black 6%) 100%);
+  box-shadow: 0 0 18px var(--feature-glow);
+  transform-origin: left center;
+  animation: feature-bar-fill 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, box-shadow 0.4s ease, filter 0.25s ease;
+}
+
+.feature-tooltip {
+  opacity: 0;
+  transform: translate(-50%, 8px) scale(0.98);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.feature-tooltip::before {
+  content: "";
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(2, 6, 23, 0.95);
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.feature-tooltip-trigger:hover .feature-tooltip {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+@keyframes feature-bar-slide-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-18px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes feature-bar-fill {
+  0% {
+    transform: scaleX(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+
 /* ===== Ring Pulse for Avatar ===== */
 
 @keyframes ring-pulse {