暗黑科技风

【整体风格】
纯黑底 + 霓虹发光 + 赛博朋克 / HUD 感

【适用应用】
游戏面板、加密货币、开发者工具、数据监控、极客社区

【配色】
主色：#00F0FF（电光青）
辅色：#BF00FF（霓虹紫）
警示/点缀：#FF003C（危险红）
成功色：#00FF88（矩阵绿）
背景：#0A0A0F（纯黑）
卡片填充：#12121A（微亮黑）
边框：rgba(0,240,255,0.15)
文字主：#EAEAEA
文字副：#555570
文字发光：#00F0FF

【布局】
页面容器：flex: 1, backgroundColor: '#0A0A0F'
内容滚动：<ScrollView> contentContainerStyle: paddingBottom: 100
栅格间距：marginBottom: 16
正文区域：paddingHorizontal: 16
响应式：useWindowDimensions()，大屏加大留白

【核心样式手法】
霓虹发光边框（核心）：
borderWidth: 1,
borderColor: 'rgba(0,240,255,0.3)',
shadowColor: '#00F0FF',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.4, shadowRadius: 12
→ 边框 + 同色扩散阴影 = 霓虹灯管效果

小圆角 / 切角感：
卡片 borderRadius: 8（锐利但不扎手）
按钮 borderRadius: 6
→ 硬朗直线几何

扫描线 / 网格装饰：
用极细 View 叠在内容上：
height: 1, backgroundColor: 'rgba(0,240,255,0.04)'
→ 配合 marginBottom: 4 循环排列，模拟 CRT 扫描线

渐变发光条：
<LinearGradient
colors={['#00F0FF','#BF00FF']}
start={{x:0,y:0}} end={{x:1,y:0}}
style={{ height: 2, borderRadius: 1 }}/>
→ 用于分隔线、进度条、顶部装饰

等宽字体排版：
数据数字 fontFamily: 'JetBrainsMono'（等宽）, fontSize: 28, fontWeight: '700'
标签 fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: '#555570'
标题 fontSize: 20, fontWeight: '700', color: '#EAEAEA'

【技术栈】
图标：@expo/vector-icons（Ionicons / MaterialCommunityIcons — 线性锐角风格）
渐变：expo-linear-gradient（霓虹渐变条、按钮发光、背景微渐变）
字体：expo-font 加载 JetBrains Mono（等宽数码感）

Inter（界面文字） 动画：react-native-reanimated（ 入场 translateY: 8→0 + opacity: 0→1, duration: 400, Easing.out(Easing.quad)； 数字跳变: withTiming 快速切换； 脉冲呼吸: withRepeat(withSequence( withTiming(0.6), withTiming(1)), -1, true) — 霓虹闪烁） 样式方案：StyleSheet.create
【UI 组件风格】
CyberHero（HUD 标题区）：
<View style={{
backgroundColor: '#12121A',
borderWidth: 1,
borderColor: 'rgba(0,240,255,0.15)',
borderRadius: 8,
marginHorizontal: 16, marginTop: 12,
padding: 24,
}}>
<Text style={{ color: '#555570', fontSize: 11,
letterSpacing: 3, textTransform: 'uppercase',
fontWeight: '600' }}>
SYSTEM STATUS

<Text style={{ color: '#EAEAEA', fontSize: 24,
fontWeight: '700', marginTop: 10 }}>
全网实时概览

CyberCard（数据卡片）：
<View style={{
backgroundColor: '#12121A',
borderRadius: 8,
borderWidth: 1,
borderColor: 'rgba(0,240,255,0.12)',
padding: 20,
shadowColor: '#00F0FF',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.08, shadowRadius: 16,
elevation: 2,
}}>
<Text style={{ fontSize: 11, letterSpacing: 2,
textTransform: 'uppercase', color: '#555570',
fontWeight: '600' }}>交易量
<Text style={{ fontSize: 30, fontFamily: 'JetBrainsMono',
fontWeight: '700', color: '#00F0FF', marginTop: 8 }}>
1,284,503

<Text style={{ fontSize: 13, color: '#00FF88',
fontWeight: '600', marginTop: 6 }}>
● LIVE  +3.2%

</View>

CyberButton：
// 霓虹发光按钮
<Pressable style={{
borderWidth: 1,
borderColor: '#00F0FF',
borderRadius: 6,
paddingVertical: 14, paddingHorizontal: 28,
shadowColor: '#00F0FF',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.4, shadowRadius: 12,
elevation: 4,
}}>
<Text style={{ color: '#00F0FF', fontSize: 13,
fontWeight: '700', letterSpacing: 2,
textTransform: 'uppercase', textAlign: 'center' }}>
连接钱包

</Pressable>
// 渐变实心按钮
<LinearGradient colors={['#00F0FF','#BF00FF']}
start={{x:0,y:0}} end={{x:1,y:0}}
style={{ borderRadius: 6,
paddingVertical: 14, paddingHorizontal: 28 }}>
<Text style={{ color: '#0A0A0F', fontSize: 13,
fontWeight: '800', letterSpacing: 2,
textTransform: 'uppercase', textAlign: 'center' }}>
立即交易

</LinearGradient>

CyberDivider：
<LinearGradient colors={['transparent','rgba(0,240,255,0.3)','transparent']}
start={{x:0,y:0}} end={{x:1,y:0}}
style={{ height: 1, marginVertical: 20,
marginHorizontal: 16 }} />

底部导航：
backgroundColor: '#0A0A0F',
borderTopWidth: 1,
borderTopColor: 'rgba(0,240,255,0.1)',
图标: 线性锐角风格
未选中: '#555570'、选中: '#00F0FF'
选中态发光：shadowColor: '#00F0FF', shadowOpacity: 0.5, shadowRadius: 6
文字: fontSize: 9, fontWeight: '700', letterSpacing: 1.5,
textTransform: 'uppercase'