Mobile: bottom tab bar (Cards · Collectibles · Agents · Settings)

Restructure the app into an Expo Router (tabs) group with a bottom navbar:
- 🎒 Cards (bag-personal) = the gallery (moved from app/index.tsx).
- 💰 Collectibles (sack) + 🤖 Agents (robot) = new empty-state screens.
- ⚙️ Settings (cog) = demo settings (app info + Clear all cards).
Root stack hides the (tabs) header; removed the Phase-1 (tabs)/cards.tsx and
pointed the dormant (auth)/login redirect at "/". localCardsStore gains clear().

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

cardclaws-mobile/app/(tabs)/_layout.tsx

@@ -1,18 +1,39 @@
+// Bottom tab bar for the standalone app:
+//   backpack → your cards (gallery)
+//   money bag → collectible cards
+//   robot → work-agent cards
+//   cog → settings
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
 
+type IconName = keyof typeof MaterialCommunityIcons.glyphMap;
+
+function tabIcon(name: IconName) {
+  return ({ color, size }: { color: string; size: number }) => (
+    <MaterialCommunityIcons name={name} size={size} color={color} />
+  );
+}
+
 export default function TabsLayout() {
   return (
     <Tabs
       screenOptions={{
-        headerStyle: { backgroundColor: "#0a0a0c" },
-        headerTintColor: "#f5f5f7",
-        tabBarStyle: { backgroundColor: "#0a0a0c", borderTopColor: "#1a1a1f" },
+        headerShown: false,
         tabBarActiveTintColor: "#ff3b30",
         tabBarInactiveTintColor: "#6b6b70",
+        tabBarStyle: {
+          backgroundColor: "#0e0e12",
+          borderTopColor: "#1c1c22",
+        },
       }}
     >
-      <Tabs.Screen name="cards" options={{ title: "Cards" }} />
-      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
+      <Tabs.Screen name="index" options={{ title: "Cards", tabBarIcon: tabIcon("bag-personal") }} />
+      <Tabs.Screen
+        name="collectibles"
+        options={{ title: "Collectibles", tabBarIcon: tabIcon("sack") }}
+      />
+      <Tabs.Screen name="agents" options={{ title: "Agents", tabBarIcon: tabIcon("robot") }} />
+      <Tabs.Screen name="settings" options={{ title: "Settings", tabBarIcon: tabIcon("cog") }} />
     </Tabs>
   );
 }