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/subscription/components/subscription-vip-offer-section.module.css

@@ -1,7 +1,7 @@
 .section {
   overflow: hidden;
   border: 1px solid rgba(255, 71, 166, 0.28);
-  border-radius: 28px;
+  border-radius: var(--responsive-card-radius, 28px);
   background: #ffe2f0;
   box-shadow: 0 18px 45px rgba(255, 71, 166, 0.22);
   backdrop-filter: blur(18px);
@@ -9,7 +9,10 @@
 
 .summary {
   position: relative;
-  padding: 18px 18px 22px;
+  padding:
+    var(--responsive-card-padding, 18px)
+    var(--responsive-card-padding, 18px)
+    var(--responsive-card-padding-lg, 22px);
   background:
     linear-gradient(135deg, #ff9bd1 0%, #ff61ad 56%, #f657a0 100%),
     #ff61ad;
@@ -25,20 +28,20 @@
 
 .titleText {
   color: #181014;
-  font-size: 20px;
+  font-size: var(--responsive-section-title, 20px);
   font-weight: 800;
 }
 
 .renewText {
   color: rgba(255, 255, 255, 0.82);
-  font-size: 13px;
+  font-size: var(--responsive-caption, 13px);
   font-weight: 700;
 }
 
 .subtitle {
   margin: 8px 0 0;
   color: rgba(255, 255, 255, 0.9);
-  font-size: 15px;
+  font-size: var(--responsive-body, 15px);
   font-weight: 700;
   line-height: 1.3;
 }
@@ -58,21 +61,24 @@
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 9px;
-  padding: 18px 10px 12px;
+  gap: clamp(7px, 1.667vw, 9px);
+  padding:
+    var(--responsive-card-padding, 18px)
+    clamp(8px, 1.852vw, 10px)
+    clamp(10px, 2.222vw, 12px);
 }
 
 .planCard {
   position: relative;
   display: flex;
   min-width: 0;
-  min-height: 128px;
+  min-height: clamp(116px, 23.704vw, 128px);
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 12px 6px 11px;
+  padding: clamp(10px, 2.222vw, 12px) 6px clamp(9px, 2.037vw, 11px);
   border: 1px solid rgba(246, 87, 160, 0.08);
-  border-radius: 20px;
+  border-radius: var(--responsive-card-radius-sm, 20px);
   background: #ffffff;
   color: #181014;
   cursor: pointer;
@@ -111,7 +117,7 @@
   border-radius: 999px;
   background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
   color: #ffffff;
-  font-size: 16px;
+  font-size: clamp(12px, 2.963vw, 16px);
   font-weight: 900;
   line-height: 1;
   white-space: nowrap;
@@ -121,7 +127,7 @@
 
 .planTitle {
   margin-top: 20px;
-  font-size: 19px;
+  font-size: clamp(16px, 3.519vw, 19px);
   font-weight: 800;
   line-height: 1.15;
   white-space: nowrap;
@@ -136,7 +142,7 @@
 }
 
 .price {
-  font-size: 30px;
+  font-size: var(--font-responsive-number-lg, 30px);
   font-weight: 500;
   letter-spacing: -0.8px;
 }
@@ -144,7 +150,7 @@
 .currency {
   margin-bottom: 3px;
   color: #8b717a;
-  font-size: 12px;
+  font-size: var(--responsive-micro, 12px);
   font-weight: 700;
   text-transform: lowercase;
 }
@@ -152,7 +158,7 @@
 .originalPrice {
   margin-top: 10px;
   color: #9c8b91;
-  font-size: 14px;
+  font-size: var(--responsive-caption, 14px);
   font-weight: 800;
   line-height: 1;
   text-decoration: line-through;