diff --git a/src/pages/checkout/index.scss b/src/pages/checkout/index.scss
index 082a513..6048339 100644
--- a/src/pages/checkout/index.scss
+++ b/src/pages/checkout/index.scss
@@ -19,7 +19,7 @@
   position: relative;
   overflow: hidden;
   background: rgba(0,0,0,0.03);
-  border: 2px dashed var(--line-star);
+  border: 1rpx solid var(--border-strong);
   max-width: 100%;
   box-sizing: border-box;
 }
@@ -42,7 +42,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 20px 0;
-  border-bottom: 1px dashed rgba(0,0,0,0.06);
+  border-bottom: 1rpx solid var(--border);
 }
 
 .info-row:last-child {
@@ -68,7 +68,7 @@
 .info-total {
   font-size: 40px;
   font-weight: 800;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
 }
 
 /* 地址卡片 */
@@ -86,12 +86,12 @@
 .address-change {
   padding: 6px 16px;
   border-radius: 8px;
-  background: rgba(91, 140, 255, 0.08);
+  background: var(--accent-secondary-soft);
 }
 
 .change-text {
   font-size: 24px;
-  color: var(--accent-blue);
+  color: var(--accent-secondary);
 }
 
 .checkout-address-body {
@@ -160,11 +160,11 @@
 
 .addr-picker-item {
   padding: 20px 16px;
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
+  border-bottom: 1rpx solid var(--border);
 }
 
 .addr-picker-item.active {
-  background: rgba(91, 140, 255, 0.06);
+  background: var(--accent-secondary-soft);
   border-radius: 12px;
 }
 
@@ -188,8 +188,8 @@
 
 .addr-picker-default {
   font-size: 22px;
-  color: var(--accent-pink);
-  border: 1px solid var(--accent-pink);
+  color: var(--accent-primary);
+  border: 1px solid var(--accent-primary);
   padding: 2px 8px;
   border-radius: 6px;
 }
@@ -210,31 +210,18 @@
   margin-top: 16px;
   padding: 20px;
   text-align: center;
-  border: 2px dashed var(--accent-blue);
+  border: 1rpx solid var(--border-strong);
   border-radius: 12px;
 }
 
 .addr-picker-add-text {
   font-size: 28px;
-  color: var(--accent-blue);
+  color: var(--accent-secondary);
 }
 
-/* 底部操作 */
-.checkout-actions {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: var(--bg-card);
-  border-top: var(--line-card);
-  padding: 20px 32px calc(20px + env(safe-area-inset-bottom));
-  display: flex;
-  gap: 24px;
-  z-index: 500;
-}
-
-.checkout-actions .btn-outline,
-.checkout-actions .btn-gradient {
+/* 底部操作 — 毛玻璃规则由全局 .action-bar 提供 */
+.action-bar .btn-secondary,
+.action-bar .btn-primary {
   flex: 1;
   text-align: center;
 }
diff --git a/src/pages/checkout/index.tsx b/src/pages/checkout/index.tsx
index 3eb65ed..494e990 100644
--- a/src/pages/checkout/index.tsx
+++ b/src/pages/checkout/index.tsx
@@ -18,8 +18,9 @@ export default function CheckoutPage() {
   const [addrList, setAddrList] = useState<AddressItem[]>([])
 
   useEffect(() => {
-    const params = Taro.getCurrentInstance().router?.params
-    const dId = params?.designId
+    const router = Taro.getCurrentInstance().router
+    const params = router ? router.params : undefined
+    const dId = params ? params.designId : undefined
     if (!dId) return
     const list = getDesignList()
     const d = list.find(x => x.id === dId)
@@ -35,7 +36,7 @@ export default function CheckoutPage() {
     }
     Taro.showModal({
       title: '确认下单',
-      content: `确认后将从设计清单生成订单，并寄送至：\n${address.region?.join(' ')} ${address.detail}`,
+      content: `确认后将从设计清单生成订单，并寄送至：\n${address.region ? address.region.join(' ') : ''} ${address.detail}`,
       success: (res) => {
         if (res.confirm) {
           designToOrder(design.id)
@@ -54,15 +55,15 @@ export default function CheckoutPage() {
     Taro.showToast({ title: '地址已更改', icon: 'success' })
   }
 
-  const hasStickers = design?.designData?.stickers && design.designData.stickers.length > 0
-  const hasLegacyImage = design?.designData?.imageSrc
+  const hasStickers = design && design.designData && design.designData.stickers && design.designData.stickers.length > 0
+  const hasLegacyImage = design && design.designData ? design.designData.imageSrc : undefined
 
   if (!design) {
     return (
       <View className={`theme-${resolvedTheme}`}>
         <ThemedPageMeta />
         <View className='checkout-page'>
-          <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
+          <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
             <Text className='page-title'>设计不存在</Text>
           </View>
         </View>
@@ -71,7 +72,7 @@ export default function CheckoutPage() {
   }
 
   const maskStyle: any = { width: 300, height: 420 }
-  if (design.designData?.category?.mask) {
+  if (design.designData && design.designData.category && design.designData.category.mask) {
     const m = design.designData.category.mask
     maskStyle.width = m.width
     maskStyle.height = m.height
@@ -84,8 +85,7 @@ export default function CheckoutPage() {
       <ThemedPageMeta />
       <View className='checkout-page'>
 
-        <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
-          <View className='star-badge' />
+        <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
           <View className='flex-between' style={{ width: '100%' }}>
             <Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
             <Text className='page-title'>设计效果确认</Text>
@@ -94,8 +94,7 @@ export default function CheckoutPage() {
         </View>
 
         {/* 效果展示区 */}
-        <View className='checkout-canvas dashed-card mt-20'>
-          <View className='star-badge' />
+        <View className='checkout-canvas surface-card mt-20'>
           <View className='canvas-area' style={maskStyle}>
             {hasStickers ? (
               design.designData.stickers.map((s: any) => (
@@ -116,7 +115,7 @@ export default function CheckoutPage() {
                 className='checkout-image'
                 src={design.designData.imageSrc}
                 style={{
-                  transform: `translate(${design.designData.imagePos?.x || 0}px, ${design.designData.imagePos?.y || 0}px) scale(${design.designData.imagePos?.scale || 1})`
+                  transform: `translate(${design.designData.imagePos ? design.designData.imagePos.x || 0 : 0}px, ${design.designData.imagePos ? design.designData.imagePos.y || 0 : 0}px) scale(${design.designData.imagePos ? design.designData.imagePos.scale || 1 : 1})`
                 }}
                 mode='aspectFit'
               />
@@ -125,8 +124,7 @@ export default function CheckoutPage() {
         </View>
 
         {/* 商品信息 */}
-        <View className='checkout-info dashed-card mt-20'>
-          <View className='star-badge' />
+        <View className='checkout-info surface-card mt-20'>
           <View className='info-row'>
             <Text className='info-label'>商品</Text>
             <Text className='info-value'>{design.productName}</Text>
@@ -146,8 +144,7 @@ export default function CheckoutPage() {
         </View>
 
         {/* 收货地址 */}
-        <View className='checkout-address-card dashed-card mt-20'>
-          <View className='star-badge' />
+        <View className='checkout-address-card surface-card mt-20'>
           <View className='checkout-address-header'>
             <Text className='info-label'>收货地址</Text>
             <View className='address-change' onTap={() => setShowAddrPicker(true)}>
@@ -161,7 +158,7 @@ export default function CheckoutPage() {
                 <Text className='addr-phone'>{address.phone}</Text>
               </View>
               <Text className='addr-detail'>
-                {address.region?.join(' ')} {address.detail}
+                {address.region ? address.region.join(' ') : ''} {address.detail}
               </Text>
             </View>
           ) : (
@@ -172,21 +169,21 @@ export default function CheckoutPage() {
         </View>
 
         {/* 底部操作 */}
-        <View className='checkout-actions'>
-          <View className='btn-outline' onTap={() => Taro.navigateBack()}>
+        <View className='action-bar'>
+          <View className='btn-secondary' onTap={() => Taro.navigateBack()}>
             <Text>返回修改</Text>
           </View>
-          <View className='btn-gradient' onTap={handleConfirm}>
+          <View className='btn-primary' onTap={handleConfirm}>
             <Text>确认下单</Text>
           </View>
         </View>
 
-        <View style={{ height: '40px' }} />
+        <View className='safe-bottom-placeholder' />
 
         {/* 地址选择底部弹窗 */}
         {showAddrPicker && (
           <View className='modal-overlay' style={{ alignItems: 'flex-end', justifyContent: 'flex-end' }}>
-            <View className='addr-picker-sheet dashed-card'>
+            <View className='addr-picker-sheet surface-card'>
               <View className='addr-picker-header'>
                 <Text className='addr-picker-title'>选择收货地址</Text>
                 <Text className='addr-picker-close' onTap={() => setShowAddrPicker(false)}>✕</Text>
@@ -195,7 +192,7 @@ export default function CheckoutPage() {
                 {addrList.map((addr) => (
                   <View
                     key={addr.id}
-                    className={`addr-picker-item ${address?.id === addr.id ? 'active' : ''}`}
+                    className={`addr-picker-item ${address && address.id === addr.id ? 'active' : ''}`}
                     onTap={() => handlePickAddress(addr)}
                   >
                     <View className='addr-picker-row'>
@@ -204,7 +201,7 @@ export default function CheckoutPage() {
                       {addr.isDefault && <Text className='addr-picker-default'>默认</Text>}
                     </View>
                     <Text className='addr-picker-detail'>
-                      {addr.region?.join(' ')} {addr.detail}
+                      {addr.region ? addr.region.join(' ') : ''} {addr.detail}
                     </Text>
                   </View>
                 ))}
diff --git a/src/pages/diy/index.scss b/src/pages/diy/index.scss
index 8e27b65..bb94419 100644
--- a/src/pages/diy/index.scss
+++ b/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 {
diff --git a/src/pages/diy/index.tsx b/src/pages/diy/index.tsx
index afb9a38..c42b72e 100644
--- a/src/pages/diy/index.tsx
+++ b/src/pages/diy/index.tsx
@@ -25,22 +25,23 @@ export default function DIYPage() {
   const [hasOverlap, setHasOverlap] = useState(false)
 
   useEffect(() => {
-    const params = Taro.getCurrentInstance().router?.params
-    const source = params?.source
-    const productId = params?.productId || params?.category
+    const router = Taro.getCurrentInstance().router
+    const params = router ? router.params : undefined
+    const source = params ? params.source : undefined
+    const productId = (params && params.productId) || (params && params.category)
 
     if (source === 'product' && productId) {
       const product = getProductById(productId)
       if (product) {
         setCategory(product)
-        setQuantity(Number(params?.quantity) || 1)
+        setQuantity(Number(params ? params.quantity : undefined) || 1)
         const newDesign: DesignItem = {
           id: 'DSG' + Date.now(),
           productId: product.id,
           productName: product.name,
           productIcon: product.icon,
           unitPrice: product.price,
-          count: Number(params?.quantity) || 1,
+          count: Number(params ? params.quantity : undefined) || 1,
           status: 'designing',
           createdAt: new Date().toISOString().slice(0, 10)
         }
@@ -51,7 +52,7 @@ export default function DIYPage() {
       return
     }
 
-    if (source === 'designList' && params?.designId) {
+    if (source === 'designList' && params && params.designId) {
       const dId = params.designId
       const list = getDesignList()
       const design = list.find(d => d.id === dId)
@@ -60,16 +61,16 @@ export default function DIYPage() {
         setQuantity(design.count)
         const product = getProductById(design.productId)
         if (product) setCategory(product)
-        if (design.designData?.stickers) {
+        if (design.designData ? design.designData.stickers : undefined) {
           setStickers(design.designData.stickers)
-        } else if (design.designData?.imageSrc) {
+        } else if (design.designData ? design.designData.imageSrc : undefined) {
           // 兼容旧版数据
           const s: StickerItem = {
             id: 'legacy_' + Date.now(),
             src: design.designData.imageSrc,
-            x: design.designData.imagePos?.x || 0,
-            y: design.designData.imagePos?.y || 0,
-            scale: design.designData.imagePos?.scale || 1,
+            x: design.designData.imagePos ? design.designData.imagePos.x || 0 : 0,
+            y: design.designData.imagePos ? design.designData.imagePos.y || 0 : 0,
+            scale: design.designData.imagePos ? design.designData.imagePos.scale || 1 : 1,
             width: 200,
             height: 200,
             isOverlapping: false
@@ -255,6 +256,9 @@ export default function DIYPage() {
     Taro.navigateTo({ url: `/pages/checkout/index?designId=${designId}` })
   }
 
+  const activeSticker = activeStickerId ? stickers.find(s => s.id === activeStickerId) : undefined
+  const activeScale = activeSticker ? activeSticker.scale : 1
+
   if (!category) {
     return (
       <View className={`theme-${resolvedTheme}`}>
@@ -271,8 +275,7 @@ export default function DIYPage() {
       <ThemedPageMeta />
       <View className='diy-page'>
 
-        <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
-          <View className='star-badge' />
+        <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
           <View className='flex-between' style={{ width: '100%' }}>
             <Text className='back-btn' onTap={goBack}>←</Text>
             <Text className='page-title'>设计工作台</Text>
@@ -281,8 +284,7 @@ export default function DIYPage() {
         </View>
 
         {/* 画布区域 — catchtouchmove 阻止事件冒泡导致页面滚动 */}
-        <View className='canvas-wrapper dashed-card mt-20' catchMove>
-          <View className='star-badge' />
+        <View className='canvas-wrapper surface-card mt-20' catchMove>
           <View className='canvas-area' style={getMaskStyle()}>
             {stickers.map(s => (
               <Image
@@ -308,8 +310,7 @@ export default function DIYPage() {
         </View>
 
         {/* 贴纸列表与控制 */}
-        <View className='sticker-panel dashed-card mt-20'>
-          <View className='star-badge' />
+        <View className='sticker-panel surface-card mt-20'>
           <Text className='section-title'>贴纸</Text>
           <View className='sticker-list'>
             {stickers.map(s => (
@@ -330,15 +331,12 @@ export default function DIYPage() {
 
         {/* 控制工具栏 */}
         {activeStickerId && (
-          <View className='toolbar dashed-card mt-20'>
-            <View className='star-badge' />
+          <View className='toolbar surface-card mt-20'>
             <View className='tool-row'>
               <Text className='tool-label'>缩放</Text>
               <View className='flex-center' style={{ gap: '20px' }}>
                 <View className='tool-btn' onTap={() => handleScale(activeStickerId, -0.1)}>－</View>
-                <Text className='tool-value'>
-                  {Math.round((stickers.find(s => s.id === activeStickerId)?.scale || 1) * 100)}%
-                </Text>
+                <Text className='tool-value'>{Math.round(activeScale * 100)}%</Text>
                 <View className='tool-btn' onTap={() => handleScale(activeStickerId, 0.1)}>＋</View>
               </View>
             </View>
@@ -360,11 +358,11 @@ export default function DIYPage() {
         </View>
 
         {/* 底部操作按钮 */}
-        <View className='action-btns mt-20'>
-          <View className='btn-gradient' onTap={() => setPreviewMode(true)}>
+        <View className='action-bar'>
+          <View className='btn-primary' onTap={() => setPreviewMode(true)}>
             <Text>预览效果</Text>
           </View>
-          <View className='btn-outline' onTap={addSticker}>
+          <View className='btn-secondary' onTap={addSticker}>
             <Text>添加贴纸</Text>
           </View>
         </View>
@@ -372,8 +370,7 @@ export default function DIYPage() {
         {/* 预览弹层 */}
         {previewMode && (
           <View className='preview-overlay'>
-            <View className='preview-card dashed-card'>
-              <View className='star-badge' />
+            <View className='preview-card surface-card'>
               <Text className='preview-title'>确认效果</Text>
               <View className='preview-canvas' style={getMaskStyle()}>
                 {stickers.map(s => (
@@ -396,10 +393,10 @@ export default function DIYPage() {
                 {hasOverlap && <Text className='overlap-hint'>贴纸有重叠，不可提交</Text>}
               </View>
               <View className='preview-actions'>
-                <View className='btn-outline' onTap={() => setPreviewMode(false)}>
+                <View className='btn-secondary' onTap={() => setPreviewMode(false)}>
                   <Text>返回修改</Text>
                 </View>
-                <View className={`btn-gradient ${hasOverlap ? 'disabled' : ''}`} onTap={handleComplete}>
+                <View className={`btn-primary ${hasOverlap ? 'disabled' : ''}`} onTap={handleComplete}>
                   <Text>确认完成</Text>
                 </View>
               </View>
@@ -407,7 +404,7 @@ export default function DIYPage() {
           </View>
         )}
 
-        <View style={{ height: '40px' }} />
+        <View className='safe-bottom-placeholder' />
       </View>
     </View>
   )
diff --git a/src/pages/diy/stickerEdit/index.scss b/src/pages/diy/stickerEdit/index.scss
index 253e732..70b8705 100644
--- a/src/pages/diy/stickerEdit/index.scss
+++ b/src/pages/diy/stickerEdit/index.scss
@@ -28,7 +28,7 @@
 
 .edit-save {
   font-size: 28px;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
   font-weight: 600;
   width: 60px;
   text-align: right;
@@ -93,7 +93,7 @@
 .slider-fill {
   height: 100%;
   border-radius: 4px;
-  background: linear-gradient(90deg, #ff9a9e, #fecfef);
+  background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary-soft));
   position: absolute;
   left: 0;
   top: 0;
@@ -104,7 +104,7 @@
   height: 32px;
   border-radius: 50%;
   background: #fff;
-  border: 4px solid var(--accent-pink);
+  border: 4px solid var(--accent-primary);
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -132,7 +132,7 @@
   font-weight: 500;
   background: var(--bg-input);
   color: var(--text-primary);
-  border: 2px dashed var(--line-star);
+  border: 1rpx solid var(--border);
   transition: all 0.2s;
 }
 
@@ -142,20 +142,14 @@
 }
 
 .quick-btn.active {
-  background: rgba(255, 154, 158, 0.12);
-  border-color: var(--accent-pink);
-  color: var(--accent-pink);
+  background: var(--accent-primary-soft);
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
 }
 
-/* 底部操作 */
-.edit-footer {
-  padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
-  display: flex;
-  gap: 20px;
-}
-
-.edit-footer .btn-gradient,
-.edit-footer .btn-outline {
+/* 底部操作栏 — 毛玻璃规则由全局 .action-bar 提供 */
+.edit-footer .btn-primary,
+.edit-footer .btn-secondary {
   flex: 1;
   text-align: center;
   padding: 24px 0;
diff --git a/src/pages/diy/stickerEdit/index.tsx b/src/pages/diy/stickerEdit/index.tsx
index 3691a28..038961e 100644
--- a/src/pages/diy/stickerEdit/index.tsx
+++ b/src/pages/diy/stickerEdit/index.tsx
@@ -45,13 +45,15 @@ function TouchSlider({ value, min, max, step = 1, onChange, format }: SliderProp
 
   const handleTouchStart = (e: any) => {
     setDragging(true)
-    const x = e.touches?.[0]?.clientX ?? 0
+    const touch = e.touches && e.touches[0]
+    const x = touch ? touch.clientX : 0
     onChange(computedFromClientX(x))
   }
 
   const handleTouchMove = (e: any) => {
     if (!dragging) return
-    const x = e.touches?.[0]?.clientX ?? 0
+    const touch = e.touches && e.touches[0]
+    const x = touch ? touch.clientX : 0
     onChange(computedFromClientX(x))
   }
 
@@ -106,14 +108,15 @@ export default function StickerEditPage() {
       query.select('#editCanvas')
         .fields({ node: true, size: true })
         .exec((res: any) => {
-          const canvas = res?.[0]?.node
+          const resFirst = res && res[0]
+          const canvas = resFirst ? resFirst.node : undefined
           if (!canvas) {
             setTimeout(() => initCanvas(st), 300)
             return
           }
           const ctx = canvas.getContext('2d')
-          let cw = res[0]?.width || 300
-          let ch = res[0]?.height || 400
+          let cw = (res[0] && res[0].width) || 300
+          let ch = (res[0] && res[0].height) || 400
           if (cw <= 0) cw = 300
           if (ch <= 0) ch = 400
           const dpr = Taro.getSystemInfoSync().pixelRatio || 1
@@ -130,20 +133,21 @@ export default function StickerEditPage() {
   }, [canvasReady])
 
   useEffect(() => {
-    const params = Taro.getCurrentInstance().router?.params
-    const dId = params?.designId as string
-    const sId = params?.stickerId as string
+    const router = Taro.getCurrentInstance().router
+    const params = router ? router.params : undefined
+    const dId = params ? params.designId : ''
+    const sId = params ? params.stickerId : ''
     setDesignId(dId)
     setStickerId(sId)
 
     const list = getDesignList()
     const design = list.find(d => d.id === dId)
-    const st = design?.designData?.stickers?.find(s => s.id === sId)
+    const st = design && design.designData && design.designData.stickers ? design.designData.stickers.find(s => s.id === sId) : undefined
     if (st) {
       setSticker(st)
-      setBrightness(st.edits?.brightness || 0)
-      setHue(st.edits?.hue || 0)
-      setContrast(st.edits?.contrast || 0)
+      setBrightness((st.edits && st.edits.brightness) || 0)
+      setHue((st.edits && st.edits.hue) || 0)
+      setContrast((st.edits && st.edits.contrast) || 0)
       initCanvas(st)
     }
   }, [initCanvas])
@@ -171,9 +175,9 @@ export default function StickerEditPage() {
       const y = (ch - h) / 2
 
       // 应用滤镜（小程序 Canvas 2D 支持 filter 属性 2.16.0+）
-      const b = opts?.brightness ?? brightness
-      const hVal = opts?.hue ?? hue
-      const c = opts?.contrast ?? contrast
+      const b = opts ? opts.brightness : brightness
+      const hVal = opts ? opts.hue : hue
+      const c = opts ? opts.contrast : contrast
       if (b !== 0 || hVal !== 0 || c !== 0) {
         ctx.filter = `brightness(${100 + b}%) hue-rotate(${hVal}deg) contrast(${100 + c}%)`
       } else {
@@ -217,7 +221,7 @@ export default function StickerEditPage() {
         const dList = getDesignList()
         const dIdx = dList.findIndex(d => d.id === designId)
         if (dIdx === -1) { setLoading(false); return }
-        const stickers = dList[dIdx].designData?.stickers || []
+        const stickers = dList[dIdx].designData ? dList[dIdx].designData.stickers || [] : []
         const sIdx = stickers.findIndex(s => s.id === stickerId)
         if (sIdx === -1) { setLoading(false); return }
         stickers[sIdx] = {
@@ -325,7 +329,7 @@ export default function StickerEditPage() {
         </View>
 
         {/* 快速操作 */}
-        <View className='edit-tools dashed-card mt-20'>
+        <View className='edit-tools surface-card mt-20'>
           <View className='edit-row'>
             <Text className='edit-label'>快速操作</Text>
             <View className='edit-quick-actions'>
@@ -411,6 +415,17 @@ export default function StickerEditPage() {
 
         <View style={{ flex: 1 }} />
 
+        <View className='action-bar edit-footer'>
+          <View className='btn-secondary' onTap={() => Taro.navigateBack()}>
+            <Text>取消</Text>
+          </View>
+          <View className='btn-primary' onTap={handleSave}>
+            <Text>保存</Text>
+          </View>
+        </View>
+
+        <View className='safe-bottom-placeholder' />
+
         {loading && (
           <View className='edit-loading'>
             <Text className='edit-loading-text'>处理中…</Text>
diff --git a/src/pages/product/index.scss b/src/pages/product/index.scss
index 3682469..e36a875 100644
--- a/src/pages/product/index.scss
+++ b/src/pages/product/index.scss
@@ -1,6 +1,6 @@
 .product-page {
   padding: 0 24px 24px;
-  padding-bottom: calc(24px + 160px); /* 为底部 action-bar 留空 */
+  padding-bottom: calc(24px + 200px); /* 为底部毛玻璃 action-bar 留空 */
 }
 
 /* 返回按钮 */
@@ -61,7 +61,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 20px 0;
-  border-bottom: 1px dashed rgba(0,0,0,0.06);
+  border-bottom: 1rpx solid var(--border);
 }
 
 .info-row:last-child {
@@ -76,7 +76,7 @@
 .info-price {
   font-size: 40px;
   font-weight: 800;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
 }
 
 .info-value {
@@ -109,7 +109,7 @@
 .summary-price {
   font-size: 36px;
   font-weight: 700;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
 }
 
 /* 弹窗 */
@@ -211,7 +211,7 @@
   justify-content: space-between;
   margin-bottom: 32px;
   padding-top: 24px;
-  border-top: 1px dashed rgba(0,0,0,0.06);
+  border-top: 1rpx solid var(--border);
 }
 
 .total-label {
@@ -222,7 +222,7 @@
 .total-price {
   font-size: 36px;
   font-weight: 800;
-  color: var(--accent-pink);
+  color: var(--accent-primary);
 }
 
 .modal-actions {
@@ -230,8 +230,8 @@
   gap: 20px;
 }
 
-.modal-actions .btn-outline,
-.modal-actions .btn-gradient {
+.modal-actions .btn-secondary,
+.modal-actions .btn-primary {
   flex: 1;
   padding: 20px 0;
 }
diff --git a/src/pages/product/index.tsx b/src/pages/product/index.tsx
index 777e3e8..352de34 100644
--- a/src/pages/product/index.tsx
+++ b/src/pages/product/index.tsx
@@ -10,7 +10,7 @@ import { useStatusBar } from '../../hooks/useStatusBar'
 import ThemedPageMeta from '../../components/ThemedPageMeta'
 import { getProductIconImg } from '../../utils/productConfig'
 
-const HERO_COLORS = ['#FFE4EC', '#FFF0F5', '#FCE4EC']
+const HERO_COLORS = ['var(--accent-primary-soft)', 'var(--bg-muted)', 'var(--accent-secondary-soft)']
 
 export default function ProductPage() {
   const { theme, resolvedTheme } = useThemeContext()
@@ -19,8 +19,9 @@ export default function ProductPage() {
   const [showModal, setShowModal] = useState(false)
   const [quantity, setQuantity] = useState(1)
 
-  const params = Taro.getCurrentInstance().router?.params
-  const productId = params?.id || ''
+  const router = Taro.getCurrentInstance().router
+  const params = router ? router.params : undefined
+  const productId = params ? params.id : ''
   const product = getProductById(productId)
 
   if (!product) {
@@ -28,7 +29,7 @@ export default function ProductPage() {
       <View className={`theme-${resolvedTheme}`}>
         <ThemedPageMeta />
         <View className='product-page'>
-          <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
+          <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
             <Text className='page-title'>商品未找到</Text>
           </View>
         </View>
@@ -63,8 +64,7 @@ export default function ProductPage() {
       <ThemedPageMeta />
       <View className='product-page'>
 
-        <View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
-          <View className='star-badge' />
+        <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
           <View className='flex-between'>
             <Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
             <Text className='page-title'>商品详情</Text>
@@ -81,14 +81,13 @@ export default function ProductPage() {
             interval={3000}
             duration={500}
             indicatorDots
-            indicatorColor='rgba(0,0,0,0.2)'
-            indicatorActiveColor='#ff9a9e'
+            indicatorColor='#e0d5c8'
+            indicatorActiveColor='#d96c6a'
           >
             {product.images && product.images.length > 0 ? (
               product.images.map((img, idx) => (
                 <SwiperItem key={idx}>
-                  <View className='hero-card dashed-card'>
-                    <View className='star-badge' />
+                  <View className='hero-card surface-card'>
                     <Image className='hero-image' src={img} mode='aspectFit' />
                   </View>
                 </SwiperItem>
@@ -96,8 +95,7 @@ export default function ProductPage() {
             ) : (
               HERO_COLORS.map((color, idx) => (
                 <SwiperItem key={idx}>
-                  <View className='hero-card dashed-card' style={{ background: color }}>
-                    <View className='star-badge' />
+                  <View className='hero-card surface-card' style={{ background: color }}>
                     <Image className='hero-icon-img' src={getProductIconImg(product)} mode='aspectFit' />
                     <Text className='hero-name'>{product.name}</Text>
                   </View>
@@ -108,8 +106,7 @@ export default function ProductPage() {
         </View>
 
         {/* 基本信息 */}
-        <View className='info-section dashed-card mt-20'>
-          <View className='star-badge' />
+        <View className='info-section surface-card mt-20'>
           <View className='info-row'>
             <Text className='info-label'>单价</Text>
             <Text className='info-price'>¥{product.price}</Text>
@@ -125,8 +122,7 @@ export default function ProductPage() {
         </View>
 
         {/* 详细介绍 */}
-        <View className='detail-section dashed-card mt-20'>
-          <View className='star-badge' />
+        <View className='detail-section surface-card mt-20'>
           <Text className='section-title'>商品介绍</Text>
           <Text className='detail-text'>{product.description}</Text>
         </View>
@@ -137,10 +133,10 @@ export default function ProductPage() {
             <Text className='summary-label'>起价</Text>
             <Text className='summary-price'>¥{product.price}</Text>
           </View>
-          <View className='btn-outline' onTap={handleAddToList}>
+          <View className='btn-secondary' onTap={handleAddToList}>
             <Text>加入设计清单</Text>
           </View>
-          <View className='btn-gradient' onTap={goToDIY}>
+          <View className='btn-primary' onTap={goToDIY}>
             <Text>立即下单</Text>
           </View>
         </View>
@@ -151,8 +147,7 @@ export default function ProductPage() {
         {/* 数量选择弹窗 */}
         {showModal && (
           <View className='modal-overlay'>
-            <View className='modal-card dashed-card'>
-              <View className='star-badge' />
+            <View className='modal-card surface-card'>
               <Text className='modal-title'>加入设计清单</Text>
               <View className='modal-product'>
                 <Image className='modal-icon-img' src={getProductIconImg(product)} mode='aspectFit' />
@@ -171,10 +166,10 @@ export default function ProductPage() {
                 <Text className='total-price'>¥{(product.price * quantity).toFixed(2)}</Text>
               </View>
               <View className='modal-actions'>
-                <View className='btn-outline' onTap={() => setShowModal(false)}>
+                <View className='btn-secondary' onTap={() => setShowModal(false)}>
                   <Text>取消</Text>
                 </View>
-                <View className='btn-gradient' onTap={confirmAdd}>
+                <View className='btn-primary' onTap={confirmAdd}>
                   <Text>确定</Text>
                 </View>
               </View>
diff --git a/src/pages/shop/detail/index.scss b/src/pages/shop/detail/index.scss
index 2d78820..701d0c4 100644
--- a/src/pages/shop/detail/index.scss
+++ b/src/pages/shop/detail/index.scss
@@ -87,7 +87,7 @@
 .shop-hero-price {
   font-size: 44rpx;
   font-weight: 700;
-  color: #ff9a9e;
+  color: var(--accent-primary);
 }
 
 .shop-hero-original {
@@ -146,7 +146,7 @@
 .shop-band-price {
   font-size: 48rpx;
   font-weight: 700;
-  color: #ff9a9e;
+  color: var(--accent-primary);
 }
 
 .shop-band-original {
@@ -183,7 +183,7 @@
   bottom: 6rpx;
   width: 6rpx;
   border-radius: 4rpx;
-  background: linear-gradient(180deg, #ff9a9e, #fecfef);
+  background: linear-gradient(180deg, var(--accent-primary), var(--accent-primary-soft));
 }
 
 .shop-section-text {
@@ -212,15 +212,15 @@
   border-radius: 40rpx;
   font-size: 22rpx;
   font-weight: 500;
-  background: rgba(255, 154, 158, 0.12);
-  border: 1rpx solid rgba(255, 154, 158, 0.2);
+  background: var(--accent-primary-soft);
+  border: 1rpx solid var(--accent-primary);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
 .shop-tag-text {
-  color: #ff9a9e;
+  color: var(--accent-primary);
 }
 
 /* --- Spec Table --- */
@@ -272,7 +272,7 @@
   backdrop-filter: blur(16rpx) saturate(1.4);
   -webkit-backdrop-filter: blur(16rpx) saturate(1.4);
   border: 1rpx solid rgba(255,255,255,0.12);
-  box-shadow: 0 2rpx 16rpx rgba(0,0,0,0.25);
+  box-shadow: var(--shadow-card);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -303,6 +303,7 @@
   gap: 24rpx;
   backdrop-filter: blur(16rpx) saturate(1.2);
   -webkit-backdrop-filter: blur(16rpx) saturate(1.2);
+  box-shadow: var(--shadow-card);
   transition: background-color 0.4s ease;
 }
 
@@ -315,7 +316,7 @@
 .shop-cta-price {
   font-size: 40rpx;
   font-weight: 700;
-  color: #ff9a9e;
+  color: var(--accent-primary);
 }
 
 .shop-cta-original {
@@ -327,8 +328,8 @@
 .shop-cta-btn {
   flex: 1;
   max-width: 260rpx;
-  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%);
-  color: #5c3a3a;
+  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-strong) 99%);
+  color: #fff;
   border-radius: 50rpx;
   padding: 24rpx 48rpx;
   font-size: 30rpx;
@@ -337,6 +338,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: var(--shadow-card);
 }
 
 .shop-cta-btn-text {
diff --git a/src/pages/shop/detail/index.tsx b/src/pages/shop/detail/index.tsx
index f2f7dc7..defefde 100644
--- a/src/pages/shop/detail/index.tsx
+++ b/src/pages/shop/detail/index.tsx
@@ -21,8 +21,9 @@ export default function ShopDetailPage() {
   // 顶部为沉浸式商品图，状态栏始终使用白字。
   useStatusBar(resolvedTheme, { mode: 'light' })
 
-  const routerParams = Taro.getCurrentInstance().router?.params
-  const productId = routerParams?.id || ''
+  const routerParams = Taro.getCurrentInstance().router
+  const routerParamsValues = routerParams ? routerParams.params : undefined
+  const productId = routerParamsValues ? routerParamsValues.id : ''
   const product: ProductCategory | undefined = PRODUCTS.find(p => p.id === productId)
 
   useEffect(() => {
@@ -35,7 +36,7 @@ export default function ShopDetailPage() {
   }, [])
 
   const handleScroll = useCallback((e: any) => {
-    const st = e.detail?.scrollTop ?? 0
+    const st = (e.detail && e.detail.scrollTop) || 0
     const total = winHeight * 1.2
     const p = clamp(st / total, 0, 1)
     setProgress(p)
@@ -103,7 +104,7 @@ export default function ShopDetailPage() {
     }
   }, [progress])
 
-  const tone = useMemo(() => product?.tone || [28, 22, 18], [product])
+  const tone = useMemo(() => (product ? product.tone : [28, 22, 18]), [product])
 
   if (!product) {
     return (
@@ -129,7 +130,7 @@ export default function ShopDetailPage() {
         >
           <Image
             className="shop-hero-img"
-            src={product.images?.[0] || product.iconImg || ''}
+            src={(product.images && product.images[0]) || product.iconImg || ''}
             mode="aspectFill"
             style={{
               width: '100%',