Add world-class mobile components and Staking/Governance screens

PHASE 1 & 2 of mobile app transformation completed.

New Modern Component Library:
- Card: Elevated, outlined, filled variants with press states
- Button: 5 variants (primary, secondary, outline, ghost, danger) with Kurdistan colors
- Input: Floating labels, validation, icons, focus states
- BottomSheet: Swipe-to-dismiss modal with smooth animations
- LoadingSkeleton: Shimmer loading states (Skeleton, CardSkeleton, ListItemSkeleton)
- Badge: Status indicators and labels for Tiki roles

New Screens:
1. StakingScreen (504 lines):
   - View staked amount and rewards
   - Live staking data from blockchain
   - Stake/Unstake with bottom sheets
   - Tiki score breakdown
   - Monthly PEZ rewards calculation
   - APY estimation
   - Unbonding status
   - Inspired by Polkadot.js and Argent

2. GovernanceScreen (447 lines):
   - Active proposals list
   - Vote FOR/AGAINST proposals
   - Real-time voting statistics
   - Vote progress visualization
   - Proposal details bottom sheet
   - Democratic participation interface
   - Inspired by modern DAO platforms

Design Principles:
✅ Kurdistan colors (Kesk, Sor, Zer) throughout
✅ Material Design 3 inspired
✅ Smooth animations and transitions
✅ Clean, modern UI
✅ Accessibility-first
✅ RTL support ready

All components use:
- Shared theme from @pezkuwi/theme
- Shared blockchain logic from @pezkuwi/lib
- TypeScript with full type safety
- React Native best practices

Next: DEX/Swap, NFT Gallery, Transaction History

mobile/src/components/Card.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle, Pressable } from 'react-native';
+import { AppColors } from '../theme/colors';
+
+interface CardProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  onPress?: () => void;
+  variant?: 'elevated' | 'outlined' | 'filled';
+}
+
+/**
+ * Modern Card Component
+ * Inspired by Material Design 3 and Kurdistan aesthetics
+ */
+export const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  onPress,
+  variant = 'elevated'
+}) => {
+  const cardStyle = [
+    styles.card,
+    variant === 'elevated' && styles.elevated,
+    variant === 'outlined' && styles.outlined,
+    variant === 'filled' && styles.filled,
+    style,
+  ];
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [
+          ...cardStyle,
+          pressed && styles.pressed,
+        ]}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return <View style={cardStyle}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 16,
+    padding: 16,
+    backgroundColor: AppColors.surface,
+  },
+  elevated: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  outlined: {
+    borderWidth: 1,
+    borderColor: AppColors.border,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  filled: {
+    backgroundColor: AppColors.background,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  pressed: {
+    opacity: 0.7,
+    transform: [{ scale: 0.98 }],
+  },
+});