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/coins-rules/coins-rules-screen.module.css

@@ -1,7 +1,11 @@
 .screen {
   min-height: 100dvh;
   box-sizing: border-box;
-  padding: 18px 20px 28px;
+  padding:
+    calc(var(--page-padding-y, 18px) + var(--app-safe-top, 0px))
+    calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px))
+    calc(var(--page-padding-y, 28px) + var(--app-safe-bottom, 0px))
+    calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
   background:
     radial-gradient(circle at 16% 5%, rgba(255, 196, 143, 0.2), transparent 28%),
     radial-gradient(circle at 86% 8%, rgba(246, 87, 160, 0.2), transparent 26%),
@@ -12,15 +16,15 @@
 .header {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: var(--page-section-gap, 18px);
 }
 
 .hero {
   position: relative;
   overflow: hidden;
-  padding: 22px;
+  padding: var(--responsive-card-padding-lg, 22px);
   border: 1px solid rgba(246, 87, 160, 0.14);
-  border-radius: 28px;
+  border-radius: var(--responsive-card-radius, 28px);
   background:
     linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 237, 246, 0.94) 100%),
     #ffffff;
@@ -55,7 +59,7 @@
 .eyebrow {
   margin: 16px 0 0;
   color: #f657a0;
-  font-size: 12px;
+  font-size: var(--responsive-micro, 12px);
   font-weight: 850;
   letter-spacing: 0.12em;
   line-height: 1;
@@ -65,7 +69,7 @@
 .title {
   margin: 8px 0 0;
   color: #171114;
-  font-size: 30px;
+  font-size: var(--responsive-page-title, 30px);
   font-weight: 900;
   letter-spacing: -0.8px;
   line-height: 1.08;
@@ -75,7 +79,7 @@
   max-width: 300px;
   margin: 10px 0 0;
   color: #6d5d64;
-  font-size: 15px;
+  font-size: var(--responsive-body, 15px);
   font-weight: 650;
   line-height: 1.55;
 }
@@ -85,10 +89,10 @@
   grid-template-columns: auto minmax(0, 1fr);
   gap: 12px;
   align-items: center;
-  margin-top: 16px;
-  padding: 16px;
+  margin-top: var(--page-section-gap, 16px);
+  padding: var(--responsive-card-padding, 16px);
   border: 1px solid rgba(248, 184, 62, 0.24);
-  border-radius: 22px;
+  border-radius: var(--responsive-card-radius-sm, 22px);
   background: rgba(255, 250, 235, 0.84);
   box-shadow: 0 12px 28px rgba(142, 93, 18, 0.08);
 }
@@ -108,7 +112,7 @@
 .freeTitle {
   margin: 0;
   color: #2a1f14;
-  font-size: 16px;
+  font-size: var(--responsive-body, 16px);
   font-weight: 850;
   line-height: 1.1;
 }
@@ -116,7 +120,7 @@
 .freeText {
   margin: 5px 0 0;
   color: #7a6040;
-  font-size: 13px;
+  font-size: var(--responsive-caption, 13px);
   font-weight: 650;
   line-height: 1.45;
 }
@@ -125,7 +129,7 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  margin-top: 16px;
+  margin-top: var(--page-section-gap, 16px);
 }
 
 .ruleCard {
@@ -133,9 +137,9 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   gap: 12px;
   align-items: center;
-  padding: 14px;
+  padding: var(--responsive-card-padding, 14px);
   border: 1px solid rgba(25, 19, 22, 0.06);
-  border-radius: 20px;
+  border-radius: var(--responsive-card-radius-sm, 20px);
   background: rgba(255, 255, 255, 0.9);
   box-shadow: 0 10px 26px rgba(55, 36, 44, 0.06);
   animation: cardIn 0.42s ease both;
@@ -165,7 +169,7 @@
 .ruleTitle {
   margin: 0;
   color: #21191d;
-  font-size: 16px;
+  font-size: var(--responsive-body, 16px);
   font-weight: 850;
   line-height: 1.15;
 }
@@ -177,7 +181,7 @@
   border-radius: 999px;
   background: #edf4ff;
   color: #2e6eea;
-  font-size: 12px;
+  font-size: var(--responsive-micro, 12px);
   font-weight: 780;
   line-height: 1;
 }
@@ -185,7 +189,7 @@
 .cost {
   margin: 0;
   color: #171114;
-  font-size: 15px;
+  font-size: var(--responsive-body, 15px);
   font-weight: 900;
   line-height: 1.15;
   text-align: right;