diff --git a/frontend/src/features/invitation/views/UserInvitationView.vue b/frontend/src/features/invitation/views/UserInvitationView.vue
index 3f3efba..cf6c5a6 100644
--- a/frontend/src/features/invitation/views/UserInvitationView.vue
+++ b/frontend/src/features/invitation/views/UserInvitationView.vue
@@ -269,7 +269,10 @@ function cycleLabel(cycle: string) {
     <!-- 阶梯分成规则说明 -->
     <div class="rules-card">
       <div class="rules-header">
-        <h3>邀请返利分成规则说明</h3>
+        <div class="rules-header-title">
+          <div class="rules-title-bar"></div>
+          <h3>邀请返利分成规则说明</h3>
+        </div>
         <span class="rule-tip">以被邀请人完成实名认证时刻作为周期计算起点</span>
       </div>
 
@@ -462,53 +465,74 @@ function cycleLabel(cycle: string) {
 }
 
 .hero-card {
-  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
-  border-radius: 16px;
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 90% 15%, rgba(255, 106, 0, 0.22) 0%, transparent 50%),
+    radial-gradient(circle at 10% 85%, rgba(255, 133, 46, 0.12) 0%, transparent 45%),
+    linear-gradient(145deg, #0d121c 0%, #151d2d 45%, #1e293b 100%);
+  border: 1px solid rgba(255, 106, 0, 0.25);
+  border-radius: 20px;
   color: #ffffff;
-  padding: 32px 28px;
+  padding: 36px 32px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
+  gap: 22px;
+  box-shadow:
+    0 12px 32px rgba(15, 23, 42, 0.22),
+    0 4px 16px rgba(255, 106, 0, 0.08);
+}
+
+.hero-left {
+  position: relative;
+  z-index: 2;
 }
 
 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  background: rgba(255, 255, 255, 0.2);
-  padding: 4px 12px;
+  background: rgba(255, 106, 0, 0.16);
+  border: 1px solid rgba(255, 133, 46, 0.4);
+  color: #ff9b4e;
+  padding: 4px 14px;
   border-radius: 20px;
   font-size: 13px;
-  font-weight: 500;
-  margin-bottom: 12px;
-  backdrop-filter: blur(4px);
+  font-weight: 600;
+  margin-bottom: 14px;
+  backdrop-filter: blur(8px);
 }
 
 .hero-title {
-  font-size: 26px;
+  font-size: 28px;
   font-weight: 800;
   margin: 0;
   letter-spacing: 0.5px;
+  background: linear-gradient(135deg, #ffffff 60%, #ffd8a8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .hero-subtitle {
   font-size: 14px;
-  opacity: 0.9;
-  margin: 8px 0 0;
-  line-height: 1.5;
+  color: #cbd5e1;
+  margin: 10px 0 0;
+  line-height: 1.6;
 }
 
 .hero-unverified-alert {
-  background: rgba(234, 179, 8, 0.18);
-  border: 1px solid rgba(253, 224, 71, 0.4);
-  border-radius: 12px;
-  padding: 14px 18px;
+  position: relative;
+  z-index: 2;
+  background: rgba(255, 106, 0, 0.12);
+  border: 1px solid rgba(255, 106, 0, 0.35);
+  border-radius: 14px;
+  padding: 16px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
+  backdrop-filter: blur(10px);
 }
 
 .alert-content {
@@ -519,38 +543,40 @@ function cycleLabel(cycle: string) {
 
 .alert-icon {
   font-size: 24px;
-  color: #fde047;
+  color: #ff852e;
 }
 
 .alert-text strong {
   display: block;
   font-size: 14px;
-  color: #fef08a;
+  color: #fed7aa;
 }
 
 .alert-text p {
-  margin: 2px 0 0;
+  margin: 3px 0 0;
   font-size: 12px;
-  color: #f8fafc;
+  color: #e2e8f0;
 }
 
 .realname-btn {
-  background: #facc15;
-  color: #854d0e;
+  background: linear-gradient(135deg, #ff6a00 0%, #ff852e 100%);
+  color: #ffffff;
   border: none;
   border-radius: 8px;
-  padding: 8px 16px;
+  padding: 9px 18px;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  transition: opacity 0.2s;
+  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);
+  transition: all 0.2s;
 }
 
 .realname-btn:hover {
-  opacity: 0.9;
+  box-shadow: 0 6px 16px rgba(255, 106, 0, 0.45);
+  transform: translateY(-1px);
 }
 
 .stats-row {
@@ -562,10 +588,17 @@ function cycleLabel(cycle: string) {
 
 .stat-card {
   background: #ffffff;
-  border-radius: 14px;
-  padding: 20px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+  border-radius: 16px;
+  padding: 22px;
+  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
   border: 1px solid #f1f5f9;
+  transition: all 0.25s ease;
+}
+
+.stat-card:hover {
+  border-color: #fed7aa;
+  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.08);
+  transform: translateY(-2px);
 }
 
 .stat-header {
@@ -577,28 +610,31 @@ function cycleLabel(cycle: string) {
 .stat-label {
   font-size: 13px;
   color: #64748b;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .stat-icon {
   font-size: 20px;
-  padding: 6px;
-  border-radius: 8px;
+  padding: 8px;
+  border-radius: 10px;
 }
 
 .stat-icon.income {
-  background: #fef2f2;
-  color: #dc2626;
+  background: #fff7ed;
+  color: #ea580c;
+  border: 1px solid #ffedd5;
 }
 
 .stat-icon.month {
-  background: #eff6ff;
-  color: #2563eb;
+  background: #fefce8;
+  color: #d97706;
+  border: 1px solid #fef08a;
 }
 
 .stat-icon.users {
   background: #f0fdf4;
   color: #16a34a;
+  border: 1px solid #dcfce7;
 }
 
 .stat-value {
@@ -610,14 +646,15 @@ function cycleLabel(cycle: string) {
 }
 
 .stat-value strong {
-  font-size: 28px;
+  font-size: 30px;
   font-weight: 800;
+  letter-spacing: -0.5px;
 }
 
 .currency {
   font-size: 18px;
   font-weight: 700;
-  color: #dc2626;
+  color: #ea580c;
 }
 
 .stat-value .unit {
@@ -634,10 +671,10 @@ function cycleLabel(cycle: string) {
 
 .share-box-card {
   background: #ffffff;
-  border-radius: 14px;
-  padding: 22px;
+  border-radius: 16px;
+  padding: 24px;
   margin-top: 20px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
   border: 1px solid #f1f5f9;
 }
 
@@ -645,7 +682,7 @@ function cycleLabel(cycle: string) {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
 }
 
 .share-title {
@@ -654,15 +691,20 @@ function cycleLabel(cycle: string) {
   gap: 8px;
   font-size: 16px;
   font-weight: 700;
-  color: #1e293b;
+  color: #0f172a;
+}
+
+.share-title .el-icon {
+  color: #ff6a00;
+  font-size: 18px;
 }
 
 .poster-trigger-btn {
-  background: #eff6ff;
-  color: #2563eb;
-  border: 1px solid #bfdbfe;
-  border-radius: 6px;
-  padding: 6px 14px;
+  background: #fff7ed;
+  color: #ff6a00;
+  border: 1px solid #fed7aa;
+  border-radius: 8px;
+  padding: 7px 16px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
@@ -673,12 +715,15 @@ function cycleLabel(cycle: string) {
 }
 
 .poster-trigger-btn:hover {
-  background: #dbeafe;
+  background: #ffedd5;
+  border-color: #fdba74;
+  color: #ea580c;
+  box-shadow: 0 2px 8px rgba(255, 106, 0, 0.15);
 }
 
 .share-content-row {
   display: grid;
-  grid-template-columns: 180px 1fr;
+  grid-template-columns: 200px 1fr;
   gap: 16px;
 }
 
@@ -687,13 +732,13 @@ function cycleLabel(cycle: string) {
   font-size: 12px;
   color: #64748b;
   margin-bottom: 6px;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .field-box {
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  background: #fffaf5;
+  border: 1px solid #fed7aa;
+  border-radius: 10px;
   padding: 8px 12px;
   display: flex;
   align-items: center;
@@ -702,15 +747,15 @@ function cycleLabel(cycle: string) {
 }
 
 .code-text {
-  font-family: monospace;
-  font-size: 18px;
+  font-family: 'DIN Alternate', 'SF Mono', Consolas, monospace;
+  font-size: 20px;
   font-weight: 800;
-  color: #2563eb;
-  letter-spacing: 1px;
+  color: #ff6a00;
+  letter-spacing: 1.5px;
 }
 
 .link-text {
-  font-family: monospace;
+  font-family: -apple-system, BlinkMacSystemFont, monospace;
   font-size: 13px;
   color: #334155;
   white-space: nowrap;
@@ -723,8 +768,9 @@ function cycleLabel(cycle: string) {
   border: 1px solid #cbd5e1;
   color: #475569;
   border-radius: 6px;
-  padding: 5px 10px;
+  padding: 6px 12px;
   font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -733,39 +779,60 @@ function cycleLabel(cycle: string) {
   transition: all 0.2s;
 }
 
-.copy-btn.primary {
-  background: #2563eb;
-  border-color: #2563eb;
-  color: #ffffff;
+.copy-btn:hover {
+  border-color: #ff6a00;
+  color: #ff6a00;
 }
 
-.copy-btn:hover {
-  opacity: 0.9;
+.copy-btn.primary {
+  background: linear-gradient(135deg, #ff6a00 0%, #ff852e 100%);
+  border: none;
+  color: #ffffff;
+  font-weight: 600;
+  box-shadow: 0 3px 10px rgba(255, 106, 0, 0.28);
+}
+
+.copy-btn.primary:hover {
+  box-shadow: 0 5px 16px rgba(255, 106, 0, 0.4);
+  transform: translateY(-1px);
 }
 
 .rules-card {
   background: #ffffff;
-  border-radius: 14px;
-  padding: 22px;
+  border-radius: 16px;
+  padding: 24px;
   margin-top: 20px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
   border: 1px solid #f1f5f9;
 }
 
 .rules-header {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: center;
   flex-wrap: wrap;
   gap: 8px;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
+}
+
+.rules-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rules-title-bar {
+  width: 4px;
+  height: 16px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, #ff6a00, #ff852e);
 }
 
 .rules-header h3 {
   margin: 0;
   font-size: 16px;
   font-weight: 700;
-  color: #1e293b;
+  color: #0f172a;
 }
 
 .rule-tip {
@@ -776,47 +843,73 @@ function cycleLabel(cycle: string) {
 .ladder-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 14px;
-  margin-bottom: 18px;
+  gap: 16px;
+  margin-bottom: 20px;
 }
 
 .ladder-item {
-  border-radius: 10px;
-  padding: 16px;
+  border-radius: 12px;
+  padding: 18px 16px;
   text-align: center;
-  border: 1px solid transparent;
+  transition: all 0.25s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.ladder-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
 }
 
 .ladder-first {
-  background: #fef2f2;
-  border-color: #fecaca;
+  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
+  border: 1.5px solid #fed7aa;
 }
 
 .ladder-second {
-  background: #fffbeb;
-  border-color: #fde68a;
+  background: linear-gradient(180deg, #fefce8 0%, #ffffff 100%);
+  border: 1px solid #fde68a;
 }
 
 .ladder-subsequent {
-  background: #eff6ff;
-  border-color: #bfdbfe;
+  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
+  border: 1px solid #bbf7d0;
 }
 
 .ladder-tag {
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 700;
   color: #475569;
 }
 
+.ladder-first .ladder-tag {
+  color: #ea580c;
+}
+
+.ladder-second .ladder-tag {
+  color: #d97706;
+}
+
+.ladder-subsequent .ladder-tag {
+  color: #16a34a;
+}
+
 .ladder-rate {
-  font-size: 32px;
+  font-size: 34px;
   font-weight: 900;
   line-height: 1.2;
-  margin: 6px 0;
+  margin: 8px 0;
+  font-family:
+    'DIN Alternate',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
 }
 
 .ladder-first .ladder-rate {
-  color: #dc2626;
+  color: #ea580c;
 }
 
 .ladder-second .ladder-rate {
@@ -824,7 +917,7 @@ function cycleLabel(cycle: string) {
 }
 
 .ladder-subsequent .ladder-rate {
-  color: #2563eb;
+  color: #16a34a;
 }
 
 .ladder-time {
@@ -841,38 +934,39 @@ function cycleLabel(cycle: string) {
 
 .rules-details {
   background: #f8fafc;
-  border-radius: 8px;
-  padding: 14px 16px;
+  border-radius: 10px;
+  padding: 16px 18px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
+  border-left: 3px solid #fdba74;
 }
 
 .rule-point {
   font-size: 13px;
   color: #475569;
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
 .rule-point strong {
-  color: #1e293b;
+  color: #0f172a;
 }
 
 .details-tabs-card {
   background: #ffffff;
-  border-radius: 14px;
-  padding: 22px;
+  border-radius: 16px;
+  padding: 24px;
   margin-top: 20px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
   border: 1px solid #f1f5f9;
 }
 
 .tabs-header {
   display: flex;
-  gap: 16px;
+  gap: 20px;
   border-bottom: 2px solid #f1f5f9;
   padding-bottom: 12px;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
 }
 
 .tab-btn {
@@ -882,13 +976,18 @@ function cycleLabel(cycle: string) {
   font-weight: 600;
   color: #64748b;
   cursor: pointer;
-  padding: 6px 8px;
+  padding: 6px 4px;
   position: relative;
-  transition: color 0.2s;
+  transition: all 0.2s;
+}
+
+.tab-btn:hover {
+  color: #ff6a00;
 }
 
 .tab-btn.active {
-  color: #2563eb;
+  color: #ff6a00;
+  font-weight: 700;
 }
 
 .tab-btn.active::after {
@@ -897,9 +996,9 @@ function cycleLabel(cycle: string) {
   bottom: -14px;
   left: 0;
   right: 0;
-  height: 2px;
-  background: #2563eb;
-  border-radius: 2px;
+  height: 3px;
+  background: linear-gradient(90deg, #ff6a00, #ff852e);
+  border-radius: 3px;
 }
 
 .table-responsive {
@@ -917,50 +1016,59 @@ function cycleLabel(cycle: string) {
   background: #f8fafc;
   color: #64748b;
   font-weight: 600;
-  padding: 10px 14px;
+  padding: 12px 14px;
   border-bottom: 1px solid #e2e8f0;
 }
 
 .data-table td {
-  padding: 12px 14px;
+  padding: 14px;
   border-bottom: 1px solid #f1f5f9;
   color: #1e293b;
+  transition: background 0.15s;
+}
+
+.data-table tbody tr:hover td {
+  background: #fffaf5;
 }
 
 .status-pill {
   display: inline-block;
-  padding: 2px 8px;
-  border-radius: 4px;
+  padding: 3px 10px;
+  border-radius: 6px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .status-pill.active {
   background: #f0fdf4;
   color: #16a34a;
+  border: 1px solid #bbf7d0;
 }
 
 .status-pill.pending {
   background: #fffbeb;
   color: #d97706;
+  border: 1px solid #fde68a;
 }
 
 .role-pill {
   display: inline-block;
-  padding: 2px 8px;
-  border-radius: 4px;
+  padding: 3px 10px;
+  border-radius: 6px;
   font-size: 12px;
   font-weight: 600;
 }
 
 .role-pill.buyer {
-  background: #eff6ff;
-  color: #2563eb;
+  background: #fff7ed;
+  color: #ea580c;
+  border: 1px solid #fed7aa;
 }
 
 .role-pill.seller {
   background: #fdf2f8;
   color: #db2777;
+  border: 1px solid #fbcfe8;
 }
 
 .cycle-pill {
@@ -969,89 +1077,130 @@ function cycleLabel(cycle: string) {
 }
 
 .rebate-amount {
-  font-weight: 700;
-  color: #dc2626;
+  font-weight: 800;
+  color: #ea580c;
+  font-size: 14px;
 }
 
 .loading-state,
 .empty-state {
   text-align: center;
-  padding: 40px 16px;
+  padding: 48px 16px;
   color: #64748b;
   font-size: 14px;
 }
 
+.empty-state p {
+  margin-top: 12px;
+}
+
 .pagination-bar {
-  margin-top: 16px;
+  margin-top: 20px;
   display: flex;
   justify-content: flex-end;
 }
 
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #ff6a00 !important;
+  color: #ffffff !important;
+}
+
+:deep(.el-pagination.is-background .el-pager li:not(.is-active):hover) {
+  color: #ff6a00 !important;
+}
+
 .poster-modal-body {
   text-align: center;
 }
 
 .poster-card {
-  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
+  position: relative;
+  background:
+    radial-gradient(circle at 85% 15%, rgba(255, 106, 0, 0.28) 0%, transparent 60%),
+    radial-gradient(circle at 15% 85%, rgba(255, 133, 46, 0.18) 0%, transparent 55%),
+    linear-gradient(150deg, #111827 0%, #1a2234 50%, #252f44 100%);
   color: #ffffff;
-  border-radius: 12px;
-  padding: 20px 16px;
+  border: 1px solid rgba(255, 106, 0, 0.3);
+  border-radius: 16px;
+  padding: 24px 20px;
+  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.25);
 }
 
 .poster-badge {
   display: inline-block;
-  background: rgba(255, 255, 255, 0.2);
-  padding: 2px 10px;
+  background: linear-gradient(135deg, #ff6a00 0%, #ff852e 100%);
+  color: #ffffff;
+  padding: 3px 12px;
   border-radius: 12px;
   font-size: 11px;
-  margin-bottom: 6px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  box-shadow: 0 2px 8px rgba(255, 106, 0, 0.35);
 }
 
 .poster-card h3 {
   margin: 0;
-  font-size: 18px;
+  font-size: 20px;
+  font-weight: 800;
+  letter-spacing: 0.5px;
 }
 
 .poster-desc {
   font-size: 12px;
-  opacity: 0.85;
-  margin: 6px 0 16px;
+  color: #cbd5e1;
+  margin: 8px 0 18px;
 }
 
 .poster-qr-wrap {
   width: 180px;
   height: 180px;
   background: #ffffff;
-  padding: 8px;
-  border-radius: 8px;
+  padding: 10px;
+  border-radius: 12px;
   margin: 0 auto;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }
 
 .poster-qr-wrap img {
   width: 100%;
   height: 100%;
+  display: block;
 }
 
 .poster-code-row {
-  margin-top: 14px;
+  margin-top: 16px;
   font-size: 13px;
+  color: #e2e8f0;
 }
 
 .poster-code-row strong {
-  color: #fde047;
-  font-size: 16px;
-  letter-spacing: 1px;
+  color: #ff9b4e;
+  font-size: 18px;
+  font-weight: 900;
+  letter-spacing: 1.5px;
 }
 
 .poster-tip {
   font-size: 12px;
   color: #94a3b8;
-  margin-top: 12px;
+  margin-top: 14px;
 }
 
 @media (max-width: 768px) {
+  .hero-card {
+    padding: 24px 18px;
+  }
+
+  .hero-title {
+    font-size: 22px;
+  }
+
   .share-content-row {
     grid-template-columns: 1fr;
   }
+
+  .ladder-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>