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/app/_components/core/responsive-mobile-shell.tsx

@@ -0,0 +1,33 @@
+import type { CSSProperties, ReactNode } from "react";
+
+import styles from "./responsive-mobile-shell.module.css";
+
+export interface ResponsiveMobileShellProps {
+  children: ReactNode;
+  /** Background used inside the mobile canvas. */
+  background?: string;
+  /** Background used outside the mobile canvas on wider screens. */
+  outerBackground?: string;
+  /** Class applied to the mobile canvas. */
+  className?: string;
+}
+
+export function ResponsiveMobileShell({
+  children,
+  background,
+  outerBackground,
+  className,
+}: ResponsiveMobileShellProps) {
+  const style = {
+    "--mobile-shell-background": background,
+    "--mobile-shell-outer-background": outerBackground,
+  } as CSSProperties;
+
+  return (
+    <div className={styles.shell} style={style}>
+      <div className={[styles.content, className].filter(Boolean).join(" ")}>
+        {children}
+      </div>
+    </div>
+  );
+}