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/page-scaffold.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+
+import styles from "./page-scaffold.module.css";
+
+export interface PageScaffoldProps {
+  children: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+  padded?: boolean;
+  scrollable?: boolean;
+  bodyScrollable?: boolean;
+}
+
+/**
+ * Shared page layout primitive for mobile-first screens.
+ *
+ * Use it when migrating feature pages away from hand-written shell/padding
+ * styles. It keeps safe-area padding and scroll ownership in one place.
+ */
+export function PageScaffold({
+  children,
+  header,
+  footer,
+  className,
+  bodyClassName,
+  padded = true,
+  scrollable = false,
+  bodyScrollable = false,
+}: PageScaffoldProps) {
+  return (
+    <main
+      className={[styles.root, padded ? styles.padded : "", className]
+        .filter(Boolean)
+        .join(" ")}
+      data-scrollable={scrollable}
+    >
+      {header ? <div className={styles.header}>{header}</div> : null}
+      <div
+        className={[styles.body, bodyClassName].filter(Boolean).join(" ")}
+        data-scrollable={bodyScrollable}
+      >
+        {children}
+      </div>
+      {footer ? <div className={styles.footer}>{footer}</div> : null}
+    </main>
+  );
+}