极光柔和

【整体风格】
深空暗底 + 极光渐变辉光 + 大圆角毛玻璃 + 呼吸感留白

【适用应用】
冥想正念、助眠白噪音、呼吸训练、情绪日记、星座占卜

【配色】
主色：#7B6EF6（极光紫）
辅色：#5CE0D8（极光青）
点缀色：#F2A7E0（极光粉）
背景：#0D1026（深空蓝黑）
卡片：rgba(255,255,255,0.06)（毛玻璃白）
次级背景块：#161A35（微亮靛蓝）
文字主：#EEEAF6（冷淡薰衣草白）
文字次：#8E8BA3（雾灰紫）

【布局】
页面容器：flex: 1，backgroundColor: '#0D1026'
内容滚动：`<ScrollView>`
contentContainerStyle: paddingHorizontal: 24, paddingBottom: 120
栅格间距：marginBottom: 24
居中聚焦布局：alignItems: 'center'，
核心内容区 maxWidth: 480（平板/Web 居中收窄）
纵向节奏：大模块间距 48，小模块间距 16，
形成"呼吸感"疏密交替
响应式：useWindowDimensions()

【核心样式手法】
大圆角胶囊感：
borderRadius: 28,
→ 所有卡片、按钮统一大弧度，营造柔软安全感

极光辉光阴影（关键特征）：
iOS: shadowColor: '#7B6EF6',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.25, shadowRadius: 24
Android: elevation: 6
→ 用主色/辅色作 shadowColor，产生"自发光"效果；
不同组件用不同色: 紫卡用紫光, 青按钮用青光

毛玻璃卡片：
`<BlurView intensity={40} tint="dark">`
内嵌 `<View style={{`
backgroundColor: 'rgba(255,255,255,0.06)',
borderRadius: 28,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.08)',
padding: 24,
`}}>`
Web 端降级为纯半透明背景 + backdropFilter: 'blur(20px)'

极光渐变装饰带：
`<LinearGradient`
colors={['#7B6EF6','#5CE0D8','#F2A7E0']}
start={{x:0,y:0}} end={{x:1,y:1}}>
用于顶部背景弧、进度条、分割线等装饰；
叠加 opacity: 0.15 做大面积氛围底

光点散布装饰：
多个 `<View>` 绝对定位，borderRadius: 9999,
backgroundColor: 'rgba(123,110,246,0.12)'
宽高不等（80~200），配合 blur 模拟星云光斑

细线描边图标：
@expo/vector-icons 的 Feather 图标集
纯色 #EEEAF6 或极光渐变色；
配合发光圆底座:
`<View style={{ width: 52, height: 52, borderRadius: 26,`
backgroundColor: 'rgba(123,110,246,0.12)',
alignItems: 'center', justifyContent: 'center' }}>

微弱分割线：
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: 'rgba(255,255,255,0.06)'

【技术栈】
图标：@expo/vector-icons
  - 通用图标：Feather（细线描边风格）
  - 情绪图标：MaterialCommunityIcons（emoticon-* 系列）
渐变：expo-linear-gradient
模糊：expo-blur（BlurView）
图片：expo-image（暗调风景/星空图 WebP 优化）
字体：expo-font 加载轻量圆体: Inter、Nunito，
标题用 Nunito-Bold，正文用 Inter-Regular
动画：react-native-reanimated
（呼吸缩放 loop、光晕脉冲、页面 FadeInUp）
SVG：react-native-svg（弧形顶部裁切、圆环进度）
样式方案：StyleSheet.create
触觉：expo-haptics（按钮点击轻触觉 Haptics.impactAsync）

【UI 组件风格】
GlassCard（毛玻璃卡片）：
```
<View style={{
  backgroundColor: 'rgba(255,255,255,0.06)',
  borderRadius: 28,
  borderWidth: 1,
  borderColor: 'rgba(255,255,255,0.08)',
  padding: 24,
  shadowColor: '#7B6EF6',
  shadowOffset: { width: 0, height: 0 },
  shadowOpacity: 0.2,
  shadowRadius: 20,
  elevation: 6,
}}>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <View style={{ width: 48, height: 48, borderRadius: 24,
      backgroundColor: 'rgba(92,224,216,0.12)',
      alignItems: 'center', justifyContent: 'center' }}>
      <Feather name="moon" size={22} color="#5CE0D8" />
    </View>
    <View style={{ marginLeft: 16, flex: 1 }}>
      <Text style={{ fontSize: 17, fontWeight: '700',
        color: '#EEEAF6' }}>深度睡眠</Text>
      <Text style={{ fontSize: 13, color: '#8E8BA3',
        marginTop: 4 }}>45 分钟 · 雨声</Text>
    </View>
  </View>
</View>
```

BreathCircle（呼吸引导圆环）：
```
<View style={{ width: 220, height: 220,
  alignItems: 'center', justifyContent: 'center' }}>
  {/* 外层辉光 */}
  <View style={{ position: 'absolute', width: 220, height: 220,
    borderRadius: 110,
    backgroundColor: 'rgba(123,110,246,0.08)',
  }} />
  {/* SVG 圆环进度 */}
  <Svg width={200} height={200}>
    <Circle cx={100} cy={100} r={90}
      stroke="rgba(255,255,255,0.06)"
      strokeWidth={4} fill="none" />
    <Circle cx={100} cy={100} r={90}
      stroke="url(#auroraGrad)"
      strokeWidth={4} fill="none"
      strokeLinecap="round"
      strokeDasharray={565}
      strokeDashoffset={141} />
  </Svg>
  <Text style={{ position: 'absolute', fontSize: 40,
    fontWeight: '300', color: '#EEEAF6' }}>4:00</Text>
</View>
```

AuroraButton（极光按钮）：
```
<LinearGradient
  colors={['#7B6EF6', '#5CE0D8']}
  start={{x:0, y:0}} end={{x:1, y:0}}
  style={{
    borderRadius: 9999,
    paddingVertical: 18,
    paddingHorizontal: 40,
    shadowColor: '#7B6EF6',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.35,
    shadowRadius: 16,
    elevation: 8,
  }}>
  <Text style={{ color: '#FFFFFF', fontWeight: '700',
    fontSize: 16, textAlign: 'center',
    letterSpacing: 0.5 }}>
    开始冥想
  </Text>
</LinearGradient>
```

GhostButton（幽灵次级按钮）：
```
<View style={{
  borderRadius: 9999,
  borderWidth: 1,
  borderColor: 'rgba(123,110,246,0.3)',
  paddingVertical: 14,
  paddingHorizontal: 32,
  backgroundColor: 'rgba(123,110,246,0.06)',
}}>
  <Text style={{ color: '#7B6EF6', fontWeight: '600',
    fontSize: 15, textAlign: 'center' }}>
    稍后提醒
  </Text>
</View>
```

MoodChip（情绪标签组）：
```
<View style={{
  backgroundColor: 'rgba(242,167,224,0.1)',
  borderRadius: 9999,
  paddingHorizontal: 16,
  paddingVertical: 8,
  borderWidth: 1,
  borderColor: 'rgba(242,167,224,0.15)',
  flexDirection: 'row',
  alignItems: 'center', gap: 6,
}}>
  <MaterialCommunityIcons
    name="emoticon-happy-outline"
    size={18}
    color="#F2A7E0"
  />
  <Text style={{ color: '#F2A7E0', fontSize: 13,
    fontWeight: '600' }}>平静</Text>
</View>
```

AuroraHeader（极光弧形顶部）：
```
<View style={{ height: 280, overflow: 'hidden' }}>
  <LinearGradient
    colors={['rgba(123,110,246,0.3)',
             'rgba(92,224,216,0.15)',
             'transparent']}
    style={{ position: 'absolute', width: '100%',
      height: '100%' }} />
  {/* 底部弧形裁切 */}
  <Svg style={{ position:'absolute', bottom: 0 }}
    width="100%" height={40} viewBox="0 0 400 40">
    <Path d="M0,40 Q200,-10 400,40 Z"
      fill="#0D1026" />
  </Svg>
  <Text style={{ marginTop: 80, textAlign: 'center',
    fontSize: 28, fontWeight: '300',
    color: '#EEEAF6', letterSpacing: 1 }}>
    今晚，放下一切
  </Text>
</View>
```

SoundCard（音景选择卡片）：
```
<View style={{
  backgroundColor: 'rgba(255,255,255,0.04)',
  borderRadius: 24, overflow: 'hidden',
  borderWidth: 1,
  borderColor: 'rgba(255,255,255,0.06)',
}}>
  <Image source={rainImg}
    style={{ width: '100%', height: 140, opacity: 0.6 }} />
  <View style={{ padding: 16 }}>
    <Text style={{ fontFamily: 'Nunito-Bold',
      fontSize: 17, color: '#EEEAF6' }}>夜雨森林</Text>
    <Text style={{ fontSize: 13, color: '#8E8BA3',
      marginTop: 6, lineHeight: 20 }}>
      轻柔雨声与远处的雷鸣
    </Text>
  </View>
</View>
```

底部导航：
```
backgroundColor: 'rgba(13,16,38,0.92)',
borderTopWidth: 0,
// 毛玻璃效果用 BlurView 包裹 TabBar
选中色: #7B6EF6、未选中色: #4A4860
选中指示: 图标下方 4×4 圆点
<View style={{ width: 4, height: 4, borderRadius: 2,
  backgroundColor: '#7B6EF6', marginTop: 4,
  shadowColor: '#7B6EF6', shadowOpacity: 0.6,
  shadowRadius: 4, shadowOffset: {width:0,height:0},
}} />
```