feat(ui): add responsive mobile design tokens

src/app/_components/core/mobile-shell.module.css

@@ -5,7 +5,7 @@
   justify-content: center;
   width: 100%;
   min-height: var(--app-viewport-height, 100dvh);
-  background: #000000; /* 显式黑，桌面端 500px 外圈为黑色 */
+  background: #000000; /* 显式黑，桌面端移动壳外圈为黑色 */
 }
 
 .content {
@@ -14,6 +14,6 @@
   flex: 1 1 auto;
   flex-direction: column;
   width: 100%;
-  max-width: 500px;
+  max-width: var(--app-max-width, 540px);
   min-height: var(--app-viewport-height, 100dvh);
 }

src/app/globals.css

@@ -13,6 +13,7 @@
 @import "../tokens/border-widths.css";
 @import "../tokens/icon-sizes.css";
 @import "../tokens/breakpoints.css";
+@import "../tokens/responsive.css";
 @import "../tokens/dimensions.css";
 
 /* ============================================================

src/app/sidebar/components/sidebar-screen.module.css

@@ -7,16 +7,16 @@
   background: var(--color-page-background, #ffffff);
   color: var(--color-auth-text-primary, #333333);
   min-height: 100dvh;
-  padding: 0 28px var(--spacing-xxl, 24px);
+  padding: 0 var(--page-padding-x, 28px) var(--spacing-xxl, 24px);
   box-sizing: border-box;
 }
 
 .userSlot {
-  padding: 20px 0;
+  padding: var(--sidebar-user-padding-y, 20px) 0;
 }
 
 .cardSlot {
-  padding: var(--spacing-sm, 8px) 0;
+  padding: var(--sidebar-card-gap-y, 8px) 0;
 }
 
 .settingsSlot {

src/app/sidebar/components/user-header.module.css

@@ -8,8 +8,8 @@
 
 .avatar {
   flex: 0 0 auto;
-  width: 56px;
+  width: var(--sidebar-avatar-size, 56px);
-  height: 56px;
+  height: var(--sidebar-avatar-size, 56px);
   border-radius: 50%;
   background: var(--color-accent, #f84d96);
   display: flex;
@@ -40,7 +40,7 @@
 
 .name {
   margin: 0;
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--font-responsive-md, 16px);
   font-weight: 600;
   color: #000000;
   line-height: 1.2;
@@ -51,7 +51,7 @@
 
 .subtitle {
   margin: 0;
-  font-size: var(--font-size-sm, 12px);
+  font-size: clamp(12px, 2.593vw, 14px);
   color: var(--color-text-secondary, #9e9e9e);
   line-height: 1.2;
 }
@@ -91,7 +91,7 @@
     var(--color-button-gradient-end, #ff52a2)
   );
   color: var(--color-text-primary, #ffffff);
-  font-size: var(--font-size-sm, 12px);
+  font-size: clamp(12px, 2.593vw, 14px);
   font-weight: 600;
   border: 0;
   cursor: pointer;

src/app/sidebar/components/vip-benefits-card.module.css

@@ -17,7 +17,9 @@
   border-radius: 21px;
   width: 100%;
   box-sizing: border-box;
-  padding: 18px 0 18px 18px;
+  padding: var(--sidebar-card-padding-y, 18px) 0
+    var(--sidebar-card-padding-y, 18px)
+    var(--sidebar-card-padding-x, 18px);
   overflow: hidden;
 }
 
@@ -31,7 +33,7 @@
 
 .title {
   margin: 0;
-  font-size: var(--font-size-xxl);
+  font-size: var(--font-responsive-xl, 20px);
   font-weight: 700;
   color: #f657a0;
   line-height: 1.3;
@@ -63,7 +65,7 @@
   align-items: flex-start;
   gap: 0;
   padding: 0;
-  font-size: var(--font-size-lg);
+  font-size: var(--font-responsive-md, 16px);
   color: #1e1e1e;
   line-height: normal;
 }
@@ -104,7 +106,7 @@
     linear-gradient(#fb5e9d, #fb5e9d);
   background-blend-mode: normal, normal;
   color: var(--color-text-primary, #ffffff);
-  font-size: var(--font-size-lg);
+  font-size: var(--font-responsive-md, 16px);
   font-weight: 600;
   border: 0;
   cursor: pointer;

src/app/sidebar/components/voice-package-card.module.css

@@ -15,7 +15,10 @@
   border: solid 1px #fbbcb6;
   border-radius: 21px;
   width: 100%;
-  padding: 18px 12px 18px 18px;
+  padding: var(--sidebar-card-padding-y, 18px)
+    var(--sidebar-card-padding-right, 12px)
+    var(--sidebar-card-padding-y, 18px)
+    var(--sidebar-card-padding-x, 18px);
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -41,15 +44,15 @@
 }
 
 .title {
-  font-size: var(--font-size-xxl);
+  font-size: var(--font-responsive-xl, 20px);
   font-weight: 700;
   color: var(--color-accent, #f84d96);
 }
 
 .micIcon {
   flex: 0 0 auto;
-  width: 100px;
+  width: var(--sidebar-voice-image-size, 100px);
-  height: 100px;
+  height: var(--sidebar-voice-image-size, 100px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -57,8 +60,8 @@
 
 .micImage {
   display: block;
-  width: 100px;
+  width: var(--sidebar-voice-image-size, 100px);
-  height: 100px;
+  height: var(--sidebar-voice-image-size, 100px);
   object-fit: contain;
 }
 
@@ -76,7 +79,7 @@
 .usedNumber {
   display: inline-flex;
   color: #fa438b;
-  font-size: 30px;
+  font-size: var(--font-responsive-number-lg, 30px);
   font-weight: 700;
   line-height: 1;
 }
@@ -84,7 +87,7 @@
 .totalNumber {
   display: inline-flex;
   color: #000000;
-  font-size: 30px;
+  font-size: var(--font-responsive-number-lg, 30px);
   font-weight: 700;
   line-height: 1;
 }
@@ -92,12 +95,12 @@
 .usageUnit {
   color: var(--color-text-secondary, #9e9e9e);
   display: inline-flex;
-  font: 400 var(--font-size-xl, 18px) / 1 var(--font-sans);
+  font: 400 var(--font-responsive-lg, 18px) / 1 var(--font-sans);
 }
 
 .usageText {
   color: #adabab;
-  font-size: 18px;
+  font-size: var(--font-responsive-lg, 18px);
   font-weight: 400;
 }
 
@@ -116,7 +119,7 @@
     linear-gradient(#f69757, #f69757);
   background-blend-mode: normal, normal;
   color: var(--color-text-primary, #ffffff);
-  font-size: var(--font-size-lg);
+  font-size: var(--font-responsive-md, 16px);
   font-weight: 600;
   border: 0;
   cursor: pointer;

src/tokens/breakpoints.css

@@ -7,5 +7,5 @@
   --bp-tablet-min: 600px;
   --bp-tablet-max: 1023.98px;
   --bp-desktop-min: 1024px;
-  --shell-max-width: 500px;
+  --shell-max-width: 540px;
 }

src/tokens/responsive.css

@@ -0,0 +1,31 @@
+/**
+ * 响应式 token
+ *
+ * 设计稿基准：1080x1920 @2x，因此 CSS 设计宽度为 540px。
+ * 原则：
+ * - 桌面调试最大宽度使用 --shell-max-width / --app-max-width。
+ * - 组件尺寸使用 clamp(min, design-ratio vw, design-value)，在 360-540px
+ *   之间平滑缩放，并避免小屏过度压缩。
+ */
+:root {
+  --app-design-width: 540px;
+  --app-max-width: var(--shell-max-width, 540px);
+
+  /* 56px @2x = 28px；小屏保留至少 22px，避免内容贴边。 */
+  --page-padding-x: clamp(22px, 5.185vw, 28px);
+
+  /* Sidebar 专用响应式尺寸 */
+  --sidebar-user-padding-y: clamp(18px, 3.704vw, 20px);
+  --sidebar-card-gap-y: clamp(6px, 1.481vw, 8px);
+  --sidebar-card-padding-x: clamp(18px, 5.185vw, 28px);
+  --sidebar-card-padding-y: clamp(16px, 3.333vw, 18px);
+  --sidebar-card-padding-right: clamp(10px, 2.222vw, 12px);
+  --sidebar-avatar-size: clamp(48px, 10.37vw, 56px);
+  --sidebar-voice-image-size: clamp(84px, 18.519vw, 100px);
+
+  /* 响应式字体：按 540px 设计宽度换算，并给小屏设置可读下限。 */
+  --font-responsive-md: clamp(14px, 2.963vw, 16px);
+  --font-responsive-lg: clamp(16px, 3.333vw, 18px);
+  --font-responsive-xl: clamp(18px, 3.704vw, 20px);
+  --font-responsive-number-lg: clamp(24px, 5.556vw, 30px);
+}