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/core/breakpoints.ts

@@ -3,13 +3,15 @@
  *
  * 
  *
- * 与 `src/design/breakpoints.css` 中的 CSS 变量保持一致：
+ * 与 `src/tokens/breakpoints.css` 中的 CSS 变量保持一致：
  *  - 客户端运行时检查（matchMedia）通过 `useBreakpoint` hook
- *  - 服务端 / 客户端 CSS 通过 `src/design/breakpoints.css` 的 media query
+ *  - 服务端 / 客户端 CSS 通过 `src/tokens/breakpoints.css` 的 media query
  */
 export const Breakpoints = {
-  /** 手机设备最大宽度 */
-  mobileMaxWidth: 500,
+  /** 手机设备最大宽度。 */
+  mobileMaxWidth: 599.98,
+  /** 移动端画布最大宽度，来自 1080px @2x 设计稿。 */
+  shellMaxWidth: 540,
   /** 平板设备最小宽度 */
   tabletMinWidth: 600,
   /** 平板设备最大宽度 */