Update date picker, mobile styling

src/components/layout/floating-action-bar.tsx

@@ -97,19 +97,11 @@ export function FloatingActionBar({
   if (!isVisible) return null;
 
   return (
-    <div
-      ref={floatingRef}
-      className={cn(
-        "border-border/40 bg-background/60 animate-in slide-in-from-bottom-4 sticky bottom-4 z-20 flex items-center justify-between rounded-2xl border p-4 shadow-lg backdrop-blur-xl backdrop-saturate-150 duration-300",
-        className,
-      )}
-    >
-      <div className="flex-1">
-        {leftContent || (
-          <p className="text-muted-foreground text-sm">{title}</p>
-        )}
+    <div ref={floatingRef} className={cn("floating-action-bar", className)}>
+      <div className="floating-action-bar-content">
+        {leftContent || <p className="floating-action-bar-title">{title}</p>}
       </div>
-      <div className="flex items-center gap-2 sm:gap-3">{children}</div>
+      <div className="floating-action-bar-actions">{children}</div>
     </div>
   );
 }

src/components/layout/page-header.tsx

@@ -22,11 +22,11 @@ export function PageHeader({
 
     switch (variant) {
       case "gradient":
-        return `${baseClasses} text-3xl bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent`;
+        return `${baseClasses} text-3xl text-brand-gradient`;
       case "large":
         return `${baseClasses} text-4xl text-foreground`;
       case "large-gradient":
-        return `${baseClasses} text-4xl bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent`;
+        return `${baseClasses} text-4xl text-brand-gradient`;
       default:
         return `${baseClasses} text-3xl text-foreground`;
     }

src/components/layout/quick-action-card.tsx

@@ -99,7 +99,7 @@ export function QuickActionCard({
 
 export function QuickActionCardSkeleton() {
   return (
-    <Card className="border-0 shadow-md">
+    <Card className="card-primary">
       <CardContent className="p-6">
         <div className="animate-pulse">
           <div className="bg-muted mx-auto mb-3 h-12 w-12 rounded-full"></div>