feat: refresh service and tool pages

src/pages/wordcloud/index.scss

@@ -42,12 +42,12 @@
   align-items: center;
   justify-content: center;
   margin-bottom: 12px;
-  border: 4px dashed var(--bg-input);
+  border: 1rpx solid var(--border);
 }
 
 .step-circle.active {
-  background: var(--btn-gradient);
-  border-color: var(--accent-pink);
+  background: var(--accent-primary);
+  border-color: var(--accent-primary);
 }
 
 .step-num {
@@ -66,7 +66,7 @@
 }
 
 .step-label.active {
-  color: var(--accent-pink);
+  color: var(--accent-primary);
   font-weight: 600;
 }
 
@@ -80,7 +80,7 @@
 }
 
 .step-line.active {
-  background: var(--btn-gradient);
+  background: var(--accent-primary);
 }
 
 /* 步骤内容 */
@@ -94,6 +94,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1rpx solid var(--border);
+  border-radius: 24rpx;
 }
 
 .upload-placeholder {
@@ -124,11 +126,11 @@
 
 .upload-tip {
   font-size: 22px;
-  color: var(--accent-blue);
-  background: rgba(91, 140, 255, 0.1);
+  color: var(--accent-secondary);
+  background: var(--accent-secondary-soft);
   padding: 8px 20px;
-  border-radius: 50px;
-  border: var(--line-card);
+  border-radius: 999rpx;
+  border: 1rpx solid var(--border);
 }
 
 .preview-image {
@@ -148,6 +150,8 @@
 /* 输入区域 */
 .input-section {
   padding: 32px;
+  border: 1rpx solid var(--border);
+  border-radius: 24rpx;
 }
 
 .names-input {
@@ -159,7 +163,7 @@
   font-size: 28px;
   line-height: 1.6;
   box-sizing: border-box;
-  border: var(--line-card);
+  border: 1rpx solid var(--border);
   color: var(--text-primary);
 }
 
@@ -218,14 +222,14 @@
 .progress-bar {
   width: 80%;
   height: 16px;
-  background: rgba(255, 154, 158, 0.15);
+  background: var(--accent-primary-soft);
   border-radius: 8px;
   overflow: hidden;
 }
 
 .progress-fill {
   height: 100%;
-  background: var(--btn-gradient);
+  background: var(--accent-primary);
   border-radius: 8px;
   transition: width 0.5s ease;
 }
@@ -233,7 +237,7 @@
 .progress-text {
   font-size: 32px;
   font-weight: 700;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
   margin-top: 16px;
 }
 
@@ -245,24 +249,26 @@
 .result-image-wrapper {
   overflow: hidden;
   position: relative;
+  border: 1rpx solid var(--border);
+  border-radius: 24rpx;
 }
 
 .result-image {
   width: 100%;
   height: 500px;
-  background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
+  background: linear-gradient(135deg, var(--accent-primary-soft) 0%, var(--accent-secondary-soft) 100%);
 }
 
 .watermark-badge {
   position: absolute;
   bottom: 20px;
   right: 20px;
-  background: rgba(255, 255, 255, 0.8);
+  background: var(--glass);
   color: var(--text-primary);
   padding: 8px 20px;
   border-radius: 8px;
   font-size: 22px;
-  border: var(--line-card);
+  border: 1rpx solid var(--border);
 }
 
 .result-actions {
@@ -313,5 +319,5 @@
 
 .diy-jump-arrow {
   font-size: 40px;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
 }