feat: css抽离

src/components/NewUserGuide/steps/ActivityGuide.vue

@@ -65,63 +65,18 @@ export default {
 </script>
 
 <style scoped>
-.guide-card {
-  width: 440px;
-  max-width: 90vw;
-  background: #fff;
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
-  animation: cardFloat 0.5s ease-out;
-}
-@keyframes cardFloat {
-  from { opacity: 0; transform: translateY(30px) scale(0.95); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-.guide-illustration {
-  position: relative;
-  height: 140px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-.illus-center { font-size: 56px; z-index: 2; }
-.illus-bubble {
-  position: absolute;
-  font-size: 22px;
-  animation: bubbleFloat 4s ease-in-out infinite;
-}
-.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
-.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
-@keyframes bubbleFloat {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
-}
-.guide-body { padding: 24px 28px 16px; }
-.guide-badge {
-  display: inline-block;
-  padding: 3px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #6a11cb;
-  background: #f3eeff;
-  border-radius: 12px;
-  margin-bottom: 12px;
-}
-.guide-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: #1d2129;
-  margin: 0 0 8px;
-}
-.guide-desc {
-  font-size: 13px;
-  line-height: 1.7;
-  color: #86909c;
-  margin: 0 0 16px;
-}
+@import './guide-common.css';
+
+/* Step 4 专属样式 */
+.guide-badge { color: #6a11cb; background: #f3eeff; }
 .guide-desc strong { color: #6a11cb; }
+.btn-primary {
+  background: linear-gradient(135deg, #6a11cb, #2575fc);
+  box-shadow: 0 4px 14px rgba(106,17,203,0.3);
+}
+.btn-primary:hover { box-shadow: 0 6px 18px rgba(106,17,203,0.45); }
+
+/* 活动列表 */
 .activity-list { display: flex; flex-direction: column; gap: 8px; }
 .activity-item {
   display: flex;
@@ -144,51 +99,4 @@ export default {
   background: linear-gradient(135deg, #6a11cb, #2575fc);
   border-radius: 10px;
 }
-.guide-footer {
-  padding: 16px 28px 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.btn-primary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: 44px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #fff;
-  background: linear-gradient(135deg, #6a11cb, #2575fc);
-  border: none;
-  border-radius: 22px;
-  cursor: pointer;
-  transition: all 0.3s;
-  box-shadow: 0 4px 14px rgba(106,17,203,0.3);
-}
-.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(106,17,203,0.45); }
-.btn-secondary {
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #2C6FBF;
-  background: #fff;
-  border: 1.5px solid #2C6FBF;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.btn-secondary:hover { background: #eaf2ff; }
-.btn-prev {
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #86909c;
-  background: #f7f9fc;
-  border: none;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.btn-prev:hover { color: #4e5969; background: #eef1f6; }
 </style>

src/components/NewUserGuide/steps/EarnPointsGuide.vue

@@ -65,62 +65,17 @@ export default {
 </script>
 
 <style scoped>
-.guide-card {
-  width: 440px;
-  max-width: 90vw;
-  background: #fff;
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
-  animation: cardFloat 0.5s ease-out;
-}
-@keyframes cardFloat {
-  from { opacity: 0; transform: translateY(30px) scale(0.95); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-.guide-illustration {
-  position: relative;
-  height: 140px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-.illus-center { font-size: 56px; z-index: 2; }
-.illus-bubble {
-  position: absolute;
-  font-size: 22px;
-  animation: bubbleFloat 4s ease-in-out infinite;
-}
-.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
-.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
-@keyframes bubbleFloat {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
-}
-.guide-body { padding: 24px 28px 16px; }
-.guide-badge {
-  display: inline-block;
-  padding: 3px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #11998e;
-  background: #e8fdf5;
-  border-radius: 12px;
-  margin-bottom: 12px;
-}
-.guide-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: #1d2129;
-  margin: 0 0 8px;
-}
-.guide-desc {
-  font-size: 13px;
-  line-height: 1.7;
-  color: #86909c;
-  margin: 0 0 16px;
+@import './guide-common.css';
+
+/* Step 5 专属样式 */
+.guide-badge { color: #11998e; background: #e8fdf5; }
+.btn-primary {
+  background: linear-gradient(135deg, #11998e, #38ef7d);
+  box-shadow: 0 4px 14px rgba(17,153,142,0.3);
 }
+.btn-primary:hover { box-shadow: 0 6px 18px rgba(17,153,142,0.45); }
+
+/* 积分渠道 */
 .channel-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -140,51 +95,4 @@ export default {
 .channel-icon { font-size: 20px; }
 .channel-name { font-size: 11px; color: #4e5969; font-weight: 500; }
 .channel-points { font-size: 12px; color: #11998e; font-weight: 700; }
-.guide-footer {
-  padding: 16px 28px 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.btn-primary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: 44px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #fff;
-  background: linear-gradient(135deg, #11998e, #38ef7d);
-  border: none;
-  border-radius: 22px;
-  cursor: pointer;
-  transition: all 0.3s;
-  box-shadow: 0 4px 14px rgba(17,153,142,0.3);
-}
-.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(17,153,142,0.45); }
-.btn-secondary {
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #2C6FBF;
-  background: #fff;
-  border: 1.5px solid #2C6FBF;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.btn-secondary:hover { background: #eaf2ff; }
-.btn-prev {
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #86909c;
-  background: #f7f9fc;
-  border: none;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.btn-prev:hover { color: #4e5969; background: #eef1f6; }
 </style>

src/components/NewUserGuide/steps/ExchangeGuide.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="guide-card wide">
-    <div class="guide-illustration" style="background: linear-gradient(135deg, #e87722 0%, #f9ca24 100%);">
+    <div class="guide-illustration short" style="background: linear-gradient(135deg, #e87722 0%, #f9ca24 100%);">
       <div class="illus-bubble bubble-1">📦</div>
       <div class="illus-bubble bubble-2">🚚</div>
       <div class="illus-center">📋</div>
     </div>
 
-    <div class="guide-body">
-      <div class="guide-badge">Step 7</div>
-      <h2 class="guide-title">个人中心 — 我的兑换</h2>
-      <p class="guide-desc">在「我的兑换」Tab 查看所有兑换订单状态：</p>
+    <div class="guide-body compact">
+      <div class="guide-badge compact">Step 7</div>
+      <h2 class="guide-title small">个人中心 — 我的兑换</h2>
+      <p class="guide-desc compact">在「我的兑换」Tab 查看所有兑换订单状态：</p>
 
       <!-- 订单状态说明 -->
       <div class="tab-list">
@@ -27,7 +27,7 @@
       </div>
     </div>
 
-    <div class="guide-footer">
+    <div class="guide-footer compact">
       <button class="btn-primary" @click="handleGoExchange">
         <span>📦</span> 查看兑换记录
       </button>
@@ -73,63 +73,17 @@ export default {
 </script>
 
 <style scoped>
-.guide-card {
-  width: 440px;
-  max-width: 90vw;
-  background: #fff;
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
-  animation: cardFloat 0.5s ease-out;
-}
-.guide-card.wide { width: 500px; }
-@keyframes cardFloat {
-  from { opacity: 0; transform: translateY(30px) scale(0.95); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-.guide-illustration {
-  position: relative;
-  height: 130px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-.illus-center { font-size: 52px; z-index: 2; }
-.illus-bubble {
-  position: absolute;
-  font-size: 22px;
-  animation: bubbleFloat 4s ease-in-out infinite;
-}
-.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
-.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
-@keyframes bubbleFloat {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
-}
-.guide-body { padding: 20px 28px 14px; }
-.guide-badge {
-  display: inline-block;
-  padding: 3px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #e87722;
-  background: #fff4e8;
-  border-radius: 12px;
-  margin-bottom: 10px;
-}
-.guide-title {
-  font-size: 18px;
-  font-weight: 700;
-  color: #1d2129;
-  margin: 0 0 6px;
-}
-.guide-desc {
-  font-size: 13px;
-  line-height: 1.6;
-  color: #86909c;
-  margin: 0 0 14px;
+@import './guide-common.css';
+
+/* Step 7 专属样式 */
+.guide-badge { color: #e87722; background: #fff4e8; }
+.btn-primary {
+  background: linear-gradient(135deg, #e87722, #f9ca24);
+  box-shadow: 0 4px 14px rgba(232,119,34,0.3);
 }
+.btn-primary:hover { box-shadow: 0 6px 18px rgba(232,119,34,0.45); }
+
+/* Tab 列表 */
 .tab-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
 .tab-item {
   display: flex;
@@ -163,39 +117,4 @@ export default {
   color: #e87722;
   font-weight: 500;
 }
-.guide-footer {
-  padding: 14px 28px 22px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.btn-primary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: 44px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #fff;
-  background: linear-gradient(135deg, #e87722, #f9ca24);
-  border: none;
-  border-radius: 22px;
-  cursor: pointer;
-  transition: all 0.3s;
-  box-shadow: 0 4px 14px rgba(232,119,34,0.3);
-}
-.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,119,34,0.45); }
-.btn-prev {
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #86909c;
-  background: #f7f9fc;
-  border: none;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.btn-prev:hover { color: #4e5969; background: #eef1f6; }
 </style>

src/components/NewUserGuide/steps/PointsMallGuide.vue

@@ -62,70 +62,19 @@ export default {
 </script>
 
 <style scoped>
-.guide-card {
-  width: 440px;
-  max-width: 90vw;
-  background: #fff;
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
-  animation: cardFloat 0.5s ease-out;
-}
-@keyframes cardFloat {
-  from { opacity: 0; transform: translateY(30px) scale(0.95); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-.guide-illustration {
-  position: relative;
-  height: 140px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-.illus-center {
-  font-size: 56px;
-  z-index: 2;
-  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
-}
-.illus-bubble {
-  position: absolute;
-  font-size: 22px;
-  animation: bubbleFloat 4s ease-in-out infinite;
-}
-.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
-.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
-@keyframes bubbleFloat {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
-}
-.guide-body { padding: 24px 28px 16px; }
-.guide-badge {
-  display: inline-block;
-  padding: 3px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #f76b1c;
-  background: #fff4ec;
-  border-radius: 12px;
-  margin-bottom: 12px;
-}
-.guide-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: #1d2129;
-  margin: 0 0 8px;
-}
-.guide-desc {
-  font-size: 13px;
-  line-height: 1.7;
-  color: #86909c;
-  margin: 0 0 16px;
-}
-.goods-preview {
-  display: flex;
-  gap: 10px;
+@import './guide-common.css';
+
+/* Step 3 专属样式 */
+.illus-center { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }
+.guide-badge { color: #f76b1c; background: #fff4ec; }
+.btn-primary {
+  background: linear-gradient(135deg, #f76b1c, #fad961);
+  box-shadow: 0 4px 14px rgba(247,107,28,0.3);
 }
+.btn-primary:hover { box-shadow: 0 6px 18px rgba(247,107,28,0.45); }
+
+/* 商品预览 */
+.goods-preview { display: flex; gap: 10px; }
 .goods-item {
   flex: 1;
   display: flex;
@@ -140,51 +89,4 @@ export default {
 .goods-emoji { font-size: 26px; margin-bottom: 6px; }
 .goods-name { font-size: 12px; color: #4e5969; font-weight: 500; margin-bottom: 4px; }
 .goods-points { font-size: 12px; color: #f76b1c; font-weight: 700; }
-.guide-footer {
-  padding: 16px 28px 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.btn-primary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: 44px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #fff;
-  background: linear-gradient(135deg, #f76b1c, #fad961);
-  border: none;
-  border-radius: 22px;
-  cursor: pointer;
-  transition: all 0.3s;
-  box-shadow: 0 4px 14px rgba(247,107,28,0.3);
-}
-.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(247,107,28,0.45); }
-.btn-secondary {
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #2C6FBF;
-  background: #fff;
-  border: 1.5px solid #2C6FBF;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.btn-secondary:hover { background: #eaf2ff; }
-.btn-prev {
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #86909c;
-  background: #f7f9fc;
-  border: none;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.btn-prev:hover { color: #4e5969; background: #eef1f6; }
 </style>

src/components/NewUserGuide/steps/ProfileGuide.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="guide-card wide">
-    <div class="guide-illustration" style="background: linear-gradient(135deg, #e87722 0%, #f9ca24 100%);">
+    <div class="guide-illustration short" style="background: linear-gradient(135deg, #e87722 0%, #f9ca24 100%);">
       <div class="illus-bubble bubble-1">💰</div>
       <div class="illus-bubble bubble-2">📊</div>
       <div class="illus-center">👤</div>
     </div>
 
-    <div class="guide-body">
-      <div class="guide-badge">Step 6</div>
-      <h2 class="guide-title">个人中心 — 我的积分</h2>
-      <p class="guide-desc">点击顶部头像进入个人中心，查看积分明细：</p>
+    <div class="guide-body compact">
+      <div class="guide-badge compact">Step 6</div>
+      <h2 class="guide-title small">个人中心 — 我的积分</h2>
+      <p class="guide-desc compact">点击顶部头像进入个人中心，查看积分明细：</p>
 
       <!-- 子功能说明 -->
       <div class="tab-list">
@@ -24,7 +24,7 @@
       </div>
     </div>
 
-    <div class="guide-footer">
+    <div class="guide-footer compact">
       <button class="btn-primary" @click="handleGoProfile">
         <span>👤</span> 进入个人中心
       </button>
@@ -68,63 +68,17 @@ export default {
 </script>
 
 <style scoped>
-.guide-card {
-  width: 440px;
-  max-width: 90vw;
-  background: #fff;
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
-  animation: cardFloat 0.5s ease-out;
-}
-.guide-card.wide { width: 500px; }
-@keyframes cardFloat {
-  from { opacity: 0; transform: translateY(30px) scale(0.95); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-.guide-illustration {
-  position: relative;
-  height: 130px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-.illus-center { font-size: 52px; z-index: 2; }
-.illus-bubble {
-  position: absolute;
-  font-size: 22px;
-  animation: bubbleFloat 4s ease-in-out infinite;
-}
-.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
-.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
-@keyframes bubbleFloat {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
-}
-.guide-body { padding: 20px 28px 14px; }
-.guide-badge {
-  display: inline-block;
-  padding: 3px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #e87722;
-  background: #fff4e8;
-  border-radius: 12px;
-  margin-bottom: 10px;
-}
-.guide-title {
-  font-size: 18px;
-  font-weight: 700;
-  color: #1d2129;
-  margin: 0 0 6px;
-}
-.guide-desc {
-  font-size: 13px;
-  line-height: 1.6;
-  color: #86909c;
-  margin: 0 0 14px;
+@import './guide-common.css';
+
+/* Step 6 专属样式 */
+.guide-badge { color: #e87722; background: #fff4e8; }
+.btn-primary {
+  background: linear-gradient(135deg, #e87722, #f9ca24);
+  box-shadow: 0 4px 14px rgba(232,119,34,0.3);
 }
+.btn-primary:hover { box-shadow: 0 6px 18px rgba(232,119,34,0.45); }
+
+/* Tab 列表 */
 .tab-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
 .tab-item {
   display: flex;
@@ -152,51 +106,4 @@ export default {
 .tab-title { font-size: 13px; font-weight: 600; color: #1d2129; }
 .tab-desc { font-size: 12px; color: #86909c; margin-top: 2px; }
 .tab-icon { font-size: 20px; }
-.guide-footer {
-  padding: 14px 28px 22px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.btn-primary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: 44px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #fff;
-  background: linear-gradient(135deg, #e87722, #f9ca24);
-  border: none;
-  border-radius: 22px;
-  cursor: pointer;
-  transition: all 0.3s;
-  box-shadow: 0 4px 14px rgba(232,119,34,0.3);
-}
-.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,119,34,0.45); }
-.btn-secondary {
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #2C6FBF;
-  background: #fff;
-  border: 1.5px solid #2C6FBF;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.btn-secondary:hover { background: #eaf2ff; }
-.btn-prev {
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #86909c;
-  background: #f7f9fc;
-  border: none;
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.btn-prev:hover { color: #4e5969; background: #eef1f6; }
 </style>

src/components/NewUserGuide/steps/guide-common.css

@@ -0,0 +1,167 @@
+/* ============================================
+ * guide-common.css — 新手指引步骤公共样式
+ * Step 3 ~ Step 9 共用，WelcomeGuide / SignInGuide 不适用
+ * ============================================ */
+
+/* ---- 卡片基础 ---- */
+.guide-card {
+  width: 440px;
+  max-width: 90vw;
+  background: #fff;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
+  animation: cardFloat 0.5s ease-out;
+}
+.guide-card.wide {
+  width: 500px;
+}
+
+@keyframes cardFloat {
+  from {
+    opacity: 0;
+    transform: translateY(30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* ---- 顶部插画区域 ---- */
+.guide-illustration {
+  position: relative;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.guide-illustration.short {
+  height: 130px;
+}
+
+.illus-center {
+  font-size: 56px;
+  z-index: 2;
+}
+.guide-illustration.short .illus-center {
+  font-size: 52px;
+}
+
+.illus-bubble {
+  position: absolute;
+  font-size: 22px;
+  animation: bubbleFloat 4s ease-in-out infinite;
+}
+.bubble-1 {
+  top: 18px;
+  left: 28px;
+  animation-delay: 0s;
+}
+.bubble-2 {
+  bottom: 18px;
+  right: 28px;
+  animation-delay: 2s;
+}
+
+@keyframes bubbleFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
+/* ---- 内容区域 ---- */
+.guide-body {
+  padding: 24px 28px 16px;
+}
+.guide-body.compact {
+  padding: 20px 28px 14px;
+}
+
+.guide-badge {
+  display: inline-block;
+  padding: 3px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 12px;
+  margin-bottom: 12px;
+}
+.guide-badge.compact {
+  margin-bottom: 10px;
+}
+
+.guide-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1d2129;
+  margin: 0 0 8px;
+}
+.guide-title.small {
+  font-size: 18px;
+  margin: 0 0 6px;
+}
+
+.guide-desc {
+  font-size: 13px;
+  line-height: 1.7;
+  color: #86909c;
+  margin: 0 0 16px;
+}
+.guide-desc.compact {
+  line-height: 1.6;
+  margin: 0 0 14px;
+}
+
+/* ---- 底部区域 ---- */
+.guide-footer {
+  padding: 16px 28px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.guide-footer.compact {
+  padding: 14px 28px 22px;
+}
+.guide-footer.spacious {
+  padding: 16px 28px 28px;
+}
+
+/* ---- 主操作按钮 ---- */
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  border: none;
+  border-radius: 22px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.btn-primary:hover {
+  transform: translateY(-1px);
+}
+
+/* ---- 上一步按钮 ---- */
+.btn-prev {
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #86909c;
+  background: #f7f9fc;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.25s;
+}
+.btn-prev:hover {
+  color: #4e5969;
+  background: #eef1f6;
+}
+.btn-prev.full-width {
+  width: 100%;
+  margin-top: 10px;
+}