feat: refresh product and customization flows

src/pages/diy/index.scss

@@ -12,7 +12,7 @@
 
 .canvas-area {
   position: relative;
-  background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
+  background: var(--bg-input);
   overflow: hidden;
   border-radius: 16px;
   min-width: 200px;
@@ -27,7 +27,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border: 3px dashed var(--accent-blue);
+  border: 1rpx solid var(--border-strong);
   pointer-events: none;
   z-index: 2;
 }
@@ -41,12 +41,12 @@
 }
 
 .canvas-image.active {
-  border-color: var(--accent-pink);
+  border-color: var(--accent-primary);
 }
 
 .canvas-image.overlap {
-  border-color: #ff4757;
-  box-shadow: 0 0 12px rgba(255, 71, 87, 0.5);
+  border-color: var(--danger);
+  box-shadow: 0 0 12px var(--danger-soft);
 }
 
 /* 贴纸面板 */
@@ -64,19 +64,19 @@
   position: relative;
   width: 120px;
   height: 120px;
-  border: 2px dashed var(--line-star);
+  border: 1rpx solid var(--border);
   border-radius: 12px;
   overflow: hidden;
   background: var(--bg-input);
 }
 
 .sticker-thumb.active {
-  border-color: var(--accent-pink);
-  border-width: 3px;
+  border-color: var(--accent-primary);
+  border-width: 2rpx;
 }
 
 .sticker-thumb.overlap {
-  border-color: #ff4757;
+  border-color: var(--danger);
 }
 
 .sticker-thumb-img {
@@ -90,7 +90,7 @@
   right: 4px;
   width: 36px;
   height: 36px;
-  background: rgba(255, 71, 87, 0.85);
+  background: var(--danger);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -107,7 +107,7 @@
 .sticker-add-btn {
   width: 120px;
   height: 120px;
-  border: 2px dashed var(--line-star);
+  border: 1rpx solid var(--border);
   border-radius: 12px;
   display: flex;
   flex-direction: column;
@@ -118,7 +118,7 @@
 
 .add-icon {
   font-size: 48px;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
   line-height: 1;
 }
 
@@ -132,7 +132,7 @@
   display: block;
   margin-top: 16px;
   font-size: 26px;
-  color: #ff4757;
+  color: var(--danger);
   font-weight: 600;
   text-align: center;
 }
@@ -162,8 +162,8 @@
 .tool-btn {
   width: 56px;
   height: 56px;
-  background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
-  border: 2px dashed var(--accent-blue);
+  background: var(--bg-input);
+  border: 1rpx solid var(--border-strong);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -176,7 +176,7 @@
 .tool-value {
   font-size: 28px;
   font-weight: 600;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
   min-width: 80px;
   text-align: center;
 }
@@ -219,11 +219,11 @@
 }
 
 .preview-canvas {
-  background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
+  background: var(--bg-input);
   border-radius: 16px;
   overflow: hidden;
   margin: 0 auto 24px;
-  border: 3px dashed var(--accent-blue);
+  border: 1rpx solid var(--border-strong);
   position: relative;
   min-width: 200px;
   min-height: 200px;
@@ -239,7 +239,7 @@
 }
 
 .preview-image.overlap {
-  border: 2px solid #ff4757;
+  border: 2px solid var(--danger);
 }
 
 .product-info {
@@ -265,13 +265,13 @@
   gap: 20px;
 }
 
-.preview-actions .btn-outline,
-.preview-actions .btn-gradient {
+.preview-actions .btn-secondary,
+.preview-actions .btn-primary {
   flex: 1;
   text-align: center;
 }
 
-.preview-actions .btn-gradient.disabled {
+.preview-actions .btn-primary.disabled {
   opacity: 0.5;
   pointer-events: none;
 }
@@ -290,14 +290,14 @@
   text-align: center;
   background: var(--bg-input);
   color: var(--text-secondary);
-  border: 2px dashed var(--text-muted);
+  border: 1rpx solid var(--border-strong);
   transition: all 0.2s ease;
 }
 
 .edit-btn.active {
-  background: linear-gradient(135deg, rgba(255, 154, 158, 0.12) 0%, rgba(160, 196, 255, 0.12) 100%);
-  color: var(--accent-pink);
-  border-color: var(--accent-pink);
+  background: var(--accent-primary-soft);
+  color: var(--accent-primary);
+  border-color: var(--accent-primary);
 }
 
 .edit-btn.disabled {
@@ -305,11 +305,13 @@
   pointer-events: none;
 }
 
-/* 按钮 */
-.action-btns {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
+/* 底部操作栏 — 毛玻璃规则由全局 .action-bar 提供 */
+.action-bar .btn-primary,
+.action-bar .btn-secondary {
+  flex: 1;
+  text-align: center;
+  padding: 24px 0;
+  font-size: 28px;
 }
 
 .mt-20 {