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/Badge.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { View, Text, StyleSheet, ViewStyle } from 'react-native';
+import { AppColors, KurdistanColors } from '../theme/colors';
+
+interface BadgeProps {
+  label: string;
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+  size?: 'small' | 'medium' | 'large';
+  style?: ViewStyle;
+  icon?: React.ReactNode;
+}
+
+/**
+ * Badge Component
+ * For tiki roles, status indicators, labels
+ */
+export const Badge: React.FC<BadgeProps> = ({
+  label,
+  variant = 'primary',
+  size = 'medium',
+  style,
+  icon,
+}) => {
+  return (
+    <View style={[styles.badge, styles[variant], styles[`${size}Size`], style]}>
+      {icon}
+      <Text style={[styles.text, styles[`${variant}Text`], styles[`${size}Text`]]}>
+        {label}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 20,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    gap: 4,
+  },
+  // Variants
+  primary: {
+    backgroundColor: `${KurdistanColors.kesk}15`,
+  },
+  secondary: {
+    backgroundColor: `${KurdistanColors.zer}15`,
+  },
+  success: {
+    backgroundColor: '#10B98115',
+  },
+  warning: {
+    backgroundColor: `${KurdistanColors.zer}20`,
+  },
+  danger: {
+    backgroundColor: `${KurdistanColors.sor}15`,
+  },
+  info: {
+    backgroundColor: '#3B82F615',
+  },
+  // Sizes
+  smallSize: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  mediumSize: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  largeSize: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  // Text styles
+  text: {
+    fontWeight: '600',
+  },
+  primaryText: {
+    color: KurdistanColors.kesk,
+  },
+  secondaryText: {
+    color: '#855D00',
+  },
+  successText: {
+    color: '#10B981',
+  },
+  warningText: {
+    color: '#D97706',
+  },
+  dangerText: {
+    color: KurdistanColors.sor,
+  },
+  infoText: {
+    color: '#3B82F6',
+  },
+  smallText: {
+    fontSize: 11,
+  },
+  mediumText: {
+    fontSize: 13,
+  },
+  largeText: {
+    fontSize: 15,
+  },
+});