feat: update global styles and component designs for enhanced aesthetics and responsiveness, including new gradients, shadows, and transitions

.dockerignore

@@ -17,3 +17,5 @@ README.md
 
 
 
+
+

app/accounts/page.tsx

@@ -30,10 +30,26 @@ import {
 } from "@/lib/store-db";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Building2, Folder, Plus, List, LayoutGrid } from "lucide-react";
+import {
+  Building2,
+  Folder,
+  Plus,
+  List,
+  LayoutGrid,
+  MoreVertical,
+  Pencil,
+  Trash2,
+} from "lucide-react";
 import type { Account, Folder as FolderType } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { getAccountBalance } from "@/lib/account-utils";
+import { useIsMobile } from "@/hooks/use-mobile";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 // Composant wrapper pour les zones de drop des dossiers
 function FolderDropZone({
@@ -61,6 +77,7 @@ function FolderDropZone({
 
 export default function AccountsPage() {
   const queryClient = useQueryClient();
+  const isMobile = useIsMobile();
   const { data: metadata, isLoading: isLoadingMetadata } = useBankingMetadata();
   const { data: accountsWithStats, isLoading: isLoadingAccounts } =
     useAccountsWithStats();
@@ -376,12 +393,12 @@ export default function AccountsPage() {
     <PageLayout>
       <PageHeader
         title="Comptes"
-        description="Gérez vos comptes bancaires et leur organisation"
+        description={isMobile ? undefined : "Gérez vos comptes bancaires et leur organisation"}
         actions={
           <div className="flex items-center gap-2">
             <Button
               variant="outline"
-              size="icon"
+              size={isMobile ? "icon" : "default"}
               onClick={() => setIsCompactView(!isCompactView)}
               title={isCompactView ? "Vue détaillée" : "Vue compacte"}
             >
@@ -390,22 +407,31 @@ export default function AccountsPage() {
               ) : (
                 <List className="w-4 h-4" />
               )}
+              {!isMobile && (
+                <span className="ml-2">
+                  {isCompactView ? "Détaillée" : "Compacte"}
+                </span>
+              )}
             </Button>
-            <Button onClick={handleNewFolder}>
+            <Button onClick={handleNewFolder} size={isMobile ? "icon" : "default"}>
-              <Plus className="w-4 h-4 mr-2" />
+              <Plus className="w-4 h-4" />
-              Nouveau dossier
+              {!isMobile && <span className="ml-2">Nouveau dossier</span>}
             </Button>
           </div>
         }
         rightContent={
-          <div className="text-right">
+          <div className={cn("text-right", isMobile && "text-left")}>
+            {!isMobile && (
               <p className="text-sm text-muted-foreground">Solde total</p>
+            )}
             <p
               className={cn(
-                "text-2xl font-bold",
+                isMobile ? "text-xl" : "text-2xl",
+                "font-bold",
                 totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
               )}
             >
+              {isMobile && <span className="text-xs text-muted-foreground mr-2">Total:</span>}
               {formatCurrency(totalBalance)}
             </p>
           </div>
@@ -440,15 +466,17 @@ export default function AccountsPage() {
               {accountsByFolder["no-folder"] &&
                 accountsByFolder["no-folder"].length > 0 && (
                   <FolderDropZone folderId="root">
-                    <div className="flex items-center gap-2 mb-4">
+                    <div className="flex items-center gap-2 mb-3 sm:mb-4">
-                      <Folder className="w-5 h-5 text-muted-foreground" />
+                      <Folder className="w-5 h-5 text-muted-foreground shrink-0" />
-                      <h2 className="text-lg font-semibold">Sans dossier</h2>
+                      <div className="flex-1 min-w-0">
-                      <span className="text-sm text-muted-foreground">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <h2 className="text-base sm:text-lg font-semibold">Sans dossier</h2>
+                          <span className="text-xs sm:text-sm text-muted-foreground shrink-0">
                             ({accountsByFolder["no-folder"].length})
                           </span>
                           <span
                             className={cn(
-                          "text-sm font-semibold tabular-nums ml-auto",
+                              "text-xs sm:text-sm font-semibold tabular-nums shrink-0",
                               accountsByFolder["no-folder"].reduce(
                                 (sum, a) => sum + getAccountBalance(a),
                                 0,
@@ -465,7 +493,9 @@ export default function AccountsPage() {
                             )}
                           </span>
                         </div>
-                    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                      </div>
+                    </div>
+                    <div className="grid gap-2 sm:gap-3 md:gap-4 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3">
                       {accountsByFolder["no-folder"].map((account) => {
                         const folder = metadata.folders.find(
                           (f: FolderType) => f.id === account.folderId,
@@ -501,9 +531,9 @@ export default function AccountsPage() {
 
                 return (
                   <FolderDropZone key={folder.id} folderId={folder.id}>
-                    <div className="flex items-center gap-2 mb-4">
+                    <div className="flex items-center gap-2 mb-3 sm:mb-4">
                       <div
-                        className="w-5 h-5 rounded flex items-center justify-center"
+                        className="w-5 h-5 rounded flex items-center justify-center shrink-0"
                         style={{ backgroundColor: `${folder.color}20` }}
                       >
                         <Folder
@@ -511,14 +541,18 @@ export default function AccountsPage() {
                           style={{ color: folder.color }}
                         />
                       </div>
-                      <h2 className="text-lg font-semibold">{folder.name}</h2>
+                      <div className="flex-1 min-w-0">
-                      <span className="text-sm text-muted-foreground">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <h2 className="text-base sm:text-lg font-semibold truncate">
+                            {folder.name}
+                          </h2>
+                          <span className="text-xs sm:text-sm text-muted-foreground shrink-0">
                             ({folderAccounts.length})
                           </span>
                           {folderAccounts.length > 0 && (
                             <span
                               className={cn(
-                            "text-sm font-semibold tabular-nums",
+                                "text-xs sm:text-sm font-semibold tabular-nums shrink-0",
                                 folderBalance >= 0
                                   ? "text-emerald-600"
                                   : "text-red-600",
@@ -527,11 +561,36 @@ export default function AccountsPage() {
                               {formatCurrency(folderBalance)}
                             </span>
                           )}
+                        </div>
+                      </div>
+                      {isMobile ? (
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+                              <MoreVertical className="w-4 h-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem onClick={() => handleEditFolder(folder)}>
+                              <Pencil className="w-4 h-4 mr-2" />
+                              Modifier
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={() => handleDeleteFolder(folder.id)}
+                              variant="destructive"
+                            >
+                              <Trash2 className="w-4 h-4 mr-2" />
+                              Supprimer
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      ) : (
+                        <>
                           <Button
                             variant="ghost"
                             size="sm"
                             onClick={() => handleEditFolder(folder)}
-                        className="ml-auto"
+                            className="ml-auto shrink-0"
                           >
                             Modifier
                           </Button>
@@ -539,13 +598,15 @@ export default function AccountsPage() {
                             variant="ghost"
                             size="sm"
                             onClick={() => handleDeleteFolder(folder.id)}
-                        className="text-destructive hover:text-destructive"
+                            className="text-destructive hover:text-destructive shrink-0"
                           >
                             Supprimer
                           </Button>
+                        </>
+                      )}
                     </div>
                     {folderAccounts.length > 0 ? (
-                      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                      <div className="grid gap-2 sm:gap-3 md:gap-4 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3">
                         {folderAccounts.map((account) => {
                           const accountFolder = metadata.folders.find(
                             (f: FolderType) => f.id === account.folderId,

app/globals.css

@@ -4,74 +4,117 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(1 0 0);
+  /* Background moderne avec légère teinte */
-  --foreground: oklch(0.145 0 0);
+  --background: oklch(0.99 0.002 270);
-  --card: oklch(1 0 0);
+  --foreground: oklch(0.15 0.01 270);
-  --card-foreground: oklch(0.145 0 0);
+  
-  --popover: oklch(1 0 0);
+  /* Cards avec glassmorphism subtil */
-  --popover-foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0 / 0.8);
-  --primary: oklch(0.205 0 0);
+  --card-foreground: oklch(0.15 0.01 270);
-  --primary-foreground: oklch(0.985 0 0);
+  
-  --secondary: oklch(0.97 0 0);
+  /* Popover avec backdrop blur */
-  --secondary-foreground: oklch(0.205 0 0);
+  --popover: oklch(1 0 0 / 0.95);
-  --muted: oklch(0.97 0 0);
+  --popover-foreground: oklch(0.15 0.01 270);
-  --muted-foreground: oklch(0.556 0 0);
+  
-  --accent: oklch(0.97 0 0);
+  /* Primary: Bleu/violet fintech moderne */
-  --accent-foreground: oklch(0.205 0 0);
+  --primary: oklch(0.55 0.18 260);
-  --destructive: oklch(0.577 0.245 27.325);
+  --primary-foreground: oklch(0.99 0 0);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
+  
-  --border: oklch(0.922 0 0);
+  /* Secondary avec teinte subtile */
-  --input: oklch(0.922 0 0);
+  --secondary: oklch(0.97 0.005 270);
-  --ring: oklch(0.708 0 0);
+  --secondary-foreground: oklch(0.25 0.01 270);
-  --chart-1: oklch(0.646 0.222 41.116);
+  
-  --chart-2: oklch(0.6 0.118 184.704);
+  /* Muted plus doux */
-  --chart-3: oklch(0.398 0.07 227.392);
+  --muted: oklch(0.96 0.003 270);
-  --chart-4: oklch(0.828 0.189 84.429);
+  --muted-foreground: oklch(0.5 0.008 270);
-  --chart-5: oklch(0.769 0.188 70.08);
+  
-  --radius: 0.625rem;
+  /* Accent avec couleur vibrante */
-  --sidebar: oklch(0.985 0 0);
+  --accent: oklch(0.95 0.01 260);
-  --sidebar-foreground: oklch(0.145 0 0);
+  --accent-foreground: oklch(0.55 0.18 260);
-  --sidebar-primary: oklch(0.205 0 0);
+  
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  /* Destructive moderne */
-  --sidebar-accent: oklch(0.97 0 0);
+  --destructive: oklch(0.55 0.22 25);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --destructive-foreground: oklch(0.99 0 0);
-  --sidebar-border: oklch(0.922 0 0);
+  
-  --sidebar-ring: oklch(0.708 0 0);
+  /* Bordures fines et subtiles */
+  --border: oklch(0.92 0.005 270 / 0.6);
+  --input: oklch(0.96 0.003 270);
+  --ring: oklch(0.55 0.18 260 / 0.3);
+  
+  /* Chart colors modernes et vibrantes */
+  --chart-1: oklch(0.6 0.2 260);
+  --chart-2: oklch(0.65 0.18 180);
+  --chart-3: oklch(0.7 0.15 120);
+  --chart-4: oklch(0.65 0.2 320);
+  --chart-5: oklch(0.6 0.18 40);
+  
+  --radius: 0.75rem;
+  
+  /* Sidebar moderne */
+  --sidebar: oklch(0.98 0.003 270);
+  --sidebar-foreground: oklch(0.2 0.01 270);
+  --sidebar-primary: oklch(0.55 0.18 260);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.95 0.01 260);
+  --sidebar-accent-foreground: oklch(0.25 0.01 270);
+  --sidebar-border: oklch(0.92 0.005 270 / 0.5);
+  --sidebar-ring: oklch(0.55 0.18 260 / 0.2);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
+  /* Background sombre avec teinte subtile */
-  --foreground: oklch(0.985 0 0);
+  --background: oklch(0.12 0.01 270);
-  --card: oklch(0.145 0 0);
+  --foreground: oklch(0.98 0.002 270);
-  --card-foreground: oklch(0.985 0 0);
+  
-  --popover: oklch(0.145 0 0);
+  /* Cards avec effet glassmorphism sombre */
-  --popover-foreground: oklch(0.985 0 0);
+  --card: oklch(0.15 0.01 270 / 0.7);
-  --primary: oklch(0.985 0 0);
+  --card-foreground: oklch(0.98 0.002 270);
-  --primary-foreground: oklch(0.205 0 0);
+  
-  --secondary: oklch(0.269 0 0);
+  /* Popover avec backdrop blur */
-  --secondary-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.15 0.01 270 / 0.95);
-  --muted: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.98 0.002 270);
-  --muted-foreground: oklch(0.708 0 0);
+  
-  --accent: oklch(0.269 0 0);
+  /* Primary: Bleu/violet brillant pour dark mode */
-  --accent-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.65 0.2 260);
-  --destructive: oklch(0.396 0.141 25.723);
+  --primary-foreground: oklch(0.12 0.01 270);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
+  
-  --border: oklch(0.269 0 0);
+  /* Secondary avec plus de contraste */
-  --input: oklch(0.269 0 0);
+  --secondary: oklch(0.22 0.01 270);
-  --ring: oklch(0.439 0 0);
+  --secondary-foreground: oklch(0.95 0.002 270);
-  --chart-1: oklch(0.488 0.243 264.376);
+  
-  --chart-2: oklch(0.696 0.17 162.48);
+  /* Muted plus visible */
-  --chart-3: oklch(0.769 0.188 70.08);
+  --muted: oklch(0.22 0.01 270);
-  --chart-4: oklch(0.627 0.265 303.9);
+  --muted-foreground: oklch(0.65 0.008 270);
-  --chart-5: oklch(0.645 0.246 16.439);
+  
-  --sidebar: oklch(0.205 0 0);
+  /* Accent vibrant */
-  --sidebar-foreground: oklch(0.985 0 0);
+  --accent: oklch(0.25 0.015 260);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --accent-foreground: oklch(0.65 0.2 260);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  
-  --sidebar-accent: oklch(0.269 0 0);
+  /* Destructive moderne */
-  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.6 0.22 25);
-  --sidebar-border: oklch(0.269 0 0);
+  --destructive-foreground: oklch(0.98 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  
+  /* Bordures subtiles */
+  --border: oklch(0.25 0.01 270 / 0.5);
+  --input: oklch(0.22 0.01 270);
+  --ring: oklch(0.65 0.2 260 / 0.4);
+  
+  /* Chart colors vibrantes pour dark */
+  --chart-1: oklch(0.7 0.22 260);
+  --chart-2: oklch(0.75 0.2 180);
+  --chart-3: oklch(0.8 0.18 120);
+  --chart-4: oklch(0.75 0.22 320);
+  --chart-5: oklch(0.7 0.2 40);
+  
+  /* Sidebar dark moderne */
+  --sidebar: oklch(0.14 0.01 270);
+  --sidebar-foreground: oklch(0.95 0.002 270);
+  --sidebar-primary: oklch(0.65 0.2 260);
+  --sidebar-primary-foreground: oklch(0.12 0.01 270);
+  --sidebar-accent: oklch(0.25 0.015 260);
+  --sidebar-accent-foreground: oklch(0.95 0.002 270);
+  --sidebar-border: oklch(0.25 0.01 270 / 0.4);
+  --sidebar-ring: oklch(0.65 0.2 260 / 0.3);
 }
 
 @theme inline {
@@ -121,5 +164,96 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+  
+  /* Animations fintech modernes */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes slide-in {
+    from {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  /* Smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  /* Amélioration des transitions globales */
+  * {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  
+  /* Background fintech moderne avec dégradés subtils */
+  .page-background {
+    position: relative;
+    background: var(--background);
+  }
+  
+  .page-background::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    background: 
+      radial-gradient(ellipse 100% 60% at 0% 0%, 
+        color-mix(in srgb, var(--primary) 8%, transparent) 0%,
+        transparent 60%
+      ),
+      radial-gradient(ellipse 80% 50% at 100% 100%, 
+        color-mix(in srgb, var(--chart-2) 6%, transparent) 0%,
+        transparent 60%
+      ),
+      radial-gradient(ellipse 60% 40% at 50% 50%, 
+        color-mix(in srgb, var(--chart-3) 4%, transparent) 0%,
+        transparent 70%
+      );
+    background-size: 100% 100%;
+    pointer-events: none;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+  }
+  
+  .dark .page-background::before {
+    background: 
+      radial-gradient(ellipse 100% 60% at 0% 0%, 
+        color-mix(in srgb, var(--primary) 12%, transparent) 0%,
+        transparent 60%
+      ),
+      radial-gradient(ellipse 80% 50% at 100% 100%, 
+        color-mix(in srgb, var(--chart-2) 10%, transparent) 0%,
+        transparent 60%
+      ),
+      radial-gradient(ellipse 60% 40% at 50% 50%, 
+        color-mix(in srgb, var(--chart-3) 8%, transparent) 0%,
+        transparent 70%
+      );
+    opacity: 1;
+  }
+  
+  .page-content {
+    position: relative;
+    z-index: 1;
   }
 }

app/login/page.tsx

@@ -47,8 +47,8 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-[var(--background)] p-4">
+    <div className="min-h-screen flex items-center justify-center bg-[var(--background)] p-4 page-background">
-      <Card className="w-full max-w-md">
+      <Card className="w-full max-w-md page-content">
         <CardHeader className="space-y-1">
           <div className="flex items-center justify-center mb-4">
             <Lock className="w-12 h-12 text-[var(--primary)]" />

app/page.tsx

@@ -27,11 +27,11 @@ export default function DashboardPage() {
     }
 
     const filteredAccounts = data.accounts.filter((a) =>
-      selectedAccounts.includes(a.id),
+      selectedAccounts.includes(a.id)
     );
     const filteredAccountIds = new Set(filteredAccounts.map((a) => a.id));
     const filteredTransactions = data.transactions.filter((t) =>
-      filteredAccountIds.has(t.accountId),
+      filteredAccountIds.has(t.accountId)
     );
 
     return {
@@ -60,9 +60,8 @@ export default function DashboardPage() {
         }
       />
 
-      <Card className="mb-6">
+      <Card className="mb-4 sm:mb-6 border shadow-sm">
-        <CardContent className="pt-4">
+        <CardContent className="px-4 py-4 sm:px-6 sm:py-6">
-          <div className="flex flex-wrap gap-4">
           <AccountFilterCombobox
             accounts={data.accounts}
             folders={data.folders}
@@ -71,15 +70,14 @@ export default function DashboardPage() {
             className="w-full md:w-[280px]"
             filteredTransactions={data.transactions}
           />
-          </div>
         </CardContent>
       </Card>
 
       <OverviewCards data={filteredData} />
 
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div className="grid gap-4 sm:gap-6 lg:grid-cols-2">
         <RecentTransactions data={filteredData} />
-        <div className="space-y-6">
+        <div className="space-y-4 sm:space-y-6">
           <AccountsSummary data={filteredData} />
           <CategoryBreakdown data={filteredData} />
         </div>

components/accounts/account-bulk-actions.tsx

@@ -3,6 +3,8 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Trash2 } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
 
 interface AccountBulkActionsProps {
   selectedCount: number;
@@ -13,18 +15,39 @@ export function AccountBulkActions({
   selectedCount,
   onDelete,
 }: AccountBulkActionsProps) {
+  const isMobile = useIsMobile();
+  
   if (selectedCount === 0) return null;
 
   return (
-    <Card className="bg-destructive/5 border-destructive/20">
+    <Card className="bg-destructive/5 border-destructive/20 sticky top-0 z-10 mb-4">
-      <CardContent className="py-3">
+      <CardContent className={cn(
-        <div className="flex items-center gap-4">
+        "py-3",
-          <span className="text-sm font-medium">
+        isMobile && "px-3"
+      )}>
+        <div className={cn(
+          "flex items-center gap-2 sm:gap-4",
+          isMobile && "flex-col sm:flex-row"
+        )}>
+          <span className={cn(
+            "font-medium",
+            isMobile ? "text-xs" : "text-sm"
+          )}>
             {selectedCount} compte{selectedCount > 1 ? "s" : ""} sélectionné
             {selectedCount > 1 ? "s" : ""}
           </span>
-          <Button size="sm" variant="destructive" onClick={onDelete}>
+          <Button 
-            <Trash2 className="w-4 h-4 mr-1" />
+            size={isMobile ? "sm" : "sm"} 
+            variant="destructive" 
+            onClick={onDelete}
+            className={cn(
+              isMobile && "w-full sm:w-auto"
+            )}
+          >
+            <Trash2 className={cn(
+              isMobile ? "w-3.5 h-3.5" : "w-4 h-4",
+              "mr-1"
+            )} />
             Supprimer
           </Button>
         </div>

components/accounts/account-card.tsx

@@ -23,6 +23,7 @@ import type { Account, Folder } from "@/lib/types";
 import { accountTypeIcons, accountTypeLabels } from "./constants";
 import { Checkbox } from "@/components/ui/checkbox";
 import { getAccountBalance } from "@/lib/account-utils";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 interface AccountCardProps {
   account: Account;
@@ -49,6 +50,7 @@ export function AccountCard({
   draggableId,
   compact = false,
 }: AccountCardProps) {
+  const isMobile = useIsMobile();
   const Icon = accountTypeIcons[account.type];
   const realBalance = getAccountBalance(account);
 
@@ -77,19 +79,20 @@ export function AccountCard({
   const cardContent = (
     <Card
       className={cn(
-        "relative",
+        "relative group",
-        isSelected && "ring-2 ring-primary",
+        isSelected && "ring-2 ring-primary shadow-lg shadow-primary/10",
-        isDragging && "bg-muted/80",
+        isDragging && "bg-muted/80 opacity-60",
+        "hover:scale-[1.02] transition-transform duration-200"
       )}
     >
-      <CardHeader className="pb-0">
+      <CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}>
-        <div className="flex items-start justify-between">
+        <div className="flex items-start justify-between gap-1.5">
-          <div className="flex items-center gap-2 flex-1">
+          <div className="flex items-center gap-1.5 flex-1 min-w-0">
-            {draggableId && (
+            {draggableId && !isMobile && (
               <button
                 {...attributes}
                 {...listeners}
-                className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing"
+                className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing shrink-0"
                 onClick={(e) => e.stopPropagation()}
               >
                 <GripVertical className="w-4 h-4 text-muted-foreground" />
@@ -102,16 +105,29 @@ export function AccountCard({
                   onSelect(account.id, checked === true)
                 }
                 onClick={(e) => e.stopPropagation()}
+                className="shrink-0"
               />
             )}
-            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
+            <div
-              <Icon className="w-4 h-4 text-primary" />
+              className={cn(
+                "rounded-full bg-primary/10 flex items-center justify-center shrink-0",
+                isMobile ? "w-6 h-6" : "w-8 h-8"
+              )}
+            >
+              <Icon
+                className={cn("text-primary", isMobile ? "w-3 h-3" : "w-4 h-4")}
+              />
             </div>
-            <div className="min-w-0">
+            <div className="min-w-0 flex-1">
-              <CardTitle className="text-sm font-semibold truncate">
+              <CardTitle
+                className={cn(
+                  "font-semibold truncate leading-tight",
+                  isMobile ? "text-[11px]" : "text-sm"
+                )}
+              >
                 {account.name}
               </CardTitle>
-              {!compact && (
+              {!compact && !isMobile && (
                 <>
                   <p className="text-xs text-muted-foreground">
                     {accountTypeLabels[account.type]}
@@ -127,8 +143,14 @@ export function AccountCard({
           </div>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0">
+              <Button
-                <MoreVertical className="w-3.5 h-3.5" />
+                variant="ghost"
+                size="icon"
+                className={cn("shrink-0", isMobile ? "h-5 w-5" : "h-7 w-7")}
+              >
+                <MoreVertical
+                  className={cn(isMobile ? "w-2.5 h-2.5" : "w-3.5 h-3.5")}
+                />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -138,7 +160,7 @@ export function AccountCard({
               </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={() => onDelete(account.id)}
-                className="text-red-600"
+                variant="destructive"
               >
                 <Trash2 className="w-4 h-4 mr-2" />
                 Supprimer
@@ -147,14 +169,22 @@ export function AccountCard({
           </DropdownMenu>
         </div>
       </CardHeader>
-      <CardContent className={cn("pt-1", compact && "pt-0")}>
+      <CardContent
-        <div className="flex items-center justify-between">
+        className={cn(isMobile ? "px-2 pb-2 pt-1" : "pt-1", compact && "pt-0")}
+      >
+        <div className="flex items-center justify-between gap-1.5">
           <div
             className={cn(
-              compact ? "text-lg" : "text-xl",
+              "font-bold truncate",
-              "font-bold",
+              compact
-              !compact && "mb-1.5",
+                ? isMobile
-              realBalance >= 0 ? "text-emerald-600" : "text-red-600",
+                  ? "text-sm"
+                  : "text-lg"
+                : isMobile
+                  ? "text-base"
+                  : "text-xl",
+              !compact && !isMobile && "mb-1.5",
+              realBalance >= 0 ? "text-emerald-600" : "text-red-600"
             )}
           >
             {formatCurrency(realBalance)}
@@ -162,23 +192,36 @@ export function AccountCard({
           {compact && (
             <Link
               href={`/transactions?accountId=${account.id}`}
-              className="text-xs text-muted-foreground hover:text-primary hover:underline"
+              className={cn(
+                "text-muted-foreground hover:text-primary hover:underline shrink-0 whitespace-nowrap",
+                isMobile ? "text-[9px]" : "text-xs"
+              )}
             >
-              {transactionCount} transactions
+              {transactionCount} txns
             </Link>
           )}
         </div>
         {!compact && (
           <>
-            <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <div
+              className={cn(
+                "flex items-center justify-between gap-2 mt-1",
+                isMobile ? "text-[10px]" : "text-xs",
+                "text-muted-foreground"
+              )}
+            >
               <Link
                 href={`/transactions?accountId=${account.id}`}
                 className="hover:text-primary hover:underline truncate"
               >
                 {transactionCount} transactions
               </Link>
-              {folder && <span className="truncate ml-2">{folder.name}</span>}
+              {folder && !isMobile && (
+                <span className="truncate ml-2 shrink-0">{folder.name}</span>
+              )}
             </div>
+            {!isMobile && (
+              <>
                 {account.initialBalance !== undefined &&
                   account.initialBalance !== null && (
                     <p className="text-xs text-muted-foreground mt-1.5">
@@ -204,6 +247,8 @@ export function AccountCard({
                 )}
               </>
             )}
+          </>
+        )}
       </CardContent>
     </Card>
   );

components/dashboard/overview-cards.tsx

@@ -13,7 +13,7 @@ interface OverviewCardsProps {
 export function OverviewCards({ data }: OverviewCardsProps) {
   const totalBalance = data.accounts.reduce(
     (sum, acc) => sum + getAccountBalance(acc),
-    0,
+    0
   );
 
   const thisMonth = new Date();
@@ -21,7 +21,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
   const thisMonthStr = thisMonth.toISOString().slice(0, 7);
 
   const monthTransactions = data.transactions.filter((t) =>
-    t.date.startsWith(thisMonthStr),
+    t.date.startsWith(thisMonthStr)
   );
 
   const income = monthTransactions
@@ -45,41 +45,45 @@ export function OverviewCards({ data }: OverviewCardsProps) {
   };
 
   return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+    <div className="grid gap-3 sm:gap-4 grid-cols-2 lg:grid-cols-4">
-      <Card>
+      <Card className="border shadow-sm">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
-          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
+          <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
             Solde Total
           </CardTitle>
-          <Wallet className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
+          <div className="rounded-full bg-muted/50 p-2 shrink-0">
+            <Wallet className="h-4 w-4 text-muted-foreground" />
+          </div>
         </CardHeader>
-        <CardContent>
+        <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
           <div
             className={cn(
-              "text-xl md:text-2xl font-bold",
+              "text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight",
-              totalBalance >= 0 ? "text-emerald-600" : "text-red-600",
+              totalBalance >= 0 ? "text-emerald-600" : "text-red-600"
             )}
           >
             {formatCurrency(totalBalance)}
           </div>
-          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
+          <p className="text-xs text-muted-foreground mt-2">
             {data.accounts.length} compte{data.accounts.length > 1 ? "s" : ""}
           </p>
         </CardContent>
       </Card>
 
-      <Card>
+      <Card className="border shadow-sm">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
-          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
+          <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
             Revenus du mois
           </CardTitle>
-          <TrendingUp className="h-3 w-3 md:h-4 md:w-4 text-emerald-600" />
+          <div className="rounded-full bg-emerald-500/10 p-2 shrink-0">
+            <TrendingUp className="h-4 w-4 text-emerald-600" />
+          </div>
         </CardHeader>
-        <CardContent>
+        <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
-          <div className="text-xl md:text-2xl font-bold text-emerald-600">
+          <div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-emerald-600">
             {formatCurrency(income)}
           </div>
-          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
+          <p className="text-xs text-muted-foreground mt-2">
             {monthTransactions.filter((t) => t.amount > 0).length} opération
             {monthTransactions.filter((t) => t.amount > 0).length > 1
               ? "s"
@@ -88,18 +92,20 @@ export function OverviewCards({ data }: OverviewCardsProps) {
         </CardContent>
       </Card>
 
-      <Card>
+      <Card className="border shadow-sm">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
-          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
+          <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
             Dépenses du mois
           </CardTitle>
-          <TrendingDown className="h-3 w-3 md:h-4 md:w-4 text-red-600" />
+          <div className="rounded-full bg-red-500/10 p-2 shrink-0">
+            <TrendingDown className="h-4 w-4 text-red-600" />
+          </div>
         </CardHeader>
-        <CardContent>
+        <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
-          <div className="text-xl md:text-2xl font-bold text-red-600">
+          <div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight text-red-600">
             {formatCurrency(expenses)}
           </div>
-          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
+          <p className="text-xs text-muted-foreground mt-2">
             {monthTransactions.filter((t) => t.amount < 0).length} opération
             {monthTransactions.filter((t) => t.amount < 0).length > 1
               ? "s"
@@ -108,18 +114,20 @@ export function OverviewCards({ data }: OverviewCardsProps) {
         </CardContent>
       </Card>
 
-      <Card>
+      <Card className="border shadow-sm">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
-          <CardTitle className="text-xs md:text-sm font-medium text-muted-foreground">
+          <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
             Pointage
           </CardTitle>
-          <CreditCard className="h-3 w-3 md:h-4 md:w-4 text-muted-foreground" />
+          <div className="rounded-full bg-muted/50 p-2 shrink-0">
+            <CreditCard className="h-4 w-4 text-muted-foreground" />
+          </div>
         </CardHeader>
-        <CardContent>
+        <CardContent className="px-4 pb-4 sm:px-6 sm:pb-6 pt-0">
-          <div className="text-xl md:text-2xl font-bold">
+          <div className="text-2xl sm:text-2xl md:text-3xl font-bold tracking-tight">
             {reconciledPercent}%
           </div>
-          <p className="text-[10px] md:text-xs text-muted-foreground mt-1">
+          <p className="text-xs text-muted-foreground mt-2">
             {reconciled} / {total} opérations pointées
           </p>
         </CardContent>

components/layout/page-layout.tsx

@@ -15,9 +15,9 @@ export function PageLayout({ children }: PageLayoutProps) {
     <SidebarContext.Provider
       value={{ open: sidebarOpen, setOpen: setSidebarOpen }}
     >
-      <div className="flex h-screen bg-background overflow-hidden">
+      <div className="flex h-screen bg-background overflow-hidden page-background">
         <Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen} />
-        <main className="flex-1 overflow-auto overflow-x-hidden">
+        <main className="flex-1 overflow-auto overflow-x-hidden page-content">
           <div className="p-4 md:p-6 space-y-4 md:space-y-6 max-w-full">
             {children}
           </div>

components/ui/account-filter-combobox.tsx

@@ -64,7 +64,7 @@ export function AccountFilterCombobox({
   // Get root folders (folders without parent) - same as folders/page.tsx
   const rootFolders = useMemo(
     () => folders.filter((f) => f.parentId === null),
-    [folders],
+    [folders]
   );
 
   // Get child folders for a given parent - same as FolderTreeItem
@@ -78,7 +78,7 @@ export function AccountFilterCombobox({
   // Get accounts without folder
   const orphanAccounts = useMemo(
     () => accounts.filter((a) => !a.folderId),
-    [accounts],
+    [accounts]
   );
 
   const selectedAccounts = accounts.filter((a) => value.includes(a.id));
@@ -89,7 +89,7 @@ export function AccountFilterCombobox({
     const directAccounts = getFolderAccounts(folderId);
     const childFoldersList = getChildFolders(folderId);
     const childAccounts = childFoldersList.flatMap((cf) =>
-      getAllAccountsInFolder(cf.id),
+      getAllAccountsInFolder(cf.id)
     );
     return [...directAccounts, ...childAccounts];
   };
@@ -126,7 +126,7 @@ export function AccountFilterCombobox({
 
     if (allSelected) {
       const newSelection = value.filter(
-        (v) => !allFolderAccountIds.includes(v),
+        (v) => !allFolderAccountIds.includes(v)
       );
       onChange(newSelection.length > 0 ? newSelection : ["all"]);
     } else {
@@ -153,7 +153,7 @@ export function AccountFilterCombobox({
     const folderAccounts = getAllAccountsInFolder(folderId);
     if (folderAccounts.length === 0) return false;
     const selectedCount = folderAccounts.filter((a) =>
-      value.includes(a.id),
+      value.includes(a.id)
     ).length;
     return selectedCount > 0 && selectedCount < folderAccounts.length;
   };
@@ -185,7 +185,7 @@ export function AccountFilterCombobox({
             <Check
               className={cn(
                 "h-4 w-4",
-                isFolderSelected(folder.id) ? "opacity-100" : "opacity-0",
+                isFolderSelected(folder.id) ? "opacity-100" : "opacity-0"
               )}
             />
           </div>
@@ -213,7 +213,7 @@ export function AccountFilterCombobox({
               <Check
                 className={cn(
                   "ml-auto h-4 w-4 shrink-0",
-                  value.includes(account.id) ? "opacity-100" : "opacity-0",
+                  value.includes(account.id) ? "opacity-100" : "opacity-0"
                 )}
               />
             </CommandItem>
@@ -222,7 +222,7 @@ export function AccountFilterCombobox({
 
         {/* Child folders - recursive */}
         {childFoldersList.map((childFolder) =>
-          renderFolder(childFolder, depth + 1, currentPath),
+          renderFolder(childFolder, depth + 1, currentPath)
         )}
       </div>
     );
@@ -235,7 +235,10 @@ export function AccountFilterCombobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className={cn("justify-between min-w-0", className)}
+          className={cn(
+            "justify-between min-w-0 h-10 w-full text-sm font-normal",
+            className
+          )}
         >
           <div className="flex items-center gap-2 min-w-0 flex-1">
             {selectedAccounts.length === 1 ? (
@@ -285,7 +288,7 @@ export function AccountFilterCombobox({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-[380px] p-0"
+        className="w-[calc(100vw-2rem)] sm:w-[380px] p-0"
         align="start"
         onOpenAutoFocus={(e) => e.preventDefault()}
       >
@@ -301,10 +304,7 @@ export function AccountFilterCombobox({
                   <span className="text-xs text-muted-foreground ml-1">
                     (
                     {formatCurrency(
-                      filteredTransactions.reduce(
+                      filteredTransactions.reduce((sum, t) => sum + t.amount, 0)
-                        (sum, t) => sum + t.amount,
-                        0,
-                      ),
                     )}
                     )
                   </span>
@@ -312,7 +312,7 @@ export function AccountFilterCombobox({
                 <Check
                   className={cn(
                     "ml-auto h-4 w-4",
-                    isAll ? "opacity-100" : "opacity-0",
+                    isAll ? "opacity-100" : "opacity-0"
                   )}
                 />
               </CommandItem>
@@ -348,7 +348,7 @@ export function AccountFilterCombobox({
                           "ml-auto h-4 w-4 shrink-0",
                           value.includes(account.id)
                             ? "opacity-100"
-                            : "opacity-0",
+                            : "opacity-0"
                         )}
                       />
                     </CommandItem>

components/ui/button.tsx

@@ -5,19 +5,19 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25 active:scale-[0.98]",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white hover:bg-destructive/90 hover:shadow-lg hover:shadow-destructive/25 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:scale-[0.98]",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background/80 backdrop-blur-sm shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-primary/30 hover:shadow-md dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active:scale-[0.98]",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:shadow-sm active:scale-[0.98]",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active:scale-[0.98]",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

components/ui/card.tsx

@@ -7,8 +7,13 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col rounded-xl border",
-        className,
+        "shadow-[0_1px_3px_0_rgb(0_0_0_/_0.05),0_1px_2px_-1px_rgb(0_0_0_/_0.05)]",
+        "backdrop-blur-sm",
+        "transition-all duration-200",
+        "hover:shadow-[0_4px_12px_0_rgb(0_0_0_/_0.08),0_2px_4px_-1px_rgb(0_0_0_/_0.06)]",
+        "hover:border-primary/20",
+        className
       )}
       {...props}
     />
@@ -20,8 +25,8 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
+        className
       )}
       {...props}
     />
@@ -54,7 +59,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-action"
       className={cn(
         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className,
+        className
       )}
       {...props}
     />
@@ -65,7 +70,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn("px-6", className)}
+      className={cn("px-6 pb-6", className)}
       {...props}
     />
   );

components/ui/dropdown-menu.tsx

@@ -42,7 +42,10 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground backdrop-blur-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
+          "rounded-lg border border-border/50 p-1 shadow-lg shadow-black/5",
           className,
         )}
         {...props}

components/ui/input.tsx

@@ -8,8 +8,13 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "dark:bg-input/40 border-input h-9 w-full min-w-0 rounded-lg border bg-background/50 backdrop-blur-sm px-3 py-1 text-base",
+        "shadow-sm transition-all duration-200 outline-none",
+        "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-primary/50 focus-visible:ring-primary/20 focus-visible:ring-[3px] focus-visible:shadow-md focus-visible:shadow-primary/10",
+        "hover:border-primary/30 hover:shadow-sm",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,
       )}

components/ui/textarea.tsx

@@ -7,7 +7,13 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground",
+        "dark:bg-input/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-background/50 backdrop-blur-sm px-3 py-2 text-base",
+        "shadow-sm transition-all duration-200 outline-none",
+        "focus-visible:border-primary/50 focus-visible:ring-primary/20 focus-visible:ring-[3px] focus-visible:shadow-md focus-visible:shadow-primary/10",
+        "hover:border-primary/30 hover:shadow-sm",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className,
       )}
       {...props}

lib/auth.ts

@@ -12,13 +12,13 @@ if (process.env.NODE_ENV === "development") {
     "🔐 NextAuth secret:",
     process.env.NEXTAUTH_SECRET
       ? "✅ Loaded from .env.local"
-      : "⚠️ Using fallback"
+      : "⚠️ Using fallback",
   );
 }
 
 if (!process.env.NEXTAUTH_SECRET && process.env.NODE_ENV === "production") {
   throw new Error(
-    "NEXTAUTH_SECRET is required in production. Please set it in your environment variables."
+    "NEXTAUTH_SECRET is required in production. Please set it in your environment variables.",
   );
 }
 
@@ -36,7 +36,7 @@ export const authOptions: NextAuthOptions = {
           }
 
           const isValid = await authService.verifyPassword(
-            credentials.password
+            credentials.password,
           );
           if (!isValid) {
             return null;