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/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);