diff --git a/src/pages/home/components/LongTextGuideCard/index.vue b/src/pages/home/components/LongTextGuideCard/index.vue
index d2b0394..0eca263 100644
--- a/src/pages/home/components/LongTextGuideCard/index.vue
+++ b/src/pages/home/components/LongTextGuideCard/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="long-text-guide-card w-full">
-    <div v-if="mode === 'list'" class="long-text-guide-card__list w-full">
+  <div class="w-full">
+    <div v-if="mode === 'list'" class="w-full">
       <div v-for="item in cards" :key="item.id"
         class="min-h-[178px] mb-4 pt-[28px] px-[26px] pb-[22px] border border-slate-900/5 [box-shadow:0_12px_28px_rgba(15,23,42,0.04)] [transition:transform_0.15s_ease,opacity_0.15s_ease] bg-white rounded-[24px] active:scale-985"
         :class="{ 'opacity-55': disabled }" @click="openDetail(item)">
@@ -24,7 +24,7 @@
     <div v-else class="border border-slate-900/5 bg-white rounded-[24px] overflow-hidden">
       <div class="min-h-[70px] py-0 pr-[18px] pl-5 flex items-center border-b border-ink-200">
         <div
-          class="w-[34px] h-[34px] mr-3 text-slate-500 bg-[#f2f4f6] text-2xl leading-none flex items-center justify-center rounded-full font-700"
+          class="w-[34px] h-[34px] mr-3 text-slate-500 bg-[#f2f4f6] text-2xl leading-none flex items-center justify-center rounded-full font-bold"
           @click="closeDetail">
           <van-icon name="arrow-left" size="16" color="#CBD5E1"></van-icon>
         </div>
diff --git a/src/pages/home/components/SharedVisual/ActionRow.vue b/src/pages/home/components/SharedVisual/ActionRow.vue
index 03cde5b..69913e5 100644
--- a/src/pages/home/components/SharedVisual/ActionRow.vue
+++ b/src/pages/home/components/SharedVisual/ActionRow.vue
@@ -1,22 +1,22 @@
 <template>
-  <div class="visual-action-row flex items-center gap-[12px] p-[12px] bg-white rounded-18 "
-    :class="{ 'is-disabled': disabled }" @click="handleClick">
-    <div class="visual-action-row__icon flex items-center justify-center w-42 h-42 rounded-14 text-[18px] font-bold"
-      :class="toneClass">
+  <div class="flex items-center gap-[12px] p-[12px] bg-white rounded-18 " :class="{ 'opacity-55': disabled }"
+    @click="handleClick">
+    <div
+      class="flex items-center justify-center w-42 h-42 rounded-14 text-[18px] font-bold text-[#047857] bg-[#ecfdf5]">
       <slot name="icon">{{ icon }}</slot>
     </div>
-    <div class="visual-action-row__body flex-1">
-      <div class="visual-action-row__title text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</div>
-      <div v-if="subtitle" class="visual-action-row__subtitle truncate">
+    <div class="min-w-0 flex-1">
+      <div class="text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</div>
+      <div v-if="subtitle" class="mt-1 text-slate-400 text-[11px] font-bold truncate">
         {{ subtitle }}
       </div>
     </div>
-    <div class="visual-action-row__arrow text-[#cbd5e1] font-700">›</div>
+    <van-icon size="24" color="#CBD5E1" name="arrow-right"></van-icon>
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, defineProps, defineEmits } from "vue";
 
 const props = defineProps({
   title: {
@@ -47,14 +47,8 @@ const props = defineProps({
 
 const emit = defineEmits(["action"]);
 
-const toneClass = computed(() => `visual-action-row__icon--${props.tone}`);
-
 const handleClick = () => {
   if (props.disabled) return;
   emit("action", props.payload);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/SharedVisual/BadgePill.vue b/src/pages/home/components/SharedVisual/BadgePill.vue
index 3bfbcf5..3f74b03 100644
--- a/src/pages/home/components/SharedVisual/BadgePill.vue
+++ b/src/pages/home/components/SharedVisual/BadgePill.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="visual-badge flex items-center justify-center rounded-[5px] text-[10px] font-bold whitespace-nowrap"
-    :class="toneClass">
+  <div
+    class="min-h-[20px] py-[2px] px-[8px] leading-[16px] flex items-center justify-center rounded-[5px] text-[10px] text-[#047857] bg-[#ecfdf5] font-bold whitespace-nowrap">
     <slot>{{ label }}</slot>
   </div>
 </template>
@@ -18,10 +18,4 @@ const props = defineProps({
     default: "slate",
   },
 });
-
-const toneClass = computed(() => `visual-badge--${props.tone}`);
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/pages/home/components/SharedVisual/CardShell.vue b/src/pages/home/components/SharedVisual/CardShell.vue
index 9d6dad0..816211e 100644
--- a/src/pages/home/components/SharedVisual/CardShell.vue
+++ b/src/pages/home/components/SharedVisual/CardShell.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     class="[box-shadow:0_8px_24px_rgba(15,23,42,0.05)] w-full bg-white border border-[#f1f5f9] rounded-[24px] overflow-hidden"
-    :class="[{ '[transition:transform_0.18s_ease,opacity_0.18s_ease]': pressable, 'opacity-55': disabled }, variantClass]"
+    :class="[{ '[transition:transform_0.18s_ease,opacity_0.18s_ease] active:scale-985 active:opacity-92': pressable, 'opacity-55': disabled }, variantClass]"
     @click="handleClick">
     <slot />
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, defineEmits, defineProps } from "vue";
 
 const props = defineProps({
   variant: {
@@ -35,6 +35,13 @@ const handleClick = () => {
 };
 </script>
 
-<style scoped lang="scss">
-@import "./styles/index.scss";
+<style scoped>
+.visual-card-shell--soft {
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 9px 34px rgba(27, 9, 91, 0.07);
+}
+
+.visual-card-shell--detail {
+  border-radius: 20px;
+}
 </style>
diff --git a/src/pages/home/components/SharedVisual/styles/index.scss b/src/pages/home/components/SharedVisual/styles/index.scss
deleted file mode 100644
index ee8e5d6..0000000
--- a/src/pages/home/components/SharedVisual/styles/index.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-.visual-card-shell {
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
-}
-
-.visual-card-shell--soft {
-  background: rgba(255, 255, 255, 0.84);
-  box-shadow: 0 9px 34px rgba(27, 9, 91, 0.07);
-}
-
-.visual-card-shell--detail {
-  border-radius: 20px;
-}
-
-.visual-card-shell.is-pressable {
-  transition: transform 0.18s ease, opacity 0.18s ease;
-}
-
-.visual-card-shell.is-pressable:active {
-  transform: scale(0.98);
-  opacity: 0.92;
-}
-
-.visual-card-shell.is-disabled,
-.visual-action-row.is-disabled {
-  opacity: 0.55;
-}
-
-.visual-badge {
-  min-height: 20px;
-  padding: 2px 8px;
-  box-sizing: border-box;
-  line-height: 16px;
-}
-
-.visual-badge--slate {
-  color: #475569;
-  background: #f1f5f9;
-}
-
-.visual-badge--green {
-  color: #047857;
-  background: #ecfdf5;
-}
-
-.visual-badge--amber {
-  color: #b45309;
-  background: #fffbeb;
-}
-
-.visual-badge--rose {
-  color: #be123c;
-  background: #fff1f2;
-}
-
-.visual-badge--blue {
-  color: #2563eb;
-  background: #eff6ff;
-}
-
-.visual-badge--purple {
-  color: #7c3aed;
-  background: #f5f3ff;
-}
-
-.visual-action-row {}
-
-.visual-action-row__icon {}
-
-.visual-action-row__icon--green {
-  color: #047857;
-  background: #ecfdf5;
-}
-
-.visual-action-row__icon--blue {
-  color: #2563eb;
-  background: #eff6ff;
-}
-
-.visual-action-row__icon--amber {
-  color: #b45309;
-  background: #fffbeb;
-}
-
-.visual-action-row__icon--rose {
-  color: #be123c;
-  background: #fff1f2;
-}
-
-.visual-action-row__body {
-  min-width: 0;
-}
-
-.visual-action-row__title {}
-
-.visual-action-row__subtitle {
-  margin-top: 4px;
-  color: #94a3b8;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.visual-action-row__arrow {
-  font-size: 24px;
-}
\ No newline at end of file