feat(组件和页面): 重构课程卡片、工作流详情和搜索平台页面样式

重构课程卡片组件，添加悬停效果和现代UI设计
全面重写工作流详情页面样式，采用玻璃态设计
优化搜索平台页面布局和交互，增加动画效果

src/components/course-card.vue

@@ -1,84 +1,53 @@
 <template>
-  <div class="course-card list_item_animation box_shadow_card" >
-    <div class="bg_color_f5 coverImg" @click.stop.prevent="goWorkflowDetail">
-      <img :src="info.coverImage" alt="" class="coverImg" />
+  <div
+    class="market-card"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <!-- 封面图 -->
+    <div class="market-card-cover" @click.stop.prevent="goWorkflowDetail">
+      <img :src="info.coverImage" :alt="info.workflowTitle" class="market-cover-img" />
+      <div class="market-cover-overlay"></div>
+      <div class="market-platform-chip">{{ info.categoryName1 }}</div>
+      <!-- <div class="market-views">▶ {{ info.downCount || 0 }}</div> -->
     </div>
-    <div class="course-card-bottom-height"></div>
-    <div class="padding16 course-card-bottom">
-      <div class="gap10">
-        <img :src="riliIcon" alt="" style="width: 16px; height: 16px;">
-        <div class="font_size13">{{info.createTime || ''}}</div>
-      </div>
-      <div style="min-height: 82px;" @click.stop.prevent="goWorkflowDetail">
-        <div class="line2 font_size18 line_height26 bold mt10">
-          {{info.workflowTitle || ''}}
-        </div>
-        <div class="mt10 line1 gray font_size13">
-          {{info.description || ''}}
-        </div>
+
+    <!-- 卡片内容 -->
+    <div class="market-card-body">
+      <div class="market-card-top">
+        <h4 class="market-title" @click.stop.prevent="goWorkflowDetail">{{ info.workflowTitle }}</h4>
       </div>
-      <div class="mt10 flex-center-between">
-        <div class="gap10">
-          <el-avatar :size="24" :src="info.userAvatar || appStore.avatarDefault" />
-          <div class="font_size14">{{info.nickName || ''}}</div>
-        </div>
-        <div class="gap10 contactInfo_bg border_radius_4">
-          <img :src="yunIcon" alt="" style="width: 16px; height: 16px;" />
-          <div class="font_size13">{{info.categoryName1}} {{$t('common.platform')}}</div>
+      <p class="market-desc">{{ info.description }}</p>
+
+      <div class="market-footer">
+        <div class="market-author">
+          <el-avatar :size="22" :src="info.userAvatar || appStore.avatarDefault" />
+          <span>{{ info.nickName }}</span>
         </div>
-      </div>
-      <div class="gap10 mt16 button-container">
-        <el-button type="primary" class="flex_1" size="large" style="background: #EAF1FF;border-color: #EAF1FF;color: #2D71FF;" @click.stop.prevent="goWorkflowDetail">
-          <el-icon class="mr10"><Document /></el-icon>
-          {{$t('common.viewDetails')}}
-        </el-button>
-        <el-button type="primary" class="flex_1 gradient" size="large" @click.stop.prevent="startUsing">
-          <el-icon class="mr10"><VideoPlay /></el-icon>
-          {{$t('common.startUsing')}}
-        </el-button>
-      </div>
-    </div>
-    <!-- <div class="flex-center-between">
-      <img :src="n8Icon" alt="" style="width: 50px; height: 50px;" class="mr10">
-      <div class="line2 font_size18 line_height22 font_weight400">
-        【Linux】【操作】Linux操作集锦系列之十五——如何破解pdf如何破解pdf如何破解pdf如何破解pdf如何破解pdf
+        <button class="market-use-btn" @click.stop.prevent="startUsing">{{ $t('marketplace.cta.use') }} →</button>
       </div>
     </div>
-    <div class="mt16 gap10">
-      <img :src="yunIcon" alt="" style="width: 16px; height: 16px;">
-      <div class="font_size13">n8n平台</div>
-      <img :src="riliIcon" alt="" style="width: 16px; height: 16px;">
-      <div class="font_size13">2023-10-15</div>
-    </div>
-    <div class="mt16 line3 gray font_size13">
-      - 本文介绍两款开源的密码破解工具John the Ripper和PDFCrack，用于破解PDF、Word、Excel、ZIP、RAR等文件的密码。John the Ripper支持字典和暴力破解两种模
+
+    <!-- 悬停遮罩 -->
+    <div class="market-hover-overlay" :class="{ visible: isHovered }">
+      <button class="overlay-btn primary" @click.stop.prevent="startUsing">{{ $t('marketplace.cta.use2') }}</button>
+      <button class="overlay-btn secondary" @click.stop.prevent="goWorkflowDetail">{{ $t('marketplace.cta.details') }}</button>
     </div>
-    <div class="gap10 mt16">
-      <el-button type="primary" class="flex_1" size="large" plain>
-        <el-icon class="mr10"><Document /></el-icon>
-        查看详情
-      </el-button>
-      <el-button type="primary" class="flex_1 gradient" size="large">
-        <el-icon class="mr10"><VideoPlay /></el-icon>
-        开始使用
-      </el-button>
-    </div> -->
   </div>
 </template>
+
 <script setup>
-import n8Icon from '@/assets/imgs/8n8.png'
-import yunIcon from '@/assets/imgs/yun.png'
-import riliIcon from '@/assets/imgs/rili.png'
+import { ref } from 'vue'
 import { useAppStore } from '@/pinia/appStore'
 import { inject } from 'vue'
 import { isLogin, openNewTab } from '@/utils/util.js'
-import { useI18n } from 'vue-i18n' 
-const { t } = useI18n()
-
-const appStore = useAppStore();
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-const router = useRouter()
 
+const { t } = useI18n()
+const appStore = useAppStore()
+const router = useRouter()
+const openLoginDialog = inject('openLoginDialog')
 
 const props = defineProps({
   info: {
@@ -89,83 +58,263 @@ const props = defineProps({
     type: String,
     default: () => ''
   }
-});
+})
+
+const isHovered = ref(false)
+
 const goWorkflowDetail = () => {
-  //判断是否登录
-  if(!isLogin({callback: openLoginDialog,t})){
-    return;
+  if (!isLogin({ callback: openLoginDialog, t })) {
+    return
   }
+
   let path = `/search-platform/workflow-detail`
-  if(props.fromPage === 'home'){
+  if (props.fromPage === 'home') {
     path = `/workflow-detail`
   }
-  //增加参数名称
+
   router.push({
     path: path,
     query: {
-      publishId:props.info.publishId,
+      publishId: props.info.publishId,
       metaTitle: 'route.WorkflowDetail'
     }
   })
-};
-const openLoginDialog = inject('openLoginDialog')
+}
+
 const startUsing = () => {
-  //判断是否登录
-  if(!isLogin({callback: openLoginDialog,t})){
-    return;
+  if (!isLogin({ callback: openLoginDialog, t })) {
+    return
   }
-  openNewTab(props.info.categoryUrl);
-};
+
+  openNewTab(props.info.categoryUrl)
+}
 </script>
 
 <style scoped lang="scss">
-.course-card {
-  width: 345px;
-  border: 1px solid #ffffff;
-  // background-color: rgba(255, 255, 255, 0.5);
-  background-color: #ffffff;
-  border-radius: 8px;
+.market-card {
+  background: white;
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
   overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+  position: relative;
   cursor: pointer;
-  position: relative; // 添加相对定位
-  // transition: transform 0.3s;
-  
-  // &:hover {
-    // transform: translateY(-5px);
-    // box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-  // }
-  .line2{
-    //hover 显示下划线
-    text-decoration: none;
-    &:hover{
-      text-decoration: underline;
-    }
+
+  &:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
   }
-  .coverImg{
-    width: 100%;
-    height: 204px;
+
+  &.hidden {
+    opacity: 0.3;
+    transform: scale(0.95);
   }
-  .course-card-bottom {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 16px;
-    background: rgba(255, 255, 255, 0.9); // 确保背景色
-    transform: translateY(60px); // 初始完全在下方隐藏
-    transition: transform 0.3s ease;
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
-    //高斯模糊
-    // filter: blur(0px);
+}
+
+/* 封面图 */
+.market-card-cover {
+  position: relative;
+  height: 160px;
+  overflow: hidden;
+}
+
+.market-cover-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.4s;
+}
+
+.market-card:hover .market-cover-img {
+  transform: scale(1.05);
+}
+
+.market-cover-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.4));
+}
+
+.market-platform-chip {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 3px 10px;
+  border-radius: 100px;
+  font-size: 11px;
+  font-weight: 700;
+  color: white;
+  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+}
+
+.market-views {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* 卡片内容 */
+.market-card-body {
+  padding: 16px;
+}
+
+.market-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+
+.market-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #111827;
+  flex: 1;
+  margin: 0;
+  line-height: 1.3;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.market-rating {
+  font-size: 12px;
+  color: #F59E0B;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.market-desc {
+  font-size: 12px;
+  color: #6B7280;
+  line-height: 1.5;
+  margin: 0 0 10px 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 36px;
+}
+
+.market-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.market-tag {
+  padding: 2px 8px;
+  background: #F3F4F6;
+  border-radius: 100px;
+  font-size: 10px;
+  color: #6B7280;
+}
+
+.market-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.market-author {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #6B7280;
+  overflow: hidden;
+  flex-shrink: 0;
+  max-width: 50%;
+
+  span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
-  
+}
+
+.market-avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.market-use-btn {
+  padding: 5px 12px;
+  background: #F5F3FF;
+  color: #6366F1;
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+
   &:hover {
-    .course-card-bottom {
-      transform: translateY(0); // 悬浮时上移显示
+    background: #6366F1;
+    color: white;
+  }
+}
+
+/* 悬停遮罩 */
+.market-hover-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(99, 102, 241, 0.92);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  opacity: 0;
+  transition: opacity 0.3s;
+  z-index: 10;
+
+  &.visible {
+    opacity: 1;
+  }
+}
+
+.overlay-btn {
+  width: 160px;
+  padding: 10px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+
+  &.primary {
+    background: white;
+    color: #6366F1;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
     }
   }
-  .course-card-bottom-height{
-    height: 175.6px;
+
+  &.secondary {
+    background: rgba(255, 255, 255, 0.15);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.25);
+      transform: translateY(-2px);
+    }
   }
 }
 </style>

src/pages/WorkflowDetail.vue

@@ -246,21 +246,518 @@ const startUsing = () => {
 </script>
 
 <style scoped lang="scss">
+/* ===============================
+   WORKFLOW DETAIL - MODERN UI REFACTORING
+   Based on ui_refactoring_plan.md specifications
+   =============================== */
+
 .workflow-detail {
-  .weiguanzhu{
-    padding: 8px 12px;
-    background: #FCEBEB;
-    border-radius: 8px 8px 8px 8px;
-    color: #E43434 ;
-    font-weight: bold;
-    font-size: 14px;
-  }
-  .yiguanzhu{
-    padding: 8px 12px;
-    border-radius: 8px 8px 8px 8px;
-    font-weight: bold;
-    font-size: 14px;
-  }
-  
+  /* Container Styling */
+  min-height: 100vh;
+  background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 50%, #E5E7EB 100%);
+  padding: 24px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: fixed;
+    top: -50%;
+    right: -20%;
+    width: 800px;
+    height: 800px;
+    background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  &::after {
+    content: '';
+    position: fixed;
+    bottom: -30%;
+    left: -15%;
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  /* Enhanced Typography */
+  .bold {
+    font-weight: 800 !important;
+    letter-spacing: -0.02em;
+  }
+
+  .font_size30 {
+    font-size: 32px !important;
+    color: #111827 !important;
+    line-height: 1.3;
+    margin-bottom: 12px;
+  }
+
+  .font_size20 {
+    font-size: 22px !important;
+    color: #1F2937 !important;
+    font-weight: 700 !important;
+  }
+
+  .font_size18 {
+    font-size: 17px !important;
+    font-weight: 600 !important;
+  }
+
+  .font_size16 {
+    font-size: 15px !important;
+    line-height: 1.6;
+  }
+
+  .font_size14 {
+    font-size: 14px !important;
+    line-height: 1.6;
+  }
+
+  .font_size32 {
+    font-size: 36px !important;
+    font-weight: 900 !important;
+    background: linear-gradient(135deg, #4F46E5, #7C3AED);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .gray {
+    color: #6B7280 !important;
+    line-height: 1.8;
+  }
+
+  .color_price span:not(.font_size32) {
+    color: #9CA3AF !important;
+    font-weight: 500;
+  }
+
+  /* Glassmorphism Cards */
+  .bg_color_fff {
+    background: rgba(255, 255, 255, 0.85) !important;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(79, 70, 229, 0.12) !important;
+    box-shadow:
+      0 8px 32px rgba(79, 70, 229, 0.08),
+      0 2px 8px rgba(0, 0, 0, 0.04) !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow:
+        0 20px 48px rgba(79, 70, 225, 0.15),
+        0 8px 16px rgba(0, 0, 0, 0.06) !important;
+      border-color: rgba(79, 70, 229, 0.2) !important;
+    }
+  }
+
+  /* Border Radius Enhancement */
+  .border_radius_16 {
+    border-radius: 20px !important;
+  }
+
+  .border_radius_10 {
+    border-radius: 16px !important;
+  }
+
+  .border_radius_8 {
+    border-radius: 12px !important;
+  }
+
+  /* Spacing System */
+  .padding16 {
+    padding: 24px !important;
+  }
+
+  .padding8 {
+    padding: 12px 16px !important;
+  }
+
+  .mt10 {
+    margin-top: 16px !important;
+  }
+
+  .mt20 {
+    margin-top: 28px !important;
+  }
+
+  .mr20 {
+    margin-right: 28px !important;
+  }
+
+  .ml10 {
+    margin-left: 12px !important;
+  }
+
+  .gap20 {
+    gap: 16px !important;
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+
+  .gap10 {
+    gap: 12px !important;
+    align-items: center;
+  }
+
+  .gap5 {
+    gap: 8px !important;
+    display: inline-flex !important;
+    align-items: center;
+  }
+
+  /* Meta Information Items */
+  .gap5 img {
+    width: 18px !important;
+    height: 18px !important;
+    filter: grayscale(20%) brightness(0.85);
+    transition: all 0.2s ease;
+  }
+
+  .gap5:hover img {
+    filter: grayscale(0%) brightness(1);
+    transform: scale(1.1);
+  }
+
+  .gap5 span {
+    color: #4B5563 !important;
+    font-weight: 500 !important;
+    transition: color 0.2s ease;
+  }
+
+  .gap5:hover span {
+    color: #4F46E5 !important;
+  }
+
+  /* Vertical Accent Line */
+  .line_vertical {
+    width: 4px !important;
+    height: 24px !important;
+    background: linear-gradient(180deg, #4F46E5, #7C3AED) !important;
+    border-radius: 4px !important;
+    box-shadow: 0 0 12px rgba(79, 70, 229, 0.3);
+  }
+
+  /* Preview Images */
+  .mt20 img {
+    border-radius: 12px !important;
+    border: 1px solid rgba(79, 70, 229, 0.08);
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: scale(1.02);
+      box-shadow: 0 12px 32px rgba(79, 70, 229, 0.15);
+      border-color: rgba(79, 70, 229, 0.2);
+    }
+  }
+
+  /* Right Sidebar */
+  .detail_right {
+    width: 380px;
+    flex-shrink: 0;
+  }
+
+  .detail_right_content {
+    position: sticky;
+    top: 90px;
+    max-height: calc(100vh - 110px);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(79, 70, 229, 0.3) transparent;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(79, 70, 229, 0.3);
+      border-radius: 6px;
+
+      &:hover {
+        background: rgba(79, 70, 229, 0.5);
+      }
+    }
+  }
+
+  .box_shadow_card {
+    box-shadow:
+      0 8px 32px rgba(79, 70, 229, 0.1),
+      0 2px 8px rgba(0, 0, 0, 0.04) !important;
+  }
+
+  /* Price Section */
+  .flex-center-between {
+    align-items: center !important;
+  }
+
+  .flex-column {
+    display: flex !important;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  /* Buttons - Modern Gradient Style */
+  :deep(.el-button--primary) {
+    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
+    border: none !important;
+    border-radius: 14px !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.01em;
+    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 32px rgba(79, 70, 229, 0.45) !important;
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+
+  :deep(.el-button--success) {
+    background: linear-gradient(135deg, #10B981, #059669) !important;
+    border: none !important;
+    border-radius: 999px !important;
+    font-weight: 700 !important;
+    padding: 8px 16px !important;
+    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
+  }
+
+  /* Tags - Pill Style */
+  :deep(.el-tag--primary) {
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(124, 58, 237, 0.1)) !important;
+    border: 1px solid rgba(99, 102, 241, 0.2) !important;
+    border-radius: 999px !important;
+    color: #4F46E5 !important;
+    font-weight: 600 !important;
+    padding: 4px 12px !important;
+    font-size: 12px !important;
+  }
+
+  :deep(.el-tag--primary.el-tag--large) {
+    background: rgba(99, 102, 241, 0.08) !important;
+    border: 2px dashed rgba(99, 102, 241, 0.3) !important;
+    border-radius: 14px !important;
+    color: #4F46E5 !important;
+    font-weight: 700 !important;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(99, 102, 241, 0.15) !important;
+      border-style: solid !important;
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
+    }
+  }
+
+  /* Avatar Enhancement */
+  :deep(.el-avatar) {
+    border: 3px solid rgba(255, 255, 255, 0.9);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: scale(1.05);
+      box-shadow: 0 6px 16px rgba(79, 70, 229, 0.2);
+    }
+  }
+
+  /* Contact Info Background */
+  .contactInfo_bg {
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(124, 58, 237, 0.05)) !important;
+    border: 1px solid rgba(79, 70, 229, 0.1) !important;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(124, 58, 237, 0.1)) !important;
+      border-color: rgba(79, 70, 229, 0.2) !important;
+    }
+  }
+
+  /* Action Buttons */
+  .weiguanzhu,
+  .yiguanzhu {
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .weiguanzhu {
+    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1)) !important;
+    border: 1px solid rgba(239, 68, 68, 0.2) !important;
+    color: #DC2626 !important;
+
+    &:hover {
+      background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15)) !important;
+      transform: translateY(-2px);
+      box-shadow: 0 8px 16px rgba(239, 68, 68, 0.2);
+    }
+  }
+
+  .yiguanzhu {
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(124, 58, 237, 0.1)) !important;
+    border: 1px solid rgba(99, 102, 241, 0.2) !important;
+    color: #4F46E5 !important;
+
+    &:hover {
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(124, 58, 237, 0.15)) !important;
+      transform: translateY(-2px);
+      box-shadow: 0 8px 16px rgba(99, 102, 241, 0.2);
+    }
+  }
+
+  /* Cursor Pointer Enhancement */
+  .cursor-pointer {
+    cursor: pointer !important;
+  }
+
+  /* Flex Utilities */
+  .flex-between {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: flex-start !important;
+    gap: 28px;
+  }
+
+  .flex_1 {
+    flex: 1 !important;
+    min-width: 0; /* Prevent flex items from overflowing */
+  }
+
+  .flex-center-between {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+  }
+}
+
+/* ===============================
+   RESPONSIVE DESIGN
+   =============================== */
+
+/* Tablet */
+@media (max-width: 1200px) {
+  .workflow-detail {
+    .detail_right {
+      width: 340px;
+    }
+
+    .mr20 {
+      margin-right: 24px !important;
+    }
+  }
+}
+
+/* Small Tablet */
+@media (max-width: 900px) {
+  .workflow-detail {
+    padding: 16px;
+
+    .flex-between {
+      flex-direction: column;
+    }
+
+    .mr20 {
+      margin-right: 0 !important;
+      margin-bottom: 24px;
+    }
+
+    .detail_right {
+      width: 100%;
+      order: -1;
+    }
+
+    .detail_right_content {
+      position: static;
+      max-height: none;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 20px;
+    }
+
+    .font_size30 {
+      font-size: 28px !important;
+    }
+
+    .font_size20 {
+      font-size: 20px !important;
+    }
+
+    .gap20 {
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    }
+  }
+}
+
+/* Mobile */
+@media (max-width: 600px) {
+  .workflow-detail {
+    padding: 12px;
+
+    .padding16 {
+      padding: 18px !important;
+    }
+
+    .border_radius_16 {
+      border-radius: 16px !important;
+    }
+
+    .border_radius_10 {
+      border-radius: 12px !important;
+    }
+
+    .font_size30 {
+      font-size: 24px !important;
+    }
+
+    .font_size20 {
+      font-size: 18px !important;
+    }
+
+    .font_size18 {
+      font-size: 16px !important;
+    }
+
+    .font_size32 {
+      font-size: 30px !important;
+    }
+
+    .mt20 {
+      margin-top: 20px !important;
+    }
+
+    .mt10 {
+      margin-top: 12px !important;
+    }
+
+    .gap20 {
+      grid-template-columns: 1fr !important;
+      gap: 12px !important;
+    }
+
+    .detail_right_content {
+      grid-template-columns: 1fr;
+    }
+
+    :deep(.el-button--large) {
+      height: 44px !important;
+    }
+
+    :deep(.el-avatar) {
+      width: 40px !important;
+      height: 40px !important;
+    }
+  }
 }
 </style>