diff --git a/.agents/skills/amap-jsapi-skill/SKILL.md b/.agents/skills/amap-jsapi-skill/SKILL.md
index 1be5e6d..1a58b88 100644
--- a/.agents/skills/amap-jsapi-skill/SKILL.md
+++ b/.agents/skills/amap-jsapi-skill/SKILL.md
@@ -1,14 +1,16 @@
 ---
 name: amap-jsapi-skill
+display_name: Gaode Map JSAPI - 高德官方 JavaScript SDK Skill
 description: 高德地图 JSAPI v2.0 (WebGL) 开发技能。涵盖地图生命周期管理、强制安全配置、3D 视图控制、覆盖物绘制及 LBS 服务集成。
 license: MIT
-version: 1.1.0
+version: 1.1.1
 homepage: https://lbs.amap.com
 metadata:
   openclaw:
     requires:
-      bins: ["node"]
-      env: AMAP_JSAPI_KEY
+      env:
+        - AMAP_JSAPI_KEY
+        - AMAP_SECURITY_JS_CODE
     primaryEnv: AMAP_JSAPI_KEY
 ---
 
@@ -22,10 +24,13 @@ metadata:
 ```
 ### 2. 安全密钥配置 (强制)
 **重要**：自 v2.0 起，必须在加载地图前配置安全密钥，否则无法通过鉴权。详情及后端代理示例请参考 [安全策略](references/security.md)。
+
+> **安全提示**：安全密钥属于敏感凭据，请通过环境变量 `AMAP_SECURITY_JS_CODE` 传入，禁止在代码中硬编码。生产环境务必使用 `serviceHost` 代理方式，避免前端暴露密钥。
+
 ```javascript
 // 在调用 AMapLoader.load 前执行
 window._AMapSecurityConfig = {
-  securityJsCode: '您的安全密钥', // 开发环境：明文设置
+  securityJsCode: process.env.AMAP_SECURITY_JS_CODE, // 通过环境变量安全获取
   // serviceHost: 'https://your-proxy-domain/_AMapService', // 生产环境：建议使用代理转发
 };
 ```
@@ -37,7 +42,7 @@ AMapLoader.load({
     version: '2.0',           // 指定版本
     plugins: ['AMap.Scale', 'AMap.ToolBar'] // 预加载插件
 }).then((AMap) => {
-    // 埋点：设置应用标识，用于统计 skill 调用来源
+    // 可选：设置应用标识，用于 API 调用来源统计
     AMap.getConfig().appname = 'amap-jsapi-skill';
 
     const map = new AMap.Map('container', {
@@ -137,26 +142,12 @@ Geolocation / GeolocationCallBack / GeolocationResult / CitySearch
 ### [Common Library](references/api/common.md)
 GeometryUtil / DomUtil / Browser / Util
 
-## 使用 skills 必须遵循的铁律
+## 使用 skills 必须遵循的规范
 1. **校验生成代码可用性**：生成代码后必须进行自我校验，确保代码语法正确、逻辑完整且可以正常运行，禁止输出未经验证的代码。
 2. **本地文件放置规范**：所有生成的项目文件必须放置在 openclaw workspace 目录下的 `amap-jsapi/` 文件夹中。文件名统一使用 kebab-case 命名（如 `map-init.html`、`layers-official.html`）。
-3. ## 埋点统计（强制）：每次生成网站代码前，必须且只发送一次埋点统计请求，用于记录 skill 调用行为。请求规则如下：
-   - **请求地址**：`https://restapi.amap.com/v3/log/init`
-   - **固定参数**：`eventId=skill.call`、`s=rsv3`、`product=skill_openclaw`、`platform=JS`、`label=generate-code`、`value=call`
-   - **完整示例**：
-     ```
-     https://restapi.amap.com/v3/log/init?eventId=skill.call&s=rsv3&product=skill_openclaw&platform=JS&label=generate-code&value=call
-     ```
-   - **发送方式**：在生成代码前，使用 bash 的 `curl` 命令发送 GET 请求，静默执行不影响代码生成流程。
-   - **命令模板**：
-     ```bash
-     # 埋点统计 - 代码生成前发送
-     curl -s "https://restapi.amap.com/v3/log/init?eventId=skill.call&s=rsv3&product=skill_openclaw&platform=JS&label=generate-code&value=call"
-     ```
-4. ## appname 埋点标识（强制）：每次生成地图初始化代码时，必须在 `AMapLoader.load().then()` 回调的第一行设置应用标识。规则如下：
-   - **设置位置**：`AMapLoader.load({...}).then((AMap) => {` 回调内部的第一行
+3. **appname 应用标识（推荐）**：建议在生成地图初始化代码时，在 `AMapLoader.load().then()` 回调中设置应用标识，用于 API 调用来源统计。规则如下：
+   - **设置位置**：`AMapLoader.load({...}).then((AMap) => {` 回调内部，`new AMap.Map()` 之前
    - **设置方式**：`AMap.getConfig().appname = 'amap-jsapi-skill';`
-   - **执行时机**：必须在创建 `new AMap.Map()` 之前执行
    - **代码模板**：
      ```javascript
      AMapLoader.load({
@@ -164,13 +155,13 @@ GeometryUtil / DomUtil / Browser / Util
        version: '2.0',
        plugins: [...]
      }).then((AMap) => {
-       // 强制：设置应用标识（必须在 new AMap.Map 之前）
+       // 可选：设置应用标识，用于 API 调用来源统计
        AMap.getConfig().appname = 'amap-jsapi-skill';
 
        const map = new AMap.Map('container', { ... });
      });
      ```
-   - **注意事项**：此设置用于标识 API 调用来源，禁止省略或修改 appname 的值。
+   - **说明**：此设置用于标识 API 调用来源，便于统计分析。开发者可根据需要决定是否保留。
 ## 如何使用
 1. 如果有相近的“场景示例”那么去阅读场景示例，再阅读场景示例中的涉及的类的api文档。再结合描述/场景示例/api 去完成任务。
 2. 在最终的完成任务前，检查用的api用法是否符合文档。
diff --git a/.agents/skills/amap-jsapi-skill/_meta.json b/.agents/skills/amap-jsapi-skill/_meta.json
new file mode 100644
index 0000000..04ea8fc
--- /dev/null
+++ b/.agents/skills/amap-jsapi-skill/_meta.json
@@ -0,0 +1,6 @@
+{
+  "ownerId": "kn73td2wbekk991h1j29rjzba982bv3e",
+  "slug": "amap-jsapi-skill",
+  "version": "1.0.8",
+  "publishedAt": 1776393649958
+}
diff --git a/.agents/skills/amap-jsapi-skill/references/events.md b/.agents/skills/amap-jsapi-skill/references/events.md
index aea0edd..2f94279 100644
--- a/.agents/skills/amap-jsapi-skill/references/events.md
+++ b/.agents/skills/amap-jsapi-skill/references/events.md
@@ -175,4 +175,4 @@ map.on('click', function() {
 3. **内存管理**: 组件销毁前解绑事件，防止内存泄漏
 4. **事件冒泡**: 覆盖物事件会冒泡到地图，必要时阻止冒泡
 5. **触摸事件**: 移动端需要监听 touch 系列事件
-6. **异步加载**: complete 事件在地图资源加载完成后触发
\ No newline at end of file
+6. **异步加载**: complete 事件在地图资源加载完成后触发
diff --git a/.agents/skills/amap-jsapi-skill/references/info-window.md b/.agents/skills/amap-jsapi-skill/references/info-window.md
index 0019c70..281d589 100644
--- a/.agents/skills/amap-jsapi-skill/references/info-window.md
+++ b/.agents/skills/amap-jsapi-skill/references/info-window.md
@@ -303,4 +303,4 @@ map.clearInfoWindow();
 2. **自定义样式**: `isCustom: true` 时不显示默认的边框和关闭按钮
 3. **偏移量**: 根据标记图标大小调整 offset，避免遮挡
 4. **自动调整**: `autoMove: true` 可以自动调整地图视野使窗体可见
-5. **事件冒泡**: 窗体内的点击事件需要阻止冒泡，否则可能触发地图点击事件
\ No newline at end of file
+5. **事件冒泡**: 窗体内的点击事件需要阻止冒泡，否则可能触发地图点击事件
diff --git a/.agents/skills/amap-jsapi-skill/references/map-init.md b/.agents/skills/amap-jsapi-skill/references/map-init.md
index e27087f..e9a7a67 100644
--- a/.agents/skills/amap-jsapi-skill/references/map-init.md
+++ b/.agents/skills/amap-jsapi-skill/references/map-init.md
@@ -244,4 +244,4 @@ export default function MapComponent() {
 
   return <div id="map-container" style={{ width: '100%', height: '500px' }} />;
 }
-```
\ No newline at end of file
+```
diff --git a/.agents/skills/amap-jsapi-skill/references/security.md b/.agents/skills/amap-jsapi-skill/references/security.md
index 202920c..513ebda 100644
--- a/.agents/skills/amap-jsapi-skill/references/security.md
+++ b/.agents/skills/amap-jsapi-skill/references/security.md
@@ -11,14 +11,16 @@
 
 ## 配置方式
 
-### 方式一：明文设置（仅限开发环境）
+### 方式一：通过环境变量设置（开发环境推荐）
 
-在开发阶段，为方便调试，可以直接在前端代码中设置 `securityJsCode`。
+在开发阶段，建议通过环境变量 `AMAP_SECURITY_JS_CODE` 传入安全密钥，避免在代码中硬编码敏感信息。
 **注意：请确保在调用 `AMapLoader.load` 之前设置。**
 
+> **安全警告**：禁止在代码中硬编码安全密钥，也不要将密钥提交到版本控制系统。请始终通过环境变量或后端代理的方式安全传递密钥。
+
 ```javascript
 window._AMapSecurityConfig = {
-  securityJsCode: '您的安全密钥', // 必填，从高德控制台申请
+  securityJsCode: process.env.AMAP_SECURITY_JS_CODE, // 通过环境变量安全获取
 };
 ```
 
diff --git a/.agents/skills/amap-jsapi-skill/skill-card.md b/.agents/skills/amap-jsapi-skill/skill-card.md
new file mode 100644
index 0000000..0f89609
--- /dev/null
+++ b/.agents/skills/amap-jsapi-skill/skill-card.md
@@ -0,0 +1,52 @@
+## Description: <br>
+高德地图 JSAPI v2.0 (WebGL) 开发技能，涵盖地图生命周期管理、强制安全配置、3D 视图控制、覆盖物绘制及 LBS 服务集成。 <br>
+
+This skill is ready for commercial/non-commercial use. <br>
+
+## Publisher: <br>
+[lbs-amap](https://clawhub.ai/user/lbs-amap) <br>
+
+### License/Terms of Use: <br>
+MIT-0 <br>
+
+
+## Use Case: <br>
+Developers and engineers use this skill to generate and verify Gaode Maps JSAPI v2.0 integrations, including map initialization, overlays, view controls, geocoding, routing, search, events, and security configuration. <br>
+
+### Deployment Geography for Use: <br>
+Global <br>
+
+## Known Risks and Mitigations: <br>
+Risk: AMap keys and AMAP_SECURITY_JS_CODE are sensitive credentials that can be exposed if generated code hardcodes them in frontend source or version control. <br>
+Mitigation: Use environment variables for development, use a backend serviceHost proxy in production, restrict key permissions, monitor usage, and rotate keys when exposure is suspected. <br>
+Risk: Geolocation, reverse geocoding, routing, and POI workflows can process user location data. <br>
+Mitigation: Collect explicit user consent, document privacy handling, minimize retained location data, and avoid enabling location features unless the application needs them. <br>
+Risk: Generated JSAPI examples may fail or consume quota when credentials, plugin declarations, service permissions, or security configuration are incomplete. <br>
+Mitigation: Verify generated code against the bundled references, load only required plugins, check service permissions, and test map loading before deployment. <br>
+
+
+## Reference(s): <br>
+- [ClawHub Skill Page](https://clawhub.ai/lbs-amap/amap-jsapi-skill) <br>
+- [Gaode Maps Developer Homepage](https://lbs.amap.com) <br>
+- [Skill Overview](artifact/SKILL.md) <br>
+- [Security Configuration](artifact/references/security.md) <br>
+- [Map Initialization](artifact/references/map-init.md) <br>
+- [Markers](artifact/references/marker.md) <br>
+- [Vector Graphics](artifact/references/vector-graphics.md) <br>
+- [Geocoder](artifact/references/geocoder.md) <br>
+- [Routing](artifact/references/routing.md) <br>
+- [Search](artifact/references/search.md) <br>
+- [Geolocation API Reference](artifact/references/api/geolocation.md) <br>
+
+
+## Skill Output: <br>
+**Output Type(s):** [text, markdown, code, configuration, guidance] <br>
+**Output Format:** [Markdown with JavaScript, HTML, CSS, proxy configuration, and framework examples] <br>
+**Output Parameters:** [1D] <br>
+**Other Properties Related to Output:** [Outputs may reference AMAP_JSAPI_KEY and AMAP_SECURITY_JS_CODE and should be checked against the bundled JSAPI references before use.] <br>
+
+## Skill Version(s): <br>
+1.1.1 (source: server release evidence and skill frontmatter) <br>
+
+## Ethical Considerations: <br>
+Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>
diff --git a/.agents/skills/find-skills/SKILL.md b/.agents/skills/find-skills/SKILL.md
new file mode 100644
index 0000000..a41bdd0
--- /dev/null
+++ b/.agents/skills/find-skills/SKILL.md
@@ -0,0 +1,141 @@
+---
+name: find-skills
+description: Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
+---
+
+# Find Skills
+
+This skill helps you discover and install skills from the open agent skills ecosystem.
+
+## When to Use This Skill
+
+Use this skill when the user:
+
+- Asks "how do I do X" where X might be a common task with an existing skill
+- Says "find a skill for X" or "is there a skill for X"
+- Asks "can you do X" where X is a specialized capability
+- Expresses interest in extending agent capabilities
+- Wants to search for tools, templates, or workflows
+- Mentions they wish they had help with a specific domain (design, testing, deployment, etc.)
+
+## What is the Skills CLI?
+
+The Skills CLI (`npx skills`) is the package manager for the open agent skills ecosystem. Skills are modular packages that extend agent capabilities with specialized knowledge, workflows, and tools.
+
+**Key commands:**
+
+- `npx skills find [query] [--owner <owner>]` - Search for skills interactively or by keyword, optionally scoped to a GitHub owner
+- `npx skills add <package>` - Install a skill from GitHub or other sources
+- `npx skills update` - Update all installed skills
+
+**Browse skills at:** https://skills.sh/
+
+## How to Help Users Find Skills
+
+### Step 1: Understand What They Need
+
+When a user asks for help with something, identify:
+
+1. The domain (e.g., React, testing, design, deployment)
+2. The specific task (e.g., writing tests, creating animations, reviewing PRs)
+3. Whether this is a common enough task that a skill likely exists
+
+### Step 2: Check the Leaderboard First
+
+Before running a CLI search, check the [skills.sh leaderboard](https://skills.sh/) to see if a well-known skill already exists for the domain. The leaderboard ranks skills by total installs, surfacing the most popular and battle-tested options.
+
+For example, top skills for web development include:
+- `vercel-labs/agent-skills` — React, Next.js, web design (100K+ installs each)
+- `anthropics/skills` — Frontend design, document processing (100K+ installs)
+
+### Step 3: Search for Skills
+
+If the leaderboard doesn't cover the user's need, run the find command:
+
+```bash
+npx skills find [query] [--owner <owner>]
+```
+
+For example:
+
+- User asks "how do I make my React app faster?" → `npx skills find react performance`
+- User asks "can you help me with PR reviews?" → `npx skills find pr review`
+- User asks "I need to create a changelog" → `npx skills find changelog`
+
+### Step 4: Verify Quality Before Recommending
+
+**Do not recommend a skill based solely on search results.** Always verify:
+
+1. **Install count** — Prefer skills with 1K+ installs. Be cautious with anything under 100.
+2. **Source reputation** — Official sources (`vercel-labs`, `anthropics`, `microsoft`) are more trustworthy than unknown authors.
+3. **GitHub stars** — Check the source repository. A skill from a repo with <100 stars should be treated with skepticism.
+
+### Step 5: Present Options to the User
+
+When you find relevant skills, present them to the user with:
+
+1. The skill name and what it does
+2. The install count and source
+3. The install command they can run
+4. A link to learn more at skills.sh
+
+Example response:
+
+```
+I found a skill that might help! The "react-best-practices" skill provides
+React and Next.js performance optimization guidelines from Vercel Engineering.
+(185K installs)
+
+To install it:
+npx skills add vercel-labs/agent-skills@react-best-practices
+
+Learn more: https://skills.sh/vercel-labs/agent-skills/react-best-practices
+```
+
+### Step 6: Offer to Install
+
+If the user wants to proceed, you can install the skill for them:
+
+```bash
+npx skills add <owner/repo@skill> -g -y
+```
+
+The `-g` flag installs globally (user-level) and `-y` skips confirmation prompts.
+
+## Common Skill Categories
+
+When searching, consider these common categories:
+
+| Category        | Example Queries                          |
+| --------------- | ---------------------------------------- |
+| Web Development | react, nextjs, typescript, css, tailwind |
+| Testing         | testing, jest, playwright, e2e           |
+| DevOps          | deploy, docker, kubernetes, ci-cd        |
+| Documentation   | docs, readme, changelog, api-docs        |
+| Code Quality    | review, lint, refactor, best-practices   |
+| Design          | ui, ux, design-system, accessibility     |
+| Productivity    | workflow, automation, git                |
+
+## Tips for Effective Searches
+
+1. **Use specific keywords**: "react testing" is better than just "testing"
+2. **Try alternative terms**: If "deploy" doesn't work, try "deployment" or "ci-cd"
+3. **Check popular sources**: Many skills come from `vercel-labs/agent-skills` or `ComposioHQ/awesome-claude-skills`
+
+## When No Skills Are Found
+
+If no relevant skills exist:
+
+1. Acknowledge that no existing skill was found
+2. Offer to help with the task directly using your general capabilities
+3. Suggest the user could create their own skill with `npx skills init`
+
+Example:
+
+```
+I searched for skills related to "xyz" but didn't find any matches.
+I can still help you with this task directly! Would you like me to proceed?
+
+If this is something you do often, you could create your own skill:
+npx skills init my-xyz-skill
+```
diff --git a/docs/style-system.md b/docs/style-system.md
index 97bca83..0270cc8 100644
--- a/docs/style-system.md
+++ b/docs/style-system.md
@@ -58,6 +58,8 @@ OpenCloud 的绿色应接近清晨的桉叶与嫩叶，而不是灰暗的苔藓
 
 容器宽度只有三个语义档位：`oc-container--narrow`、`oc-container--content`、`oc-container--wide`。不要在同类页面重复手写 `max-w-* mx-auto px-*`。
 
+Hero 同时包含左侧介绍和右侧状态卡时，使用 `oc-page-hero__split`。它会在有效视口达到 `900px` 时启用接近均衡的双栏，避免浏览器缩放到 125% 后过早堆叠；需要两栏等高时同时添加 `oc-page-hero__split--stretch`。
+
 ### 表单
 
 ```html
@@ -76,7 +78,8 @@ OpenCloud 的绿色应接近清晨的桉叶与嫩叶，而不是灰暗的苔藓
 - `oc-section-label`：详情面板中的字段标题。
 - `oc-stat-label` / `oc-stat-value`：统计数据的标签和值。
 - `oc-inset-panel`：详情中的浅色信息块。
-- `oc-panel-card` / `oc-panel-card-soft`：Naive UI 卡片的硬阴影。
+- `oc-panel-card` / `oc-panel-card-soft` / `oc-panel-card-xl`：普通、柔和和大型卡片的硬阴影。
+- `oc-floating-panel` / `oc-modal-shell`：浮动菜单与普通方形弹窗的共享表面。
 - `oc-surface`：普通 HTML 容器的标准白色表面。
 - `oc-empty-card`：空状态表面。
 
diff --git a/scripts/check-style-system.mjs b/scripts/check-style-system.mjs
index 6ffd95a..190341d 100644
--- a/scripts/check-style-system.mjs
+++ b/scripts/check-style-system.mjs
@@ -17,6 +17,18 @@ const deprecatedPatterns = [
     pattern: /#(?:f0fdfa|ccfbf1|99f6e4|5eead4|2dd4bf|14b8a6|0d9488|0f766e|115e59|134e4a)\b/gi,
     message: '检测到旧版高饱和 teal 色值，请改用自然绿色设计令牌。',
   },
+  {
+    pattern: /#(?:c084fc|a855f7|9333ea|7e22ce)\b/gi,
+    message: '检测到禁用的紫色硬编码，请改用 rose 或项目语义令牌。',
+  },
+  {
+    pattern: /#(?:1f2937|9ca3af)\b/gi,
+    message: '检测到默认 gray 调色板硬编码，请改用对应的 slate 色值或语义令牌。',
+  },
+  {
+    pattern: /#60a5fa\b/gi,
+    message: '检测到默认 blue-400 硬编码，请按用途改用 sky 或 amber 等项目语义色。',
+  },
   {
     pattern: /text-xs uppercase tracking-\[0\.18em\] text-slate-500/g,
     message: '重复的小节标签应使用 oc-section-label。',
diff --git a/skills-lock.json b/skills-lock.json
index 6b4c25d..80b1431 100644
--- a/skills-lock.json
+++ b/skills-lock.json
@@ -1,6 +1,17 @@
 {
   "version": 1,
   "skills": {
+    "amap-jsapi-skill": {
+      "source": "clawhub.ai",
+      "sourceType": "well-known",
+      "computedHash": "289808e56798f1cd3241f9ab227d0ab41c9ec0d85d853991b30ad61be187d685"
+    },
+    "find-skills": {
+      "source": "vercel-labs/skills",
+      "sourceType": "github",
+      "skillPath": "skills/find-skills/SKILL.md",
+      "computedHash": "913b9d37d0d54047dd65222bb8c67b2bf04e3cb87dcad1729068d7a8b2c8c396"
+    },
     "git-commit": {
       "source": "github/awesome-copilot",
       "sourceType": "github",
diff --git a/src/components/cloud/CloudEditModal.vue b/src/components/cloud/CloudEditModal.vue
index e39dd07..bf1eab5 100644
--- a/src/components/cloud/CloudEditModal.vue
+++ b/src/components/cloud/CloudEditModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { NAlert, NButton } from 'naive-ui'
+import { NAlert, NButton, NIcon } from 'naive-ui'
+import { Map as MapIcon, X } from '@vicons/tabler'
 import MapPickerModal from '@/components/cloud/MapPickerModal.vue'
 import type { CloudType } from '@/types/database'
 
@@ -115,7 +116,7 @@ watch(() => props.initialValue, value => {
       class="fixed inset-0 z-[130] flex items-center justify-center bg-slate-950/60 px-4 py-6"
       @click="close"
     >
-      <div class="w-full max-w-2xl bg-white shadow-2xl" @click.stop>
+      <div class="oc-modal-shell w-full max-w-2xl" @click.stop>
         <div class="flex items-start justify-between border-b border-slate-200 px-6 py-5">
           <div>
             <h3 class="text-xl font-semibold text-slate-900">编辑图片信息</h3>
@@ -128,7 +129,7 @@ watch(() => props.initialValue, value => {
             title="关闭编辑窗口"
             @click="close"
           >
-            ✕
+            <NIcon size="20"><X /></NIcon>
           </button>
         </div>
 
@@ -223,7 +224,7 @@ watch(() => props.initialValue, value => {
                   aria-label="地图选点"
                   @click="mapPickerOpen = true"
                 >
-                  <span class="text-lg leading-none">🗺️</span>
+                  <NIcon size="20"><MapIcon /></NIcon>
                 </button>
               </div>
             </div>
@@ -233,7 +234,7 @@ watch(() => props.initialValue, value => {
               <textarea
                 v-model="form.description"
                 rows="4"
-                class="w-full resize-none border border-slate-300 px-3 py-2.5 text-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500"
+                class="oc-field-control resize-none"
                 placeholder="描述一下这张图片..."
               ></textarea>
             </div>
diff --git a/src/components/cloud/EncyclopediaProgressCard.vue b/src/components/cloud/EncyclopediaProgressCard.vue
index 86fb039..d6e9753 100644
--- a/src/components/cloud/EncyclopediaProgressCard.vue
+++ b/src/components/cloud/EncyclopediaProgressCard.vue
@@ -1,61 +1,55 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NCard, NProgress } from 'naive-ui'
+import { NCard } from 'naive-ui'
 
 const props = defineProps<{
   unlockedCount: number
   totalCount: number
-  percent: number
   isLoggedIn: boolean
 }>()
 
-function lerpHex(a: string, b: string, t: number) {
-  const ah = parseInt(a.slice(1), 16)
-  const bh = parseInt(b.slice(1), 16)
-  const r = Math.round(((ah >> 16) & 0xff) + (((bh >> 16) & 0xff) - ((ah >> 16) & 0xff)) * t)
-  const g = Math.round(((ah >> 8) & 0xff) + (((bh >> 8) & 0xff) - ((ah >> 8) & 0xff)) * t)
-  const bv = Math.round((ah & 0xff) + ((bh & 0xff) - (ah & 0xff)) * t)
-  return `#${((r << 16) | (g << 8) | bv).toString(16).padStart(6, '0')}`
-}
-
-function progressColor(pct: number) {
-  const t = Math.min(1, Math.max(0, pct / 100))
-  if (t <= 0.5) return lerpHex('#0ea5e9', '#f59e0b', t * 2)
-  return lerpHex('#f59e0b', '#ef4444', (t - 0.5) * 2)
-}
-
-const progressText = computed(() => `${props.unlockedCount}/${props.totalCount}`)
-const currentColor = computed(() => progressColor(props.isLoggedIn ? props.percent : 0))
+const displayedUnlockedCount = computed(() => {
+  if (!props.isLoggedIn) return 0
+  return Math.min(Math.max(props.unlockedCount, 0), props.totalCount)
+})
+const remainingCount = computed(() => Math.max(props.totalCount - displayedUnlockedCount.value, 0))
 </script>
 
 <template>
-  <NCard class="oc-panel-card-soft border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
-    <div class="flex items-center justify-between">
+  <NCard class="oc-panel-card-soft border border-sky-100 bg-white/88 backdrop-blur" :bordered="false">
+    <div class="flex items-end justify-between gap-4">
       <div>
-        <p class="text-sm text-slate-500">当前进度</p>
-        <p class="mt-1 text-3xl font-bold" :style="{ color: currentColor }">{{ progressText }}</p>
-      </div>
-      <div
-        class="flex h-16 w-16 items-center justify-center border text-xl font-semibold text-white transition-colors duration-500"
-        :style="{ backgroundColor: currentColor, borderColor: currentColor }"
-      >
-        {{ isLoggedIn ? percent : 0 }}%
+        <p class="oc-stat-label">Collection Status</p>
+        <p class="mt-1 text-base font-semibold text-slate-900">图鉴收集进度</p>
       </div>
+      <p class="shrink-0 font-mono tabular-nums text-slate-500">
+        <span class="text-3xl font-bold text-sky-800">{{ displayedUnlockedCount }}</span>
+        <span class="ml-1 text-sm">/ {{ totalCount }}</span>
+      </p>
     </div>
 
-    <NProgress
-      class="mt-5"
-      type="line"
-      :show-indicator="false"
-      :percentage="isLoggedIn ? percent : 0"
-      :color="{ stops: ['#0ea5e9', currentColor] }"
-      :height="12"
-      rail-color="#e2e8f0"
-    />
+    <div
+      class="mt-5 grid grid-cols-5 gap-2 sm:grid-cols-10"
+      role="progressbar"
+      aria-label="云属收集进度"
+      aria-valuemin="0"
+      :aria-valuemax="totalCount"
+      :aria-valuenow="displayedUnlockedCount"
+      :aria-valuetext="`已收录 ${displayedUnlockedCount} 种，共 ${totalCount} 种`"
+    >
+      <span
+        v-for="index in totalCount"
+        :key="index"
+        aria-hidden="true"
+        class="encyclopedia-progress-cell aspect-square border border-slate-300 bg-slate-50"
+        :class="{ 'encyclopedia-progress-cell--active': index <= displayedUnlockedCount }"
+        :style="{ animationDelay: `${(index - 1) * 90}ms` }"
+      ></span>
+    </div>
 
-    <p class="mt-4 text-sm text-slate-500">
+    <p class="mt-4 border-t border-slate-200 pt-3 text-sm text-slate-500">
       <template v-if="isLoggedIn">
-        已解锁 {{ unlockedCount }} 枚徽章，还差 {{ Math.max(totalCount - unlockedCount, 0) }} 枚。
+        已收录 {{ displayedUnlockedCount }} 种云属，还差 {{ remainingCount }} 种。
       </template>
       <template v-else>
         登录后可同步你的个人图鉴进度。
@@ -63,3 +57,52 @@ const currentColor = computed(() => progressColor(props.isLoggedIn ? props.perce
     </p>
   </NCard>
 </template>
+
+<style scoped>
+.encyclopedia-progress-cell--active {
+  background: rgb(224 242 254);
+  border-color: rgb(125 211 252);
+  box-shadow: 3px 3px 0 0 rgb(3 105 161 / 14%);
+  animation:
+    encyclopedia-cell-activate 1ms linear both,
+    encyclopedia-cell-pulse 220ms ease-out both;
+}
+
+@keyframes encyclopedia-cell-activate {
+  from {
+    background: rgb(248 250 252);
+    border-color: rgb(203 213 225);
+    box-shadow: none;
+  }
+
+  to {
+    background: rgb(224 242 254);
+    border-color: rgb(125 211 252);
+    box-shadow: 3px 3px 0 0 rgb(3 105 161 / 14%);
+  }
+}
+
+@keyframes encyclopedia-cell-pulse {
+  0% {
+    transform: scale(1);
+  }
+
+  28% {
+    transform: scale(0.9);
+  }
+
+  62% {
+    transform: scale(1.06);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .encyclopedia-progress-cell--active {
+    animation: none;
+  }
+}
+</style>
diff --git a/src/components/cloud/ImageDetailModal.vue b/src/components/cloud/ImageDetailModal.vue
index fa29b74..182df62 100644
--- a/src/components/cloud/ImageDetailModal.vue
+++ b/src/components/cloud/ImageDetailModal.vue
@@ -181,13 +181,13 @@ onBeforeUnmount(() => {
         @click="close"
       >
         <div
-          class="image-detail-shell relative w-fit max-w-[92vw] overflow-hidden rounded-[30px] shadow-2xl"
+          class="image-detail-shell relative w-fit max-w-[92vw] overflow-hidden shadow-2xl"
           @click.stop
         >
           <button
             type="button"
             @click="close"
-            class="image-detail-close-button oc-overlay-button absolute right-4 top-4 z-30 h-10 w-10 rounded-full [&_svg]:stroke-[2.5]"
+            class="image-detail-close-button oc-overlay-button absolute right-4 top-4 z-30 h-10 w-10 [&_svg]:stroke-[2.5]"
             aria-label="关闭大图"
             title="关闭大图"
           >
@@ -223,7 +223,7 @@ onBeforeUnmount(() => {
             <button
               type="button"
               @click="toggleInfo"
-              class="oc-overlay-button absolute bottom-4 right-4 z-30 h-11 w-11 rounded-full drop-shadow-[0_2px_8px_rgba(15,23,42,0.9)]"
+              class="image-detail-info-button oc-overlay-button absolute bottom-4 right-4 z-30 h-11 w-11 drop-shadow-[0_2px_8px_rgba(15,23,42,0.9)]"
               :aria-label="infoOpen ? '隐藏详细信息' : '查看详细信息'"
               :title="infoOpen ? '隐藏详细信息' : '查看详细信息'"
             >
@@ -242,7 +242,7 @@ onBeforeUnmount(() => {
                     <h2 class="text-xl font-bold text-slate-900">{{ title }}</h2>
                     <span
                       v-if="badgeLabel"
-                      class="rounded-full border px-3 py-1 text-xs font-medium"
+                      class="border px-3 py-1 text-xs font-medium"
                       :class="badgeClass"
                     >
                       {{ badgeLabel }}
@@ -254,11 +254,11 @@ onBeforeUnmount(() => {
                 <button
                   type="button"
                   @click="infoOpen = false"
-                  class="oc-icon-button oc-icon-button--small absolute right-3 top-3 rounded-full"
+                  class="image-detail-panel-close oc-icon-button oc-icon-button--small absolute right-3 top-3"
                   aria-label="隐藏详细信息"
                   title="隐藏详细信息"
                 >
-                  ✕
+                  <NIcon size="16"><X /></NIcon>
                 </button>
               </div>
 
@@ -301,7 +301,13 @@ onBeforeUnmount(() => {
   transform: translateY(10px) scale(0.97);
 }
 
-.image-detail-close-button.image-detail-close-button {
+.image-detail-shell.image-detail-shell {
+  border-radius: 30px !important;
+}
+
+.image-detail-close-button.image-detail-close-button,
+.image-detail-info-button.image-detail-info-button,
+.image-detail-panel-close.image-detail-panel-close {
   border-radius: 9999px !important;
 }
 </style>
diff --git a/src/components/cloud/MapPickerModal.vue b/src/components/cloud/MapPickerModal.vue
index 4733d21..277bfa4 100644
--- a/src/components/cloud/MapPickerModal.vue
+++ b/src/components/cloud/MapPickerModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { NButton } from 'naive-ui'
+import { NButton, NIcon } from 'naive-ui'
+import { X } from '@vicons/tabler'
 import { loadAMap } from '@/lib/amap'
 
 const props = withDefaults(defineProps<{
@@ -49,6 +50,8 @@ function placeMarker(longitude: number, latitude: number) {
     mapPickerMarker = new mapPickerAMap.Marker({
       position: [longitude, latitude],
       title: '拍摄位置',
+      content: '<div aria-hidden="true" class="h-4 w-4 rounded-full border-2 border-white bg-teal-500 shadow-[0_0_0_4px_rgba(52,116,93,0.24)]"></div>',
+      offset: new mapPickerAMap.Pixel(-8, -8),
     } as AMap.MarkerOptions)
     mapPickerMarker.setMap(mapPickerInstance)
   } else {
@@ -85,6 +88,7 @@ async function initializeMap() {
 
   try {
     mapPickerAMap = await loadAMap()
+    mapPickerAMap.getConfig().appname = 'amap-jsapi-skill'
 
     const hasCoordinates =
       typeof props.latitude === 'number' &&
@@ -150,7 +154,7 @@ onBeforeUnmount(() => {
       class="fixed inset-0 z-[140] flex items-center justify-center bg-slate-950/55 px-4 py-6"
       @click="close"
     >
-      <div class="w-full max-w-3xl overflow-hidden bg-white shadow-2xl" @click.stop>
+      <div class="oc-modal-shell w-full max-w-3xl overflow-hidden" @click.stop>
         <div class="flex items-start justify-between border-b border-slate-200 px-6 py-5">
           <div>
             <h3 class="text-xl font-semibold text-slate-900">{{ title }}</h3>
@@ -163,7 +167,7 @@ onBeforeUnmount(() => {
             title="关闭地图选点窗口"
             @click="close"
           >
-            ✕
+            <NIcon size="20"><X /></NIcon>
           </button>
         </div>
 
diff --git a/src/components/cloud/QuickUploadModal.vue b/src/components/cloud/QuickUploadModal.vue
index c2eab7b..66fcebb 100644
--- a/src/components/cloud/QuickUploadModal.vue
+++ b/src/components/cloud/QuickUploadModal.vue
@@ -198,7 +198,7 @@ onBeforeUnmount(() => {
       class="fixed inset-0 z-[130] flex items-center justify-center bg-slate-950/55 px-4 py-6 backdrop-blur-sm"
       @click="close"
     >
-      <div class="w-full max-w-3xl overflow-hidden border border-slate-200 bg-white shadow-2xl" @click.stop>
+      <div class="oc-modal-shell w-full max-w-3xl overflow-hidden" @click.stop>
         <div class="flex items-start justify-between border-b border-slate-200 px-5 py-4">
           <div>
             <p class="text-xs font-semibold uppercase tracking-[0.22em] text-sky-700">Quick Upload</p>
@@ -207,7 +207,7 @@ onBeforeUnmount(() => {
           </div>
           <button
             type="button"
-            class="quick-upload-close oc-icon-button"
+            class="oc-icon-button"
             aria-label="关闭快捷上传"
             title="关闭快捷上传"
             @click="close"
@@ -228,7 +228,13 @@ onBeforeUnmount(() => {
               <span class="font-medium text-slate-700">正在上传 {{ currentItemIndex }} / {{ totalItems }}</span>
               <span class="font-medium text-sky-700">{{ overallProgress }}%</span>
             </div>
-            <NProgress type="line" :percentage="overallProgress" :show-indicator="false" color="#0ea5e9" rail-color="#dbeafe" />
+            <NProgress
+              type="line"
+              :percentage="overallProgress"
+              :show-indicator="false"
+              color="var(--oc-color-info)"
+              rail-color="var(--oc-color-border)"
+            />
           </div>
 
           <div
@@ -251,9 +257,9 @@ onBeforeUnmount(() => {
                 <div class="overflow-hidden border border-slate-900 bg-slate-950">
                   <img :src="activeItem.preview" alt="图片预览" class="h-56 w-full object-contain" />
                 </div>
-                <div class="mt-3 flex items-center justify-between gap-2">
-                  <button type="button" class="oc-text-button text-sm" @click="fileInput?.click()">重新选择</button>
-                  <button type="button" class="oc-text-button oc-text-button--danger text-sm" @click="handleRemove(activeItem.id)">移除</button>
+                <div class="mt-3 flex items-center gap-2">
+                  <button type="button" class="oc-panel-button oc-panel-button--neutral flex-1" @click="fileInput?.click()">重新选择</button>
+                  <button type="button" class="oc-panel-button oc-panel-button--danger flex-1" @click="handleRemove(activeItem.id)">移除</button>
                 </div>
               </div>
 
@@ -394,9 +400,3 @@ onBeforeUnmount(() => {
     />
   </Teleport>
 </template>
-
-<style scoped>
-.quick-upload-close.quick-upload-close {
-  border-radius: 9999px !important;
-}
-</style>
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 8a29f08..14b152d 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { NIcon, NSpace } from 'naive-ui'
-import { Logout, Settings, Shield, User } from '@vicons/tabler'
+import { ChevronDown, Logout, Settings, Shield, User } from '@vicons/tabler'
 import { useAuthStore } from '@/stores/auth'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 
@@ -138,7 +138,7 @@ async function handleLogout() {
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex h-16 items-center justify-between">
           <RouterLink to="/" class="flex items-center gap-3">
-            <div class="flex h-10 w-10 items-center justify-center border border-sky-200 bg-sky-100 shadow-[4px_4px_0_0_rgba(15,23,42,0.08)]">
+            <div class="oc-brand-mark">
               <svg
                 class="h-8 w-8"
                 viewBox="0 0 16 16"
@@ -170,7 +170,7 @@ async function handleLogout() {
             </div>
           </RouterLink>
 
-          <nav class="hidden items-center gap-2 border border-slate-200 bg-white px-2 py-2 shadow-[6px_6px_0_0_rgba(15,23,42,0.05)] md:flex">
+          <nav class="oc-panel-card hidden items-center gap-2 border border-slate-200 bg-white px-2 py-2 md:flex">
             <RouterLink
               to="/"
               class="oc-nav-link"
@@ -228,7 +228,7 @@ async function handleLogout() {
                 <button
                   type="button"
                   class="oc-header-button oc-header-button--teal max-w-[8.5rem] gap-2 md:max-w-none"
-                  :class="route.name === 'profile' || route.name === 'profile-settings' ? 'border-teal-200 bg-teal-50/80 text-teal-800 ring-1 ring-teal-200 shadow-[4px_4px_0_0_rgba(52,116,93,0.16)]' : ''"
+                  :class="route.name === 'profile' || route.name === 'profile-settings' ? 'border-teal-200 bg-teal-50/80 text-teal-800 ring-1 ring-teal-200' : ''"
                   aria-haspopup="menu"
                   :aria-expanded="accountCardOpen"
                 >
@@ -243,7 +243,7 @@ async function handleLogout() {
                   class="absolute right-0 top-full z-50 w-72 pt-3"
                   role="menu"
                 >
-                  <div class="border border-slate-200 bg-white shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]">
+                  <div class="oc-floating-panel border border-slate-200 bg-white">
                     <div class="border-b border-slate-200 bg-[linear-gradient(180deg,#f2faf6_0%,#ffffff_100%)] px-4 py-4">
                       <div class="flex items-center gap-3">
                         <div class="flex h-11 w-11 shrink-0 items-center justify-center border border-teal-200 bg-[linear-gradient(135deg,#eef9f3_0%,#d9efe3_100%)] text-lg font-bold text-teal-800">
@@ -364,26 +364,51 @@ async function handleLogout() {
           >
             图鉴
           </RouterLink>
-          <RouterLink
-            v-if="!authStore.loading && authStore.isLoggedIn"
-            to="/profile"
-            class="oc-nav-link shrink-0"
-            :class="route.name === 'profile' ? activeNavClass : inactiveNavClass"
-          >
-            主页
-          </RouterLink>
         </nav>
       </div>
     </header>
 
-    <button
-      v-if="headerHidden"
-      type="button"
-      class="absolute left-1/2 top-3 flex -translate-x-1/2 items-center gap-2 border border-slate-300 bg-white/94 px-3 py-1.5 text-xs font-medium tracking-[0.16em] text-slate-700 shadow-[4px_4px_0_0_rgba(15,23,42,0.08)] backdrop-blur transition-colors hover:border-teal-300 hover:bg-teal-50 hover:text-teal-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
-      @click="showHeader(true)"
-    >
-      <span>▼</span>
-      <span>展开导航</span>
-    </button>
+    <Transition name="header-reveal">
+      <div
+        v-if="headerHidden"
+        class="pointer-events-none absolute inset-x-0 top-3 flex justify-center"
+      >
+        <button
+          type="button"
+          class="oc-header-button oc-header-button--neutral pointer-events-auto gap-2 bg-white/94 text-xs tracking-[0.16em] backdrop-blur"
+          @click="showHeader(true)"
+        >
+          <NIcon size="15"><ChevronDown /></NIcon>
+          <span>展开导航</span>
+        </button>
+      </div>
+    </Transition>
   </div>
 </template>
+
+<style scoped>
+.header-reveal-enter-active,
+.header-reveal-leave-active {
+  transition:
+    opacity 240ms ease,
+    transform 240ms ease;
+}
+
+.header-reveal-enter-from,
+.header-reveal-leave-to {
+  opacity: 0;
+  transform: translateY(-0.75rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .header-reveal-enter-active,
+  .header-reveal-leave-active {
+    transition-duration: 1ms;
+  }
+
+  .header-reveal-enter-from,
+  .header-reveal-leave-to {
+    transform: none;
+  }
+}
+</style>
diff --git a/src/components/profile/ContributionHeatmap.vue b/src/components/profile/ContributionHeatmap.vue
index d161f28..838a888 100644
--- a/src/components/profile/ContributionHeatmap.vue
+++ b/src/components/profile/ContributionHeatmap.vue
@@ -22,15 +22,11 @@ const props = withDefaults(defineProps<{
   cells: ContributionHeatmapCell[]
   totalCount: number
   activeDays: number
-  currentStreak: number
-  bestStreak: number
   activeDate?: string | null
   title?: string
-  subtitle?: string
 }>(), {
   activeDate: null,
   title: '上传活跃度',
-  subtitle: '按上传日期统计',
 })
 
 const emit = defineEmits<{
@@ -154,31 +150,38 @@ const visibleCells = computed(() => {
   return cells
 })
 
-const maxCount = computed(() => {
-  return visibleCells.value.reduce((max, cell) => Math.max(max, cell.count), 0)
+const contributionQuartiles = computed(() => {
+  const counts = visibleCells.value
+    .filter(cell => cell.inRange && cell.count > 0)
+    .map(cell => cell.count)
+    .sort((a, b) => a - b)
+
+  if (!counts.length) return [0, 0, 0] as const
+
+  const percentile = (value: number) => {
+    const index = Math.ceil(counts.length * value) - 1
+    return counts[Math.max(0, index)] || 0
+  }
+
+  return [percentile(0.25), percentile(0.5), percentile(0.75)] as const
 })
 
 function getLevel(count: number) {
   if (count <= 0) return 0
 
-  const max = Math.max(maxCount.value, 1)
-  const ratio = count / max
+  const [firstQuartile, secondQuartile, thirdQuartile] = contributionQuartiles.value
 
-  if (ratio >= 0.75 || count >= 8) return 4
-  if (ratio >= 0.5 || count >= 5) return 3
-  if (ratio >= 0.25 || count >= 3) return 2
-  return 1
+  if (count <= firstQuartile) return 1
+  if (count <= secondQuartile) return 2
+  if (count <= thirdQuartile) return 3
+  return 4
 }
 
 function getCellClass(cell: { count: number; inRange: boolean }) {
   if (!cell.inRange) return 'bg-transparent border-transparent'
 
   const level = getLevel(cell.count)
-  if (level === 0) return 'bg-zinc-100 border-zinc-200'
-  if (level === 1) return 'bg-[#e0f2fe] border-[#bae6fd]'
-  if (level === 2) return 'bg-[#7dd3fc] border-[#38bdf8]'
-  if (level === 3) return 'bg-[#0ea5e9] border-[#0284c7]'
-  return 'bg-[#0f3d63] border-[#0b2f4d]'
+  return `oc-heatmap-cell--level-${level}`
 }
 
 const weeks = computed(() => {
@@ -284,7 +287,7 @@ function formatMonthTooltip(monthKey: string) {
 </script>
 
 <template>
-  <div class="oc-panel-card border border-slate-200 bg-white p-6 shadow-sm">
+  <div class="oc-panel-card border border-slate-200 bg-white p-6">
     <div class="flex flex-wrap items-start justify-between gap-6">
       <div class="min-w-0 flex-1">
         <h3 class="text-2xl font-bold text-slate-900">{{ title }}</h3>
@@ -396,12 +399,53 @@ function formatMonthTooltip(monthKey: string) {
 
     <div class="mt-5 flex items-center justify-end gap-2 text-xs text-slate-500">
       <span>少</span>
-      <span class="h-3 w-3 border border-slate-200 bg-slate-100"></span>
-      <span class="h-3 w-3 border border-sky-200 bg-sky-100"></span>
-      <span class="h-3 w-3 border border-sky-400 bg-sky-300"></span>
-      <span class="h-3 w-3 border border-teal-600 bg-teal-500"></span>
-      <span class="h-3 w-3 border border-slate-900 bg-slate-900"></span>
+      <span class="oc-heatmap-legend-cell oc-heatmap-cell--level-0"></span>
+      <span class="oc-heatmap-legend-cell oc-heatmap-cell--level-1"></span>
+      <span class="oc-heatmap-legend-cell oc-heatmap-cell--level-2"></span>
+      <span class="oc-heatmap-legend-cell oc-heatmap-cell--level-3"></span>
+      <span class="oc-heatmap-legend-cell oc-heatmap-cell--level-4"></span>
       <span>多</span>
     </div>
   </div>
 </template>
+
+<style scoped>
+.oc-heatmap-cell,
+.oc-heatmap-legend-cell {
+  transition:
+    background-color var(--oc-duration-fast) var(--oc-ease-standard),
+    border-color var(--oc-duration-fast) var(--oc-ease-standard),
+    transform var(--oc-duration-fast) var(--oc-ease-standard);
+}
+
+.oc-heatmap-legend-cell {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-width: 1px;
+}
+
+.oc-heatmap-cell--level-0 {
+  background: var(--oc-heatmap-empty);
+  border-color: var(--oc-heatmap-empty-border);
+}
+
+.oc-heatmap-cell--level-1 {
+  background: var(--oc-heatmap-level-1);
+  border-color: var(--oc-heatmap-level-1-border);
+}
+
+.oc-heatmap-cell--level-2 {
+  background: var(--oc-heatmap-level-2);
+  border-color: var(--oc-heatmap-level-2-border);
+}
+
+.oc-heatmap-cell--level-3 {
+  background: var(--oc-heatmap-level-3);
+  border-color: var(--oc-heatmap-level-3-border);
+}
+
+.oc-heatmap-cell--level-4 {
+  background: var(--oc-heatmap-level-4);
+  border-color: var(--oc-heatmap-level-4-border);
+}
+</style>
diff --git a/src/lib/amap.ts b/src/lib/amap.ts
index f1a5443..aadbcb3 100644
--- a/src/lib/amap.ts
+++ b/src/lib/amap.ts
@@ -6,6 +6,7 @@ export function loadAMap() {
     version: '2.0',
     plugins: [
       'AMap.Scale',
+      'AMap.ToolBar',
       'AMap.ControlBar',
       'AMap.Geolocation',
       'AMap.Marker',
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index a5dd08a..27df7aa 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -18,7 +18,7 @@ export const openCloudThemeOverrides: GlobalThemeOverrides = {
     borderRadiusSmall: '0px',
     fontFamily: '"IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif',
     fontFamilyMono: '"IBM Plex Mono", "SFMono-Regular", monospace',
-    bodyColor: '#f3f7fb',
+    bodyColor: '#eef4f8',
     cardColor: '#ffffff',
     modalColor: '#ffffff',
     popoverColor: '#ffffff',
@@ -27,7 +27,7 @@ export const openCloudThemeOverrides: GlobalThemeOverrides = {
     textColor1: '#0f172a',
     textColor2: '#334155',
     textColor3: '#64748b',
-    textColorDisabled: '#94a3b8',
+    textColorDisabled: 'var(--oc-color-text-disabled)',
     dividerColor: '#d9e3ee',
     borderColor: '#d9e3ee',
     inputColor: '#ffffff',
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index b30b4ab..ef9547a 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -23,7 +23,14 @@ export const useAuthStore = defineStore('auth', () => {
   function applyAuth(auth: AuthResponse) {
     setAccessToken(auth.access_token)
     user.value = auth.user
-    profile.value = auth.profile
+    profile.value = {
+      id: auth.user.id,
+      username: auth.user.username,
+      avatar_url: auth.user.avatar_url,
+      role: auth.user.role,
+      is_disabled: auth.user.is_disabled,
+      created_at: auth.user.created_at,
+    }
   }
 
   function clearAuth() {
@@ -58,11 +65,19 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function updateUsername(username: string) {
-    const updatedProfile = await apiRequest<Profile>('/profiles/me', {
+    const updatedUser = await apiRequest<AuthUser>('/profiles/me', {
       method: 'PATCH',
       body: { username },
     })
-    profile.value = updatedProfile
+    user.value = updatedUser
+    profile.value = {
+      id: updatedUser.id,
+      username: updatedUser.username,
+      avatar_url: updatedUser.avatar_url,
+      role: updatedUser.role,
+      is_disabled: updatedUser.is_disabled,
+      created_at: updatedUser.created_at,
+    }
   }
 
   async function updatePassword(password: string) {
diff --git a/src/stores/profile.ts b/src/stores/profile.ts
index 4162d09..f6e3646 100644
--- a/src/stores/profile.ts
+++ b/src/stores/profile.ts
@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import { apiRequest } from '@/lib/api'
 import { useAuthStore } from '@/stores/auth'
-import type { ApiCloud, ApiPage, PublicProfile } from '@/types/api'
+import type { ApiCloud, ApiPage, LikeStats, PublicProfile } from '@/types/api'
 import type { CloudType, Profile } from '@/types/database'
 
 export interface ProfileCloudItem {
@@ -21,6 +21,8 @@ export interface ProfileCloudItem {
   is_hidden: boolean
   cloudTypeName: string
   cloudTypeRarity: CloudType['rarity']
+  favoriteCount: number
+  isFavorited: boolean
 }
 
 function toProfileCloud(row: ApiCloud): ProfileCloudItem {
@@ -40,6 +42,8 @@ function toProfileCloud(row: ApiCloud): ProfileCloudItem {
     is_hidden: row.is_hidden,
     cloudTypeName: row.cloud_type_name || row.custom_cloud_type || '未知',
     cloudTypeRarity: row.cloud_type_rarity || 'common',
+    favoriteCount: row.favorite_count,
+    isFavorited: row.is_favorited,
   }
 }
 
@@ -55,6 +59,7 @@ export const useProfileStore = defineStore('profile-page', () => {
   const authStore = useAuthStore()
   const profilesById = ref<Record<string, Profile>>({})
   const cloudsByKey = ref<Record<string, ProfileCloudItem[]>>({})
+  const likeStatsByUserId = ref<Record<string, LikeStats>>({})
   const loadingKeys = ref<Record<string, boolean>>({})
   const errorByKey = ref<Record<string, string>>({})
 
@@ -68,6 +73,10 @@ export const useProfileStore = defineStore('profile-page', () => {
     return userId ? cloudsByKey.value[makeKey(userId, isOwnProfile)] ?? [] : []
   }
 
+  function getLikeStats(userId: string | null) {
+    return userId ? likeStatsByUserId.value[userId] ?? null : null
+  }
+
   function getError(userId: string | null, isOwnProfile: boolean) {
     return userId ? errorByKey.value[makeKey(userId, isOwnProfile)] ?? '' : ''
   }
@@ -99,9 +108,17 @@ export const useProfileStore = defineStore('profile-page', () => {
       const profilePromise = isOwnProfile && authStore.profile?.id === userId
         ? Promise.resolve(authStore.profile)
         : apiRequest<PublicProfile>(`/profiles/${userId}`, { auth: false }).then(toProfile)
-      const [profile, cloudRows] = await Promise.all([profilePromise, fetchAllClouds(userId, isOwnProfile)])
+      const likeStatsPromise = isOwnProfile
+        ? apiRequest<LikeStats>('/profiles/me/like-stats')
+        : Promise.resolve(null)
+      const [profile, cloudRows, likeStats] = await Promise.all([
+        profilePromise,
+        fetchAllClouds(userId, isOwnProfile),
+        likeStatsPromise,
+      ])
       profilesById.value[userId] = profile
       cloudsByKey.value[key] = cloudRows.map(toProfileCloud)
+      if (likeStats) likeStatsByUserId.value[userId] = likeStats
     } catch (error) {
       errorByKey.value[key] = error instanceof Error ? error.message : '个人主页加载失败'
       cloudsByKey.value[key] = []
@@ -186,6 +203,7 @@ export const useProfileStore = defineStore('profile-page', () => {
   return {
     getProfile,
     getClouds,
+    getLikeStats,
     getError,
     isLoaded,
     isLoading,
diff --git a/src/styles/components.css b/src/styles/components.css
index 90d9dc4..0ab2554 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -40,6 +40,21 @@
     @apply py-10;
   }
 
+  .oc-page-hero__split {
+    @apply grid gap-6;
+  }
+
+  @media (min-width: 900px) {
+    .oc-page-hero__split {
+      grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr);
+      align-items: start;
+    }
+
+    .oc-page-hero__split--stretch {
+      align-items: stretch;
+    }
+  }
+
   .oc-page-content {
     @apply py-8;
   }
@@ -56,6 +71,11 @@
     @apply mt-4 max-w-2xl text-sm leading-7 text-slate-600;
   }
 
+  .oc-brand-mark {
+    @apply flex h-10 w-10 items-center justify-center border border-sky-200 bg-sky-100;
+    box-shadow: var(--oc-shadow-sm);
+  }
+
   /* Reusable text hierarchy */
   .oc-section-label {
     @apply text-xs uppercase tracking-[0.18em] text-slate-500;
@@ -99,6 +119,14 @@
     box-shadow: var(--oc-shadow-md) !important;
   }
 
+  .oc-panel-card-xl {
+    box-shadow: var(--oc-shadow-xl) !important;
+  }
+
+  .oc-floating-panel {
+    box-shadow: var(--oc-shadow-lg);
+  }
+
   .oc-panel-card-soft {
     box-shadow: 6px 6px 0 0 rgb(15 23 42 / 4%) !important;
   }
@@ -112,6 +140,11 @@
     box-shadow: var(--oc-shadow-md);
   }
 
+  .oc-modal-shell {
+    @apply border border-slate-200 bg-white;
+    box-shadow: var(--oc-shadow-xl);
+  }
+
   .oc-inset-panel {
     @apply border border-slate-200 bg-slate-50 p-4;
   }
@@ -327,6 +360,19 @@
     @apply outline-none ring-2 ring-sky-600 ring-offset-2;
   }
 
+  .oc-interactive-card {
+    box-shadow: var(--oc-shadow-md);
+  }
+
+  .oc-interactive-card:hover {
+    box-shadow: var(--oc-shadow-lg);
+  }
+
+  .oc-interactive-card--selected {
+    @apply border-sky-500;
+    box-shadow: var(--oc-shadow-sky) !important;
+  }
+
   .oc-interactive-row {
     transition:
       background-color var(--oc-duration-fast) var(--oc-ease-standard),
@@ -407,7 +453,7 @@
   .oc-panel-button.n-button.n-button--disabled {
     border-color: rgb(226 232 240) !important;
     background: rgb(241 245 249) !important;
-    color: rgb(148 163 184) !important;
+    color: var(--oc-color-text-disabled) !important;
     box-shadow: none !important;
     opacity: 0.72;
     transform: none !important;
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 86a600d..f500f00 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -43,6 +43,7 @@
   --oc-color-text: #0f172a;
   --oc-color-text-secondary: #334155;
   --oc-color-text-muted: #64748b;
+  --oc-color-text-disabled: #94a3b8;
   --oc-color-border: #d9e3ee;
   --oc-color-primary: #34745d;
   --oc-color-primary-hover: #2d5f4e;
@@ -53,6 +54,18 @@
   --oc-color-danger: #dc2626;
   --oc-color-selection: rgb(52 116 93 / 20%);
 
+  /* Contribution heatmap: no activity + GitHub-style contribution quartiles. */
+  --oc-heatmap-empty: #f1f5f9;
+  --oc-heatmap-empty-border: #d9e3ee;
+  --oc-heatmap-level-1: #ddf2e6;
+  --oc-heatmap-level-1-border: #bce4cf;
+  --oc-heatmap-level-2: #8fceb0;
+  --oc-heatmap-level-2-border: #60b18d;
+  --oc-heatmap-level-3: #438f71;
+  --oc-heatmap-level-3-border: #34745d;
+  --oc-heatmap-level-4: #274c40;
+  --oc-heatmap-level-4-border: #213e35;
+
   --oc-gradient-canvas:
     radial-gradient(circle at top left, rgb(52 116 93 / 11%), transparent 28%),
     linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
@@ -70,6 +83,7 @@
   --oc-shadow-sky: 4px 4px 0 0 rgb(14 165 233 / 14%);
   --oc-shadow-primary: 4px 4px 0 0 rgb(52 116 93 / 14%);
   --oc-shadow-primary-hover: 5px 5px 0 0 rgb(52 116 93 / 20%);
+  --oc-shadow-amber: 5px 5px 0 0 rgb(245 158 11 / 12%);
   --oc-shadow-teal: var(--oc-shadow-primary);
 
   --oc-duration-fast: 160ms;
diff --git a/src/types/api.ts b/src/types/api.ts
index f0532fb..377a390 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -4,6 +4,13 @@ export interface AuthUser {
   id: string
   email: string
   email_verified: boolean
+  username: string
+  avatar_url: string | null
+  role: Profile['role']
+  is_disabled: boolean
+  cloud_count: number
+  public_cloud_count: number
+  collection_count: number
   created_at: string
 }
 
@@ -12,12 +19,10 @@ export interface AuthResponse {
   token_type: 'bearer'
   expires_in: number
   user: AuthUser
-  profile: Profile
 }
 
 export interface MeResponse {
   user: AuthUser
-  profile: Profile
 }
 
 export interface PublicProfile {
@@ -54,6 +59,24 @@ export interface ApiCloud extends Cloud {
   cloud_type_name: string | null
   cloud_type_rarity: CloudType['rarity'] | null
   username: string | null
+  favorite_count: number
+  is_favorited: boolean
+}
+
+export interface LikeStatsPhoto {
+  cloud_id: string
+  image_url: string
+  thumbnail_url: string
+  favorite_count: number
+  captured_at: string | null
+  created_at: string
+}
+
+export interface LikeStats {
+  user_id: string
+  username: string
+  total_likes: number
+  photos: LikeStatsPhoto[]
 }
 
 export interface ApiCollection extends UserCollection {
@@ -89,5 +112,4 @@ export interface AdminStats {
 
 export interface AdminUserItem {
   user: AuthUser
-  profile: Profile
 }
diff --git a/src/views/admin/AdminView.vue b/src/views/admin/AdminView.vue
index faf8501..0479f19 100644
--- a/src/views/admin/AdminView.vue
+++ b/src/views/admin/AdminView.vue
@@ -234,7 +234,7 @@ async function fetchStats() {
 
 async function fetchUsers() {
   const result = await apiRequest<ApiPage<AdminUserItem>>('/admin/users?page=1&page_size=100')
-  users.value = result.items.map(item => item.profile)
+  users.value = result.items.map(item => item.user)
 }
 
 async function fetchImages() {
@@ -435,7 +435,7 @@ async function updateUserRole(user: Profile, role: Profile['role']) {
       method: 'PATCH',
       body: { role },
     })
-    users.value = users.value.map(item => item.id === user.id ? result.profile : item)
+    users.value = users.value.map(item => item.id === user.id ? result.user : item)
     message.success('用户角色已更新')
   } catch (error) {
     const text = getErrorMessage(error, '用户角色更新失败')
@@ -461,7 +461,7 @@ async function toggleUserDisabled(user: Profile) {
       method: 'PATCH',
       body: { is_disabled: nextDisabled },
     })
-    users.value = users.value.map(item => item.id === user.id ? result.profile : item)
+    users.value = users.value.map(item => item.id === user.id ? result.user : item)
     message.success(nextDisabled ? '用户已禁用' : '用户已恢复')
   } catch (error) {
     const text = getErrorMessage(error, '用户状态更新失败')
@@ -502,7 +502,7 @@ onMounted(loadAdminData)
       >
         <div class="flex items-center">
           <div class="flex min-w-0 items-center gap-3">
-            <span class="flex h-10 w-10 shrink-0 items-center justify-center border border-sky-200 bg-sky-50 text-sky-800 shadow-[3px_3px_0_0_rgba(14,165,233,0.12)]">
+            <span class="admin-brand-icon flex h-10 w-10 shrink-0 items-center justify-center border border-sky-200 bg-sky-50 text-sky-800">
               <NIcon size="22"><Shield /></NIcon>
             </span>
             <span
@@ -538,7 +538,7 @@ onMounted(loadAdminData)
             type="button"
             class="group relative flex min-w-[150px] items-center gap-3 overflow-hidden border px-3 py-3 text-left transition-[background-color,border-color,color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2 lg:w-full lg:min-w-0"
             :class="activeTab === tab.key
-              ? 'border-teal-200 bg-teal-50 text-teal-900 shadow-[3px_3px_0_0_rgba(52,116,93,0.16)]'
+              ? 'admin-control-active border-teal-200 bg-teal-50 text-teal-900'
               : 'border-transparent bg-white text-slate-600 hover:border-slate-200 hover:bg-slate-50 hover:text-slate-950'"
             :aria-current="activeTab === tab.key ? 'page' : undefined"
             :aria-label="tab.label"
@@ -580,7 +580,7 @@ onMounted(loadAdminData)
                 type="button"
                 class="flex h-14 min-w-0 flex-1 items-center gap-3 overflow-hidden border px-3 py-2 text-left transition-[background-color,border-color,color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 lg:w-full"
                 :class="accountMenuOpen
-                  ? 'border-teal-200 bg-teal-50 text-teal-800 shadow-[3px_3px_0_0_rgba(52,116,93,0.16)]'
+                  ? 'admin-control-active border-teal-200 bg-teal-50 text-teal-800'
                   : 'border-slate-200 bg-slate-50 text-slate-700 hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800'"
                 aria-label="打开管理员账户菜单"
                 aria-haspopup="menu"
@@ -611,7 +611,7 @@ onMounted(loadAdminData)
             </template>
 
             <div
-              class="w-64 border border-slate-200 bg-white shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]"
+              class="oc-floating-panel w-64 border border-slate-200 bg-white"
               role="menu"
               aria-label="管理员账户"
             >
@@ -663,7 +663,7 @@ onMounted(loadAdminData)
           </NPopover>
           <RouterLink
             to="/"
-            class="flex h-[46px] shrink-0 items-center justify-start gap-3 overflow-hidden border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-700 shadow-[3px_3px_0_0_rgba(15,23,42,0.06)] transition-colors hover:border-sky-200 hover:bg-sky-50 hover:text-sky-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 lg:w-full"
+            class="oc-panel-button oc-panel-button--neutral flex h-[46px] shrink-0 items-center justify-start gap-3 overflow-hidden px-3 font-semibold focus-visible:ring-2 focus-visible:ring-sky-600 lg:w-full"
             title="返回主页"
           >
             <NIcon size="20" class="shrink-0"><Home /></NIcon>
@@ -728,8 +728,8 @@ onMounted(loadAdminData)
             <div
               class="flex flex-col justify-between gap-5 border p-6 sm:flex-row sm:items-center"
               :class="dashboardStats.pending
-                ? 'border-amber-200 bg-[linear-gradient(135deg,#fffbeb_0%,#fff_52%,#f2faf6_100%)] shadow-[5px_5px_0_0_rgba(245,158,11,0.12)]'
-                : 'border-teal-200 bg-[linear-gradient(135deg,#f2faf6_0%,#fff_55%,#eff6ff_100%)] shadow-[5px_5px_0_0_rgba(52,116,93,0.16)]'"
+                ? 'admin-priority-card--pending border-amber-200 bg-[linear-gradient(135deg,#fffbeb_0%,#fff_52%,#f2faf6_100%)]'
+                : 'admin-priority-card--clear border-teal-200 bg-[linear-gradient(135deg,#f2faf6_0%,#fff_55%,#eff6ff_100%)]'"
             >
               <div class="flex items-center gap-5">
                 <div
@@ -1341,3 +1341,21 @@ onMounted(loadAdminData)
     </ImageDetailModal>
   </div>
 </template>
+
+<style scoped>
+.admin-brand-icon {
+  box-shadow: var(--oc-shadow-sky);
+}
+
+.admin-control-active {
+  box-shadow: var(--oc-shadow-primary);
+}
+
+.admin-priority-card--pending {
+  box-shadow: var(--oc-shadow-amber);
+}
+
+.admin-priority-card--clear {
+  box-shadow: var(--oc-shadow-primary-hover);
+}
+</style>
diff --git a/src/views/auth/AuthConfirmView.vue b/src/views/auth/AuthConfirmView.vue
index 7d4596a..68421f4 100644
--- a/src/views/auth/AuthConfirmView.vue
+++ b/src/views/auth/AuthConfirmView.vue
@@ -53,7 +53,7 @@ onUnmounted(() => {
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
     <div class="mx-auto max-w-3xl">
-      <NCard class="shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+      <NCard class="oc-panel-card-xl">
       <template v-if="state === 'success'">
         <NResult status="success" title="邮箱认证成功" description="你的邮箱已确认，现在可以登录了。">
           <template #footer>
diff --git a/src/views/auth/ForgotPasswordView.vue b/src/views/auth/ForgotPasswordView.vue
index c26a7e7..e177096 100644
--- a/src/views/auth/ForgotPasswordView.vue
+++ b/src/views/auth/ForgotPasswordView.vue
@@ -74,7 +74,7 @@ onUnmounted(() => {
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
     <div class="mx-auto grid min-w-0 max-w-6xl gap-8 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
-      <section class="min-w-0 overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_52%,#f2faf6_100%)] p-6 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)] sm:p-8">
+      <section class="oc-panel-card-xl min-w-0 overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_52%,#f2faf6_100%)] p-6 sm:p-8">
         <p class="text-sm uppercase tracking-[0.26em] text-sky-700">Password Recovery</p>
         <h1 class="mt-4 max-w-xl break-words text-4xl font-black leading-[1.05] text-slate-900 sm:text-5xl">
           重新拿回你的
@@ -97,7 +97,7 @@ onUnmounted(() => {
         </div>
       </section>
 
-      <NCard class="min-w-0 shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+      <NCard class="oc-panel-card-xl min-w-0">
         <NResult
           v-if="submitted"
           status="success"
@@ -121,7 +121,7 @@ onUnmounted(() => {
                   {{ resendButtonLabel }}
                 </NButton>
                 <RouterLink :to="{ path: '/login', query: { email } }" class="no-underline">
-                  <NButton type="default" class="oc-panel-button oc-panel-button--neutral">返回登录</NButton>
+                  <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">返回登录</NButton>
                 </RouterLink>
               </div>
             </div>
@@ -139,8 +139,13 @@ onUnmounted(() => {
             <NFormItem label="邮箱">
               <NInput
                 v-model:value="email"
-                required
-                autocomplete="email"
+                type="text"
+                :input-props="{
+                  autocomplete: 'email',
+                  inputmode: 'email',
+                  name: 'email',
+                  required: true,
+                }"
                 placeholder="your@email.com"
               />
             </NFormItem>
diff --git a/src/views/auth/LoginView.vue b/src/views/auth/LoginView.vue
index 190f2d8..d5f2a30 100644
--- a/src/views/auth/LoginView.vue
+++ b/src/views/auth/LoginView.vue
@@ -43,7 +43,7 @@ async function handleLogin() {
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
     <div class="mx-auto grid min-w-0 max-w-6xl gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-stretch">
-      <section class="flex min-w-0 h-full flex-col justify-between overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#f2faf6_0%,#ffffff_48%,#eff6ff_100%)] p-6 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)] sm:p-8">
+      <section class="oc-panel-card-xl flex min-w-0 h-full flex-col justify-between overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#f2faf6_0%,#ffffff_48%,#eff6ff_100%)] p-6 sm:p-8">
         <div>
           <p class="text-sm uppercase tracking-[0.26em] text-teal-700">Sky Log In</p>
           <h1 class="mt-4 max-w-xl break-words text-4xl font-black leading-[1.05] text-slate-900 sm:text-5xl">
@@ -68,7 +68,7 @@ async function handleLogin() {
         </div>
       </section>
 
-      <NCard class="min-w-0 h-full shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+      <NCard class="oc-panel-card-xl min-w-0 h-full">
         <div class="mb-8">
           <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Member Access</div>
           <h2 class="mt-3 text-3xl font-bold text-slate-900">登录 OpenCloud</h2>
@@ -79,8 +79,13 @@ async function handleLogin() {
           <NFormItem label="邮箱">
             <NInput
               v-model:value="email"
-              required
-              autocomplete="email"
+              type="text"
+              :input-props="{
+                autocomplete: 'username',
+                inputmode: 'email',
+                name: 'username',
+                required: true,
+              }"
               placeholder="your@email.com"
             />
           </NFormItem>
@@ -89,9 +94,12 @@ async function handleLogin() {
             <NInput
               v-model:value="password"
               type="password"
-              required
               show-password-on="click"
-              autocomplete="current-password"
+              :input-props="{
+                autocomplete: 'current-password',
+                name: 'current-password',
+                required: true,
+              }"
               placeholder="输入密码"
             />
           </NFormItem>
diff --git a/src/views/auth/RegisterView.vue b/src/views/auth/RegisterView.vue
index a0b195f..07177c8 100644
--- a/src/views/auth/RegisterView.vue
+++ b/src/views/auth/RegisterView.vue
@@ -48,7 +48,7 @@ async function handleRegister() {
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
     <div class="mx-auto grid min-w-0 max-w-6xl gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-stretch">
-      <section class="flex min-w-0 h-full flex-col justify-between overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_42%,#f2faf6_100%)] p-6 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)] sm:p-8">
+      <section class="oc-panel-card-xl flex min-w-0 h-full flex-col justify-between overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_42%,#f2faf6_100%)] p-6 sm:p-8">
         <div>
           <p class="text-sm uppercase tracking-[0.26em] text-sky-700">Observer Join</p>
           <h1 class="mt-4 max-w-xl break-words text-4xl font-black leading-[1.05] text-slate-900 sm:text-5xl">
@@ -73,7 +73,7 @@ async function handleRegister() {
         </div>
       </section>
 
-      <NCard class="min-w-0 h-full shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+      <NCard class="oc-panel-card-xl min-w-0 h-full">
         <NResult
           v-if="emailSent"
           status="success"
@@ -105,8 +105,11 @@ async function handleRegister() {
               <NInput
                 v-model:value="username"
                 type="text"
-                required
-                autocomplete="username"
+                :input-props="{
+                  autocomplete: 'username',
+                  name: 'username',
+                  required: true,
+                }"
                 placeholder="你的昵称"
                 maxlength="20"
               />
@@ -115,8 +118,13 @@ async function handleRegister() {
             <NFormItem label="邮箱">
               <NInput
                 v-model:value="email"
-                required
-                autocomplete="email"
+                type="text"
+                :input-props="{
+                  autocomplete: 'email',
+                  inputmode: 'email',
+                  name: 'email',
+                  required: true,
+                }"
                 placeholder="your@email.com"
               />
             </NFormItem>
@@ -125,9 +133,12 @@ async function handleRegister() {
               <NInput
                 v-model:value="password"
                 type="password"
-                required
                 show-password-on="click"
-                autocomplete="new-password"
+                :input-props="{
+                  autocomplete: 'new-password',
+                  name: 'new-password',
+                  required: true,
+                }"
                 placeholder="至少8位"
               />
             </NFormItem>
@@ -136,9 +147,12 @@ async function handleRegister() {
               <NInput
                 v-model:value="confirmPassword"
                 type="password"
-                required
                 show-password-on="click"
-                autocomplete="new-password"
+                :input-props="{
+                  autocomplete: 'new-password',
+                  name: 'confirm-new-password',
+                  required: true,
+                }"
                 placeholder="再次输入密码"
               />
             </NFormItem>
diff --git a/src/views/auth/ResetPasswordView.vue b/src/views/auth/ResetPasswordView.vue
index 301f9ee..342b2b8 100644
--- a/src/views/auth/ResetPasswordView.vue
+++ b/src/views/auth/ResetPasswordView.vue
@@ -105,7 +105,7 @@ onUnmounted(() => {
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
     <div class="mx-auto max-w-2xl">
-      <NCard class="shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+      <NCard class="oc-panel-card-xl">
         <NResult
           v-if="state === 'success'"
           status="success"
@@ -142,13 +142,24 @@ onUnmounted(() => {
           </div>
 
           <NForm @submit.prevent="handleResetPassword">
+            <input
+              type="text"
+              name="username"
+              autocomplete="username"
+              class="sr-only"
+              tabindex="-1"
+              aria-label="账户用户名"
+            />
             <NFormItem label="新密码">
               <NInput
                 v-model:value="password"
                 type="password"
-                required
                 show-password-on="click"
-                autocomplete="new-password"
+                :input-props="{
+                  autocomplete: 'new-password',
+                  name: 'new-password',
+                  required: true,
+                }"
                 placeholder="至少 8 位"
               />
             </NFormItem>
@@ -157,9 +168,12 @@ onUnmounted(() => {
               <NInput
                 v-model:value="confirmPassword"
                 type="password"
-                required
                 show-password-on="click"
-                autocomplete="new-password"
+                :input-props="{
+                  autocomplete: 'new-password',
+                  name: 'confirm-new-password',
+                  required: true,
+                }"
                 placeholder="再次输入新密码"
               />
             </NFormItem>
diff --git a/src/views/community/CommunityView.vue b/src/views/community/CommunityView.vue
index 90dd4d9..f34297f 100644
--- a/src/views/community/CommunityView.vue
+++ b/src/views/community/CommunityView.vue
@@ -3,7 +3,7 @@
 
 <template>
   <div class="min-h-[calc(100vh-4rem)] bg-[linear-gradient(180deg,#f2faf6_0%,#f8fafc_100%)] px-4 py-16">
-    <section class="mx-auto max-w-4xl border border-slate-200 bg-white p-10 shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+    <section class="oc-panel-card-xl mx-auto max-w-4xl border border-slate-200 bg-white p-10">
       <p class="text-sm font-semibold uppercase tracking-[0.24em] text-teal-700">Community</p>
       <h1 class="mt-4 text-4xl font-bold text-slate-900">社区</h1>
       <p class="mt-5 max-w-2xl text-sm leading-7 text-slate-600">
diff --git a/src/views/encyclopedia/CloudTypeView.vue b/src/views/encyclopedia/CloudTypeView.vue
index a3a5694..4f11650 100644
--- a/src/views/encyclopedia/CloudTypeView.vue
+++ b/src/views/encyclopedia/CloudTypeView.vue
@@ -147,7 +147,7 @@ watch(() => route.params.id, () => {
     <div v-if="loading" class="space-y-6">
       <NSkeleton class="h-80 w-full" />
       <div class="grid gap-4 lg:grid-cols-3">
-        <NCard v-for="n in 3" :key="n">
+        <NCard v-for="n in 3" :key="n" class="oc-panel-card border border-slate-200">
           <NSkeleton class="h-4 w-1/3" />
           <NSkeleton class="mt-4 h-7 w-1/2" />
         </NCard>
@@ -165,7 +165,7 @@ watch(() => route.params.id, () => {
     </NAlert>
 
     <template v-else-if="cloudType">
-      <section class="overflow-hidden border border-slate-200 bg-white shadow-sm">
+      <section class="oc-panel-card overflow-hidden border border-slate-200 bg-white">
         <div class="grid lg:grid-cols-[1.15fr_0.85fr]">
           <div class="relative min-h-[360px] overflow-hidden">
             <img
@@ -197,7 +197,7 @@ watch(() => route.params.id, () => {
               </p>
             </div>
 
-            <NCard class="mt-8 border border-slate-200">
+            <div class="oc-inset-panel mt-8">
               <p class="text-sm text-slate-500">你的收集状态</p>
               <template v-if="isUnlocked && collectionEntry">
                 <p class="oc-stat-value">已解锁</p>
@@ -207,21 +207,21 @@ watch(() => route.params.id, () => {
                 <p class="oc-stat-value">尚未解锁</p>
                 <p class="mt-2 text-sm text-slate-600">拍到并上传这种云朵后，这枚徽章就会被点亮。</p>
               </template>
-            </NCard>
+            </div>
           </div>
         </div>
       </section>
 
       <section class="mt-6 grid gap-4 md:grid-cols-3">
-        <NCard class="border border-slate-200 shadow-sm">
+        <NCard class="oc-panel-card border border-slate-200">
           <p class="text-sm text-slate-500">稀有度</p>
           <p class="oc-stat-value">{{ rarityMeta[cloudType.rarity].label }}</p>
         </NCard>
-        <NCard class="border border-slate-200 shadow-sm">
+        <NCard class="oc-panel-card border border-slate-200">
           <p class="text-sm text-slate-500">公开云图</p>
           <p class="oc-stat-value">{{ publicCount }}</p>
         </NCard>
-        <NCard class="border border-slate-200 shadow-sm">
+        <NCard class="oc-panel-card border border-slate-200">
           <p class="text-sm text-slate-500">首次解锁</p>
           <p class="mt-2 text-xl font-bold text-slate-900">
             {{ collectionEntry ? formatDate(collectionEntry.unlocked_at) : '等待记录' }}
@@ -242,7 +242,7 @@ watch(() => route.params.id, () => {
             v-for="item in gallery"
             :key="item.id"
             type="button"
-          class="oc-interactive-card overflow-hidden border border-slate-200 bg-white text-left shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg"
+            class="oc-interactive-card overflow-hidden border border-slate-200 bg-white text-left transition-transform duration-300 hover:-translate-y-1"
             @click="openGalleryDetail(item)"
           >
             <img :src="item.thumbnail_url || item.image_url" :alt="cloudType.name" class="h-56 w-full object-cover" />
diff --git a/src/views/encyclopedia/EncyclopediaView.vue b/src/views/encyclopedia/EncyclopediaView.vue
index 21e907f..c0ce7bf 100644
--- a/src/views/encyclopedia/EncyclopediaView.vue
+++ b/src/views/encyclopedia/EncyclopediaView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { NAlert, NCard, NEmpty, NIcon, NSkeleton } from 'naive-ui'
+import { NAlert, NEmpty, NIcon, NSkeleton } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useEncyclopediaStore } from '@/stores/encyclopedia'
@@ -64,8 +64,8 @@ onMounted(async () => {
   <div class="relative">
     <div class="oc-page-hero">
       <div class="oc-container oc-container--content oc-page-hero__inner">
-        <div class="grid gap-6 lg:grid-cols-[1.4fr_0.9fr] lg:items-start">
-          <div>
+        <div class="oc-page-hero__split">
+          <div class="min-w-0">
             <p class="oc-page-eyebrow">Cloud Encyclopedia</p>
             <h1 class="oc-page-title">云朵图鉴</h1>
             <p class="oc-page-description">
@@ -76,7 +76,6 @@ onMounted(async () => {
           <EncyclopediaProgressCard
             :unlocked-count="authStore.isLoggedIn ? encyclopediaStore.unlockedCount : 0"
             :total-count="encyclopediaStore.cloudTypes.length || 10"
-            :percent="encyclopediaStore.unlockPercent"
             :is-logged-in="authStore.isLoggedIn"
           />
         </div>
@@ -95,81 +94,75 @@ onMounted(async () => {
         图鉴收藏数据暂时不可用：{{ encyclopediaStore.collectionError }}
       </NAlert>
 
-      <div v-if="encyclopediaStore.loadingCloudTypes" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
-        <NCard v-for="n in 6" :key="n" class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
-          <NSkeleton class="h-44 w-full" />
-          <NSkeleton class="mt-5 h-5 w-2/5" />
-          <NSkeleton class="mt-3 h-4 w-1/3" />
-          <NSkeleton class="mt-6 h-4 w-full" :repeat="2" />
-        </NCard>
+      <div v-if="encyclopediaStore.loadingCloudTypes" class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+        <div v-for="n in 6" :key="n" class="oc-panel-card overflow-hidden border border-slate-200 bg-white">
+          <NSkeleton class="h-44 w-full border-b border-slate-200" />
+          <div class="p-5">
+            <NSkeleton class="h-3 w-1/3" />
+            <NSkeleton class="mt-3 h-6 w-2/5" />
+            <NSkeleton class="mt-2 h-3 w-1/2" />
+            <NSkeleton class="mt-5 h-4 w-full" :repeat="2" />
+            <NSkeleton class="mt-5 h-10 w-full" />
+          </div>
+        </div>
       </div>
 
-      <div v-else-if="encyclopediaStore.cloudTypes.length" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+      <div v-else-if="encyclopediaStore.cloudTypes.length" class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
         <button
           v-for="cloudType in encyclopediaStore.cloudTypes"
           :key="cloudType.id"
           type="button"
           @click="openCard(cloudType)"
-        class="oc-interactive-card group overflow-hidden border bg-white text-left shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg"
-          :class="isUnlocked(cloudType.id) ? 'border-amber-300 shadow-amber-100/60' : 'border-slate-200 hover:border-slate-300'"
+          class="encyclopedia-type-card oc-interactive-card oc-panel-card flex h-full flex-col overflow-hidden border bg-white text-left"
+          :class="isUnlocked(cloudType.id) ? 'border-sky-200' : 'border-slate-200'"
         >
-          <div
-            class="relative h-44 overflow-hidden border-b"
-            :class="isUnlocked(cloudType.id) ? 'border-white/40' : 'border-slate-200'"
-          >
+          <div class="relative h-44 shrink-0 overflow-hidden border-b border-slate-200 bg-sky-50">
             <img
               v-if="getCollectionEntry(cloudType.id)?.firstCloud?.image_url"
               :src="getCollectionEntry(cloudType.id)?.firstCloud?.thumbnail_url || getCollectionEntry(cloudType.id)?.firstCloud?.image_url || ''"
               :alt="cloudType.name"
-              class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
-              :class="isUnlocked(cloudType.id) ? '' : 'grayscale'"
+              class="encyclopedia-type-card__image h-full w-full object-cover"
+              :class="isUnlocked(cloudType.id) ? '' : 'grayscale contrast-75'"
             />
             <div
               v-else
               class="flex h-full w-full items-center justify-center bg-gradient-to-br"
-              :class="isUnlocked(cloudType.id) ? rarityMeta[cloudType.rarity].glow : 'from-slate-300 to-slate-100'"
+              :class="isUnlocked(cloudType.id) ? rarityMeta[cloudType.rarity].glow : 'from-slate-200 to-slate-50'"
             >
-              <span class="text-6xl font-bold text-slate-800/85">{{ cloudType.name.slice(0, 1) }}</span>
+              <span class="font-mono text-5xl font-bold text-slate-500/75">{{ cloudType.name.slice(0, 1) }}</span>
             </div>
 
-            <div class="absolute inset-0 bg-gradient-to-t from-slate-950/70 via-slate-950/10 to-transparent"></div>
-
-            <div v-if="!isUnlocked(cloudType.id)" class="absolute inset-0 flex items-center justify-center bg-slate-950/22 backdrop-blur-[2px]">
-              <div class="border border-white/45 bg-white/15 px-4 py-2 text-sm font-medium text-white">
-                <span style="display: inline-flex; align-items: center; gap: 4px;">
-                  <NIcon size="16" style="display: inline-flex;">
-                    <Lock />
-                  </NIcon>
-                  <span>尚未解锁</span>
-                </span>
-              </div>
-            </div>
-
-            <div class="absolute left-4 top-4">
-              <span class="inline-flex border px-3 py-1 text-xs font-medium" :class="rarityMeta[cloudType.rarity].chip">
-                {{ rarityMeta[cloudType.rarity].label }}
+            <div v-if="!isUnlocked(cloudType.id)" class="absolute inset-0 flex items-center justify-center bg-slate-950/12">
+              <span class="encyclopedia-lock-badge inline-flex items-center gap-2 border border-slate-300 bg-white/92 px-3 py-2 text-xs font-semibold text-slate-700 backdrop-blur">
+                <NIcon size="15"><Lock /></NIcon>
+                尚未收录
               </span>
             </div>
 
-            <div class="absolute bottom-4 left-4 right-4 text-white">
-              <p class="text-xl font-semibold">{{ cloudType.name }}</p>
-              <p class="mt-1 text-sm text-white/80">{{ cloudType.name_en }}</p>
+            <div class="absolute left-4 top-4">
+              <span class="inline-flex border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em]" :class="rarityMeta[cloudType.rarity].chip">
+                {{ rarityMeta[cloudType.rarity].label }}
+              </span>
             </div>
           </div>
 
-          <div class="p-5">
-            <p class="line-clamp-2 min-h-[3.25rem] text-sm leading-6 text-slate-600">
+          <div class="flex flex-1 flex-col p-5">
+            <p class="oc-section-label">Cloud Genus</p>
+            <h2 class="mt-2 text-xl font-bold text-slate-900">{{ cloudType.name }}</h2>
+            <p class="mt-1 font-mono text-xs uppercase tracking-[0.12em] text-slate-500">{{ cloudType.name_en }}</p>
+
+            <p class="mt-4 line-clamp-2 min-h-[3.25rem] text-sm leading-6 text-slate-600">
               {{ cloudType.description || '云层特征和识别要点会显示在这里。' }}
             </p>
 
-            <div class="mt-5 flex items-center justify-between text-sm">
+            <div class="mt-5 flex items-center justify-between gap-3 border-t border-slate-200 pt-4 text-xs">
               <template v-if="isUnlocked(cloudType.id) && getCollectionEntry(cloudType.id)">
-                <span class="font-medium text-amber-700">已收录</span>
-                <span class="text-slate-500">首次记录于 {{ formatUnlockedAt(getCollectionEntry(cloudType.id)!.unlocked_at) }}</span>
+                <span class="font-semibold uppercase tracking-[0.12em] text-sky-800">已收录</span>
+                <span class="text-right text-slate-500">首次记录 {{ formatUnlockedAt(getCollectionEntry(cloudType.id)!.unlocked_at) }}</span>
               </template>
               <template v-else>
-                <span class="font-medium text-slate-700">等待发现</span>
-                <span class="text-slate-400">拍到后点亮</span>
+                <span class="font-semibold uppercase tracking-[0.12em] text-slate-600">等待发现</span>
+                <span class="text-right text-slate-400">拍到后点亮</span>
               </template>
             </div>
           </div>
@@ -183,9 +176,50 @@ onMounted(async () => {
 
     <div
       v-if="lockHint"
-      class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 border border-slate-900 bg-slate-900 px-4 py-2 text-sm text-white shadow-lg"
+      class="encyclopedia-lock-hint fixed bottom-6 left-1/2 z-50 -translate-x-1/2 border border-slate-900 bg-slate-900 px-4 py-2 text-sm text-white"
     >
       {{ lockHint }}
     </div>
   </div>
 </template>
+
+<style scoped>
+.encyclopedia-lock-badge {
+  box-shadow: var(--oc-shadow-xs);
+}
+
+.encyclopedia-lock-hint {
+  box-shadow: var(--oc-shadow-lg);
+}
+
+.encyclopedia-type-card:hover {
+  border-color: rgb(125 211 252);
+  box-shadow: var(--oc-shadow-lg) !important;
+  transform: translate(-1px, -1px);
+}
+
+.encyclopedia-type-card:active {
+  box-shadow: var(--oc-shadow-md) !important;
+  transform: translate(0, 0);
+}
+
+.encyclopedia-type-card__image {
+  transition: transform 500ms ease;
+}
+
+.encyclopedia-type-card:hover .encyclopedia-type-card__image {
+  transform: scale(1.035);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .encyclopedia-type-card,
+  .encyclopedia-type-card__image {
+    transition-duration: 1ms;
+  }
+
+  .encyclopedia-type-card:hover,
+  .encyclopedia-type-card:hover .encyclopedia-type-card__image {
+    transform: none;
+  }
+}
+</style>
diff --git a/src/views/gallery/GalleryView.vue b/src/views/gallery/GalleryView.vue
index cc5c5fe..e0e0e88 100644
--- a/src/views/gallery/GalleryView.vue
+++ b/src/views/gallery/GalleryView.vue
@@ -342,7 +342,7 @@ onUnmounted(() => {
 <template>
   <div>
     <section class="oc-page-hero">
-      <div class="oc-container oc-container--wide oc-page-hero__inner">
+      <div class="oc-container oc-container--content oc-page-hero__inner">
         <p class="oc-page-eyebrow">Community Gallery</p>
         <h1 class="oc-page-title">云图画廊</h1>
         <p class="oc-page-description">
@@ -351,9 +351,9 @@ onUnmounted(() => {
       </div>
     </section>
 
-    <div class="oc-container oc-container--wide oc-page-content">
+    <div class="oc-container oc-container--content oc-page-content">
       <section>
-        <div class="mb-4 border border-slate-200 bg-white p-3 shadow-[6px_6px_0_0_rgba(15,23,42,0.05)]">
+        <div class="oc-panel-card mb-4 border border-slate-200 bg-white p-3">
           <div class="flex items-center gap-3">
             <NIcon size="20" class="shrink-0 text-slate-400">
               <Search />
@@ -430,7 +430,7 @@ onUnmounted(() => {
           :key="cloud.id"
           type="button"
           @click="openDetail(cloud)"
-          class="oc-interactive-card group relative mb-3 block w-full break-inside-avoid overflow-hidden border border-slate-200 bg-slate-200 text-left shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg"
+          class="oc-interactive-card group relative mb-3 block w-full break-inside-avoid overflow-hidden border border-slate-200 bg-slate-200 text-left transition-transform duration-300 hover:-translate-y-1"
         >
           <img
             :src="cloud.thumbnail_url || cloud.image_url"
diff --git a/src/views/map/MapView.vue b/src/views/map/MapView.vue
index d55db1f..9b97bcc 100644
--- a/src/views/map/MapView.vue
+++ b/src/views/map/MapView.vue
@@ -68,8 +68,8 @@ let zoomHoldStarted = false
 
 const rarityColors: Record<string, string> = {
   common: '#cbd5e1',
-  uncommon: '#60a5fa',
-  rare: '#c084fc',
+  uncommon: '#f59e0b',
+  rare: '#f43f5e',
 }
 
 const rarityMeta = {
@@ -218,15 +218,15 @@ function hoverCardContent(cloud: CloudMarkerData): HTMLElement {
 
   const name = document.createElement('span')
   name.textContent = cloud.cloudTypeName
-  name.style.cssText = 'font-size:13px;font-weight:600;color:#1f2937'
+  name.style.cssText = 'font-size:13px;font-weight:600;color:#1e293b'
 
   const rarity = document.createElement('span')
   rarity.textContent = label
   rarity.style.cssText = `font-size:10px;padding:1px 5px;border-radius:3px;color:${border};background:${border}22`
 
   const meta = document.createElement('div')
-  meta.textContent = `📷 ${cloud.username} · ${timeAgo(cloud.capturedAt)}`
-  meta.style.cssText = 'font-size:11px;color:#9ca3af;margin-top:3px'
+  meta.textContent = `${cloud.username} · ${timeAgo(cloud.capturedAt)}`
+  meta.style.cssText = 'font-size:11px;color:#94a3b8;margin-top:3px'
 
   title.append(name, rarity)
   body.append(title, meta)
@@ -727,7 +727,7 @@ onUnmounted(() => {
         <div class="relative w-[min(42vw,420px)] min-w-[220px]">
           <div
             v-if="sliderDragging"
-            class="absolute bottom-8 border border-slate-200 bg-white/95 px-3 py-1.5 text-xs font-medium text-slate-800 shadow-md backdrop-blur"
+            class="oc-panel-card absolute bottom-8 border border-slate-200 bg-white/95 px-3 py-1.5 text-xs font-medium text-slate-800 backdrop-blur"
             :style="{ left: `${selectedMinutePercent}%`, transform: 'translateX(-50%)' }"
           >
             {{ selectedTimeLabel }}
@@ -772,7 +772,7 @@ onUnmounted(() => {
 
           <div
             v-if="archivePanelOpen"
-            class="absolute bottom-16 right-0 w-72 border border-slate-200 bg-white p-4 shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]"
+            class="oc-panel-card absolute bottom-16 right-0 w-72 border border-slate-200 bg-white p-4"
           >
             <div class="flex items-center justify-between gap-2">
               <p class="text-sm font-semibold text-slate-900">历史位置</p>
@@ -841,19 +841,19 @@ onUnmounted(() => {
       @close="previewCloud = null"
     >
       <div class="grid gap-4 sm:grid-cols-2">
-        <div class="rounded-2xl bg-slate-50 p-4">
+        <div class="oc-inset-panel">
           <p class="oc-section-label">上传时间</p>
           <p class="mt-2 text-sm font-medium text-slate-900">{{ formatDateTime(previewCloud.createdAt) }}</p>
         </div>
-        <div class="rounded-2xl bg-slate-50 p-4">
+        <div class="oc-inset-panel">
           <p class="oc-section-label">拍摄时间</p>
           <p class="mt-2 text-sm font-medium text-slate-900">{{ formatDateTime(previewCloud.capturedAt) }}</p>
         </div>
-        <div class="rounded-2xl bg-slate-50 p-4">
+        <div class="oc-inset-panel">
           <p class="oc-section-label">位置</p>
           <p class="mt-2 text-sm font-medium text-slate-900">{{ previewCloud.locationName || '未填写位置名称' }}</p>
         </div>
-        <div class="rounded-2xl bg-slate-50 p-4">
+        <div class="oc-inset-panel">
           <p class="oc-section-label">模糊化经纬度</p>
           <p class="mt-2 text-sm font-medium text-slate-900">
             纬度 {{ formatCoordinate(previewCloud.latitude) }} / 经度 {{ formatCoordinate(previewCloud.longitude) }}
@@ -861,7 +861,7 @@ onUnmounted(() => {
         </div>
       </div>
 
-      <div class="mt-5 rounded-[28px] border border-slate-200 bg-white p-5">
+      <div class="mt-5 border border-slate-200 bg-white p-5">
         <p class="oc-section-label">图片说明</p>
         <p class="mt-3 text-sm leading-7 text-slate-700">
           {{ previewCloud.description || '上传者没有留下额外说明。' }}
diff --git a/src/views/profile/ProfileSettingsView.vue b/src/views/profile/ProfileSettingsView.vue
index ebf3702..2f09458 100644
--- a/src/views/profile/ProfileSettingsView.vue
+++ b/src/views/profile/ProfileSettingsView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { RouterLink } from 'vue-router'
-import { NAlert, NButton, NCard, NInput, useMessage } from 'naive-ui'
+import { NAlert, NButton, NCard, NForm, NInput, useMessage } from 'naive-ui'
 import { useAuthStore } from '@/stores/auth'
 
 const authStore = useAuthStore()
@@ -79,8 +79,8 @@ async function savePassword() {
 </script>
 
 <template>
-  <div class="min-h-[calc(100vh-4rem)] bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)] px-4 py-10">
-    <div class="mx-auto max-w-4xl">
+  <div class="min-h-[calc(100vh-4rem)] bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)] py-10">
+    <div class="oc-container oc-container--content">
       <RouterLink to="/profile">
         <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">← 返回个人主页</NButton>
       </RouterLink>
@@ -111,7 +111,7 @@ async function savePassword() {
           {{ success }}
         </NAlert>
 
-        <NCard class="oc-panel-card border border-slate-200 bg-white shadow-sm" :bordered="false">
+        <NCard class="oc-panel-card border border-slate-200 bg-white" :bordered="false">
           <div class="grid gap-5 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
             <div>
               <h2 class="text-2xl font-bold text-slate-900">公开昵称</h2>
@@ -140,7 +140,7 @@ async function savePassword() {
           </div>
         </NCard>
 
-        <NCard class="oc-panel-card border border-slate-200 bg-white shadow-sm" :bordered="false">
+        <NCard class="oc-panel-card border border-slate-200 bg-white" :bordered="false">
           <div class="grid gap-5 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
             <div>
               <h2 class="text-2xl font-bold text-slate-900">登录密码</h2>
@@ -148,19 +148,37 @@ async function savePassword() {
                 修改后下次登录需要使用新密码。建议使用至少 8 位且不易猜测的密码。
               </p>
             </div>
-            <div class="grid gap-3">
+            <NForm class="grid gap-3" @submit.prevent="savePassword">
+              <input
+                :value="authStore.user?.email || ''"
+                type="text"
+                name="username"
+                autocomplete="username"
+                class="sr-only"
+                tabindex="-1"
+                aria-label="账户邮箱"
+                readonly
+              />
               <NInput
                 v-model:value="newPassword"
                 type="password"
                 show-password-on="click"
-                autocomplete="new-password"
+                :input-props="{
+                  autocomplete: 'new-password',
+                  name: 'new-password',
+                  required: true,
+                }"
                 placeholder="新密码"
               />
               <NInput
                 v-model:value="confirmNewPassword"
                 type="password"
                 show-password-on="click"
-                autocomplete="new-password"
+                :input-props="{
+                  autocomplete: 'new-password',
+                  name: 'confirm-new-password',
+                  required: true,
+                }"
                 placeholder="确认新密码"
               />
               <div class="flex justify-end">
@@ -168,14 +186,14 @@ async function savePassword() {
                   secondary
                   strong
                   type="default"
+                  attr-type="submit"
                   class="oc-panel-button oc-panel-button--teal"
                   :loading="passwordSaving"
-                  @click="savePassword"
                 >
                   保存密码
                 </NButton>
               </div>
-            </div>
+            </NForm>
           </div>
         </NCard>
       </div>
diff --git a/src/views/profile/ProfileView.vue b/src/views/profile/ProfileView.vue
index cbfcebd..dd8e667 100644
--- a/src/views/profile/ProfileView.vue
+++ b/src/views/profile/ProfileView.vue
@@ -2,7 +2,6 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { NAlert, NButton, NCard, NDropdown, NEmpty, NIcon, NSkeleton, useMessage } from 'naive-ui'
-import EncyclopediaProgressCard from '@/components/cloud/EncyclopediaProgressCard.vue'
 import { Settings } from '@vicons/tabler'
 import CloudEditModal, { type CloudEditFormValue } from '@/components/cloud/CloudEditModal.vue'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
@@ -10,7 +9,6 @@ import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
 import ContributionHeatmap from '@/components/profile/ContributionHeatmap.vue'
 import { useAuthStore } from '@/stores/auth'
 import { useCloudsStore } from '@/stores/clouds'
-import { useEncyclopediaStore } from '@/stores/encyclopedia'
 import { useProfileStore, type ProfileCloudItem } from '@/stores/profile'
 import type { CloudType, Profile } from '@/types/database'
 
@@ -23,7 +21,6 @@ interface TimelineGroup {
 const route = useRoute()
 const authStore = useAuthStore()
 const cloudsStore = useCloudsStore()
-const encyclopediaStore = useEncyclopediaStore()
 const profileStore = useProfileStore()
 const message = useMessage()
 
@@ -65,6 +62,7 @@ const errorMsg = computed(() => {
 })
 const profileData = computed<Profile | null>(() => profileStore.getProfile(viewedUserId.value))
 const clouds = computed<ProfileCloudItem[]>(() => profileStore.getClouds(viewedUserId.value, isOwnProfile.value))
+const receivedLikes = computed(() => profileStore.getLikeStats(viewedUserId.value)?.total_likes || 0)
 
 const pageTitle = computed(() => {
   return isOwnProfile.value ? '我的天空日志' : `${profileData.value?.username || '这位用户'}的天空日志`
@@ -83,10 +81,6 @@ const approvedShots = computed(() => {
   return clouds.value.filter(item => item.status === 'approved').length
 })
 
-const pendingShots = computed(() => {
-  return clouds.value.filter(item => item.status === 'pending').length
-})
-
 const selectedCloudCount = computed(() => selectedCloudIds.value.size)
 
 const cloudActionOptions = computed(() => {
@@ -184,44 +178,6 @@ const activeUploadDays = computed(() => {
   return contributionCells.value.filter(cell => cell.count > 0).length
 })
 
-const currentUploadStreak = computed(() => {
-  let streak = 0
-  const cursor = startOfDay(new Date())
-
-  while (true) {
-    const key = toLocalDayKey(cursor)
-    if ((uploadDayCounts.value.get(key) || 0) <= 0) break
-    streak += 1
-    cursor.setDate(cursor.getDate() - 1)
-  }
-
-  return streak
-})
-
-const longestUploadStreak = computed(() => {
-  let best = 0
-  let current = 0
-  let previousDate: Date | null = null
-
-  for (const cell of contributionCells.value) {
-    if (cell.count <= 0) continue
-
-    const currentDate = startOfDay(new Date(cell.date))
-
-    if (!previousDate) {
-      current = 1
-    } else {
-      const diffDays = Math.round((currentDate.getTime() - previousDate.getTime()) / 86400000)
-      current = diffDays === 1 ? current + 1 : 1
-    }
-
-    if (current > best) best = current
-    previousDate = currentDate
-  }
-
-  return best
-})
-
 function toDayKey(iso: string) {
   const date = new Date(iso)
   return toLocalDayKey(date)
@@ -233,10 +189,6 @@ function toLocalDayKey(date: Date) {
   return `${date.getFullYear()}-${month}-${day}`
 }
 
-function startOfDay(date: Date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
-}
-
 function formatDate(iso: string | null) {
   if (!iso) return '未知时间'
   return new Date(iso).toLocaleDateString('zh-CN', {
@@ -448,8 +400,6 @@ async function loadProfilePage(force = false) {
 
   if (isOwnProfile.value) {
     await cloudsStore.fetchCloudTypes()
-    await encyclopediaStore.fetchCloudTypes(force)
-    await encyclopediaStore.fetchMyCollection(force)
   }
 }
 
@@ -475,77 +425,98 @@ watch(selectedUploadDate, async newValue => {
   <div class="relative">
     <div class="oc-page-hero">
       <div class="oc-container oc-container--content oc-page-hero__inner">
-        <div v-if="loading" class="grid gap-6 lg:grid-cols-[1.25fr_0.95fr]">
-          <NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
+        <div
+          v-if="loading"
+          class="oc-page-hero__split"
+        >
+          <NCard class="oc-panel-card h-full border border-slate-200" :bordered="false">
             <NSkeleton class="h-6 w-1/3" />
             <NSkeleton class="mt-4 h-10 w-2/3" />
             <NSkeleton class="mt-5 h-4 w-full" :repeat="2" />
           </NCard>
-          <NCard class="oc-panel-card-soft border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
+          <div v-if="isOwnProfile" class="grid grid-cols-2 gap-3 min-[900px]:h-full min-[900px]:grid-rows-2">
+            <NCard v-for="n in 4" :key="n" class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
+              <NSkeleton class="h-3 w-2/3" />
+              <NSkeleton class="mt-3 h-7 w-1/2" />
+            </NCard>
+          </div>
+
+          <NCard v-else class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
             <NSkeleton class="h-5 w-1/3" />
             <NSkeleton class="mt-4 h-8 w-1/2" />
             <NSkeleton class="mt-5 h-3 w-full" />
           </NCard>
         </div>
 
-        <div v-else class="grid gap-6 lg:grid-cols-[1.25fr_0.95fr] lg:items-start">
-          <div class="flex gap-5">
-            <div
-              class="flex h-20 w-20 shrink-0 items-center justify-center border border-slate-300 bg-[linear-gradient(135deg,#eef9f3_0%,#d9efe3_100%)] text-3xl font-bold text-slate-900 shadow-[4px_4px_0_0_rgba(15,23,42,0.08)]"
-            >
-              <img
-                v-if="profileData?.avatar_url"
-                :src="profileData.avatar_url"
-                :alt="profileData.username"
-                class="h-full w-full object-cover"
-              />
-              <template v-else>
-                {{ getProfileInitial(profileData) }}
-              </template>
-            </div>
+        <div
+          v-else
+          class="oc-page-hero__split oc-page-hero__split--stretch"
+        >
+          <NCard class="oc-panel-card h-full border border-slate-200 bg-white/90 backdrop-blur" :bordered="false">
+            <div class="flex gap-5">
+              <div
+                class="profile-avatar flex h-20 w-20 shrink-0 items-center justify-center border border-slate-300 bg-[linear-gradient(135deg,#eef9f3_0%,#d9efe3_100%)] text-3xl font-bold text-slate-900"
+              >
+                <img
+                  v-if="profileData?.avatar_url"
+                  :src="profileData.avatar_url"
+                  :alt="profileData.username"
+                  class="h-full w-full object-cover"
+                />
+                <template v-else>
+                  {{ getProfileInitial(profileData) }}
+                </template>
+              </div>
 
-            <div class="min-w-0">
-              <p class="oc-page-eyebrow">Sky Journal</p>
-              <h1 class="oc-page-title">
-                {{ pageTitle }}
-              </h1>
-              <div class="mt-3 flex flex-wrap items-center gap-3">
-                <p class="text-lg font-medium text-slate-700">
-                  @{{ profileData?.username || '未知用户' }}
-                </p>
-                <RouterLink v-if="isOwnProfile" to="/profile/settings">
-                  <button
-                    type="button"
-              class="oc-icon-button oc-icon-button--small"
-                    title="个人资料设置"
-                    aria-label="个人资料设置"
-                  >
-                    <NIcon size="17">
-                      <Settings />
-                    </NIcon>
-                  </button>
-                </RouterLink>
-              </div>
-              <!-- <p class="mt-4 max-w-2xl text-sm leading-7 text-slate-600">
-                {{ profileSubtitle }}
-              </p> -->
-              <div class="mt-5 flex flex-wrap items-center gap-3 text-sm text-slate-500">
-                <span>注册于 {{ formatDate(profileData?.created_at || null) }}</span>
-                <!-- <NTag v-if="isOwnProfile" type="primary" :bordered="false">你的主页</NTag>
-                <NTag v-else :bordered="false">公开展示</NTag> -->
+              <div class="min-w-0">
+                <p class="oc-page-eyebrow">Sky Journal</p>
+                <h1 class="oc-page-title">
+                  {{ pageTitle }}
+                </h1>
+                <div class="mt-3 flex flex-wrap items-center gap-3">
+                  <p class="text-lg font-medium text-slate-700">
+                    @{{ profileData?.username || '未知用户' }}
+                  </p>
+                  <RouterLink v-if="isOwnProfile" to="/profile/settings">
+                    <button
+                      type="button"
+                      class="oc-icon-button oc-icon-button--small"
+                      title="个人资料设置"
+                      aria-label="个人资料设置"
+                    >
+                      <NIcon size="17">
+                        <Settings />
+                      </NIcon>
+                    </button>
+                  </RouterLink>
+                </div>
+                <div class="mt-5 flex flex-wrap items-center gap-3 text-sm text-slate-500">
+                  <span>注册于 {{ formatDate(profileData?.created_at || null) }}</span>
+                </div>
               </div>
             </div>
+          </NCard>
+
+          <div v-if="isOwnProfile" class="grid grid-cols-2 gap-3 min-[900px]:h-full min-[900px]:grid-rows-2">
+            <NCard class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
+              <p class="oc-stat-label">总拍摄数</p>
+              <p class="oc-stat-value">{{ totalShots }}</p>
+            </NCard>
+            <NCard class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
+              <p class="oc-stat-label">最常拍云型</p>
+              <p class="mt-2 truncate text-xl font-bold text-slate-900">{{ mostCommonCloudType.name }}</p>
+            </NCard>
+            <NCard class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
+              <p class="oc-stat-label">拍摄天数</p>
+              <p class="oc-stat-value">{{ shootingDays }}</p>
+            </NCard>
+            <NCard class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
+              <p class="oc-stat-label">被点赞数</p>
+              <p class="oc-stat-value">{{ receivedLikes }}</p>
+            </NCard>
           </div>
 
-          <EncyclopediaProgressCard
-            v-if="isOwnProfile"
-            :unlocked-count="encyclopediaStore.unlockedCount"
-            :total-count="encyclopediaStore.cloudTypes.length || 10"
-            :percent="encyclopediaStore.unlockPercent"
-            :is-logged-in="true"
-          />
-
-          <NCard v-else class="oc-panel-card-soft border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
+          <NCard v-if="!isOwnProfile" class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
             <p class="text-sm text-slate-500">公开贡献</p>
             <p class="mt-3 text-3xl font-bold text-slate-900">{{ approvedShots }}</p>
             <p class="mt-2 text-sm text-slate-500">当前公开可见的云图数量</p>
@@ -577,50 +548,12 @@ watch(selectedUploadDate, async newValue => {
       </NAlert>
 
       <template v-else>
-        <div v-if="loading" class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-          <NCard v-for="n in 4" :key="n">
-            <NSkeleton class="h-4 w-1/3" />
-            <NSkeleton class="mt-4 h-8 w-2/3" />
-          </NCard>
-        </div>
-
-        <div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-          <NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
-            <p class="text-sm text-slate-500">总拍摄数</p>
-            <p class="mt-2 text-3xl font-bold text-slate-900">{{ totalShots }}</p>
-          </NCard>
-
-          <NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
-            <p class="text-sm text-slate-500">最常拍云型</p>
-            <p class="oc-stat-value">{{ mostCommonCloudType.name }}</p>
-            <p class="mt-2 text-sm text-slate-500" v-if="mostCommonCloudType.count">
-              共 {{ mostCommonCloudType.count }} 张
-            </p>
-          </NCard>
-
-          <NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
-            <p class="text-sm text-slate-500">拍摄天数</p>
-            <p class="mt-2 text-3xl font-bold text-slate-900">{{ shootingDays }}</p>
-          </NCard>
-
-          <NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
-            <p class="text-sm text-slate-500">{{ isOwnProfile ? '已通过 / 待审核' : '公开通过数' }}</p>
-            <p class="oc-stat-value">
-              <template v-if="isOwnProfile">{{ approvedShots }} / {{ pendingShots }}</template>
-              <template v-else>{{ approvedShots }}</template>
-            </p>
-          </NCard>
-        </div>
-
-        <section ref="timelineSectionRef" class="mt-8">
+        <section ref="timelineSectionRef">
           <ContributionHeatmap
             :cells="contributionCells"
             :total-count="totalShots"
             :active-days="activeUploadDays"
-            :current-streak="currentUploadStreak"
-            :best-streak="longestUploadStreak"
             :active-date="selectedUploadDate"
-            :subtitle="isOwnProfile ? '按上传日期统计' : '按公开上传日期统计'"
             :title="isOwnProfile ? '上传活跃度' : '公开活跃度'"
             @select-date="toggleSelectedUploadDate"
           />
@@ -668,8 +601,12 @@ watch(selectedUploadDate, async newValue => {
               >
                 清除筛选
               </NButton>
-              <RouterLink v-if="isOwnProfile" to="/upload">
-                <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky">继续上传</NButton>
+              <RouterLink
+                v-if="isOwnProfile"
+                to="/upload"
+                class="oc-panel-button oc-panel-button--sky"
+              >
+                继续上传
               </RouterLink>
             </div>
           </div>
@@ -686,7 +623,7 @@ watch(selectedUploadDate, async newValue => {
             <div v-for="n in 2" :key="n">
               <NSkeleton class="h-6 w-40" />
               <div class="mt-4 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
-                <NCard v-for="m in 3" :key="m" class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
+                <NCard v-for="m in 3" :key="m" class="oc-panel-card border border-slate-200" :bordered="false">
                   <NSkeleton class="h-52 w-full" />
                   <NSkeleton class="mt-4 h-5 w-2/3" />
                   <NSkeleton class="mt-3 h-4 w-1/2" />
@@ -708,8 +645,8 @@ watch(selectedUploadDate, async newValue => {
                   :key="item.id"
                   type="button"
                   @click="selectedCloud = item"
-                class="oc-interactive-card group overflow-hidden border bg-white text-left shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg"
-                  :class="selectedUploadDate && toDayKey(item.created_at) === selectedUploadDate ? 'border-sky-500 shadow-sky-100' : 'border-slate-200'"
+                  class="oc-interactive-card group overflow-hidden border bg-white text-left transition-all hover:-translate-y-1"
+                  :class="selectedUploadDate && toDayKey(item.created_at) === selectedUploadDate ? 'oc-interactive-card--selected' : 'border-slate-200'"
                 >
                   <div class="relative">
                     <img
@@ -772,8 +709,12 @@ watch(selectedUploadDate, async newValue => {
           <div v-else class="oc-empty-card border border-dashed border-slate-300 bg-white p-10">
             <NEmpty :description="selectedUploadDate ? '这一天没有上传记录' : (isOwnProfile ? '还没有上传任何云图' : '这位用户还没有公开云图')">
               <template #extra>
-                <RouterLink v-if="isOwnProfile && !selectedUploadDate" to="/upload">
-                  <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky">去上传第一张</NButton>
+                <RouterLink
+                  v-if="isOwnProfile && !selectedUploadDate"
+                  to="/upload"
+                  class="oc-panel-button oc-panel-button--sky"
+                >
+                  去上传第一张
                 </RouterLink>
                 <NButton v-else-if="selectedUploadDate" secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="clearSelectedUploadDate">返回全部记录</NButton>
               </template>
@@ -874,3 +815,9 @@ watch(selectedUploadDate, async newValue => {
     />
   </div>
 </template>
+
+<style scoped>
+.profile-avatar {
+  box-shadow: var(--oc-shadow-sm);
+}
+</style>
diff --git a/src/views/system/AuthRequiredView.vue b/src/views/system/AuthRequiredView.vue
index 1118f99..25a97f0 100644
--- a/src/views/system/AuthRequiredView.vue
+++ b/src/views/system/AuthRequiredView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NButton } from 'naive-ui'
+import { NButton, NIcon } from 'naive-ui'
+import { Lock } from '@vicons/tabler'
 import { RouterLink, useRoute } from 'vue-router'
 
 const route = useRoute()
@@ -30,7 +31,7 @@ const description = computed(() => {
 <template>
   <div class="oc-system-page">
     <div class="oc-system-card">
-      <div class="text-7xl leading-none">🔐</div>
+      <NIcon size="72" class="text-sky-600"><Lock /></NIcon>
       <p class="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-sky-600">401 Login Required</p>
       <h1 class="oc-page-title">{{ title }}</h1>
       <p class="oc-page-description mx-auto max-w-xl">
diff --git a/src/views/system/ForbiddenView.vue b/src/views/system/ForbiddenView.vue
index 8f31aa2..fbc768d 100644
--- a/src/views/system/ForbiddenView.vue
+++ b/src/views/system/ForbiddenView.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { NButton } from 'naive-ui'
+import { NButton, NIcon } from 'naive-ui'
+import { HandStop } from '@vicons/tabler'
 import { RouterLink } from 'vue-router'
 </script>
 
 <template>
   <div class="oc-system-page">
     <div class="oc-system-card">
-      <div class="text-7xl leading-none">🖐️</div>
+      <NIcon size="72" class="text-rose-600"><HandStop /></NIcon>
       <p class="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-rose-600">403 Forbidden</p>
       <h1 class="oc-page-title">这里不让进</h1>
       <p class="oc-page-description mx-auto max-w-xl">
diff --git a/src/views/system/NotFoundView.vue b/src/views/system/NotFoundView.vue
index dc5fb5c..8b95fe0 100644
--- a/src/views/system/NotFoundView.vue
+++ b/src/views/system/NotFoundView.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { NButton } from 'naive-ui'
+import { NButton, NIcon } from 'naive-ui'
+import { Help } from '@vicons/tabler'
 import { RouterLink } from 'vue-router'
 </script>
 
 <template>
   <div class="oc-system-page">
     <div class="oc-system-card">
-      <div class="text-7xl leading-none">🤔</div>
+      <NIcon size="72" class="text-amber-600"><Help /></NIcon>
       <p class="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-amber-600">404 Not Found</p>
       <h1 class="oc-page-title">我也没想明白</h1>
       <p class="oc-page-description mx-auto max-w-xl">
diff --git a/src/views/upload/UploadView.vue b/src/views/upload/UploadView.vue
index 47f5d77..9a9baa8 100644
--- a/src/views/upload/UploadView.vue
+++ b/src/views/upload/UploadView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
-import { NAlert, NButton, NCard, NProgress, NResult, NTag } from 'naive-ui'
+import { NAlert, NButton, NCard, NIcon, NProgress, NResult, NTag } from 'naive-ui'
+import { CloudUpload, Map as MapIcon, X } from '@vicons/tabler'
 import { useRouter } from 'vue-router'
 import { useCloudsStore } from '@/stores/clouds'
 import { useAuthStore } from '@/stores/auth'
@@ -224,9 +225,9 @@ onUnmounted(() => {
           <NCard
             v-for="badge in unlockedBadges"
             :key="badge.cloudTypeId"
-            class="border border-amber-200 bg-[linear-gradient(180deg,#fffbeb_0%,#ffffff_100%)] shadow-sm"
+            class="oc-panel-card border border-amber-200 bg-[linear-gradient(180deg,#fffbeb_0%,#ffffff_100%)]"
           >
-            <div class="flex h-16 w-16 items-center justify-center border border-amber-300 bg-amber-400 text-3xl text-white shadow-sm">
+            <div class="flex h-16 w-16 items-center justify-center border border-amber-300 bg-amber-400 text-3xl text-white">
               {{ badge.cloudName.slice(0, 1) }}
             </div>
             <div class="mt-5">
@@ -256,7 +257,7 @@ onUnmounted(() => {
     </div>
 
     <template v-else>
-      <div v-if="uploading" class="mb-6 border border-slate-200 bg-white p-5 shadow-sm">
+      <div v-if="uploading" class="oc-panel-card mb-6 border border-slate-200 bg-white p-5">
         <div class="flex items-center justify-between mb-2">
           <span class="text-sm font-medium text-slate-700">正在上传 {{ currentItemIndex }} / {{ totalItems }}...</span>
           <span class="text-sm font-medium text-sky-600">{{ overallProgress }}%</span>
@@ -265,8 +266,8 @@ onUnmounted(() => {
           type="line"
           :show-indicator="false"
           :percentage="overallProgress"
-          color="#0ea5e9"
-          rail-color="#dbe4ee"
+          color="var(--oc-color-info)"
+          rail-color="var(--oc-color-border)"
           :height="10"
         />
       </div>
@@ -277,19 +278,19 @@ onUnmounted(() => {
         @dragleave.prevent="dragOver = false"
         @drop.prevent="handleDrop"
         @click="fileInput?.click()"
-        class="flex flex-col items-center justify-center border-2 border-dashed py-20 cursor-pointer transition-colors bg-white shadow-sm"
+        class="oc-panel-card flex cursor-pointer flex-col items-center justify-center border-2 border-dashed bg-white py-20 transition-colors"
         :class="dragOver ? 'border-sky-400 bg-sky-50' : 'border-slate-300 hover:border-sky-400 hover:bg-slate-50'"
       >
-        <span class="text-5xl mb-4">☁️</span>
+        <NIcon size="48" class="mb-4 text-sky-600"><CloudUpload /></NIcon>
         <p class="mb-1 text-lg font-medium text-slate-700">点击或拖拽图片到此处</p>
         <p class="text-sm text-slate-400">支持 JPG、PNG 格式，可一次选择多张</p>
       </div>
 
       <template v-else>
-        <div class="flex gap-6">
-          <div class="flex-shrink-0 w-[480px]">
+        <div class="flex min-w-0 flex-col gap-6 lg:flex-row">
+          <div class="w-full min-w-0 lg:w-[480px] lg:flex-shrink-0">
             <div v-if="activeItem" class="mb-3 overflow-hidden border border-slate-900 bg-slate-900">
-              <img :src="activeItem.preview" alt="预览" class="w-full h-[360px] object-contain" />
+              <img :src="activeItem.preview" alt="预览" class="h-64 w-full object-contain sm:h-[360px]" />
             </div>
             <div class="flex gap-2 overflow-x-auto pb-2">
               <div
@@ -307,7 +308,9 @@ onUnmounted(() => {
                   class="oc-icon-button oc-icon-button--danger oc-icon-button--tiny absolute -right-1 -top-1"
                   title="移除图片"
                   aria-label="移除图片"
-                >✕</button>
+                >
+                  <NIcon size="12"><X /></NIcon>
+                </button>
               </div>
               <div
                 @click="fileInput?.click()"
@@ -319,7 +322,7 @@ onUnmounted(() => {
           </div>
 
           <div class="flex-1 min-w-0" v-if="activeItem">
-            <NCard class="border border-slate-200 shadow-sm">
+            <NCard class="oc-panel-card border border-slate-200">
               <div class="space-y-5">
                 <div class="flex items-center justify-between">
                   <h2 class="text-lg font-semibold text-slate-900">图片信息</h2>
@@ -412,7 +415,7 @@ onUnmounted(() => {
                         aria-label="地图选点"
                         class="oc-icon-button oc-icon-button--sky"
                       >
-                        <span class="text-lg leading-none">🗺️</span>
+                        <NIcon size="20"><MapIcon /></NIcon>
                       </button>
                     </div>
                   </div>
@@ -462,9 +465,9 @@ onUnmounted(() => {
           </div>
         </div>
 
-        <div class="mt-6 flex items-center justify-between">
+        <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <p class="text-sm text-slate-500">共 {{ items.length }} 张图片</p>
-          <div class="flex gap-3">
+          <div class="flex flex-wrap gap-3">
             <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="clearAll()" :disabled="uploading">清空</NButton>
             <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky" @click="handleSubmit" :disabled="uploading">
               {{ uploading ? '上传中...' : '提交上传' }}