feat: Implement responsive page layout components and CSS variables

- Added PageScaffold component for shared page layout with safe-area padding and scroll management.
- Introduced ResponsiveMobileShell for mobile canvas layout with customizable backgrounds.
- Created ScrollablePage component for scrollable content areas.
- Updated CSS styles for coins rules screen, sidebar components, and subscription sections to use responsive design tokens.
- Added viewport CSS variables provider to synchronize CSS variables with the visual viewport.
- Refactored breakpoints and dimensions for better responsiveness across devices.

src/tokens/dimensions.css

@@ -6,8 +6,8 @@
  */
 :root {
   /* 按钮 */
-  --button-height: 48px;
-  --button-height-lg: 56px;
+  --button-height: var(--responsive-control-height, 48px);
+  --button-height-lg: clamp(50px, 10.37vw, 56px);
 
   /* Splash Facebook 登录按钮 */
   --splash-facebook-button-height: 56px;
@@ -17,8 +17,8 @@
   --pwa-button-height: 44px;
 
   /* 对话框 */
-  --dialog-max-width: 360px;
-  --pwa-install-dialog-max-width: 360px;
+  --dialog-max-width: min(calc(100vw - 40px), 380px);
+  --pwa-install-dialog-max-width: min(calc(100vw - 40px), 380px);
   --pwa-install-container-size: 64px;
 
   /* 列表项 */
@@ -26,12 +26,12 @@
 
   /* 消息气泡 */
   --bubble-min-width: 60px;
-  --bubble-max-width: 280px;
+  --bubble-max-width: min(75vw, 280px);
   --bubble-min-height: 36px;
 
   /* 聊天媒体 */
-  --chat-media-max-width: 240px;
-  --chat-media-max-height: 240px;
+  --chat-media-max-width: min(64vw, 260px);
+  --chat-media-max-height: min(64vw, 260px);
 
   /* ==================== Auth 页尺寸（与 Dart AppDimensions / Spacing 对齐） ==================== */
   /* 输入框 / 主按钮高度（46px = Dart AppDimensions.height46） */
@@ -41,7 +41,7 @@
   --auth-social-button-height: 40px;
 
   /* 主按钮固定宽度（Dart AppDimensions.buttonWidth = 334） */
-  --auth-primary-button-width: 334px;
+  --auth-primary-button-width: min(100%, 334px);
 
   /* Logo 高度（120px） */
   --auth-logo-height: 120px;

src/tokens/responsive.css

@@ -4,15 +4,41 @@
  * 设计稿基准：1080x1920 @2x，因此 CSS 设计宽度为 540px。
  * 原则：
  * - 桌面调试最大宽度使用 --shell-max-width / --app-max-width。
- * - 组件尺寸使用 clamp(min, design-ratio vw, design-value)，在 360-540px
+ * - 组件尺寸使用 clamp(min, design-ratio vw, design-value)，在 320-540px
  *   之间平滑缩放，并避免小屏过度压缩。
+ * - 业务 CSS 优先使用语义 token，避免页面散落硬编码尺寸。
  */
 :root {
   --app-design-width: 540px;
   --app-max-width: var(--shell-max-width, 540px);
+  --app-viewport-height: 100dvh;
+  --app-visible-height: 100dvh;
+  --app-safe-top: env(safe-area-inset-top, 0px);
+  --app-safe-right: env(safe-area-inset-right, 0px);
+  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --app-safe-left: env(safe-area-inset-left, 0px);
 
   /* 56px @2x = 28px；小屏保留至少 22px，避免内容贴边。 */
-  --page-padding-x: clamp(22px, 5.185vw, 28px);
+  --page-padding-x: clamp(18px, 5.185vw, 28px);
+  --page-padding-y: clamp(14px, 3.333vw, 20px);
+  --page-section-gap: clamp(12px, 3.333vw, 18px);
+  --page-section-gap-lg: clamp(16px, 4.444vw, 24px);
+
+  /* 页面级语义尺寸 */
+  --responsive-display-title: clamp(28px, 6.296vw, 34px);
+  --responsive-page-title: clamp(22px, 5.185vw, 28px);
+  --responsive-section-title: clamp(17px, 3.704vw, 20px);
+  --responsive-card-title: clamp(16px, 3.333vw, 18px);
+  --responsive-body: clamp(14px, 2.963vw, 16px);
+  --responsive-caption: clamp(12px, 2.407vw, 13px);
+  --responsive-micro: clamp(10px, 2.222vw, 12px);
+
+  --responsive-card-radius: clamp(20px, 5.185vw, 28px);
+  --responsive-card-radius-sm: clamp(18px, 4.074vw, 22px);
+  --responsive-card-padding: clamp(14px, 3.333vw, 18px);
+  --responsive-card-padding-lg: clamp(18px, 4.074vw, 22px);
+  --responsive-control-height: clamp(44px, 8.889vw, 48px);
+  --responsive-icon-button-size: clamp(38px, 8.148vw, 44px);
 
   /* Sidebar 专用响应式尺寸 */
   --sidebar-user-padding-y: clamp(18px, 3.704vw, 20px);