style(mobile-uni): 优化员工端首页与登录页UI交互，更名为银城帮道

mobile-uni/src/pages/user/today/index.vue

@@ -3,12 +3,16 @@
     <view class="brand-bar">
       <view class="brand-left">
         <image class="brand-logo" src="/static/brand-logo.png" mode="aspectFit" />
-        <text class="brand-name">银城员工端</text>
-      </view>
-      <view class="brand-bell" @click="openBuilding('消息通知')">
-        <uni-icons class="bell-icon" type="notification" size="28" color="#16191f" />
-        <view class="bell-dot" />
+        <text class="brand-name">银城帮道</text>
+        <view class="brand-status-badge">
+          <view class="status-dot-live"></view>
+          <text class="status-text">AI 在线</text>
+        </view>
       </view>
+      <button class="brand-bell" :aria-label="broadcastBellLabel" @click="openBroadcast">
+        <uni-icons class="bell-icon" type="notification" size="26" color="#16191f" />
+        <view v-if="hasUnreadBroadcast" class="bell-dot pulse" />
+      </button>
     </view>
 
     <view v-if="message" class="status-message">{{ message }}</view>
@@ -17,12 +21,14 @@
       <image class="hero-bg" src="/static/community-hero-bg.webp" mode="aspectFill" />
       <view class="hero-scrim" />
       <view class="hero-copy">
-        <text class="hero-role">{{ positionProfile.value }}</text>
+        <view class="hero-role-pill">
+          <text class="hero-role-text">{{ positionProfile.value }}</text>
+        </view>
         <text class="hero-title">{{ positionProfile.heroTitle }}</text>
         <text class="hero-sub">有问题，随时问老师傅</text>
       </view>
       <view class="hero-stage">
-        <view class="mentor-bubble">
+        <view class="mentor-bubble spring-enter">
           <text>{{ mentorBubbleText }}</text>
         </view>
         <image class="mentor-image" src="/static/mentor-female.png" mode="aspectFit" />
@@ -30,20 +36,24 @@
     </view>
 
     <view class="voice-card employee-card">
-      <button
-        class="voice-mic"
-        :class="{ recording, cancelling }"
-        aria-label="按住说话"
-        @touchstart.prevent="startHold"
-        @touchmove.prevent="moveHold"
-        @touchend.prevent="endHold"
-        @touchcancel.prevent="cancelHold"
-        @mousedown.prevent="startHold"
-        @mouseup.prevent="endHold"
-        @mouseleave="cancelHold"
-      >
-        <uni-icons type="mic" size="40" color="#ffffff" />
-      </button>
+      <view class="mic-ripple-container">
+        <view class="mic-ripple ripple-1" :class="{ active: recording }"></view>
+        <view class="mic-ripple ripple-2" :class="{ active: recording }"></view>
+        <button
+          class="voice-mic"
+          :class="{ recording, cancelling }"
+          aria-label="按住说话"
+          @touchstart.prevent="startHold"
+          @touchmove.prevent="moveHold"
+          @touchend.prevent="endHold"
+          @touchcancel.prevent="cancelHold"
+          @mousedown.prevent="startHold"
+          @mouseup.prevent="endHold"
+          @mouseleave="cancelHold"
+        >
+          <uni-icons type="mic" size="40" color="#ffffff" />
+        </button>
+      </view>
       <text class="voice-title">{{ voiceTitle }}</text>
       <text class="voice-sub">{{ voiceSub }}</text>
     </view>
@@ -57,12 +67,14 @@
           :class="`chip-${index}`"
           @click="ask(item)"
         >
-          <uni-icons
-            class="chip-icon"
-            :type="chipIcon(index)"
-            size="22"
-            :color="chipColor(index)"
-          />
+          <view class="chip-icon-box" :style="{ background: chipBg(index) }">
+            <uni-icons
+              class="chip-icon"
+              :type="chipIcon(index)"
+              size="16"
+              :color="chipIconColor(index)"
+            />
+          </view>
           <text class="chip-text">{{ item }}</text>
           <text class="chip-arrow">›</text>
         </button>
@@ -91,18 +103,22 @@
 
       <view class="schedule-list">
         <view class="schedule-row" v-if="primaryScheduleTitle">
-          <text class="schedule-num">1</text>
+          <view class="schedule-tag" :class="primaryAssignmentTagClass">
+            <text class="schedule-tag-text">{{ primaryAssignmentTagText }}</text>
+          </view>
           <view class="schedule-copy">
-            <text class="schedule-title">{{ primaryDisplayTitle }}</text>
+            <text class="schedule-title">{{ primaryScheduleTitle }}</text>
             <text class="schedule-desc">{{ primaryScheduleDesc }}</text>
           </view>
-          <button class="schedule-action" @click="openPrimarySchedule">
+          <button class="schedule-action primary-gradient-btn" @click="openPrimarySchedule">
             {{ primaryAssignment?.source === 'daily' ? '去作答' : '开始练习' }}
           </button>
         </view>
 
         <view class="schedule-row" v-if="home?.review">
-          <text class="schedule-num">2</text>
+          <view class="schedule-tag tag-review">
+            <text class="schedule-tag-text">SOP复习</text>
+          </view>
           <view class="schedule-copy">
             <text class="schedule-title">{{ home?.review?.title }}</text>
             <text class="schedule-desc">{{ home?.review?.desc }}</text>
@@ -120,29 +136,37 @@
         </view>
       </view>
       <view class="tools-grid">
-        <button class="tool-cell" @click="openLearning">
-          <view class="tool-icon">学</view>
+        <button class="tool-cell tool-learn" @click="openLearning">
+          <view class="tool-icon-badge badge-learn">
+            <uni-icons type="staff-filled" size="22" color="#6366f1" />
+          </view>
           <view class="tool-copy">
             <text class="tool-name">学习中心</text>
             <text class="tool-sub">课程·三题</text>
           </view>
         </button>
-        <button class="tool-cell" @click="openWorkResults">
-          <view class="tool-icon">果</view>
+        <button class="tool-cell tool-results" @click="openWorkResults">
+          <view class="tool-icon-badge badge-results">
+            <uni-icons type="medal-filled" size="22" color="#10b981" />
+          </view>
           <view class="tool-copy">
             <text class="tool-name">今日成果</text>
             <text class="tool-sub">记录·待跟进</text>
           </view>
         </button>
-        <button class="tool-cell" @click="openReport">
-          <view class="tool-icon">报</view>
+        <button class="tool-cell tool-report" @click="openReport">
+          <view class="tool-icon-badge badge-report">
+            <uni-icons type="paperplane-filled" size="22" color="#f59e0b" />
+          </view>
           <view class="tool-copy">
             <text class="tool-name">成果投稿</text>
             <text class="tool-sub">案例·SOP·知识</text>
           </view>
         </button>
-        <button class="tool-cell" @click="openQuestions">
-          <view class="tool-icon">榜</view>
+        <button class="tool-cell tool-questions" @click="openQuestions">
+          <view class="tool-icon-badge badge-questions">
+            <uni-icons type="chatboxes-filled" size="22" color="#e60012" />
+          </view>
           <view class="tool-copy">
             <text class="tool-name">问题榜</text>
             <text class="tool-sub">大家帮你答</text>
@@ -152,7 +176,7 @@
     </view>
 
     <button class="tip-card" @click="ask(primaryTipQuestion)">
-      <uni-icons class="tip-mark" type="help" size="22" color="#d98200" />
+      <uni-icons class="tip-mark" type="help-filled" size="20" color="#d98200" />
       <text class="tip-label">小贴士</text>
       <text class="tip-divider">|</text>
       <text class="tip-text">{{ tipBody }}</text>
@@ -173,12 +197,20 @@ import { chooseSpeechAudio, transcribeSpeechBlob, transcribeSpeechFile } from '@
 import { stripInternalCodes } from '@/services/text';
 import { ensureEmployeePosition } from '@/services/position';
 import { createPageRequestScope, currentAccountKey } from '@/services/request-scope';
+import { getBroadcastUnreadCount } from '@/services/broadcast';
 
 const home = ref<RoleHome | null>(null);
 const assignments = ref<PracticeAssignment[]>([]);
 const message = ref('');
 const loggedIn = ref(false);
 const positionProfile = ref(getSelectedPositionProfile());
+const unreadBroadcastCount = ref<number | null>(null);
+const hasUnreadBroadcast = computed(() => typeof unreadBroadcastCount.value === 'number' && unreadBroadcastCount.value > 0);
+const broadcastBellLabel = computed(() => unreadBroadcastCount.value === null
+  ? '银城大喇叭，未读状态暂不可用'
+  : unreadBroadcastCount.value > 0
+    ? `银城大喇叭，${unreadBroadcastCount.value} 条未读消息`
+    : '银城大喇叭，无未读消息');
 const quickQuestions = computed(() => positionProfile.value.quickQuestions);
 const primaryTipQuestion = computed(() => quickQuestions.value[0] || '岗位SOP');
 const pendingSopQueryKey = 'aihr_sop_pending_query';
@@ -186,9 +218,27 @@ const pendingAssignmentKey = 'aihr_pending_assignment_id';
 const requests = createPageRequestScope();
 let visibleAccountKey = '';
 
-const chipIcons = ['chatbubble', 'help', 'wallet'];
-const chipIcon = (index: number) => chipIcons[index] || 'chatbubble';
-const chipColor = (_index: number) => '#e60012';
+const chipIcons = ['chatbubble-filled', 'help-filled', 'wallet-filled'];
+const chipIcon = (index: number) => chipIcons[index] || 'chatbubble-filled';
+const chipBgs = ['rgba(230, 0, 18, 0.08)', 'rgba(45, 128, 255, 0.08)', 'rgba(245, 158, 11, 0.08)'];
+const chipBg = (index: number) => chipBgs[index % chipBgs.length];
+const chipColors = ['#e60012', '#2d80ff', '#f59e0b'];
+const chipIconColor = (index: number) => chipColors[index % chipColors.length];
+
+const primaryAssignmentTagText = computed(() => {
+  const source = primaryAssignment.value?.source;
+  if (source === 'daily') return '每日三题';
+  if (source === 'retry') return '错题再练';
+  if (source === 'camp') return '训练营';
+  return '专项训练';
+});
+
+const primaryAssignmentTagClass = computed(() => {
+  const source = primaryAssignment.value?.source;
+  if (source === 'daily') return 'tag-daily';
+  if (source === 'retry') return 'tag-retry';
+  return 'tag-practice';
+});
 
 
 const primaryAssignment = computed(() =>
@@ -272,6 +322,7 @@ const loadHome = async () => {
   assignments.value = [];
   if (!loggedIn.value) {
     home.value = null;
+    unreadBroadcastCount.value = null;
     return;
   }
   if (!(await ensureEmployeePosition('/pages/user/today/index')) || !requests.isCurrent(request)) {
@@ -302,6 +353,21 @@ const loadHome = async () => {
   }
 };
 
+const loadBroadcastUnreadCount = async () => {
+  const request = requests.begin('broadcast-unread');
+  unreadBroadcastCount.value = null;
+  if (!isLoggedIn()) {
+    return;
+  }
+  try {
+    const count = await getBroadcastUnreadCount();
+    if (requests.isCurrent(request)) unreadBroadcastCount.value = count;
+  } catch {
+    // The red dot is shown only for a confirmed unread count.
+    if (requests.isCurrent(request)) unreadBroadcastCount.value = null;
+  }
+};
+
 const recording = ref(false);
 const cancelling = ref(false);
 const transcribing = ref(false);
@@ -467,8 +533,14 @@ const openQuestions = () => {
   uni.navigateTo({ url: '/pages/user/questions/index' });
 };
 
-const openBuilding = (title: string) => {
-  uni.navigateTo({ url: `/pages/common/building/index?title=${encodeURIComponent(title)}` });
+const openBroadcast = () => {
+  const path = '/pages/user/broadcast/index';
+  if (!isLoggedIn()) {
+    rememberLoginRedirect(path);
+    uni.navigateTo({ url: '/pages/auth/login/index' });
+    return;
+  }
+  uni.navigateTo({ url: path });
 };
 
 const goPractice = () => {
@@ -482,11 +554,13 @@ onShow(() => {
     home.value = null;
     assignments.value = [];
     message.value = '';
+    unreadBroadcastCount.value = null;
   }
   visibleAccountKey = nextAccountKey;
   requests.activate();
   resetPageScroll();
   void loadHome();
+  void loadBroadcastUnreadCount();
 });
 
 onHide(() => {
@@ -534,15 +608,53 @@ onUnload(() => {
   letter-spacing: 0.02em;
 }
 
+.brand-status-badge {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border-radius: 12px;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.status-dot-live {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #10b981;
+  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
+  animation: pulseDot 2s infinite ease-in-out;
+}
+
+.status-text {
+  font-size: 11px;
+  font-weight: 700;
+  color: #059669;
+}
+
+@keyframes pulseDot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.2); }
+}
+
 .brand-bell {
   position: relative;
   display: flex;
   width: 42px;
   height: 42px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
   align-items: center;
   justify-content: center;
 }
 
+.brand-bell::after {
+  border: 0;
+}
+
 .bell-icon {
   line-height: 1;
 }
@@ -558,6 +670,15 @@ onUnload(() => {
   background: #e70014;
 }
 
+.bell-dot.pulse {
+  animation: bellPulse 1.8s infinite ease-in-out;
+}
+
+@keyframes bellPulse {
+  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 0, 18, 0.4); }
+  50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(230, 0, 18, 0); }
+}
+
 .status-message {
   margin: 4px 0 8px;
   padding: 10px 12px;
@@ -586,9 +707,9 @@ onUnload(() => {
   inset: 0;
   background: linear-gradient(
     90deg,
-    rgba(255, 255, 255, 0.92) 0%,
-    rgba(255, 255, 255, 0.62) 34%,
-    rgba(255, 255, 255, 0) 64%
+    rgba(255, 255, 255, 0.94) 0%,
+    rgba(255, 255, 255, 0.68) 36%,
+    rgba(255, 255, 255, 0) 66%
   );
 }
 
@@ -599,22 +720,37 @@ onUnload(() => {
   width: 54%;
   max-width: 54%;
   flex-direction: column;
-  padding: 26px 0 0 24px;
+  padding: 24px 0 0 24px;
+}
+
+.hero-role-pill {
+  display: inline-flex;
+  align-self: flex-start;
+  padding: 2px 8px;
+  border-radius: 8px;
+  background: rgba(230, 0, 18, 0.08);
+  margin-bottom: 4px;
+}
+
+.hero-role-text {
+  color: var(--employee-primary);
+  font-size: 13px;
+  font-weight: 700;
 }
 
-.hero-role,
 .hero-title {
   color: #111111;
-  font-size: 30px;
-  font-weight: 500;
-  line-height: 1.5;
-  letter-spacing: 0;
+  font-size: 28px;
+  font-weight: 800;
+  line-height: 1.35;
+  letter-spacing: -0.02em;
 }
 
 .hero-sub {
-  margin-top: 2px;
+  margin-top: 4px;
   color: #4b5058;
-  font-size: 14px;
+  font-size: 13px;
+  font-weight: 500;
   white-space: nowrap;
   line-height: 1.4;
 }
@@ -646,7 +782,16 @@ onUnload(() => {
   padding: 10px 12px;
   border-radius: 18px;
   background: #ffffff;
-  box-shadow: 0 8px 20px rgba(20, 24, 32, 0.1);
+  box-shadow: 0 8px 24px rgba(20, 24, 32, 0.12);
+}
+
+.mentor-bubble.spring-enter {
+  animation: springPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes springPop {
+  0% { transform: scale(0.85); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
 }
 
 .mentor-bubble::after {
@@ -663,8 +808,8 @@ onUnload(() => {
 
 .mentor-bubble text {
   color: #33363c;
-  font-size: 15px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 700;
   line-height: 1.45;
 }
 
@@ -677,9 +822,44 @@ onUnload(() => {
   gap: 8px;
   margin: -48px 4px 0;
   padding: 22px 16px 16px;
-  border-radius: 22px;
+  border-radius: 24px;
   background: #ffffff;
-  box-shadow: 0 14px 34px rgba(24, 28, 36, 0.1);
+  box-shadow: 0 14px 34px rgba(24, 28, 36, 0.08);
+}
+
+.mic-ripple-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 96px;
+  height: 96px;
+}
+
+.mic-ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid var(--employee-primary);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.mic-ripple.ripple-1.active {
+  animation: rippleWave 1.4s infinite cubic-bezier(0, 0.2, 0.8, 1);
+}
+
+.mic-ripple.ripple-2.active {
+  animation: rippleWave 1.4s infinite cubic-bezier(0, 0.2, 0.8, 1);
+  animation-delay: 0.5s;
+}
+
+@keyframes rippleWave {
+  0% { transform: scale(1); opacity: 0.8; }
+  100% { transform: scale(1.6); opacity: 0; }
 }
 
 .voice-mic {
@@ -692,9 +872,10 @@ onUnload(() => {
   padding: 0;
   border: 0;
   border-radius: 50%;
-  background: var(--employee-primary);
+  background: linear-gradient(135deg, #ff4d4f 0%, #e60012 100%);
   box-shadow: 0 10px 24px rgba(230, 0, 18, 0.28);
   line-height: 1;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 
 .voice-mic::after {
@@ -703,8 +884,8 @@ onUnload(() => {
 
 .voice-mic.recording {
   background: var(--brand-pressed);
-  box-shadow: 0 6px 16px rgba(184, 0, 15, 0.3);
-  transform: scale(0.95);
+  box-shadow: 0 6px 16px rgba(184, 0, 15, 0.35);
+  transform: scale(0.94);
 }
 
 .voice-mic.cancelling {
@@ -740,30 +921,34 @@ onUnload(() => {
 .chip {
   display: flex;
   width: 100%;
-  min-height: 40px;
+  min-height: 44px;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  padding: 0 6px;
-  border: 1px solid #ececee;
-  border-radius: 12px;
+  gap: 6px;
+  padding: 0 8px;
+  border: 1px solid #f0f0f2;
+  border-radius: 14px;
   background: #ffffff;
-  color: var(--employee-primary);
+  color: #1a1a1a;
   font-size: 13px;
   font-weight: 700;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
+  transition: transform 0.15s ease, background 0.15s ease;
 }
 
-.chip-1 {
-  color: var(--employee-primary);
+.chip:active {
+  transform: scale(0.96);
+  background: #fdfdfd;
 }
 
-.chip-2 {
-  color: var(--employee-primary);
-}
-
-.chip-icon {
-  font-size: 13px;
-  line-height: 1;
+.chip-icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  flex: none;
 }
 
 .chip-text {
@@ -774,18 +959,18 @@ onUnload(() => {
 }
 
 .chip-arrow {
-  color: #f0717c;
+  color: #c0c3c8;
   font-size: 14px;
   font-weight: 500;
 }
 
 .section-card {
-  margin-top: 10px;
-  padding: 16px;
+  margin-top: 12px;
+  padding: 18px;
   border: 0;
   border-radius: 22px;
   background: #ffffff;
-  box-shadow: 0 8px 24px rgba(24, 28, 36, 0.05);
+  box-shadow: 0 8px 24px rgba(24, 28, 36, 0.04);
 }
 
 .login-section {
@@ -835,7 +1020,7 @@ onUnload(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: 14px;
 }
 
 .section-title {
@@ -843,13 +1028,13 @@ onUnload(() => {
   align-items: center;
   gap: 8px;
   color: #1a1a1a;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 800;
 }
 
 .section-bar {
   width: 4px;
-  height: 22px;
+  height: 20px;
   border-radius: 2px;
   background: var(--employee-primary);
 }
@@ -879,26 +1064,46 @@ onUnload(() => {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 12px 10px;
+  padding: 14px 12px;
   border-radius: 16px;
-  background: #fafafa;
+  background: #f9f9fb;
 }
 
-.schedule-num {
+.schedule-tag {
   display: flex;
-  width: 30px;
-  height: 30px;
-  flex: none;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
-  background: var(--employee-primary);
-  color: #ffffff;
-  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 10px;
+  flex: none;
+}
+
+.schedule-tag-text {
+  font-size: 12px;
   font-weight: 800;
   line-height: 1;
 }
 
+.tag-daily {
+  background: rgba(45, 128, 255, 0.1);
+  color: #2d80ff;
+}
+
+.tag-retry {
+  background: rgba(245, 158, 11, 0.1);
+  color: #d97706;
+}
+
+.tag-practice {
+  background: rgba(230, 0, 18, 0.1);
+  color: var(--employee-primary);
+}
+
+.tag-review {
+  background: rgba(16, 185, 129, 0.1);
+  color: #059669;
+}
+
 .schedule-copy {
   display: flex;
   min-width: 0;
@@ -909,36 +1114,46 @@ onUnload(() => {
 
 .schedule-title {
   color: #1a1a1a;
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 800;
-  line-height: 1.25;
+  line-height: 1.3;
 }
 
 .schedule-desc {
   color: #8a8d93;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.4;
 }
 
 .schedule-action {
   display: flex;
   width: auto;
-  min-width: 88px;
-  min-height: 52px;
+  min-width: 84px;
+  min-height: 44px;
   flex: none;
   align-items: center;
   justify-content: center;
-  padding: 0 10px;
+  padding: 0 12px;
   border-radius: 12px;
   background: var(--employee-primary);
-  box-shadow: 0 8px 16px rgba(230, 0, 18, 0.18);
   color: #ffffff;
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 800;
   line-height: 1.2;
   white-space: nowrap;
 }
 
+.primary-gradient-btn {
+  background: linear-gradient(135deg, #ff4d4f 0%, #e60012 100%) !important;
+  box-shadow: 0 6px 16px rgba(230, 0, 18, 0.25) !important;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.primary-gradient-btn:active {
+  transform: scale(0.96);
+  box-shadow: 0 3px 8px rgba(230, 0, 18, 0.2) !important;
+}
+
 .review-action {
   border: 1.5px solid var(--employee-primary);
   background: #ffffff;
@@ -949,39 +1164,57 @@ onUnload(() => {
 .tools-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
+  gap: 12px;
 }
 
 .tool-cell {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
+  align-items: center;
+  gap: 12px;
   margin: 0;
-  padding: 12px;
+  padding: 14px;
   border: 0;
-  border-radius: 16px;
-  background: #fafafa;
+  border-radius: 18px;
+  background: #f9f9fb;
   box-shadow: none;
   text-align: left;
   line-height: 1.3;
+  transition: transform 0.15s ease, background 0.15s ease;
+}
+
+.tool-cell:active {
+  transform: scale(0.97);
+  background: #f2f2f5;
 }
 
 .tool-cell::after {
   border: 0;
 }
 
-.tool-icon {
+.tool-icon-badge {
   display: flex;
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
   align-items: center;
   justify-content: center;
-  border-radius: 12px;
-  background: var(--employee-primary-soft);
-  color: var(--employee-primary);
-  font-size: 18px;
-  font-weight: 900;
+  border-radius: 14px;
+  flex: none;
+}
+
+.badge-learn {
+  background: rgba(99, 102, 241, 0.1);
+}
+
+.badge-results {
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.badge-report {
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.badge-questions {
+  background: rgba(230, 0, 18, 0.1);
 }
 
 .tool-copy {
@@ -1005,17 +1238,41 @@ onUnload(() => {
 }
 
 .tip-card {
+  position: relative;
+  overflow: hidden;
   display: flex;
   margin-top: 18px;
-  min-height: 58px;
+  min-height: 54px;
   align-items: center;
   gap: 6px;
   padding: 14px 16px;
   border: 0;
-  border-radius: 14px;
-  background: #fff6e8;
-  box-shadow: none;
+  border-radius: 16px;
+  background: #fff8ef;
+  box-shadow: 0 4px 14px rgba(217, 130, 0, 0.06);
   text-align: left;
+  transition: transform 0.15s ease;
+}
+
+.tip-card:active {
+  transform: scale(0.98);
+}
+
+.tip-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
+  transform: skewX(-20deg);
+  animation: shimmerLight 4s infinite ease-in-out;
+}
+
+@keyframes shimmerLight {
+  0%, 75% { left: -100%; }
+  100% { left: 200%; }
 }
 
 .tip-mark {