fix: use theme callback in sx to force Alert icon/text color to primary.main; add backdrop-filter + shadow

client/src/shared/ui/NotificationStack/NotificationStack.tsx

@@ -31,20 +31,23 @@ export function NotificationStack() {
             severity={n.type}
             variant="standard"
             onClose={() => dismissNotification(n.id)}
-            sx={{
+            sx={(theme) => ({
               width: '100%',
               minWidth: 360,
               maxWidth: 440,
               px: 2,
               py: 1.5,
               alignItems: 'center',
+              color: `${theme.palette.primary.main} !important`,
               boxShadow: '0 4px 16px rgba(0,0,0,0.08)',
+              WebkitBackdropFilter: 'blur(8px)',
               backdropFilter: 'blur(8px)',
               '& .MuiAlert-icon': {
                 py: 0.5,
                 mr: 1.5,
                 display: 'flex',
                 alignItems: 'center',
+                color: `${theme.palette.primary.main} !important`,
               },
               '& .MuiAlert-message': {
                 py: 0.5,
@@ -60,7 +63,7 @@ export function NotificationStack() {
                 alignItems: 'center',
                 gap: 1,
               },
-            }}
+            })}
             action={
               <>
                 {n.actionLabel && n.actionPath && (
@@ -87,11 +90,7 @@ export function NotificationStack() {
                     {n.actionLabel}
                   </Button>
                 )}
-                <IconButton
-                  size="small"
-                  onClick={() => dismissNotification(n.id)}
-                  sx={{ color: 'primary.main' }}
-                >
+                <IconButton size="small" onClick={() => dismissNotification(n.id)} sx={{ color: 'primary.main' }}>
                   <CloseIcon fontSize="small" />
                 </IconButton>
               </>