diff --git a/Build_God_Game/src/views/DailyMissionView.vue b/Build_God_Game/src/views/DailyMissionView.vue
index 7ff2f99..e306164 100644
--- a/Build_God_Game/src/views/DailyMissionView.vue
+++ b/Build_God_Game/src/views/DailyMissionView.vue
@@ -129,6 +129,15 @@ const getDifficultyClass = (difficulty: MissionDifficulty) => {
   }
 }
 
+const getDifficultySkullCount = (difficulty: MissionDifficulty): number => {
+  switch (difficulty) {
+    case MissionDifficulty.Normal: return 1
+    case MissionDifficulty.Hard: return 2
+    case MissionDifficulty.Purgatory: return 3
+    default: return 1
+  }
+}
+
 const getRewardIcon = (type: RewardType) => {
   switch (type) {
     case RewardType.Money: return '💰'
@@ -190,19 +199,25 @@ const MissionCardContent = defineComponent({
     return () => h('div', { class: 'mission-card-content' }, [
       h('div', { class: 'card-header' }, [
         h('div', { class: 'card-title-row' }, [
-          h('div', { class: 'card-icon', style: `filter: ${getMissionIconFilter(props.mission.missionType, props.mission.difficulty)}`, innerHTML: getMissionIcon(props.mission.missionType, props.mission.difficulty) }),
+          //h('div', { class: 'card-icon', style: `filter: ${getMissionIconFilter(props.mission.missionType, props.mission.difficulty)}`, innerHTML: getMissionIcon(props.mission.missionType, props.mission.difficulty) }),
           h('div', { class: 'title-stack' }, [
-            h('span', { class: 'card-title' }, props.mission.missionTitle),
+            h('div', { class: 'title-line' }, [
+              h('span', { class: 'card-title' }, props.mission.missionTitle),
+              h('span', {
+                class: ['difficulty-skulls', getDifficultyClass(props.mission.difficulty)],
+                'aria-label': `${getDifficultyLabel(props.mission.difficulty)}难度`,
+              }, '💀'.repeat(getDifficultySkullCount(props.mission.difficulty))),
+            ]),
             h('span', { class: 'card-subtitle' }, props.mission.missionName),
           ]),
         ]),
         h('span', { class: ['card-status', getStatusClass(props.mission.status)] }, getStatusText(props.mission.status)),
       ]),
       h('div', { class: 'card-desc' }, props.mission.missionDescription),
-      h('div', { class: 'card-meta-row' }, [
-        h('span', { class: ['difficulty-badge', getDifficultyClass(props.mission.difficulty)] }, getDifficultyLabel(props.mission.difficulty)),
-        h('span', { class: 'time-badge' }, `预计 ${props.mission.spendTimeMinutes} 分钟`),
-      ]),
+      //h('div', { class: 'card-meta-row' }, [
+      //h('span', { class: ['difficulty-badge', getDifficultyClass(props.mission.difficulty)] }, getDifficultyLabel(props.mission.difficulty)),
+      //h('span', { class: 'time-badge' }, `预计 ${props.mission.spendTimeMinutes} 分钟`),
+      //]),
       props.mission.progresses && props.mission.progresses.length > 0
         ? h('div', { class: 'objective-panel' }, [
           h('span', { class: 'objective-label' }, '任务目标'),
@@ -224,7 +239,7 @@ const MissionCardContent = defineComponent({
       ]),
       h('div', { class: 'card-actions' }, [
         !canAccept(props.mission)
-          ? h('span', { class: 'action-hint' }, canClaim(props.mission)
+          ? h('span', { class: ['action-hint', getStatusClass(props.mission.status)] }, canClaim(props.mission)
             ? '任务已完成，领取奖励'
             : props.mission.status === DailyMissionStatus.InProgress
               ? '任务正在进行中'
@@ -435,7 +450,8 @@ const MissionCardContent = defineComponent({
 }
 
 .card-inner {
-  padding: 18px;
+  --mission-gap: 12px;
+  padding: 16px;
 }
 
 .mission-collection {
@@ -454,55 +470,65 @@ const MissionCardContent = defineComponent({
   border-color: rgba(220, 38, 38, 0.5);
 }
 
-.mission-card-content {
+:deep(.mission-card-content) {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--mission-gap);
 }
 
-.card-header {
+:deep(.card-header) {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 12px;
-  padding-bottom: 12px;
+  padding-bottom: 4px;
+  margin-bottom: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.card-title-row {
+:deep(.card-title-row) {
   display: flex;
   align-items: center;
   gap: 8px;
   flex: 1;
   min-width: 0;
+  /* SVG 图标相对标题略小，避免与标题同尺度显得突兀 */
+  font-size: 1.05rem;
 }
 
-.card-icon {
-  width: 34px;
-  height: 34px;
-  flex: 0 0 34px;
+:deep(.card-icon) {
+  width: 0.72em;
+  height: 0.72em;
+  flex: 0 0 0.72em;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 6px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.06);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  padding: 1px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
 }
 
-.card-icon :deep(svg) {
+:deep(.card-icon svg) {
   width: 100%;
   height: 100%;
 }
 
-.title-stack {
+:deep(.title-stack) {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 4px;
   min-width: 0;
 }
 
-.card-title {
+:deep(.title-line) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+:deep(.card-title) {
   color: #ffffff;
   font-size: 1.05rem;
   font-weight: 700;
@@ -510,9 +536,30 @@ const MissionCardContent = defineComponent({
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+:deep(.difficulty-skulls) {
+  flex-shrink: 0;
+  font-size: 0.95rem;
+  line-height: 1;
+  letter-spacing: -0.06em;
 }
 
-.card-subtitle {
+:deep(.difficulty-skulls.difficulty-normal) {
+  opacity: 0.72;
+}
+
+:deep(.difficulty-skulls.difficulty-hard) {
+  opacity: 0.88;
+}
+
+:deep(.difficulty-skulls.difficulty-purgatory) {
+  opacity: 1;
+}
+
+:deep(.card-subtitle) {
   color: #777777;
   font-size: 0.72rem;
   overflow: hidden;
@@ -520,19 +567,22 @@ const MissionCardContent = defineComponent({
   white-space: nowrap;
 }
 
-.card-status {
+/* MissionCardContent 为子组件，scoped 需 :deep 才能作用到内部 .card-status */
+:deep(.card-status) {
   padding: 5px 10px;
   border-radius: 999px;
-  font-size: 0.72rem;
+  font-size: 0.76rem;
   font-weight: 700;
   white-space: nowrap;
   letter-spacing: 0.04em;
+  border: 1px solid transparent;
 }
 
-.card-desc {
+:deep(.card-desc) {
   color: #aaaaaa;
   font-size: 0.84rem;
   line-height: 1.55;
+  margin: 0;
 }
 
 .card-meta-row {
@@ -574,49 +624,49 @@ const MissionCardContent = defineComponent({
   color: #fca5a5;
 }
 
-.objective-panel {
+:deep(.objective-panel) {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 8px;
   background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(255, 255, 255, 0.035));
   border: 1px solid rgba(34, 197, 94, 0.18);
-  padding: 11px 12px;
+  padding: 12px;
   border-radius: 12px;
 }
 
-.objective-label {
+:deep(.objective-label) {
   color: #86efac;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.08em;
 }
 
-.objective-value {
+:deep(.objective-value) {
   color: #ffffff;
   font-size: 0.9rem;
   font-weight: 700;
 }
 
-.reward-section {
+:deep(.reward-section) {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--mission-gap);
 }
 
-.section-label {
+:deep(.section-label) {
   color: #777777;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.08em;
 }
 
-.card-rewards {
+:deep(.card-rewards) {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 8px;
 }
 
-.reward-item {
+:deep(.reward-item) {
   background: rgba(255, 136, 68, 0.1);
   border: 1px solid rgba(255, 136, 68, 0.2);
   color: #ff8844;
@@ -626,19 +676,19 @@ const MissionCardContent = defineComponent({
   font-weight: 700;
 }
 
-.exp-reward {
+:deep(.exp-reward) {
   background: rgba(255, 215, 0, 0.1);
   border-color: rgba(255, 215, 0, 0.3);
   color: #ffd700;
 }
 
-.money-reward {
+:deep(.money-reward) {
   background: rgba(34, 197, 94, 0.1);
   border-color: rgba(34, 197, 94, 0.3);
   color: #22c55e;
 }
 
-.reward-more {
+:deep(.reward-more) {
   background: rgba(255, 255, 255, 0.1);
   color: #888888;
   padding: 5px 9px;
@@ -650,9 +700,9 @@ const MissionCardContent = defineComponent({
 :deep(.card-actions) {
   display: flex;
   flex-direction: column;
-  gap: 9px;
-  margin-top: 6px;
-  padding-top: 14px;
+  gap: var(--mission-gap);
+  margin-top: 0;
+  padding-top: var(--mission-gap);
   border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
@@ -734,24 +784,44 @@ const MissionCardContent = defineComponent({
   padding: 12px 16px;
 }
 
-.status-pending {
-  background: rgba(100, 100, 100, 0.3);
-  color: #888888;
+:deep(.card-status.status-pending) {
+  background: rgba(245, 158, 11, 0.18);
+  color: #fbbf24;
+  border-color: rgba(245, 158, 11, 0.45);
 }
 
-.status-progress {
-  background: rgba(59, 130, 246, 0.2);
-  color: #3b82f6;
+:deep(.card-status.status-progress) {
+  background: rgba(59, 130, 246, 0.22);
+  color: #93c5fd;
+  border-color: rgba(59, 130, 246, 0.5);
 }
 
-.status-completed {
-  background: rgba(34, 197, 94, 0.2);
-  color: #22c55e;
+:deep(.card-status.status-completed) {
+  background: rgba(34, 197, 94, 0.22);
+  color: #4ade80;
+  border-color: rgba(34, 197, 94, 0.48);
 }
 
-.status-claimed {
-  background: rgba(255, 255, 255, 0.1);
-  color: #666666;
+:deep(.card-status.status-claimed) {
+  background: rgba(107, 114, 128, 0.14);
+  color: #9ca3af;
+  border-color: rgba(156, 163, 175, 0.35);
+}
+
+:deep(.action-hint.status-pending) {
+  color: #fbbf24;
+}
+
+:deep(.action-hint.status-progress) {
+  color: #93c5fd;
+}
+
+:deep(.action-hint.status-completed) {
+  color: #4ade80;
+}
+
+:deep(.action-hint.status-claimed) {
+  color: #9ca3af;
 }
 
 .empty-state {