From 25325527059d95ef9f101edb83ed02fec5bdd969 Mon Sep 17 00:00:00 2001
From: Ade Adedo <ade.adedo@gmail.com>
Date: Wed, 29 Jul 2026 00:06:53 +0100
Subject: [PATCH] Redesign main app interface

---
 src/components/Header.jsx    |  25 +-
 src/components/ui/button.jsx |  19 +-
 src/components/ui/card.jsx   |   2 +-
 src/components/ui/input.jsx  |   2 +-
 src/components/ui/modal.jsx  |  12 +-
 src/index.css                |  40 +-
 src/phase2.css               | 682 +++++++++++++++++++++++++++++++++++
 7 files changed, 734 insertions(+), 48 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index f6de03a..7b2e66b 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -24,6 +24,7 @@ import { useAuth } from '@/contexts/AuthContext'
 import { usePoints } from '@/contexts/PointsContext'
 import NotificationDropdown from '@/components/NotificationDropdown'
 import { cn, getInitials, formatNumber } from '@/lib/utils'
+import { isSupabaseConfigured } from '@/lib/supabase'
 import fixarsMark from '@/assets/fixars-mark.png'
 
 export default function Header() {
@@ -60,19 +61,19 @@ export default function Header() {
 
                     {/* Desktop Navigation */}
                     <nav className="hidden md:flex items-center gap-1">
-                        {navLinks.map(({ path, label, icon: Icon }) => (
+                        {navLinks.map((item) => (
                             <Link
-                                key={path}
-                                to={path}
+                                key={item.path}
+                                to={item.path}
                                 className={cn(
                                     "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200",
-                                    location.pathname === path
+                                    location.pathname === item.path
                                         ? "bg-primary/10 text-primary"
                                         : "text-muted hover:text-foreground hover:bg-muted/10"
                                 )}
                             >
-                                <Icon className="w-4 h-4" />
-                                {label}
+                                <item.icon className="w-4 h-4" />
+                                {item.label}
                             </Link>
                         ))}
                     </nav>
@@ -218,20 +219,20 @@ export default function Header() {
                 {/* Mobile Navigation */}
                 {mobileMenuOpen && (
                     <nav className="md:hidden py-4 border-t animate-fade-in">
-                        {navLinks.map(({ path, label, icon: Icon }) => (
+                        {navLinks.map((item) => (
                             <Link
-                                key={path}
-                                to={path}
+                                key={item.path}
+                                to={item.path}
                                 onClick={() => setMobileMenuOpen(false)}
                                 className={cn(
                                     "flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors",
-                                    location.pathname === path
+                                    location.pathname === item.path
                                         ? "bg-primary/10 text-primary"
                                         : "text-muted hover:text-foreground hover:bg-muted/10"
                                 )}
                             >
-                                <Icon className="w-5 h-5" />
-                                {label}
+                                <item.icon className="w-5 h-5" />
+                                {item.label}
                             </Link>
                         ))}
                     </nav>
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx
index 79de4f9..7014ea4 100644
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@@ -4,15 +4,15 @@ import { cva } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+    "inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-bold transition-all duration-200 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
     {
         variants: {
             variant: {
-                default: "bg-primary text-primary-foreground shadow-md hover:bg-primary/90 hover:shadow-lg hover:-translate-y-0.5",
+                default: "bg-primary text-primary-foreground shadow-[0_18px_42px_rgba(36,87,230,.18)] hover:bg-primary/95 hover:shadow-[0_24px_58px_rgba(36,87,230,.24)] hover:-translate-y-0.5",
                 destructive: "bg-destructive text-white shadow-md hover:bg-destructive/90",
-                outline: "border-2 border-primary bg-transparent text-primary hover:bg-primary/10",
-                secondary: "bg-muted/20 text-foreground hover:bg-muted/40",
-                ghost: "hover:bg-muted/20 hover:text-foreground",
+                outline: "border border-border bg-white/80 text-primary hover:bg-blue-50",
+                secondary: "bg-blue-50 text-foreground hover:bg-blue-100",
+                ghost: "hover:bg-blue-50 hover:text-primary",
                 link: "text-primary underline-offset-4 hover:underline",
                 vestden: "bg-vestden text-white shadow-md hover:bg-vestden/90",
                 conceptnexus: "bg-conceptnexus text-white shadow-md hover:bg-conceptnexus/90",
@@ -20,10 +20,10 @@ const buttonVariants = cva(
                 skillscanvas: "bg-skillscanvas text-white shadow-md hover:bg-skillscanvas/90",
             },
             size: {
-                default: "h-10 px-5 py-2",
-                sm: "h-8 rounded-md px-3 text-xs",
-                lg: "h-12 rounded-xl px-8 text-base",
-                icon: "h-10 w-10 rounded-full",
+                default: "h-11 px-5 py-2",
+                sm: "h-9 rounded-lg px-3 text-xs",
+                lg: "h-12 rounded-2xl px-8 text-base",
+                icon: "h-10 w-10 rounded-xl",
             },
         },
         defaultVariants: {
@@ -47,4 +47,5 @@ const Button = React.forwardRef(
 )
 Button.displayName = "Button"
 
+// eslint-disable-next-line react-refresh/only-export-components
 export { Button, buttonVariants }
diff --git a/src/components/ui/card.jsx b/src/components/ui/card.jsx
index bfd2cb7..970a2ac 100644
--- a/src/components/ui/card.jsx
+++ b/src/components/ui/card.jsx
@@ -5,7 +5,7 @@ const Card = React.forwardRef(({ className, ...props }, ref) => (
     <div
         ref={ref}
         className={cn(
-            "rounded-xl border bg-card text-card-foreground shadow-sm transition-all duration-300 hover:shadow-md",
+            "rounded-2xl border border-border/90 bg-white/90 text-card-foreground shadow-[0_10px_28px_rgba(21,50,120,.05)] transition-all duration-300 hover:shadow-[0_18px_46px_rgba(21,50,120,.08)]",
             className
         )}
         {...props}
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
index 6022f76..3cba07e 100644
--- a/src/components/ui/input.jsx
+++ b/src/components/ui/input.jsx
@@ -6,7 +6,7 @@ const Input = React.forwardRef(({ className, type, ...props }, ref) => {
         <input
             type={type}
             className={cn(
-                "flex h-11 w-full rounded-lg border border-input bg-card px-4 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200",
+                "flex h-12 w-full rounded-xl border border-input bg-white/90 px-4 py-2 text-sm font-medium ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted focus-visible:outline-none focus-visible:border-primary focus-visible:ring-4 focus-visible:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200",
                 className
             )}
             ref={ref}
diff --git a/src/components/ui/modal.jsx b/src/components/ui/modal.jsx
index 23b1644..02fc2d4 100644
--- a/src/components/ui/modal.jsx
+++ b/src/components/ui/modal.jsx
@@ -29,27 +29,27 @@ export default function Modal({ open, onClose, title, subtitle, gradient = 'grad
             role="dialog" aria-modal="true" aria-label={title}
         >
             <div
-                className="absolute inset-0 bg-black/50 backdrop-blur-sm animate-fade-in"
+                className="absolute inset-0 bg-[#0c1938]/60 backdrop-blur-sm animate-fade-in"
                 onClick={onClose}
             />
             {/* Bottom-sheet on mobile, centered card on sm+ (v2 modal chrome) */}
             <div className={`relative w-full ${maxWidth} sm:mx-4 animate-slide-in-up`}>
-                <Card className="shadow-2xl overflow-hidden rounded-b-none rounded-t-2xl sm:rounded-xl max-h-[90vh] sm:max-h-[85vh] flex flex-col">
+                <Card className="shadow-[0_38px_90px_rgba(10,22,40,.24)] overflow-hidden rounded-b-none rounded-t-3xl sm:rounded-3xl max-h-[90vh] sm:max-h-[85vh] flex flex-col">
                     <div className={`h-[3px] flex-shrink-0 ${gradient}`} />
-                    <div className="flex items-start justify-between gap-4 px-6 pt-5 pb-2 flex-shrink-0">
+                    <div className="flex items-start justify-between gap-4 px-6 pt-6 pb-3 flex-shrink-0 bg-white">
                         <div>
-                            <h2 className="text-lg font-bold text-foreground">{title}</h2>
+                            <h2 className="text-xl font-extrabold text-foreground tracking-[-0.02em]">{title}</h2>
                             {subtitle && <p className="text-sm text-muted mt-1">{subtitle}</p>}
                         </div>
                         <button
                             onClick={onClose}
                             aria-label="Close"
-                            className="p-1 hover:bg-muted/10 rounded-md"
+                            className="p-2 bg-blue-50 hover:bg-blue-100 rounded-full transition-colors"
                         >
                             <X className="w-5 h-5 text-muted" />
                         </button>
                     </div>
-                    <CardContent className="pt-2 pb-6 overflow-y-auto">
+                    <CardContent className="pt-2 pb-6 overflow-y-auto bg-[#f8faff]">
                         {children}
                     </CardContent>
                 </Card>
diff --git a/src/index.css b/src/index.css
index 6119e6b..3ccfb83 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap");
 @import "tailwindcss";
 
 @theme {
-  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-display: 'Space Grotesk', var(--font-sans);
+  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-display: 'Manrope', var(--font-sans);
   --font-mono: 'JetBrains Mono', ui-monospace, monospace;
 
   /* ===== Fixars Design System — Brand Core ===== */
@@ -12,13 +13,13 @@
   --color-navy-600: #2A3C56;
   --color-navy-500: #3E5271;
 
-  --color-primary: #2F45E0;
+  --color-primary: #2457E6;
   --color-primary-foreground: #ffffff;
-  --color-blue-600: #2F45E0;
-  --color-blue-500: #4C63E6;
-  --color-blue-400: #7C8FF2;
-  --color-blue-100: #DCE1FA;
-  --color-blue-50: #EEF1FD;
+  --color-blue-600: #2457E6;
+  --color-blue-500: #376BF1;
+  --color-blue-400: #7EA0FF;
+  --color-blue-100: #DCE6FF;
+  --color-blue-50: #EEF4FF;
 
   /* ===== Neutrals (ink) ===== */
   --color-ink-900: #0A1628;
@@ -30,13 +31,13 @@
   --color-ink-100: #EBEFF5;
   --color-ink-50: #F5F7FB;
 
-  --color-background: #F9FAFC;
+  --color-background: #F7F9FF;
   --color-foreground: #0A1628;
   --color-paper: #FFFFFF;
-  --color-canvas: #F9FAFC;
+  --color-canvas: #F7F9FF;
   --color-muted: #5A6B85;
   --color-muted-foreground: #8695AE;
-  --color-border: #EBEFF5;
+  --color-border: #DDE6F7;
   --color-input: #D7DDE8;
   --color-ring: #2F45E0;
 
@@ -92,16 +93,17 @@
   /* ===== Radius ===== */
   --radius-xs: 4px;
   --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --radius-xl: 20px;
-  --radius-2xl: 28px;
+  --radius-md: 12px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-2xl: 32px;
   --radius-full: 999px;
 
   /* ===== Shadows & Elevation ===== */
-  --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.04), 0 1px 2px rgba(10, 22, 40, 0.02);
-  --shadow-md: 0 4px 14px rgba(10, 22, 40, 0.07), 0 1px 3px rgba(10, 22, 40, 0.04);
-  --shadow-lg: 0 14px 36px rgba(10, 22, 40, 0.12), 0 2px 8px rgba(10, 22, 40, 0.04);
+  --shadow-sm: 0 10px 28px rgba(21, 50, 120, 0.05), 0 1px 3px rgba(10, 22, 40, 0.03);
+  --shadow-md: 0 18px 46px rgba(21, 50, 120, 0.08), 0 3px 10px rgba(10, 22, 40, 0.04);
+  --shadow-lg: 0 28px 70px rgba(21, 50, 120, 0.14), 0 8px 24px rgba(10, 22, 40, 0.05);
+  --shadow-blue: 0 22px 55px rgba(36, 87, 230, 0.16);
 }
 
 /* Dark mode */
@@ -925,4 +927,4 @@ body {
   .splash-stats .v{font-size:26px}
   .float-card.fc1,.float-card.fc3{right:-12px}
   .float-card.fc2{left:-12px}
-}
\ No newline at end of file
+}
diff --git a/src/phase2.css b/src/phase2.css
index f73e754..65d7586 100644
--- a/src/phase2.css
+++ b/src/phase2.css
@@ -2,6 +2,688 @@
    Phase 2 & 3 CSS Additions (Dashboard, Apps, Wallet, Profile, Settings)
    ==================================================================== */
 
+/* ====================================================================
+   Fixars calm cockpit refresh
+   - Light-first, waitlist-aligned surfaces
+   - Applied as a high-level layer to keep existing behavior intact
+   ==================================================================== */
+
+body {
+  background:
+    radial-gradient(circle at 10% 0%, rgba(36, 87, 230, 0.10), transparent 25rem),
+    radial-gradient(circle at 86% 14%, rgba(124, 58, 237, 0.07), transparent 28rem),
+    linear-gradient(180deg, #fbfcff 0%, var(--color-canvas) 42%, #f4f7ff 100%);
+}
+
+.app-shell {
+  grid-template-columns: 256px minmax(0, 1fr);
+  background: transparent;
+}
+
+.fx-main {
+  min-height: 100vh;
+  background: transparent;
+}
+
+.fx-content {
+  max-width: 1460px;
+  padding: 34px clamp(22px, 3vw, 44px) 56px;
+}
+
+.fx-sidebar {
+  width: 256px !important;
+  padding: 22px 16px;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,248,255,.92)),
+    radial-gradient(circle at 0% 0%, rgba(36, 87, 230, .14), transparent 18rem);
+  color: var(--color-navy-900);
+  border-right: 1px solid rgba(206, 218, 244, .85);
+  box-shadow: 10px 0 34px rgba(21, 50, 120, .06);
+}
+
+.fx-sidebar:hover {
+  box-shadow: 14px 0 44px rgba(21, 50, 120, .08);
+}
+
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .sidebar-brand-name,
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .nav-section,
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .nav-item .nav-label,
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .nav-item .nav-badge,
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .sidebar-footer .sidebar-user-name,
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .sidebar-footer .sidebar-user-sub {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .nav-item,
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .sidebar-brand,
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .sidebar-footer {
+  justify-content: flex-start;
+}
+
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .nav-section {
+  height: auto;
+  padding: 18px 12px 7px;
+}
+
+.app-shell:not(:has(.fx-sidebar:hover)) .fx-sidebar .nav-item.active::before {
+  display: none;
+}
+
+.fx-sidebar .sidebar-brand {
+  padding: 0 8px 22px;
+  border-bottom-color: rgba(206, 218, 244, .9);
+}
+
+.fx-sidebar .sidebar-brand-name,
+.fx-mobile-header .mobile-brand-name,
+.display,
+.page-title,
+.dash-card-title,
+.wallet-balance,
+.wallet-balance-amount,
+.profile-name,
+.app-card-name {
+  font-family: var(--font-display);
+}
+
+.fx-sidebar .nav-section {
+  color: #7b8aa8;
+  font-size: 11px;
+  letter-spacing: .13em;
+}
+
+.fx-sidebar .nav-item {
+  color: #273754;
+  min-height: 44px;
+  padding: 11px 12px;
+  border-radius: 14px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.fx-sidebar .nav-item:hover {
+  background: rgba(36, 87, 230, .07);
+  color: var(--color-blue-600);
+}
+
+.fx-sidebar .nav-item.active {
+  background: linear-gradient(180deg, #edf4ff, #e6efff);
+  color: var(--color-blue-600);
+  border-color: #cfe0ff;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 10px 26px rgba(36, 87, 230, .10);
+}
+
+.fx-sidebar .nav-item.app-concept,
+.fx-sidebar .nav-item.app-invest,
+.fx-sidebar .nav-item.app-collab,
+.fx-sidebar .nav-item.app-skills {
+  color: #32415f;
+}
+
+.fx-sidebar .nav-item.app-concept:hover,
+.fx-sidebar .nav-item.app-concept.active { color: var(--color-concept); }
+.fx-sidebar .nav-item.app-invest:hover,
+.fx-sidebar .nav-item.app-invest.active { color: var(--color-invest); }
+.fx-sidebar .nav-item.app-collab:hover,
+.fx-sidebar .nav-item.app-collab.active { color: var(--color-collab); }
+.fx-sidebar .nav-item.app-skills:hover,
+.fx-sidebar .nav-item.app-skills.active { color: var(--color-skills); }
+
+.fx-sidebar .sidebar-footer {
+  padding: 14px;
+  border: 1px solid #dce6f7;
+  border-radius: 18px;
+  background: rgba(255,255,255,.72);
+  box-shadow: var(--shadow-sm);
+}
+
+.fx-sidebar .sidebar-user-name { color: var(--color-navy-900); font-weight: 800; }
+.fx-sidebar .sidebar-user-sub { color: var(--color-muted); }
+
+.fx-topbar {
+  margin: 18px clamp(22px, 3vw, 44px) 0;
+  padding: 12px;
+  border: 1px solid rgba(206, 218, 244, .9);
+  border-radius: 22px;
+  background: rgba(255,255,255,.82);
+  box-shadow: var(--shadow-sm);
+}
+
+.fx-topbar .topbar-search {
+  max-width: 560px;
+  min-height: 46px;
+  background: #f8faff;
+  border-color: #dce6f7;
+  border-radius: 16px;
+  padding-inline: 16px;
+  font-weight: 700;
+}
+
+.fx-topbar .points-pill {
+  min-height: 36px;
+  background: #eef4ff;
+  color: var(--color-blue-600);
+  border: 1px solid #dce6ff;
+}
+
+.icon-btn,
+.topbar-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 14px;
+}
+
+.icon-btn {
+  background: #f8faff;
+  border: 1px solid #dce6f7;
+}
+
+.icon-btn:hover {
+  background: #eef4ff;
+  color: var(--color-blue-600);
+  transform: translateY(-1px);
+}
+
+.topbar-avatar,
+.fx-sidebar .sidebar-avatar,
+.dash-welcome-avatar {
+  background: radial-gradient(circle at 30% 25%, #8fb0ff, var(--color-blue-600) 52%, #123fbf);
+  box-shadow: 0 12px 28px rgba(36, 87, 230, .20);
+  color: white;
+}
+
+.fx-dashboard {
+  gap: 24px;
+}
+
+.dash-welcome,
+.fx-wallet-hero,
+.fx-dash-card,
+.stat-card,
+.fx-subapp-tile,
+.wallet-stat,
+.wallet-txn-section,
+.app-full-card,
+.flow-step-card,
+.profile-hero,
+.profile-fcs-card,
+.profile-stat-card,
+.profile-skills-card,
+.profile-activity-card,
+.list-card,
+.sov-card,
+.howit-step {
+  border: 1px solid rgba(206, 218, 244, .9);
+  border-radius: var(--radius-xl);
+  background: rgba(255,255,255,.88);
+  box-shadow: var(--shadow-sm);
+}
+
+.dash-welcome {
+  position: relative;
+  overflow: hidden;
+  padding: clamp(22px, 3vw, 36px);
+  min-height: 190px;
+  margin-bottom: 0;
+}
+
+.dash-welcome::after {
+  content: "";
+  position: absolute;
+  right: -76px;
+  top: -130px;
+  width: 420px;
+  height: 420px;
+  border-radius: 999px;
+  background:
+    repeating-radial-gradient(circle, rgba(36,87,230,.10) 0 1px, transparent 1px 58px);
+  pointer-events: none;
+}
+
+.dash-welcome-avatar {
+  width: 74px;
+  height: 74px;
+  border-radius: 22px;
+  font-size: 22px;
+  z-index: 1;
+}
+
+.dash-welcome-text {
+  z-index: 1;
+}
+
+.dash-welcome-text h1 {
+  font-size: clamp(30px, 3vw, 44px);
+  line-height: 1.05;
+  letter-spacing: -.04em;
+  color: var(--color-navy-900);
+}
+
+.dash-welcome-text p {
+  max-width: 540px;
+  color: #53627e;
+  font-size: 16px;
+  line-height: 1.55;
+}
+
+.dash-welcome-actions {
+  position: relative;
+  z-index: 1;
+}
+
+.stats-strip {
+  gap: 16px;
+}
+
+.stat-card {
+  padding: 20px;
+  min-height: 138px;
+  overflow: hidden;
+}
+
+.stat-card .stat-k {
+  color: #70809d;
+}
+
+.stat-card .stat-v {
+  color: var(--color-navy-900);
+  font-size: 30px;
+  font-weight: 800;
+}
+
+.dash-top-row,
+.dash-mid-row,
+.dash-bottom-row {
+  gap: 24px;
+}
+
+.fx-wallet-hero,
+.wallet-balance-hero {
+  background:
+    radial-gradient(circle at 88% 8%, rgba(255,255,255,.18), transparent 13rem),
+    linear-gradient(145deg, #2457e6 0%, #1e49cf 55%, #123fbf 100%);
+  box-shadow: var(--shadow-blue);
+}
+
+.fx-wallet-hero {
+  min-height: 252px;
+  padding: 28px;
+}
+
+.fx-wallet-hero::before,
+.wallet-balance-hero::before {
+  content: "";
+  position: absolute;
+  inset: auto -70px -120px auto;
+  width: 280px;
+  height: 280px;
+  border: 1px solid rgba(255,255,255,.18);
+  border-radius: 999px;
+}
+
+.wallet-balance {
+  font-size: clamp(44px, 5vw, 58px);
+  font-weight: 800;
+}
+
+.wallet-progress-track {
+  height: 9px;
+  background: rgba(255,255,255,.18);
+  border-radius: 999px;
+}
+
+.wallet-progress-fill {
+  background: white;
+  border-radius: 999px;
+}
+
+.dash-subapp-grid {
+  gap: 18px;
+}
+
+.fx-subapp-tile {
+  min-height: 154px;
+  padding: 20px;
+  border-radius: var(--radius-xl);
+}
+
+.fx-subapp-tile::before {
+  height: 0;
+}
+
+.fx-subapp-tile::after {
+  content: "";
+  position: absolute;
+  right: -36px;
+  top: -42px;
+  width: 132px;
+  height: 132px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--tile-color) 12%, transparent);
+}
+
+.fx-subapp-tile:hover,
+.list-card:hover,
+.app-full-card:hover,
+.flow-step-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-md);
+}
+
+.tile-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  box-shadow: 0 12px 26px rgba(21, 50, 120, .12);
+}
+
+.tile-name {
+  color: var(--color-navy-900);
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.tile-label,
+.dash-card-link,
+.feed-item-time,
+.idea-row-creator,
+.talent-skill,
+.stake-card-amount,
+.page-sub {
+  color: #62708b;
+}
+
+.tile-value {
+  color: var(--color-navy-900);
+  font-size: 30px;
+  font-weight: 800;
+}
+
+.fx-dash-card {
+  padding: 24px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.dash-card-title {
+  color: var(--color-navy-900);
+  font-weight: 800;
+}
+
+.dash-feed-item,
+.dash-talent-row {
+  padding: 12px;
+  border-radius: 16px;
+  background: #f8faff;
+}
+
+.feed-item-icon,
+.idea-row-icon,
+.stake-card-icon,
+.talent-avatar {
+  border-radius: 14px;
+}
+
+.dash-stake-card,
+.dash-idea-row {
+  background: #f8faff;
+  border: 1px solid #e3ebfb;
+  border-radius: 18px;
+  padding: 14px;
+}
+
+.stake-card-title,
+.idea-row-title,
+.talent-name {
+  color: var(--color-navy-900);
+  font-weight: 800;
+}
+
+.fx-btn-primary,
+.btn-app,
+.splash-cta .btn-primary,
+.wallet-action-btn {
+  min-height: 44px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--color-blue-600), #123fbf);
+  box-shadow: var(--shadow-blue);
+  font-weight: 800;
+}
+
+.fx-btn-primary:hover,
+.btn-app:hover,
+.splash-cta .btn-primary:hover,
+.wallet-action-btn:hover {
+  filter: none;
+  transform: translateY(-1px);
+  box-shadow: 0 24px 60px rgba(36, 87, 230, .22);
+}
+
+.fx-btn-outline,
+.btn-ghost,
+.splash-cta .btn {
+  min-height: 44px;
+  border-radius: 14px;
+  background: rgba(255,255,255,.82);
+  border: 1px solid #dbe4f6;
+  color: var(--color-navy-900);
+  font-weight: 800;
+}
+
+.fx-btn-outline:hover,
+.btn-ghost:hover {
+  background: #eef4ff;
+  border-color: #c7d8ff;
+  color: var(--color-blue-600);
+}
+
+.list-card {
+  padding: 20px;
+}
+
+.list-card .title {
+  color: var(--color-navy-900);
+  font-weight: 800;
+}
+
+.wallet-stat,
+.profile-stat-card,
+.flow-step-card {
+  padding: 24px;
+}
+
+.wallet-txn-tabs {
+  background: #eef4ff;
+}
+
+.wallet-txn-tab.active {
+  border-radius: 10px;
+  box-shadow: 0 8px 18px rgba(21, 50, 120, .08);
+}
+
+input,
+select,
+textarea,
+.topbar-search,
+.wallet-txn-tab,
+button {
+  font-family: var(--font-sans);
+}
+
+input,
+select,
+textarea {
+  border-radius: 14px !important;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--color-blue-600) !important;
+  box-shadow: 0 0 0 4px rgba(36, 87, 230, .12) !important;
+}
+
+[role="dialog"] .rounded-xl,
+[role="dialog"] .rounded-2xl {
+  border-radius: 24px !important;
+}
+
+[role="dialog"] .shadow-2xl {
+  box-shadow: 0 38px 90px rgba(10, 22, 40, .22) !important;
+}
+
+[role="dialog"] .bg-black\/50 {
+  background: rgba(12, 25, 56, .58) !important;
+}
+
+.splash {
+  background:
+    radial-gradient(circle at 8% 10%, rgba(36,87,230,.08), transparent 23rem),
+    radial-gradient(circle at 82% 8%, rgba(124,58,237,.07), transparent 26rem),
+    #f7f9ff;
+}
+
+.splash-nav {
+  max-width: 1320px;
+  margin: 18px auto 0;
+  width: calc(100% - 48px);
+  padding: 14px 18px;
+  border: 1px solid rgba(206, 218, 244, .9);
+  border-radius: 24px;
+  background: rgba(255,255,255,.84);
+  box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(18px);
+}
+
+.splash-nav .brand {
+  flex: 0 0 auto;
+}
+
+.splash-nav-cta {
+  flex: 0 0 auto;
+}
+
+.splash-hero {
+  min-height: calc(100vh - 100px);
+  gap: clamp(32px, 5vw, 76px);
+  padding-top: clamp(40px, 6vw, 78px);
+  overflow: visible;
+}
+
+.splash-h1 {
+  font-family: var(--font-display);
+  font-size: clamp(54px, 6vw, 88px);
+  font-weight: 800;
+  letter-spacing: -.065em;
+}
+
+.splash-sub {
+  color: #52617f;
+}
+
+.splash-visual {
+  min-width: 0;
+}
+
+.subapp-2x2 {
+  gap: 18px;
+  transform: translateX(-2%);
+}
+
+.sa-card {
+  border-radius: 30px;
+  box-shadow: 0 22px 55px rgba(21, 50, 120, .16);
+}
+
+.float-card {
+  border-color: #dce6f7;
+  box-shadow: var(--shadow-md);
+}
+
+@media (max-width: 1280px) {
+  .splash-nav {
+    width: calc(100% - 32px);
+  }
+  .splash-nav-links {
+    gap: 18px;
+  }
+  .splash-nav-cta .btn {
+    padding-inline: 14px !important;
+  }
+}
+
+@media (max-width: 1180px) {
+  .app-shell {
+    grid-template-columns: 226px minmax(0, 1fr);
+  }
+  .fx-sidebar {
+    width: 226px !important;
+  }
+  .dash-top-row,
+  .dash-mid-row,
+  .dash-bottom-row {
+    grid-template-columns: 1fr;
+  }
+  .splash-nav-links {
+    display: none;
+  }
+}
+
+@media (max-width: 820px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+  .fx-mobile-header {
+    margin: 10px;
+    border: 1px solid #dce6f7;
+    border-radius: 20px;
+    background: rgba(255,255,255,.9);
+    box-shadow: var(--shadow-sm);
+  }
+  .fx-mobile-tabs {
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+    border: 1px solid #dce6f7;
+    border-radius: 24px;
+    box-shadow: var(--shadow-md);
+  }
+  .dash-welcome {
+    align-items: flex-start;
+  }
+  .dash-welcome-actions {
+    width: 100%;
+    margin-left: 0;
+  }
+  .dash-welcome-actions a {
+    flex: 1;
+  }
+  .stats-strip,
+  .dash-subapp-grid,
+  .dash-mid-row,
+  .dash-bottom-row,
+  .apps-list,
+  .list-grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+  .stat-card,
+  .fx-subapp-tile,
+  .fx-dash-card,
+  .dash-stake-card,
+  .dash-idea-row,
+  .wallet-stat,
+  .list-card {
+    min-width: 0;
+  }
+  .dash-card-header,
+  .wallet-txn-header,
+  .page-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
 /* ===== Dashboard ===== */
 .fx-dashboard {
   display: flex; flex-direction: column; gap: 24px;