style: enhance mobile responsiveness and usability for profile activation component

- Updated styles for the activation container to improve mobile compatibility, including dynamic viewport height adjustments and safe area insets for iOS.
- Changed alignment to flex-start to prevent button truncation and added scrolling capabilities for better content accessibility.
- Enhanced card styles for mobile, ensuring proper margins and preventing overflow.
- Implemented responsive design adjustments for smaller screens, including padding and font size modifications.
- Added specific styles for user information and survey cards to optimize layout on mobile devices.

src/modules/profile/pages/profile-activation/profile-activation.component.scss

@@ -1,11 +1,17 @@
 // 主容器
 .activation-container {
   min-height: 100vh;
+  // ⭐ 修复：使用 100dvh 适配移动端动态视口高度
+  min-height: 100dvh;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start; // ⭐ 改为顶部对齐，避免底部按钮被截断
   padding: 20px;
+  padding-bottom: max(20px, env(safe-area-inset-bottom)); // ⭐ iOS 安全区域适配
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  overflow-y: auto; // ⭐ 允许容器滚动
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch; // ⭐ iOS 平滑滚动
 }
 
 // 激活卡片
@@ -15,8 +21,10 @@
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   width: 100%;
   max-width: 480px;
-  overflow: hidden;
+  overflow: visible; // ⭐ 改为 visible，让内部元素控制滚动
   animation: slideUp 0.4s ease-out;
+  margin: 20px 0; // ⭐ 添加上下边距，确保内容不贴边
+  flex-shrink: 0; // ⭐ 防止卡片被压缩
 }
 
 @keyframes slideUp {
@@ -115,7 +123,9 @@
 
   &.scrollable {
     max-height: 60vh;
+    max-height: 60dvh; // ⭐ 使用动态视口高度
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch; // ⭐ iOS 平滑滚动
   }
 }
 
@@ -572,14 +582,21 @@
   }
 }
 
-// 响应式设计
+// 响应式设计 - 移动端优化
 @media (max-width: 640px) {
   .activation-container {
     padding: 12px;
+    padding-bottom: max(12px, env(safe-area-inset-bottom)); // ⭐ iOS 底部安全区域
+    // ⭐ 移动端确保可以滚动到底部
+    padding-top: 12px;
+    align-items: flex-start; // 确保顶部对齐
   }
 
   .activation-card {
     border-radius: 16px;
+    margin: 0; // ⭐ 移动端去除额外边距
+    // ⭐ 确保卡片不会超出视口
+    max-height: none;
   }
 
   .card-header {
@@ -592,10 +609,16 @@
 
   .card-body {
     padding: 24px;
+    
+    // ⭐ 移动端调整滚动高度
+    &.scrollable {
+      max-height: calc(100dvh - 300px); // 预留头部和底部空间
+    }
   }
 
   .card-footer {
     padding: 20px 24px;
+    padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom))); // ⭐ iOS 底部安全区域
   }
 
   .result-card {
@@ -610,6 +633,29 @@
       font-size: 16px; // 防止iOS自动缩放
     }
   }
+  
+  // ⭐ 移动端优化用户信息区域
+  .user-info {
+    margin-bottom: 24px;
+    
+    .user-avatar {
+      width: 80px;
+      height: 80px;
+    }
+    
+    .user-name {
+      font-size: 20px;
+    }
+  }
+  
+  // ⭐ 移动端优化问卷卡片
+  .survey-card {
+    padding: 24px 20px;
+    
+    h2 {
+      font-size: 18px;
+    }
+  }
 }
 
 // 表单容器样式
@@ -697,3 +743,87 @@
   }
 }
 
+// ⭐ 超小屏幕适配（iPhone SE 等）
+@media (max-width: 375px) {
+  .activation-container {
+    padding: 8px;
+  }
+
+  .activation-card {
+    border-radius: 12px;
+  }
+
+  .card-header {
+    padding: 24px 20px 16px;
+
+    h1 {
+      font-size: 18px;
+    }
+
+    .subtitle {
+      font-size: 13px;
+    }
+  }
+
+  .card-body {
+    padding: 20px;
+  }
+
+  .card-footer {
+    padding: 16px 20px;
+    padding-bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
+  }
+
+  .user-info {
+    margin-bottom: 20px;
+
+    .user-avatar {
+      width: 72px;
+      height: 72px;
+    }
+
+    .user-name {
+      font-size: 18px;
+    }
+  }
+
+  .form-container {
+    .form-group {
+      margin-bottom: 16px;
+    }
+
+    .form-input,
+    .form-select {
+      padding: 10px 14px;
+      font-size: 16px;
+    }
+  }
+}
+
+// ⭐ 横屏模式适配
+@media (max-height: 600px) and (orientation: landscape) {
+  .activation-container {
+    align-items: flex-start;
+    padding-top: 20px;
+  }
+
+  .activation-card {
+    margin: 0;
+  }
+
+  .card-body {
+    &.scrollable {
+      max-height: calc(100dvh - 200px);
+    }
+  }
+
+  .user-info {
+    margin-bottom: 20px;
+
+    .user-avatar {
+      width: 64px;
+      height: 64px;
+    }
+  }
+}
+