# Airhub 设计规范 (视觉标准) 🎨

> [!IMPORTANT]
> 本文档严格区分 **App 全局规范** 与 **产品专属规范**。
> 开发人员 **必须** 在应用样式前确认当前页面所属的上下文。

---

## 1. App 全局规范 (科技主题) 🌐
**适用范围**: `index.html` (首页), `bluetooth.html` (蓝牙搜索), `wifi-config.html` (配网)
**核心风格**: 未来感、洁净、科技、蓝紫色调。

### 首要行动点 (Global Primary Action)
用途：主连接按钮、配网流程的“下一步”。
- **渐变色**: `linear-gradient(90deg, #22D3EE 0%, #3B82F6 35%, #6366F1 65%, #8B5CF6 100%)`
  *(青 -> 蓝 -> 靛 -> 紫)*
- **阴影**: `box-shadow: 0 0 15px rgba(34, 211, 238, 0.35)`

### 导航与头部
- **背景**: 透明或深度磨砂玻璃 (Glassmorphism)。
- **图标**: 细描边风格，冷灰色 `#6B7280`。

---

## 2. 产品专属规范：毛绒机芯 (Capybara) 🐹
**适用范围**: `device-control.html` (设备控), `products.html` (卡片), 故事生成弹窗。
**核心风格**: 温暖、毛绒感、舒适、杏褐色调。

> [!NOTE]
> 所有与控制“毛绒机芯”设备相关的页面/弹窗，必须强制遵循此主题。

### 首要行动点 (Capybara Context)
用途：“创作新故事”、“开始生成”、设备页内的主要交互。
- **渐变色**: `linear-gradient(135deg, #ECCFA8 0%, #C99672 100%)`
  *(浅杏色 -> 暖褐色)*
- **阴影**: `box-shadow: 0 0 15px rgba(201, 150, 114, 0.35), 0 0 30px rgba(201, 150, 114, 0.25)` (复合光晕)
- **边框**: 无 (依靠阴影和光感定义边界)

### 背景色系统
- **设备页底色**: `#FDF9F3` (暖沙色 Warm Sand) - **禁止使用纯白或渐变**。
- **卡片背景**: `#FFFFFF` (奶白色) 配柔和阴影。
- **选中高亮**: `#FFF7ED` (极淡的橙色叠底)。

### 字体颜色 (Capybara Context)
- **标题**: `#4B2404` (黑巧棕)。
- **正文**: `#4B5563` (暖灰)。

### 选中交互模式 (Apple Style) 🍏
- **操作方式**: 直接点击卡片。
- **指示器**: **右上角复选徽章 (Checkmark Badge)**。
  - 样式：杏褐色渐变实心圆 + 白色对钩。
- **状态**: 摒弃“已选列表栏”，视觉反馈完全集中在卡片本体上。

---

## 3. 开发执行规则 📏
1.  **确认上下文**: 拿到设计稿先判断：这是 App 公共页面（用科技蓝）还是某个具体产品的页面（用产品色）？
2.  **按钮混用禁令**: 
    -   公共页 -> 必须用科技渐变 (Tech Gradient)。
    -   卡皮巴拉页 -> 必须用毛绒渐变 (Plush Gradient)。
    -   一致性: 严禁混搭。卡皮巴拉页面里绝不应该出现“科技蓝”的按钮，除非是系统级的报错弹窗。

---

### 2.1 设置页规范 (Settings Page - Overlay) ⚙️
**交互模式**: 全屏覆盖层 (Full-screen Overlay)，从底部滑入。

#### 核心布局 (Layout & Metrics)
- **容器层级**: `z-index: 2000` (覆盖此时的主页)。
- **背景**: 暖色渐变 `linear-gradient(135deg, #FEF5EC 0%, #FDF2F8 100%)`。
- **进出动画**: `slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)`。

#### 头部规范 (Header)
为了与主页保持视觉一致性，头部必须遵循以下严格计算：
- **定位**: `position: absolute` (悬浮于内容之上)。
- **高度**: 自然高度 (Auto)，不固定。
- **上边距 (Padding-Top)**: `calc(env(safe-area-inset-top, 20px) + 48px)` —— **严格对齐首页**。
- **底边距 (Padding-Bottom)**: `16px`。
- **左右边距**: `20px`。

#### 内容区域 (Content)
- **遮罩效果**: 顶部使用渐变遮罩 (Gradient Mask) 实现内容在头部下方平滑消失，而非简单的背景色遮挡。
    - `mask-image: linear-gradient(to bottom, transparent 0, transparent 80px, black 110px, ...)`
- **上边距**: `calc(env(safe-area-inset-top) + 100px)` (确保内容不被头部遮挡)。

#### 弹窗规范 (Modals) 🚨
设置页内的二级操作（改名、解绑）必须使用以下弹窗样式：
- **层级**: `z-index: 2200` (必须高于设置页)。
- **背景**: `rgba(255, 255, 255, 0.95)` (高透明度)。
- **动画**: 必须添加 `forwards` 属性防止闪退。
    - `animation: popIn 0.3s ... forwards`
- **交互**: 
    - 必须设置 `pointer-events: auto`。
    - 必须设置 `position: relative` 和独立 `z-index` 给内容元素。
- **点击阻断**: item 点击事件必须加 `event.stopPropagation()` 防止冒泡。

#### 组件样式
- **开关 (Toggle)**: 激活色 `#FFB088` (暖橙)。
- **滑动条 (Slider)**: 纯白滑块 + 投影，轨道背景 `#E5E5EA`。