feat: P0-1 全局CSS变量体系对齐 — radius变量+硬编码清理

- global.css: radius变量对齐V21 (xs=8, sm=14, md=18, lg=24, xl=28, pill=999)
- main.tsx: Ant Design ConfigProvider borderRadius同步 (14/24/8)
- 全项目19个CSS文件硬编码圆角值替换为CSS变量
- 重点页面: generate/home/Admin/voice-clone/accounts/duplication
- auth页面: Login/Register/ForgotPassword/ResetPassword
- 组件: clone-modal/clone-voice-modal
- 其他: Plans/UpgradeSubscription/MyTemplates/ProfileSettings/index.css
- tsc零错误

apps/web/src/components/modals/clone-voice-modal.css

@@ -31,7 +31,7 @@
   width: 100%;
   padding: 10px 14px;
   border: 1px solid var(--line, #e4e7ec);
-  border-radius: var(--radius-sm, 8px);
+  border-radius: var(--radius-sm);
   background: var(--bg-surface, #fff);
   color: var(--text-primary, #101828);
   font-size: 14px;
@@ -56,7 +56,7 @@
 
 .cvm-upload-zone {
   border: 2px dashed var(--line, #e4e7ec);
-  border-radius: var(--radius-md, 12px);
+  border-radius: var(--radius-md);
   padding: 28px 20px;
   text-align: center;
   background: var(--bg-subtle, #f8fafc);
@@ -120,7 +120,7 @@
 
 .cvm-record-area {
   border: 1px solid var(--line, #e4e7ec);
-  border-radius: var(--radius-md, 12px);
+  border-radius: var(--radius-md);
   padding: 24px;
   text-align: center;
 }
@@ -190,7 +190,7 @@
   gap: 8px;
   padding: 12px 16px;
   background: var(--warning-soft, #fef3c7);
-  border-radius: var(--radius-sm, 8px);
+  border-radius: var(--radius-sm);
   font-size: 13px;
   color: var(--warning-color, #92400e);
   line-height: 1.5;

apps/web/src/components/voice/clone-modal.css

@@ -94,7 +94,7 @@
   width: 100%;
   padding: 10px 14px;
   border: 1px solid var(--xx-color-border, #e5e7eb);
-  border-radius: 8px;
+  border-radius: var(--radius-xs);
   font-size: 14px;
   color: var(--xx-color-text, #111827);
   background: var(--xx-color-bg-secondary, #f9fafb);
@@ -118,7 +118,7 @@
   width: 100%;
   padding: 10px 14px;
   border: 1px solid var(--xx-color-border, #e5e7eb);
-  border-radius: 8px;
+  border-radius: var(--radius-xs);
   font-size: 14px;
   color: var(--xx-color-text, #111827);
   background: var(--xx-color-bg-secondary, #f9fafb);
@@ -152,7 +152,7 @@
 
 .xx-clonemodal-upload-zone {
   border: 2px dashed var(--xx-color-border, #e5e7eb);
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   padding: 28px 20px;
   text-align: center;
   cursor: pointer;
@@ -202,7 +202,7 @@
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
-  border-radius: 8px;
+  border-radius: var(--radius-xs);
   background: rgba(239, 68, 68, 0.08);
   border: 1px solid rgba(239, 68, 68, 0.2);
   color: var(--xx-color-error, #ef4444);
@@ -222,7 +222,7 @@
   align-items: flex-start;
   gap: 8px;
   padding: 10px 14px;
-  border-radius: 8px;
+  border-radius: var(--radius-xs);
   background: rgba(99, 102, 241, 0.06);
   font-size: 12px;
   color: var(--xx-color-text-secondary, #6b7280);
@@ -313,7 +313,7 @@
   gap: 12px;
   padding: 12px 16px;
   border: 1px solid var(--xx-color-border, #e5e7eb);
-  border-radius: 8px;
+  border-radius: var(--radius-xs);
   background: var(--xx-color-bg-secondary, #f9fafb);
 }
 

apps/web/src/index.css

@@ -21,8 +21,8 @@ body {
     "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #0f172a;
-  background-color: #f8fafc;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
 }
 
 /* 滚动条 - V21 样式 */

apps/web/src/main.tsx

@@ -36,8 +36,8 @@ const theme = {
 
     // 圆角 - V21 大圆角
     borderRadius: 14,
-    borderRadiusLG: 22,
-    borderRadiusSM: 10,
+    borderRadiusLG: 24,
+    borderRadiusSM: 8,
 
     // 文字色
     colorText: "#0f172a",

apps/web/src/pages/accounts/accounts.css

@@ -26,7 +26,7 @@
 .acc-card {
   background: var(--bg-surface, #fff);
   border: 1px solid var(--line, #e4e7ec);
-  border-radius: var(--radius-lg, 14px);
+  border-radius: var(--radius-lg);
   padding: 24px;
   display: flex;
   flex-direction: column;
@@ -49,7 +49,7 @@
 .acc-card-icon {
   width: 48px;
   height: 48px;
-  border-radius: var(--radius-md, 12px);
+  border-radius: var(--radius-md);
   display: grid;
   place-items: center;
   font-size: 24px;
@@ -88,7 +88,7 @@
   gap: 10px;
   padding: 12px;
   background: var(--bg-subtle, #f8fafc);
-  border-radius: var(--radius-md, 12px);
+  border-radius: var(--radius-md);
   transition: background 0.15s;
 }
 
@@ -129,7 +129,7 @@
   align-items: center;
   gap: 4px;
   padding: 2px 8px;
-  border-radius: 20px;
+  border-radius: var(--radius-pill);
   font-size: 11px;
   font-weight: 600;
   line-height: 1.6;
@@ -176,7 +176,7 @@
 .acc-stats-bar {
   padding: 16px 20px;
   background: var(--bg-subtle, #f8fafc);
-  border-radius: var(--radius-md, 12px);
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;

apps/web/src/pages/admin/Admin.css

@@ -16,7 +16,7 @@
 .xx-page-head {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 32px 40px;
   margin-bottom: 32px;
@@ -55,7 +55,7 @@
 .xx-page-head-simple {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 32px 40px;
   margin-bottom: 32px;
@@ -79,7 +79,7 @@
 .xx-card {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 22px;
+  border-radius: var(--radius-lg);
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
   padding: 24px;
   transition: all 0.3s;
@@ -128,7 +128,7 @@
 .xx-stat-card {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 22px;
+  border-radius: var(--radius-lg);
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
   padding: 24px;
   transition: all 0.3s;
@@ -149,7 +149,7 @@
 .xx-stat-card-icon {
   width: 48px;
   height: 48px;
-  border-radius: 14px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -231,7 +231,7 @@
 .xx-table-wrapper {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 22px;
+  border-radius: var(--radius-lg);
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
   overflow: hidden;
 }
@@ -264,7 +264,7 @@
   background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
   color: white !important;
   border: none !important;
-  border-radius: 14px !important;
+  border-radius: var(--radius-md) !important;
   font-weight: 700 !important;
   box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25) !important;
   transition: all 0.2s !important;
@@ -279,7 +279,7 @@
   background: white !important;
   border: 1px solid rgba(226, 232, 240, 0.95) !important;
   color: var(--slate, #0f172a) !important;
-  border-radius: 14px !important;
+  border-radius: var(--radius-md) !important;
   font-weight: 600 !important;
   transition: all 0.2s !important;
 }
@@ -291,7 +291,7 @@
 
 /* V21 输入框 */
 .xx-search-input {
-  border-radius: 14px !important;
+  border-radius: var(--radius-md) !important;
   border: 1px solid rgba(226, 232, 240, 0.95) !important;
   padding: 8px 16px !important;
 }
@@ -304,7 +304,7 @@
 
 /* V21 Select */
 .xx-select {
-  border-radius: 14px !important;
+  border-radius: var(--radius-md) !important;
 }
 
 .xx-select:hover,
@@ -315,7 +315,7 @@
 
 /* V21 Tag */
 .xx-tag {
-  border-radius: 8px !important;
+  border-radius: var(--radius-xs) !important;
   font-weight: 600 !important;
   font-size: 12px !important;
   padding: 4px 10px !important;
@@ -371,7 +371,7 @@
 .xx-chart-container {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 22px;
+  border-radius: var(--radius-lg);
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
   padding: 24px;
 }
@@ -391,7 +391,7 @@
 .xx-filter-bar {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 22px;
+  border-radius: var(--radius-lg);
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
   padding: 20px 24px;
   margin-bottom: 24px;
@@ -405,7 +405,7 @@
 .xx-resource-card {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 22px;
+  border-radius: var(--radius-lg);
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
   padding: 24px;
   text-align: center;
@@ -414,7 +414,7 @@
 .xx-resource-card-icon {
   width: 64px;
   height: 64px;
-  border-radius: 18px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -431,7 +431,7 @@
 
 /* 日期选择器 */
 .xx-date-picker {
-  border-radius: 14px !important;
+  border-radius: var(--radius-md) !important;
 }
 
 /* Drawer */
@@ -463,7 +463,7 @@
   color: var(--muted, #64748b);
   background: rgba(248, 250, 252, 0.8);
   padding: 12px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   margin-bottom: 16px;
 }
 
@@ -471,7 +471,7 @@
   font-family: "JetBrains Mono", "Fira Code", monospace;
   background: rgba(248, 250, 252, 0.8);
   padding: 12px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   white-space: pre-wrap;
   word-break: break-all;
 }

apps/web/src/pages/auth/ForgotPassword.css

@@ -14,7 +14,7 @@
 .xx-auth-card {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid #e2e8f0;
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 40px;
   width: 100%;
@@ -72,7 +72,7 @@
 .ant-input-password input {
   background: white;
   border: 1px solid #e2e8f0;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
 }
 
 .ant-input:focus,
@@ -97,7 +97,7 @@
 .xx-result-card {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid #e2e8f0;
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 48px 40px;
   width: 100%;

apps/web/src/pages/auth/Login.css

@@ -14,7 +14,7 @@
 .xx-auth-card {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid #e2e8f0;
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 40px;
   width: 100%;
@@ -72,7 +72,7 @@
 .ant-input-password input {
   background: white;
   border: 1px solid #e2e8f0;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
 }
 
 .ant-input:focus,
@@ -87,5 +87,5 @@
 }
 
 .ant-checkbox-inner {
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
 }

apps/web/src/pages/auth/Register.css

@@ -14,7 +14,7 @@
 .xx-auth-card {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid #e2e8f0;
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 40px;
   width: 100%;
@@ -72,7 +72,7 @@
 .ant-input-password input {
   background: white;
   border: 1px solid #e2e8f0;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
 }
 
 .ant-input:focus,
@@ -87,5 +87,5 @@
 }
 
 .ant-checkbox-inner {
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
 }

apps/web/src/pages/auth/ResetPassword.css

@@ -14,7 +14,7 @@
 .xx-auth-card {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid #e2e8f0;
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 40px;
   width: 100%;
@@ -72,7 +72,7 @@
 .ant-input-password input {
   background: white;
   border: 1px solid #e2e8f0;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
 }
 
 .ant-input:focus,
@@ -97,7 +97,7 @@
 .xx-result-card {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid #e2e8f0;
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 48px 40px;
   width: 100%;

apps/web/src/pages/duplication/duplication.css

@@ -68,7 +68,7 @@
 .dup-upload-icon {
   width: 64px;
   height: 64px;
-  border-radius: 20px;
+  border-radius: var(--radius-md);
   background: var(--primary-soft);
   margin: 0 auto var(--space-md);
   display: grid;

apps/web/src/pages/generate/generate.css

@@ -53,7 +53,7 @@
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
-  border-radius: var(--radius-sm, 10px);
+  border-radius: var(--radius-sm);
   color: var(--text-tertiary, #94a3b8);
   font-weight: 600;
   font-size: 14px;
@@ -126,7 +126,7 @@
 .xx-form-section {
   background: #fff;
   border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: var(--radius-md, 14px);
+  border-radius: var(--radius-md);
   padding: 20px;
 }
 
@@ -159,7 +159,7 @@
   width: 100%;
   height: 44px;
   border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: var(--radius-sm, 10px);
+  border-radius: var(--radius-sm);
   background: #fff;
   padding: 0 14px;
   font-size: 14px;
@@ -194,7 +194,7 @@
   position: relative;
   background: #fff;
   border: 2px solid var(--border-color, #e2e8f0);
-  border-radius: var(--radius-md, 14px);
+  border-radius: var(--radius-md);
   padding: 14px;
   cursor: pointer;
   transition: 0.18s ease;
@@ -212,7 +212,7 @@
 
 .xx-choice-thumb {
   height: 60px;
-  border-radius: var(--radius-sm, 10px);
+  border-radius: var(--radius-sm);
   display: grid;
   place-items: center;
   color: #fff;
@@ -286,7 +286,7 @@
   position: relative;
   background: #fff;
   border: 2px solid var(--border-color, #e2e8f0);
-  border-radius: var(--radius-md, 14px);
+  border-radius: var(--radius-md);
   padding: 16px;
   cursor: pointer;
   transition: 0.18s ease;
@@ -354,7 +354,7 @@
   padding: 16px;
   background: var(--bg-secondary, #f8fafc);
   border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: var(--radius-md, 14px);
+  border-radius: var(--radius-md);
 }
 
 .xx-clone-section-title {
@@ -378,7 +378,7 @@
   padding: 10px 12px;
   background: #fff;
   border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: var(--radius-sm, 10px);
+  border-radius: var(--radius-sm);
   cursor: pointer;
   transition: 0.15s ease;
 }
@@ -505,7 +505,7 @@
   font-size: 12px;
   color: #f59e0b;
   background: rgba(245, 158, 11, 0.08);
-  border-radius: var(--radius-sm, 10px);
+  border-radius: var(--radius-sm);
   animation: xx-fade 2s ease-in-out infinite;
 }
 
@@ -532,7 +532,7 @@
    ============================================================ */
 .xx-summary-card {
   background: #f8fafc;
-  border-radius: 14px;
+  border-radius: var(--radius-md);
   padding: 16px;
 }
 
@@ -585,7 +585,7 @@
   gap: 6px;
   height: 42px;
   padding: 0 20px;
-  border-radius: var(--radius-sm, 10px);
+  border-radius: var(--radius-sm);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
@@ -629,7 +629,7 @@
 .xx-generate-preview {
   background: #fff;
   border: 1px solid var(--border-color, #e2e8f0);
-  border-radius: var(--radius-md, 14px);
+  border-radius: var(--radius-md);
   padding: 20px;
   position: sticky;
   top: 92px;
@@ -639,7 +639,7 @@
 .xx-preview-video {
   aspect-ratio: 9 / 16;
   max-height: 400px;
-  border-radius: var(--radius-md, 14px);
+  border-radius: var(--radius-md);
   background: linear-gradient(135deg, #111827, #312e81);
   display: grid;
   place-items: center;
@@ -662,7 +662,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: var(--radius-md, 14px);
+  border-radius: var(--radius-md);
   position: relative;
   z-index: 1;
 }
@@ -693,7 +693,7 @@
 .xx-preview-caption {
   background: rgba(255, 255, 255, 0.95);
   color: var(--text-primary, #334155);
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   padding: 10px;
   text-align: center;
   font-weight: 600;
@@ -722,14 +722,14 @@
   gap: 10px;
   padding: 10px;
   background: #f8fafc;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   font-size: 13px;
 }
 
 .xx-timeline-item .num {
   width: 24px;
   height: 24px;
-  border-radius: 8px;
+  border-radius: var(--radius-xs);
   background: var(--primary-soft, #eef2ff);
   color: var(--primary-color, #4f46e5);
   display: grid;

apps/web/src/pages/home/home-page.css

@@ -97,7 +97,7 @@
   display: inline-flex;
   align-self: flex-start;
   padding: 6px 16px;
-  border-radius: var(--radius-sm, 8px);
+  border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--primary-color) 8%, transparent);
   color: var(--primary, var(--primary-color));
   font-size: 14px;
@@ -136,7 +136,7 @@
 
 .hp-hero-video {
   position: relative;
-  border-radius: var(--radius-lg, 16px);
+  border-radius: var(--radius-lg);
   overflow: hidden;
   background: linear-gradient(
     135deg,
@@ -202,7 +202,7 @@
 
 .hp-hero-badge {
   padding: 6px 14px;
-  border-radius: var(--radius-sm, 8px);
+  border-radius: var(--radius-sm);
   background: var(--bg-surface, #fff);
   border: 1px solid var(--line, rgba(0, 0, 0, 0.06));
   font-size: 13px;
@@ -213,7 +213,7 @@
 
 .hp-hero-pill {
   padding: 5px 14px;
-  border-radius: 20px;
+  border-radius: var(--radius-pill);
   background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
   color: var(--secondary-color, #059669);
   font-size: 13px;
@@ -257,7 +257,7 @@
 
 .hp-feature-card {
   padding: 32px 24px;
-  border-radius: var(--radius-lg, 16px);
+  border-radius: var(--radius-lg);
   background: var(--bg-surface, #fff);
   border: 1px solid var(--line, rgba(0, 0, 0, 0.06));
   text-align: center;
@@ -275,7 +275,7 @@
   width: 56px;
   height: 56px;
   margin: 0 auto 16px;
-  border-radius: var(--radius-md, 12px);
+  border-radius: var(--radius-md);
   background: color-mix(in srgb, var(--primary-color) 8%, transparent);
   display: flex;
   align-items: center;
@@ -319,7 +319,7 @@
 .hp-step-card {
   position: relative;
   padding: 32px 24px;
-  border-radius: var(--radius-lg, 16px);
+  border-radius: var(--radius-lg);
   background: var(--bg-surface, #fff);
   border: 1px solid var(--line, rgba(0, 0, 0, 0.06));
   text-align: center;
@@ -388,7 +388,7 @@
 .hp-pricing-card {
   position: relative;
   padding: 36px 28px;
-  border-radius: var(--radius-lg, 16px);
+  border-radius: var(--radius-lg);
   background: var(--bg-surface, #fff);
   border: 1px solid var(--line, rgba(0, 0, 0, 0.06));
   display: flex;
@@ -415,7 +415,7 @@
   top: -12px;
   right: 20px;
   padding: 4px 14px;
-  border-radius: 20px;
+  border-radius: var(--radius-pill);
   background: var(--primary, var(--primary-color));
   color: var(--text-inverse);
   font-size: 12px;
@@ -482,7 +482,7 @@
   margin: 0 auto;
   text-align: center;
   padding: 60px 40px;
-  border-radius: var(--radius-lg, 16px);
+  border-radius: var(--radius-lg);
   background: linear-gradient(
     135deg,
     color-mix(in srgb, var(--primary-color) 6%, transparent) 0%,

apps/web/src/pages/my-templates/MyTemplates.css

@@ -28,7 +28,7 @@
 /* 卡片样式 */
 .mt-card {
   height: 100%;
-  border-radius: 12px;
+  border-radius: var(--radius-sm);
   transition:
     box-shadow 0.2s,
     transform 0.2s;

apps/web/src/pages/profile/ProfileSettings.css

@@ -13,7 +13,7 @@
 .xx-settings-head {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 32px 36px;
   margin-bottom: 28px;
@@ -37,7 +37,7 @@
 .xx-settings-card {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 32px 36px;
   margin-bottom: 28px;
@@ -63,7 +63,7 @@
 .xx-result-page {
   background: rgba(255, 255, 255, 0.94);
   border: 1px solid rgba(226, 232, 240, 0.95);
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
   padding: 60px 40px;
   margin-bottom: 28px;
@@ -109,7 +109,7 @@
 
 .ant-input,
 .ant-input-affix-wrapper {
-  border-radius: 12px !important;
+  border-radius: var(--radius-sm) !important;
   border-color: var(--line, #e2e8f0) !important;
 }
 
@@ -136,7 +136,7 @@
 
 /* Alert 样式 */
 .ant-alert {
-  border-radius: 14px;
+  border-radius: var(--radius-md);
   padding: 16px 20px;
   margin-bottom: 20px;
 }

apps/web/src/pages/subscription/Plans.css

@@ -55,7 +55,7 @@
 .xx-plan-card {
   background: var(--bg-elevated);
   border: 1px solid var(--border-color);
-  border-radius: 28px;
+  border-radius: var(--radius-xl);
   box-shadow: var(--shadow-card);
   padding: 32px 28px;
   position: relative;

apps/web/src/pages/subscription/UpgradeSubscription.css

@@ -22,7 +22,7 @@
 .xx-upgrade-card {
   background: var(--bg-elevated);
   border: 2px solid var(--border-color);
-  border-radius: 20px;
+  border-radius: var(--radius-lg);
   padding: 28px 24px;
   text-align: center;
   cursor: pointer;

apps/web/src/pages/voice-clone/voice-clone.css

@@ -25,7 +25,7 @@
   position: relative;
   background: var(--bg-card, #fff);
   border: 1px solid var(--line, #e2e8f0);
-  border-radius: var(--radius-lg, 14px);
+  border-radius: var(--radius-lg);
   padding: var(--space-lg, 20px);
   transition:
     border-color 0.2s,
@@ -59,7 +59,7 @@
   display: grid;
   place-items: center;
   border: none;
-  border-radius: var(--radius-sm, 8px);
+  border-radius: var(--radius-sm);
   background: var(--bg-secondary, #f8fafc);
   color: var(--muted, #64748b);
   font-size: 13px;
@@ -149,7 +149,7 @@
   align-items: center;
   gap: 5px;
   padding: 2px 10px;
-  border-radius: 20px;
+  border-radius: var(--radius-pill);
   font-size: 12px;
   font-weight: 500;
   line-height: 20px;
@@ -219,7 +219,7 @@
   gap: 10px;
   padding: 10px;
   background: var(--bg-secondary, #f8fafc);
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
 }
 
 .vc-card-footer .xx-btn {
@@ -239,7 +239,7 @@
   padding: 60px 24px;
   background: var(--bg-card, #fff);
   border: 1px dashed var(--line, #e2e8f0);
-  border-radius: var(--radius-lg, 14px);
+  border-radius: var(--radius-lg);
 }
 
 .vc-empty-icon {
@@ -275,7 +275,7 @@
 
 .vc-toast {
   padding: 10px 16px;
-  border-radius: var(--radius-md, 10px);
+  border-radius: var(--radius-md);
   font-size: 13px;
   font-weight: 500;
   background: var(--bg-card, #fff);
@@ -331,7 +331,7 @@
 
 .vc-edit-dialog {
   background: var(--bg-card, #fff);
-  border-radius: var(--radius-lg, 14px);
+  border-radius: var(--radius-lg);
   padding: 24px;
   width: 400px;
   max-width: calc(100vw - 40px);
@@ -361,7 +361,7 @@
   width: 100%;
   padding: 10px 14px;
   border: 1px solid var(--line, #e2e8f0);
-  border-radius: var(--radius-sm, 8px);
+  border-radius: var(--radius-sm);
   font-size: 14px;
   color: var(--text-primary, #1e293b);
   background: var(--bg-primary, #fff);

apps/web/src/styles/global.css

@@ -189,10 +189,10 @@
 
   /* ── 9. 圆角 ─────────────────────────────────────────────── */
   --radius-none: 0;
-  --radius-xs: 6px;
-  --radius-sm: 10px;
-  --radius-md: 14px;
-  --radius-lg: 22px;
+  --radius-xs: 8px;
+  --radius-sm: 14px;
+  --radius-md: 18px;
+  --radius-lg: 24px;
   --radius-xl: 28px;
   --radius-2xl: 36px;
   --radius-full: 9999px;