优化详情与移动关键页视觉 Wave3（05-27-pc-detail-mobile-visual-wave3）

client/src/pages/MobileNotificationsPage.tsx

@@ -137,7 +137,14 @@ export function MobileNotificationsPage() {
         />
 
       <section className="mobile-card mobile-page-stack" data-testid="mobile-notifications-list">
-        <div className="mobile-page-stack">
+        <div className="mobile-section-header">
+          <div>
+            <h3 className="mobile-section-title">通知流</h3>
+            <p className="mobile-list-card__subtitle mt-1">未读优先，点击直达业务详情</p>
+          </div>
+        </div>
+
+        <div className="mobile-command-surface">
           <Tabs
             data-testid="mobile-notifications-filter-tabs"
             value={unreadOnly ? "unread" : "all"}
@@ -201,7 +208,7 @@ export function MobileNotificationsPage() {
               <button
                 data-testid="mobile-notification-card"
                 key={item.id}
-                className="mobile-list-card w-full text-left"
+                className={`mobile-list-card w-full text-left ${item.readAt ? "" : "mobile-list-card--unread"}`}
                 type="button"
                 onClick={() => void openNotificationTarget(item, targetLink)}
               >