柔和卡片

【整体风格】
新拟态双层阴影 + 暖灰白统一底色 + 大圆角胶囊感 + 渐变按钮

【适用应用】
AI 工具、生活服务、SaaS、在线教育、习惯养成、健康管理

【配色】
主色：#6C63FF（薰衣草紫）
主色渐变终点：#896BFF
辅色：#FF6584（珊瑚粉）
背景/卡片：#F0F0F3（暖灰白，卡片与背景同色靠阴影区分）
凹陷面：#E8E8EB
高光阴影：#FFFFFF
暗部阴影：#D1D9E6
文字主：#2D3436
文字次：#636E72
占位符：#B2BEC3
成功色：#00B894
警告色：#FDCB6E
错误色：#FF6B6B

【布局】
页面容器：flex:1, backgroundColor:'#F0F0F3'
ScrollView contentContainerStyle：
  paddingHorizontal: 24
  paddingTop: 16
  paddingBottom: 120（避开底部导航）
卡片间距：marginBottom: 16
卡片内边距：padding: 20
区块标题行：marginTop: 20, marginBottom: 12
双列：容器 flexDirection:'row', flexWrap:'wrap'
      子项 width:'47%', marginHorizontal:'1.5%'

【核心样式手法】
★ 凸起卡片必须两层嵌套 View 实现双阴影 ★
```
<View style={styles.shadowDark}>
  <View style={styles.shadowLight}>
    {/* 内容 */}
  </View>
</View>
```
shadowDark: {
  shadowColor: '#D1D9E6',
  shadowOffset: { width: 6, height: 6 },
  shadowOpacity: 0.7,
  shadowRadius: 8,
  borderRadius: 24,
  marginBottom: 16,
}
shadowLight: {
  shadowColor: '#FFFFFF',
  shadowOffset: { width: -6, height: -6 },
  shadowOpacity: 0.9,
  shadowRadius: 8,
  backgroundColor: '#F0F0F3',
  borderRadius: 24,
  padding: 20,
}
Android 降级：
  elevation: 6,
  backgroundColor: '#F0F0F3',
  borderRadius: 24,
  borderWidth: 0.5,
  borderColor: 'rgba(255,255,255,0.5)'

★ 凹陷效果（输入框/搜索栏/内嵌区域）★
{
  backgroundColor: '#E8E8EB',
  borderRadius: 16,
  padding: 16,
  borderWidth: 1,
  borderColor: 'rgba(255,255,255,0.6)',
}

★ 绝对禁止 ★
- ❌ 卡片用白色 #FFFFFF 背景
- ❌ 用 border 描边区分层级
- ❌ 选中态用矩形边框包裹
- ❌ 单层 View 做双阴影（iOS 只认一组 shadow）
- ❌ 渐变底色 opacity 超过 0.08

【文字规范】
页面大标题：fontSize:28, fontWeight:'800', color:'#2D3436'
页面副标题：fontSize:14, color:'#636E72'
区块标题：fontSize:18, fontWeight:'700', color:'#2D3436'
卡片标题：fontSize:16, fontWeight:'700', color:'#2D3436'
卡片描述：fontSize:13, color:'#636E72'
数据大字：fontSize:28, fontWeight:'800', color:'#6C63FF'
数据小字：fontSize:14, fontWeight:'700', color:'#6C63FF'
按钮文字：fontSize:16, fontWeight:'700', color:'#FFFFFF'
标签文字：fontSize:13, fontWeight:'600', color:'#6C63FF'
导航文字：fontSize:10, fontWeight:'600'
  未选中 #B2BEC3 / 选中 #6C63FF

【UI 组件风格】
SoftCard（凸起卡片）：
  双层阴影嵌套（见核心样式手法），所有卡片统一使用

图标容器：
  width:48, height:48, borderRadius:24,
  backgroundColor:'rgba(108,99,255,0.12)',
  justifyContent:'center', alignItems:'center'
  图标 size:22, color:'#6C63FF'
  辅色场景：bg rgba(255,101,132,0.12), color:#FF6584
  成功场景：bg rgba(0,184,148,0.12), color:#00B894

横向信息卡（最常用布局，高度≤90）：
适用：习惯条目/记录条目/日程条目/健康指标条目
```
<SoftCard>
  <View style={{ flexDirection:'row', alignItems:'center' }}>
    [左：图标区 48x48]
    <View style={{ flex:1, marginLeft:14 }}>
      <Text 卡片标题>名称</Text>
      <Text 卡片描述>副信息</Text>
    </View>
    [右：操作区（按钮/数据/进度环/箭头）]
  </View>
</SoftCard>
```

数据展示卡（左文字右图表）：
适用：今日总览/周报摘要/健康评分
```
<SoftCard>
  <View style={{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  }}>
    <View>
      <Text 卡片标题>标题</Text>
      <Text 卡片描述>描述</Text>
    </View>
    [右侧：进度环size:100 / 数据大字 / 图表]
  </View>
</SoftCard>
```

进度环 ProgressRing：
  react-native-svg <Circle>
  底圈：stroke:'#E8E8EB', strokeWidth:8
  进度圈：stroke:'#6C63FF', strokeWidth:8,
    strokeLinecap:'round', rotation:-90
  中心：绝对定位居中显示数字
  大环 size:100 / 小环 size:48

主按钮 PrimaryButton：
```
<LinearGradient colors={['#6C63FF','#896BFF']}
  style={{ borderRadius:9999, paddingVertical:16,
    paddingHorizontal:32, alignItems:'center' }}>
  <Text color:'#FFF' fontWeight:'700' fontSize:16 />
</LinearGradient>
```

标签胶囊 Tag：
  backgroundColor:'rgba(108,99,255,0.10)',
  borderRadius:9999,
  paddingHorizontal:14, paddingVertical:6
  文字 color:'#6C63FF', fontWeight:'600', fontSize:13
  辅色标签：bg rgba(255,101,132,0.10), color:#FF6584
  成功标签：bg rgba(0,184,148,0.10), color:#00B894

操作按钮（打卡/勾选/切换）：
  未激活：width:40, height:40, borderRadius:20,
    backgroundColor:'#E8E8EB',
    borderWidth:1, borderColor:'rgba(255,255,255,0.6)'
    图标 color:'#B2BEC3'
  已激活：同尺寸，
    <LinearGradient colors={['#6C63FF','#896BFF']}>
    图标 color:'#FFFFFF'

凹陷输入框 SoftInput：
  外层凹陷样式（见核心样式手法）
  <TextInput placeholderTextColor="#B2BEC3"
    style={{ fontSize:15, color:'#2D3436' }}/>

区块标题行 SectionHeader：
  flexDirection:'row',
  justifyContent:'space-between',
  alignItems:'center'
  左：区块标题文字
  右：操作文字(color:#6C63FF) + 图标（可选）

底部导航：
```
容器：
  position:'absolute', bottom:0, left:0, right:0,
  backgroundColor:'#F0F0F3',
  borderTopLeftRadius:28, borderTopRightRadius:28,
  flexDirection:'row', justifyContent:'space-around',
  alignItems:'flex-end',
  paddingTop:12, paddingBottom: safeAreaBottom + 8,
  shadowColor:'#D1D9E6',
  shadowOffset:{ width:0, height:-4 },
  shadowOpacity:0.5, shadowRadius:8
Tab项：图标 size:22 + 文字 fontSize:10
  未选中：color '#B2BEC3'
  选中：color '#6C63FF'，底部加小圆点
    (width:5, height:5, borderRadius:2.5,
     backgroundColor:'#6C63FF', marginTop:3)
  ★ 禁止用边框表示选中 ★
中间FAB：
  <View style={{ alignItems:'center', marginTop:-30 }}>
    <LinearGradient colors={['#6C63FF','#896BFF']}
      style={{
        width:60, height:60, borderRadius:30,
        justifyContent:'center', alignItems:'center',
        shadowColor:'#6C63FF',
        shadowOffset:{ width:0, height:4 },
        shadowOpacity:0.35, shadowRadius:8,
      }}>
      <Icon name="plus" size:26 color="#FFF"/>
    </LinearGradient>
  </View>
```

【动效】
按压反馈：所有可点击元素
  scale: 1 → 0.97，duration:100ms
完成/激活：图标
  scale: 0 → 1.15 → 1.0，duration:300ms

【技术栈】
图标：@expo/vector-icons（Feather 图标集）
渐变：expo-linear-gradient
SVG：react-native-svg（进度环/图表）
动画：react-native-reanimated
安全区：react-native-safe-area-context
样式：StyleSheet.create

【自查清单】
□ 双层 View 嵌套实现 iOS 双阴影？
□ 卡片背景 #F0F0F3 不是白色？
□ 底部导航有圆角28 + 向上阴影？
□ FAB在导航栏中间 marginTop:-30 上浮？
□ 选中Tab无边框，仅颜色+小圆点？
□ 信息卡紧凑横向布局，高度≤90？
□ 图标背景统一用 rgba 淡色？
□ 无任何 border 描边分层？
□ 页面底部留 paddingBottom:120？