Podcast Maker: Fix progress modals, research JSON, header stepper, voice/podcastMode chips

frontend/src/components/PodcastMaker/ui/GlassyCard.tsx

@@ -1,8 +1,36 @@
 import React from "react";
-import { motion } from "framer-motion";
-import { Paper, alpha } from "@mui/material";
+import { Paper, SxProps, Theme } from "@mui/material";
 
-export const GlassyCard = motion.create(Paper);
+interface GlassyCardProps {
+  children?: React.ReactNode;
+  sx?: SxProps<Theme>;
+  onClick?: () => void;
+  [key: string]: any; // Allow other props for framer-motion
+}
+
+export const GlassyCard: React.FC<GlassyCardProps> = ({ children, sx, ...props }) => {
+  return (
+    <Paper 
+      sx={{ 
+        borderRadius: 3, 
+        border: "1px solid rgba(15, 23, 42, 0.06)", 
+        background: "#ffffff", 
+        p: 3, 
+        boxShadow: "0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04)", 
+        color: "#0f172a",
+        transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+        "&:hover": {
+          boxShadow: "0 4px 6px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06)",
+          borderColor: "rgba(15, 23, 42, 0.1)",
+        },
+        ...sx 
+      }}
+      {...props}
+    >
+      {children}
+    </Paper>
+  );
+};
 
 export const glassyCardSx = {
   borderRadius: 3,