From 6e93f5c9f34c062cd12ec4dcecb68920c5fb70fe Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 24 Apr 2026 17:56:58 +0000
Subject: [PATCH] style: redesign ui to be modern and minimalist

Replaced the heavy 3D aesthetics, large border radii, vibrant colors,
glass-morphism, and deep shadows with a clean, flat, and minimalist
monochrome design language across the application layout and pages.

Co-authored-by: artosien <65523959+artosien@users.noreply.github.com>
---
 src/app/globals.css                 | 81 ++++++++++++++---------------
 src/app/page.tsx                    | 64 +++++++++++------------
 src/components/layout/app-shell.tsx | 70 ++++++++++++-------------
 3 files changed, 105 insertions(+), 110 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index b82fcd2..97225ff 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,53 +4,53 @@
 
 @layer base {
   :root {
-    --background: 0 0% 98%;
-    --foreground: 261 43% 10%;
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;
     --card: 0 0% 100%;
-    --card-foreground: 261 43% 10%;
+    --card-foreground: 0 0% 9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 261 43% 10%;
-    --primary: 261 43% 47%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 187 100% 42%;
-    --secondary-foreground: 0 0% 100%;
-    --muted: 0 0% 92%;
-    --muted-foreground: 261 20% 35%; /* Increased contrast for WCAG AA */
-    --accent: 187 100% 42%;
-    --accent-foreground: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 88%;
-    --input: 0 0% 88%;
-    --ring: 261 43% 47%;
-    --radius: 1rem;
-    --chart-1: 261 43% 47%;
-    --chart-2: 187 100% 42%;
-    --chart-3: 280 65% 60%;
-    --chart-4: 200 80% 50%;
-    --chart-5: 160 60% 45%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 9%;
+    --radius: 0.5rem;
+    --chart-1: 0 0% 9%;
+    --chart-2: 0 0% 25%;
+    --chart-3: 0 0% 40%;
+    --chart-4: 0 0% 60%;
+    --chart-5: 0 0% 80%;
   }
 
   .dark {
-    --background: 261 43% 4%;
+    --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 261 43% 7%;
+    --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 261 43% 7%;
+    --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 261 43% 60%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 187 100% 42%;
-    --secondary-foreground: 0 0% 100%;
-    --muted: 261 25% 15%;
-    --muted-foreground: 261 10% 75%;
-    --accent: 187 100% 42%;
-    --accent-foreground: 0 0% 100%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 261 20% 18%;
-    --input: 261 20% 18%;
-    --ring: 261 43% 60%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
   }
 }
 
@@ -63,18 +63,13 @@
   }
 }
 
-/* 3D Lottery Ball Styling */
+/* Minimalist Lottery Ball Styling */
 .lotto-ball-3d {
-  @apply relative flex items-center justify-center font-black rounded-full overflow-hidden border-none shadow-[inset_-4px_-4px_10px_rgba(0,0,0,0.3),inset_4px_4px_10px_rgba(255,255,255,0.4),0_10px_20px_-5px_rgba(0,0,0,0.3)] transition-all;
-}
-
-.lotto-ball-3d::before {
-  content: '';
-  @apply absolute top-[15%] left-[20%] w-[35%] h-[25%] bg-white/40 rounded-full blur-[1px] pointer-events-none;
+  @apply relative flex items-center justify-center font-bold rounded-full overflow-hidden border border-border bg-card shadow-sm transition-all;
 }
 
 .glass-morphism {
-  @apply bg-white/80 dark:bg-black/40 backdrop-blur-xl border border-white/20 dark:border-white/5 shadow-2xl;
+  @apply bg-background border border-border shadow-sm;
 }
 
 .animate-spin-slow {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e43a8af..9d71900 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -40,7 +40,7 @@ export default function DashboardPage() {
         
         {/* Premium Redesigned Hero Section */}
         {heroImage && (
-          <div className="relative w-full aspect-[16/9] md:aspect-[3/1] rounded-[2rem] md:rounded-[3.5rem] overflow-hidden shadow-2xl border-4 border-white/20 dark:border-white/5 bg-muted group">
+          <div className="relative w-full aspect-[16/9] md:aspect-[3/1] rounded-lg md:rounded-xl overflow-hidden shadow-sm border-white/20 dark:border-white/5 bg-muted group">
             <Image 
               src={heroImage.imageUrl} 
               alt={heroImage.description}
@@ -52,17 +52,17 @@ export default function DashboardPage() {
             <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent flex flex-col justify-end p-8 md:p-14">
               <div className="max-w-2xl space-y-4 animate-in fade-in slide-in-from-bottom-8 duration-1000">
                 <div className="flex items-center gap-3">
-                  <div className="w-3 h-3 rounded-full bg-secondary animate-pulse shadow-[0_0_15px_rgba(0,255,255,1)]" />
-                  <p className="text-secondary font-black text-xs uppercase tracking-[0.4em] drop-shadow-md">Professional Studio Feed</p>
+                  <div className="w-3 h-3 rounded-full bg-secondary  " />
+                  <p className="text-secondary font-bold text-xs uppercase tracking-[0.4em] ">Professional Studio Feed</p>
                 </div>
-                <h2 className="text-white text-3xl md:text-6xl font-black tracking-tighter drop-shadow-2xl leading-[0.9]">
+                <h2 className="text-white text-3xl md:text-6xl font-bold tracking-tighter drop-shadow-sm leading-[0.9]">
                   Real-Time <br />
                   <span className="text-secondary">PCSO Analytics</span>
                 </h2>
                 <div className="pt-4 flex flex-wrap gap-4">
                   <Button 
                     onClick={handleOpenScanner} 
-                    className="h-14 px-10 rounded-2xl bg-white text-primary hover:bg-white/90 font-black text-xs uppercase tracking-widest shadow-2xl transition-all hover:scale-105 active:scale-95"
+                    className="h-14 px-10 rounded-lg bg-white text-primary hover:bg-white/90 font-bold text-xs uppercase tracking-widest shadow-sm transition-all hover:scale-105 active:scale-95"
                   >
                     <Scan className="mr-2 h-5 w-5" />
                     Scan My Ticket
@@ -70,9 +70,9 @@ export default function DashboardPage() {
                   <Button 
                     variant="outline"
                     onClick={handleOpenLive}
-                    className="h-14 px-10 rounded-2xl border-white/30 bg-white/10 backdrop-blur-md text-white hover:bg-white/20 font-black text-xs uppercase tracking-widest"
+                    className="h-14 px-10 rounded-lg border-white/30 bg-white/10  text-white hover:bg-white/20 font-bold text-xs uppercase tracking-widest"
                   >
-                    <Radio className="mr-2 h-5 w-5 animate-pulse" />
+                    <Radio className="mr-2 h-5 w-5 " />
                     Watch Studio Live
                   </Button>
                 </div>
@@ -89,9 +89,9 @@ export default function DashboardPage() {
             { game: "6/49", time: "Tomorrow", label: "Super Lotto" },
             { game: "6/45", time: "In 2 Days", label: "Mega Lotto" },
           ].map((item, i) => (
-            <div key={i} className="p-4 glass-morphism rounded-3xl space-y-1 text-center border-primary/5">
-              <p className="text-[10px] font-black uppercase tracking-widest text-primary/60">{item.label}</p>
-              <p className="text-lg font-black text-primary">{item.game}</p>
+            <div key={i} className="p-4 bg-background border border-border rounded-xl space-y-1 text-center border-border">
+              <p className="text-[10px] font-bold uppercase tracking-widest text-primary/60">{item.label}</p>
+              <p className="text-lg font-bold text-primary">{item.game}</p>
               <div className="flex items-center justify-center gap-1.5 text-[10px] font-bold text-muted-foreground">
                 <Clock className="w-3 h-3" /> {item.time}
               </div>
@@ -108,7 +108,7 @@ export default function DashboardPage() {
         <section className="space-y-6 pt-8">
           <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-2">
             <div>
-              <h2 className="text-2xl font-black flex items-center gap-3 text-foreground tracking-tight">
+              <h2 className="text-2xl font-bold flex items-center gap-3 text-foreground tracking-tight">
                 <Trophy className="w-6 h-6 text-secondary fill-secondary/20" />
                 Latest Draw Results
               </h2>
@@ -119,15 +119,15 @@ export default function DashboardPage() {
         </section>
 
         {/* Premium Upgrade (Repositioned & Redesigned) */}
-        <section className="rounded-[3rem] bg-gradient-to-br from-primary via-indigo-900 to-black p-10 md:p-16 text-white shadow-2xl relative overflow-hidden group">
+        <section className="rounded-xl bg-muted border border-border p-10 md:p-16 text-white shadow-sm relative overflow-hidden group">
           <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12 text-center lg:text-left">
             <div className="max-w-lg space-y-6">
-              <Badge className="bg-secondary text-white border-none px-4 py-1.5 font-black text-[10px] tracking-[0.2em] uppercase">Premium Studio</Badge>
-              <h3 className="text-3xl md:text-5xl font-black tracking-tighter leading-none">Maximize Your Winning Odds</h3>
+              <Badge className="bg-secondary text-white border-none px-4 py-1.5 font-bold text-[10px] tracking-[0.2em] uppercase">Premium Studio</Badge>
+              <h3 className="text-3xl md:text-5xl font-bold tracking-tighter leading-none">Maximize Your Winning Odds</h3>
               <p className="text-sm md:text-lg text-white/70 leading-relaxed font-medium">
                 Unlock AI-driven historical trend analysis and real-time frequency heatmaps for your next draw.
               </p>
-              <Button className="w-full sm:w-auto bg-white text-primary hover:bg-white/90 font-black text-xs uppercase tracking-[0.2em] shadow-2xl px-12 h-16 rounded-[2rem]">
+              <Button className="w-full sm:w-auto bg-white text-primary hover:bg-white/90 font-bold text-xs uppercase tracking-[0.2em] shadow-sm px-12 h-16 rounded-lg">
                 Start Free Trial <Sparkles className="ml-2 w-5 h-5 text-secondary" />
               </Button>
             </div>
@@ -138,12 +138,12 @@ export default function DashboardPage() {
                 { label: "Data Depth", icon: TrendingUp },
                 { label: "Cloud Backup", icon: ShieldCheck },
               ].map((stat, i) => (stat.value ? (
-                <div key={i} className="bg-white/10 backdrop-blur-xl p-8 rounded-[2.5rem] border border-white/20 text-center">
-                  <p className="text-3xl font-black mb-1">{stat.value}</p>
-                  <p className="text-[9px] uppercase font-black tracking-widest text-white/50">{stat.label}</p>
+                <div key={i} className="bg-white/10  p-8 rounded-xl border border-white/20 text-center">
+                  <p className="text-3xl font-bold mb-1">{stat.value}</p>
+                  <p className="text-[9px] uppercase font-bold tracking-widest text-white/50">{stat.label}</p>
                 </div>
               ) : (
-                <div key={i} className="bg-white/5 p-8 rounded-[2.5rem] flex items-center justify-center">
+                <div key={i} className="bg-white/5 p-8 rounded-xl flex items-center justify-center">
                   <stat.icon className="w-10 h-10 text-white/20" />
                 </div>
               )))}
@@ -155,18 +155,18 @@ export default function DashboardPage() {
         {/* Improved Analytics Overview */}
         <section className="grid gap-6 grid-cols-1 lg:grid-cols-2">
           <TrendsChart />
-          <div className="flex flex-col justify-center p-8 glass-morphism rounded-[2.5rem] border-primary/10 space-y-6">
-            <div className="p-4 bg-primary/10 rounded-3xl w-fit">
-              <Zap className="w-8 h-8 text-primary animate-pulse" />
+          <div className="flex flex-col justify-center p-8 bg-background border border-border rounded-xl border-border space-y-6">
+            <div className="p-4 bg-muted/50 rounded-xl w-fit">
+              <Zap className="w-8 h-8 text-primary " />
             </div>
             <div className="space-y-2">
-              <h3 className="text-2xl font-black text-primary tracking-tight uppercase">Frequency Intelligence</h3>
+              <h3 className="text-2xl font-bold text-primary tracking-tight uppercase">Frequency Intelligence</h3>
               <p className="text-sm text-muted-foreground leading-relaxed">
                 Discover which numbers are overdue for a draw using our professional Pattern Heatmap Studio. Analyzed over 365 days of draw data.
               </p>
             </div>
             <Button 
-              className="rounded-2xl bg-primary text-white font-black text-xs tracking-widest uppercase hover:bg-primary/90 shadow-xl shadow-primary/20 h-14 w-full"
+              className="rounded-lg bg-primary text-white font-bold text-xs tracking-widest uppercase hover:bg-primary/90 shadow-sm  h-14 w-full"
               onClick={() => window.dispatchEvent(new CustomEvent('open-analytics'))}
             >
               Open Pattern Studio <ArrowRight className="ml-2 w-4 h-4" />
@@ -176,12 +176,12 @@ export default function DashboardPage() {
 
         {/* Homepage Contact Form with FAQ (New Layout) */}
         <section className="pt-10">
-          <div className="max-w-5xl mx-auto p-8 md:p-16 rounded-[3.5rem] glass-morphism border-primary/5">
+          <div className="max-w-5xl mx-auto p-8 md:p-16 rounded-xl bg-background border border-border border-border">
             <div className="flex flex-col md:flex-row gap-16">
               <div className="md:w-1/2 space-y-10">
                 <div className="space-y-4">
                   <Badge variant="secondary" className="px-4 py-1">Help Center</Badge>
-                  <h2 className="text-4xl font-black text-primary tracking-tighter uppercase leading-tight">Professional Support</h2>
+                  <h2 className="text-4xl font-bold text-primary tracking-tighter uppercase leading-tight">Professional Support</h2>
                   <p className="text-muted-foreground text-sm font-medium">
                     Have a technical question or need help with a scan? Our team of analysts is ready to assist you.
                   </p>
@@ -194,7 +194,7 @@ export default function DashboardPage() {
                     "Can I track multiple lotto games?",
                     "Is my data stored securely?"
                   ].map((q, i) => (
-                    <div key={i} className="flex items-center justify-between p-4 bg-primary/5 rounded-2xl cursor-pointer hover:bg-primary/10 transition-all group">
+                    <div key={i} className="flex items-center justify-between p-4 bg-muted/50 rounded-lg cursor-pointer hover:bg-muted/50 transition-all group">
                       <span className="text-xs font-bold text-primary">{q}</span>
                       <ArrowRight className="w-3 h-3 text-primary opacity-0 group-hover:opacity-100 transition-all" />
                     </div>
@@ -202,15 +202,15 @@ export default function DashboardPage() {
                 </div>
 
                 <div className="flex items-center gap-4 pt-6 border-t border-dashed">
-                   <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-primary">
+                   <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-primary">
                     <ShieldCheck className="w-4 h-4" /> 256-bit AES
                   </div>
-                  <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-primary">
+                  <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-primary">
                     <MessageSquare className="w-4 h-4" /> Live Response
                   </div>
                 </div>
               </div>
-              <div className="md:w-1/2 bg-white dark:bg-white/5 p-8 rounded-[2.5rem] shadow-xl shadow-primary/5 border border-primary/5">
+              <div className="md:w-1/2 bg-white dark:bg-white/5 p-8 rounded-xl shadow-sm border border-border">
                 <ContactForm />
               </div>
             </div>
@@ -219,10 +219,10 @@ export default function DashboardPage() {
 
         {/* Security Info */}
         <div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-12 text-muted-foreground/60 py-8 opacity-50">
-          <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.3em]">
+          <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.3em]">
             <ShieldCheck className="w-4 h-4" /> Secure
           </div>
-          <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.3em]">
+          <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.3em]">
             <TrendingUp className="w-4 h-4" /> Verified
           </div>
         </div>
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
index c6a1b0f..385c522 100644
--- a/src/components/layout/app-shell.tsx
+++ b/src/components/layout/app-shell.tsx
@@ -105,8 +105,8 @@ export function AppShell({ children }: { children: React.ReactNode }) {
   const SidebarContent = () => (
     <div className="flex flex-col h-full bg-card border-r dark:border-white/5">
       <div className="p-6">
-        <div className="flex items-center gap-3 font-headline font-black text-2xl text-primary">
-          <div className="w-10 h-10 rounded-2xl bg-primary flex items-center justify-center text-white shadow-xl shadow-primary/30">L</div>
+        <div className="flex items-center gap-3 font-headline font-bold text-2xl text-primary">
+          <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white shadow-sm ">L</div>
           <span>Lottoping</span>
         </div>
       </div>
@@ -135,16 +135,16 @@ export function AppShell({ children }: { children: React.ReactNode }) {
                 key={item.name} 
                 onClick={item.href.startsWith('/') ? undefined : handleClick}
                 className={cn(
-                  "w-full flex items-center gap-3 px-4 py-3.5 rounded-2xl text-sm font-bold transition-all text-left group relative",
+                  "w-full flex items-center gap-3 px-4 py-3.5 rounded-lg text-sm font-bold transition-all text-left group relative",
                   isActive 
-                    ? "bg-primary text-primary-foreground shadow-xl shadow-primary/20 scale-[1.02]" 
-                    : "text-muted-foreground hover:bg-primary/5 hover:text-primary"
+                    ? "bg-primary text-primary-foreground shadow-sm  scale-[1.02]"
+                    : "text-muted-foreground hover:bg-muted/50 hover:text-primary"
                 )}
               >
                 <item.icon className={cn("w-5 h-5", isActive ? "text-white" : "text-muted-foreground group-hover:text-primary")} />
                 {item.name}
                 {item.isLive && (
-                  <span className="absolute right-4 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-red-500 animate-pulse" />
+                  <span className="absolute right-4 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-red-500 " />
                 )}
               </button>
             )
@@ -153,7 +153,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
 
         <div className="mt-6 pt-6 border-t border-dashed border-muted dark:border-white/10">
           <div className="px-4 mb-4">
-            <h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground flex items-center gap-2">
+            <h3 className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground flex items-center gap-2">
               <Wrench className="w-3 h-3" />
               Professional Suite
             </h3>
@@ -163,16 +163,16 @@ export function AppShell({ children }: { children: React.ReactNode }) {
               <DialogTrigger asChild>
                 <Button 
                   variant="outline" 
-                  className="w-full flex flex-col items-start gap-1.5 p-5 h-auto bg-primary/5 border-primary/20 hover:bg-primary/10 hover:border-primary/40 group transition-all text-left rounded-[2rem] relative overflow-hidden"
+                  className="w-full flex flex-col items-start gap-1.5 p-5 h-auto bg-muted/50 border-border hover:bg-primary/10 hover:border-primary/40 group transition-all text-left rounded-lg relative overflow-hidden"
                 >
                   <div className="flex items-center justify-between w-full">
-                    <p className="text-[9px] font-black text-primary uppercase tracking-tight flex items-center gap-2">
-                      <span className="w-1.5 h-1.5 rounded-full bg-secondary animate-pulse" />
+                    <p className="text-[9px] font-bold text-primary uppercase tracking-tight flex items-center gap-2">
+                      <span className="w-1.5 h-1.5 rounded-full bg-secondary " />
                       Frequency Studio
                     </p>
                     <Maximize2 className="w-3.5 h-3.5 text-primary group-hover:scale-125 transition-transform" />
                   </div>
-                  <p className="text-base font-black text-foreground mt-1 tracking-tight">Pattern Heatmap</p>
+                  <p className="text-base font-bold text-foreground mt-1 tracking-tight">Pattern Heatmap</p>
                 </Button>
               </DialogTrigger>
               <DialogContent className="max-w-[95vw] w-[1400px] p-0 border-none bg-transparent shadow-none overflow-hidden h-[90vh]">
@@ -180,7 +180,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
                   <DialogTitle>Pattern Heatmap Studio</DialogTitle>
                   <DialogDescription>Advanced statistical number tracking.</DialogDescription>
                 </DialogHeader>
-                <div className="bg-background rounded-[3rem] overflow-hidden border-4 border-primary/10 shadow-2xl h-full">
+                <div className="bg-background rounded-xl overflow-hidden border-border shadow-sm h-full">
                   <LotteryHeatmap />
                 </div>
               </DialogContent>
@@ -199,7 +199,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
 
   return (
     <div className="flex min-h-screen bg-background text-foreground overflow-x-hidden">
-      <aside className="hidden md:flex w-64 flex-col fixed inset-y-0 z-50 shadow-2xl">
+      <aside className="hidden md:flex w-64 flex-col fixed inset-y-0 z-50 shadow-sm">
         <SidebarContent />
       </aside>
 
@@ -207,8 +207,8 @@ export function AppShell({ children }: { children: React.ReactNode }) {
         <AnimatedBanner />
 
         <header className="md:hidden flex items-center justify-between p-4 bg-card border-b dark:border-white/5 sticky top-0 z-40 shadow-sm backdrop-blur-md bg-white/90 dark:bg-black/90">
-          <div className="flex items-center gap-2.5 font-headline font-black text-xl text-primary">
-            <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm shadow-md shadow-primary/20">L</div>
+          <div className="flex items-center gap-2.5 font-headline font-bold text-xl text-primary">
+            <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm shadow-md ">L</div>
             <span>Lottoping</span>
           </div>
           <div className="flex items-center gap-1.5">
@@ -222,7 +222,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
                   <Menu className="w-6 h-6 text-primary" />
                 </Button>
               </SheetTrigger>
-              <SheetContent side="left" className="p-0 w-[280px] border-r-2 border-primary/10">
+              <SheetContent side="left" className="p-0 w-[280px] border-r-2 border-border">
                 <SheetHeader className="sr-only"><SheetTitle>Menu</SheetTitle></SheetHeader>
                 <SidebarContent />
               </SheetContent>
@@ -233,22 +233,22 @@ export function AppShell({ children }: { children: React.ReactNode }) {
         <div className="flex-1 p-3 md:p-8 max-w-7xl mx-auto w-full pb-32 md:pb-8">
           {children}
 
-          <footer className="mt-20 pt-12 pb-12 border-t border-primary/5">
+          <footer className="mt-20 pt-12 pb-12 border-t border-border">
             <div className="grid grid-cols-1 md:grid-cols-3 gap-12 text-center md:text-left">
               <div className="space-y-4">
-                <div className="flex items-center justify-center md:justify-start gap-3 font-headline font-black text-2xl text-primary">
+                <div className="flex items-center justify-center md:justify-start gap-3 font-headline font-bold text-2xl text-primary">
                   <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center text-white">L</div>
                   <span>Lottoping</span>
                 </div>
                 <p className="text-sm text-muted-foreground leading-relaxed max-w-xs mx-auto md:mx-0">
                   Professional lottery insights and real-time results studio.
                 </p>
-                <p className="text-[10px] font-black uppercase tracking-widest text-primary/40">
+                <p className="text-[10px] font-bold uppercase tracking-widest text-primary/40">
                   Last Updated: {lastUpdated}
                 </p>
               </div>
               <div className="space-y-4">
-                <h4 className="text-xs font-black uppercase tracking-[0.2em] text-primary">Legal & Source</h4>
+                <h4 className="text-xs font-bold uppercase tracking-[0.2em] text-primary">Legal & Source</h4>
                 <nav className="flex flex-col gap-2">
                   <button onClick={() => setIsTermsOpen(true)} className="text-sm text-muted-foreground hover:text-primary transition-colors">Terms of Use</button>
                   <button onClick={() => setIsPrivacyOpen(true)} className="text-sm text-muted-foreground hover:text-primary transition-colors">Privacy Policy</button>
@@ -256,20 +256,20 @@ export function AppShell({ children }: { children: React.ReactNode }) {
                 </nav>
               </div>
               <div className="space-y-4">
-                <h4 className="text-xs font-black uppercase tracking-[0.2em] text-primary">Notifications</h4>
+                <h4 className="text-xs font-bold uppercase tracking-[0.2em] text-primary">Notifications</h4>
                 <Button 
                   onClick={() => setIsAlertsOpen(true)}
-                  className="rounded-full h-12 px-8 bg-secondary text-white font-black text-[10px] uppercase tracking-widest"
+                  className="rounded-full h-12 px-8 bg-secondary text-white font-bold text-[10px] uppercase tracking-widest"
                 >
                   <Bell className="w-4 h-4 mr-2" /> Enable Alerts
                 </Button>
               </div>
             </div>
 
-            <div className="mt-16 p-8 rounded-[3rem] bg-muted/30 dark:bg-white/5 border border-primary/5 space-y-4">
+            <div className="mt-16 p-8 rounded-xl bg-muted/30 dark:bg-white/5 border border-border space-y-4">
               <div className="flex items-center gap-2 text-primary">
                 <ShieldAlert className="w-4 h-4" />
-                <h4 className="text-[10px] font-black uppercase tracking-[0.2em]">Official Legal Disclaimer</h4>
+                <h4 className="text-[10px] font-bold uppercase tracking-[0.2em]">Official Legal Disclaimer</h4>
               </div>
               <p className="text-[10px] md:text-[11px] text-muted-foreground/80 leading-relaxed italic text-center md:text-left">
                 LottoPing is an independent platform and is NOT affiliated with the Philippine Charity Sweepstakes Office (PCSO). All results provided are for informational purposes only. Users MUST verify tickets at official outlets before taking action. LottoPing is not liable for any financial losses. Play responsibly.
@@ -280,7 +280,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
       </main>
 
       {/* Mobile Bottom Navigation Bar */}
-      <nav className="md:hidden fixed bottom-0 left-0 right-0 h-24 glass-morphism z-50 px-6 flex items-center justify-between rounded-t-[2.5rem] border-t-2 border-primary/10 pb-4">
+      <nav className="md:hidden fixed bottom-0 left-0 right-0 h-24 bg-background border border-border z-50 px-6 flex items-center justify-between rounded-t-xl border-t-2 border-border pb-4">
         {[
           { icon: LayoutDashboard, href: "/", label: "Home", action: () => window.location.href = "/" },
           { icon: Tv, action: () => setIsLiveOpen(true), label: "Live" },
@@ -297,7 +297,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
             <button 
               key={i} 
               onClick={item.action}
-              className="flex flex-col items-center justify-center -mt-12 bg-primary w-16 h-16 rounded-full border-4 border-white dark:border-black shadow-2xl transition-transform active:scale-90"
+              className="flex flex-col items-center justify-center -mt-12 bg-primary w-16 h-16 rounded-full border-white dark:border-black shadow-sm transition-transform active:scale-90"
             >
               <item.icon className="w-8 h-8 text-white" />
             </button>
@@ -308,7 +308,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
               className="flex flex-col items-center gap-1 group"
             >
               <item.icon className="w-6 h-6 text-muted-foreground group-hover:text-primary transition-colors" />
-              <span className="text-[9px] font-black uppercase tracking-tighter text-muted-foreground group-hover:text-primary">{item.label}</span>
+              <span className="text-[9px] font-bold uppercase tracking-tighter text-muted-foreground group-hover:text-primary">{item.label}</span>
             </button>
           )
         ))}
@@ -316,31 +316,31 @@ export function AppShell({ children }: { children: React.ReactNode }) {
 
       {/* Slide-up Sheets (Consistent experience) */}
       <Sheet open={isLiveOpen} onOpenChange={setIsLiveOpen}>
-        <SheetContent side="bottom" className="h-[92vh] p-0 border-t-2 border-primary/20 rounded-t-[4rem] overflow-hidden focus:outline-none">
+        <SheetContent side="bottom" className="h-[92vh] p-0 border-t-2 border-border rounded-t-xl overflow-hidden focus:outline-none">
           <SheetHeader className="sr-only"><SheetTitle>Live Broadcast</SheetTitle></SheetHeader>
           <ScrollArea className="h-full"><div className="p-4 md:p-10 max-w-5xl mx-auto"><LiveBroadcast /></div></ScrollArea>
         </SheetContent>
       </Sheet>
 
       <Sheet open={isScannerOpen} onOpenChange={setIsScannerOpen}>
-        <SheetContent side="bottom" className="h-[92vh] p-0 border-t-2 border-primary/20 rounded-t-[4rem] overflow-hidden focus:outline-none">
+        <SheetContent side="bottom" className="h-[92vh] p-0 border-t-2 border-border rounded-t-xl overflow-hidden focus:outline-none">
           <SheetHeader className="sr-only"><SheetTitle>Scanner</SheetTitle></SheetHeader>
           <ScrollArea className="h-full"><div className="p-4 md:p-10"><TicketScanner onClose={() => setIsScannerOpen(false)} /></div></ScrollArea>
         </SheetContent>
       </Sheet>
 
       <Sheet open={isAlertsOpen} onOpenChange={setIsAlertsOpen}>
-        <SheetContent side="bottom" className="h-[80vh] p-0 border-t-2 border-primary/20 rounded-t-[3.5rem] overflow-hidden focus:outline-none">
+        <SheetContent side="bottom" className="h-[80vh] p-0 border-t-2 border-border rounded-t-xl overflow-hidden focus:outline-none">
           <SheetHeader className="sr-only"><SheetTitle>Alerts</SheetTitle></SheetHeader>
           <ScrollArea className="h-full"><div className="p-6 md:p-12 max-w-3xl mx-auto"><DrawAlerts /></div></ScrollArea>
         </SheetContent>
       </Sheet>
 
       <Sheet open={isTicketsOpen} onOpenChange={setIsTicketsOpen}>
-        <SheetContent side="right" className="w-full sm:max-w-xl p-0 border-l-2 border-primary/10 shadow-2xl overflow-hidden focus:outline-none">
+        <SheetContent side="right" className="w-full sm:max-w-xl p-0 border-l-2 border-border shadow-sm overflow-hidden focus:outline-none">
           <div className="h-full flex flex-col bg-card">
-            <div className="p-6 border-b flex items-center justify-between bg-primary/5">
-              <SheetTitle className="text-xl font-black text-primary">Entry Wallet</SheetTitle>
+            <div className="p-6 border-b flex items-center justify-between bg-muted/50">
+              <SheetTitle className="text-xl font-bold text-primary">Entry Wallet</SheetTitle>
               <Button variant="ghost" size="icon" onClick={() => setIsTicketsOpen(false)}><X className="w-5 h-5" /></Button>
             </div>
             <ScrollArea className="flex-1 p-6"><TicketList /></ScrollArea>
@@ -349,14 +349,14 @@ export function AppShell({ children }: { children: React.ReactNode }) {
       </Sheet>
 
       <Sheet open={isPrivacyOpen} onOpenChange={setIsPrivacyOpen}>
-        <SheetContent side="bottom" className="h-[92vh] p-0 border-t-2 border-primary/20 rounded-t-[4rem] focus:outline-none">
+        <SheetContent side="bottom" className="h-[92vh] p-0 border-t-2 border-border rounded-t-xl focus:outline-none">
           <SheetHeader className="sr-only"><SheetTitle>Privacy Policy</SheetTitle></SheetHeader>
           <ScrollArea className="h-full p-8"><PrivacyContent /></ScrollArea>
         </SheetContent>
       </Sheet>
 
       <Sheet open={isTermsOpen} onOpenChange={setIsTermsOpen}>
-        <SheetContent side="bottom" className="h-[92vh] p-0 border-t-2 border-primary/20 rounded-t-[4rem] focus:outline-none">
+        <SheetContent side="bottom" className="h-[92vh] p-0 border-t-2 border-border rounded-t-xl focus:outline-none">
           <SheetHeader className="sr-only"><SheetTitle>Terms of Use</SheetTitle></SheetHeader>
           <ScrollArea className="h-full p-8"><TermsContent /></ScrollArea>
         </SheetContent>