diff --git a/src/components/SmsCodeInput.vue b/src/components/SmsCodeInput.vue
index cc75a2c..9442098 100644
--- a/src/components/SmsCodeInput.vue
+++ b/src/components/SmsCodeInput.vue
@@ -32,42 +32,44 @@ function onGetCode(): void {
 .sms-code {
   .flex(row, stretch);
   gap: @spacing-sm;
+  width: 100%;
 
   &__input {
     flex: 1;
     min-width: 0;
-    height: 40px;
-    padding: 0 12px;
+    height: 44px;
+    padding: 0 @spacing-base;
     border: 1px solid @border-color;
-    border-radius: @radius-sm;
-    background: @white;
-    font-size: 13px;
-    color: #1f2937;
+    border-radius: @radius-base;
+    background: @bg-color-light;
+    font-size: @font-size-base;
+    color: @heading-color;
     outline: none;
-    transition: border-color 0.2s;
+    transition: border-color 0.2s, background 0.2s;
+    box-sizing: border-box;
 
     &:focus {
       border-color: @primary-strong;
+      background: @white;
     }
 
     &::placeholder {
-      color: #1f2937;
+      color: @text-color-secondary;
     }
   }
 
-  // 设计稿 #38：「获取验证码」是带蓝色描边的独立按钮（62×16 文字居中），
-  // 不是纯文字链接。按键宽 88px，与输入框间距 @spacing-sm。
   &__btn {
     flex-shrink: 0;
-    width: 88px;
-    height: 40px;
-    padding: 0;
+    min-width: 120px;
+    height: 44px;
+    padding: 0 @spacing-base;
     border: 1px solid @primary-strong;
-    border-radius: @radius-sm;
+    border-radius: @radius-base;
     background: @white;
     color: @primary-strong;
-    font-size: 12px;
-    font-weight: 400;
+    font-size: @font-size-sm;
+    font-weight: 500;
+    white-space: nowrap;
     text-align: center;
     cursor: pointer;
     transition: all 0.2s;
@@ -78,8 +80,9 @@ function onGetCode(): void {
     }
 
     &:disabled {
-      border-color: @text-color-disabled;
-      color: @text-color-disabled;
+      border-color: @border-color;
+      background: @bg-color-light;
+      color: @text-color-secondary;
       cursor: not-allowed;
     }
   }
diff --git a/src/styles/common.less b/src/styles/common.less
index 6c3fb88..6cdbbe8 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -85,9 +85,8 @@
     .flex(column, center, center);
     flex: 1;
     min-width: 0;
-    // 设计稿三页的标题顶分别为 306/287/268，卡片在 1080 视口中居中后
-    // 会比标注高 15px，用上内边距把内容整体下移补平。
-    padding: 80px 0 40px;
+    // 底部多留白，整体视觉中心上移，「欢迎登录」不再偏下
+    padding: 24px 0 120px;
   }
 
   // 设计稿表单区统一 693px 宽。标题/副标题按自身文字宽度相对表单居中，
diff --git a/src/views/login/cpns/LoginForm.vue b/src/views/login/cpns/LoginForm.vue
index 8cf454a..34ac4e4 100644
--- a/src/views/login/cpns/LoginForm.vue
+++ b/src/views/login/cpns/LoginForm.vue
@@ -67,70 +67,58 @@ const localAgree = computed({
 </template>
 
 <style lang="less" scoped>
-// 设计稿 #36（账号密码登录）纵向坐标：
-// 账号标签 457 → 密码标签 585（差 128）
-// 密码输入框底 ~648 → 勾选行 641 区间 → 登录按钮文字 688
-// 表单左边界与 title 内缩对齐：1032.5 - 982.5(title 层中心对齐后) ≈ 0，
-// 实测 title padding-left 17px 抵消 693/714 的差，故表单不再额外内缩。
 .login-form {
   .flex(column, flex-start, stretch);
-  margin: 26px 0 0;
+  gap: @spacing-lg;
   width: 100%;
+  margin-top: @spacing-xl;
 
   &__field {
     .flex(column, flex-start, stretch);
-    // 标签底 474 → 输入框顶 480，间距 6px
-    gap: 6px;
+    gap: @spacing-sm;
     width: 100%;
   }
 
-  // 第一个字段底（480+40=520）→ 第二个字段标签顶 585，间距 65px
-  &__field + &__field {
-    margin-top: 65px;
-  }
-
   &__label {
-    font-size: 13px;
+    font-size: @font-size-sm;
     font-weight: 500;
-    line-height: 17px;
-    color: #1f2937;
-    text-align: center;
+    line-height: 1.4;
+    color: @heading-color;
+    text-align: left;
   }
 
   &__input {
     width: 100%;
-    height: 40px;
-    padding: 0 12px;
+    height: 44px;
+    padding: 0 @spacing-base;
     border: 1px solid @border-color;
-    border-radius: @radius-sm;
-    background: @white;
-    font-size: 13px;
-    color: #1f2937;
+    border-radius: @radius-base;
+    background: @bg-color-light;
+    font-size: @font-size-base;
+    color: @heading-color;
     outline: none;
-    transition: border-color 0.2s;
+    transition: border-color 0.2s, background 0.2s;
     box-sizing: border-box;
 
     &:focus {
       border-color: @primary-strong;
+      background: @white;
     }
 
     &::placeholder {
-      color: #1f2937;
+      color: @text-color-secondary;
     }
   }
 
-  // 设计稿 #36：勾选框 (1042.2,642) 7.5×14，文字 12px 起于 x=1059。
-  // 注：设计稿勾选标注 y=642 与密码输入框底 648 重叠，二者无法同时满足，
-  // 这里按视觉取勾选行落在输入框下方 8px。
   &__agree {
     .flex(row, flex-start, center);
-    gap: 8px;
-    margin-top: 8px;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 16px;
-    color: #6b7280;
+    gap: @spacing-sm;
+    margin: 0;
+    font-size: @font-size-sm;
+    line-height: 1.5;
+    color: @text-color-secondary;
     cursor: pointer;
+    user-select: none;
 
     input {
       flex-shrink: 0;
@@ -146,17 +134,15 @@ const localAgree = computed({
     }
   }
 
-  // 设计稿 #36：按钮文字 (1352,688) 54×20 居中，按钮盒约 693×46
   &__submit {
     width: 100%;
-    height: 46px;
-    // 勾选行底 657 → 按钮顶 674
-    margin-top: 17px;
+    height: 44px;
+    margin: 0;
     border: none;
-    border-radius: @radius-sm;
+    border-radius: @radius-base;
     background: @primary-strong;
     color: @white;
-    font-size: 15px;
+    font-size: @font-size-base;
     font-weight: 500;
     cursor: pointer;
     transition: background 0.2s;
diff --git a/src/views/login/cpns/SmsLoginForm.vue b/src/views/login/cpns/SmsLoginForm.vue
index bb6c6cd..8948844 100644
--- a/src/views/login/cpns/SmsLoginForm.vue
+++ b/src/views/login/cpns/SmsLoginForm.vue
@@ -85,65 +85,58 @@ function onSubmit(): void {
 </template>
 
 <style lang="less" scoped>
-// 设计稿 #38（手机验证码登录）纵向坐标：
-// 手机号标签 438 → 验证码标签 520（差 82）
-// 验证码输入框底 ~588 → 勾选行 622 → 登录按钮文字 669
 .sms-login {
   .flex(column, flex-start, stretch);
-  margin: 26px 0 0;
+  gap: @spacing-lg;
   width: 100%;
+  margin-top: @spacing-xl;
 
   &__field {
     .flex(column, flex-start, stretch);
-    gap: 6px;
+    gap: @spacing-sm;
     width: 100%;
   }
 
-  // 第一个字段底（457+40=497... 按标签 438+17+6+40=501）→ 第二标签 520，间距 19px
-  &__field + &__field {
-    margin-top: 19px;
-  }
-
   &__label {
-    font-size: 13px;
+    font-size: @font-size-sm;
     font-weight: 500;
-    line-height: 17px;
-    color: #1f2937;
-    text-align: center;
+    line-height: 1.4;
+    color: @heading-color;
+    text-align: left;
   }
 
   &__input {
     width: 100%;
-    height: 40px;
-    padding: 0 12px;
+    height: 44px;
+    padding: 0 @spacing-base;
     border: 1px solid @border-color;
-    border-radius: @radius-sm;
-    background: @white;
-    font-size: 13px;
-    color: #1f2937;
+    border-radius: @radius-base;
+    background: @bg-color-light;
+    font-size: @font-size-base;
+    color: @heading-color;
     outline: none;
-    transition: border-color 0.2s;
+    transition: border-color 0.2s, background 0.2s;
     box-sizing: border-box;
 
     &:focus {
       border-color: @primary-strong;
+      background: @white;
     }
 
     &::placeholder {
-      color: #1f2937;
+      color: @text-color-secondary;
     }
   }
 
-  // 设计稿 #38：勾选框 (992.2,623) 7.5×14，勾选文字 622
   &__agree {
     .flex(row, flex-start, center);
-    gap: 8px;
-    margin-top: 14px;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 16px;
-    color: #6b7280;
+    gap: @spacing-sm;
+    margin: 0;
+    font-size: @font-size-sm;
+    line-height: 1.5;
+    color: @text-color-secondary;
     cursor: pointer;
+    user-select: none;
 
     input {
       flex-shrink: 0;
@@ -159,16 +152,15 @@ function onSubmit(): void {
     }
   }
 
-  // 设计稿 #38：按钮文字 (1302,669) 54×20
   &__submit {
     width: 100%;
-    height: 46px;
-    margin-top: 17px;
+    height: 44px;
+    margin: 0;
     border: none;
-    border-radius: @radius-sm;
+    border-radius: @radius-base;
     background: @primary-strong;
     color: @white;
-    font-size: 15px;
+    font-size: @font-size-base;
     font-weight: 500;
     cursor: pointer;
     transition: background 0.2s;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index c7232e9..aab00c2 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -144,26 +144,31 @@ async function onGetCode(target: string): Promise<void> {
 
 <style lang="less" scoped>
 .auth-page {
-  // 设计稿 #36：两个 tab 顶 406，字号 14px，选中下划线 2px 位于 429。
-  // tab 文字底 425，下划线顶 429 → padding-bottom 6px。
-  // 上间距 26px：副标题底 380 → tab 文字顶 406。
   &__tabs {
     .flex(row, flex-start, center);
-    gap: 24px;
-    margin: 26px 0 0;
+    gap: @spacing-xl;
+    width: 100%;
+    margin-top: @spacing-xl;
+    border-bottom: 1px solid @border-color;
   }
 
   &__tab {
     position: relative;
-    padding: 0 0 6px;
+    padding: 0 0 @spacing-sm;
+    margin-bottom: -1px;
     border: none;
     background: transparent;
-    font-size: 14px;
+    font-size: @font-size-base;
     font-weight: 400;
-    color: #4b5563;
+    line-height: 1.4;
+    color: @text-color-secondary;
     cursor: pointer;
     transition: color 0.2s;
 
+    &:hover {
+      color: @heading-color;
+    }
+
     &.is-active {
       font-weight: 600;
       color: @primary-strong;
@@ -175,24 +180,23 @@ async function onGetCode(target: string): Promise<void> {
         bottom: 0;
         left: 0;
         height: 2px;
+        border-radius: 1px;
         background: @primary-strong;
       }
     }
   }
 
-  // 设计稿 #36：「没有账号？」(1325,774)、「立即注册」(1384.5,774) 12px。
-  // 「找回密码」为设计稿外的补充入口，按同样式接在分隔符后。
   &__switch {
     align-self: center;
-    margin: 53px 0 0;
-    font-size: 12px;
+    margin: @spacing-xl 0 0;
+    font-size: @font-size-sm;
     font-weight: 400;
-    line-height: 16px;
-    color: #6b7280;
+    line-height: 1.5;
+    color: @text-color-secondary;
 
     &-sep {
-      margin: 0 8px;
-      color: #d0d5dd;
+      margin: 0 @spacing-sm;
+      color: @border-color;
     }
   }
 }