diff --git a/job-tracker-ui/src/components/GradientButton.tsx b/job-tracker-ui/src/components/GradientButton.tsx
index 7876eed..e5c60e4 100644
--- a/job-tracker-ui/src/components/GradientButton.tsx
+++ b/job-tracker-ui/src/components/GradientButton.tsx
@@ -4,6 +4,14 @@ import Button, { ButtonProps } from "@mui/material/Button";
 
 import { GRADIENT_CTA } from "../theme";
 
+// Static, not derived from theme.vars.customShadows: an inline sx callback always executes
+// against whatever theme is in context, including MUI's bare default theme when a component
+// renders without this app's ThemeProvider (every test in this repo does exactly that -- no
+// test wraps components in one), and the default theme has no `.vars`. theme.components
+// styleOverrides (e.g. MuiCard) don't have this problem since they only run when this app's
+// real theme is actually provided, but inline sx isn't gated that way.
+const GRADIENT_SHADOW = "0px 4px 14px -4px rgba(99,102,241,0.45)";
+
 /**
  * The mockup's gradient AI/primary-action pill ("Tailor my CV for this role", "See the
  * interface tour"). Reserve this for the single most important AI-assist or hero action on a
@@ -17,14 +25,14 @@ export default function GradientButton({ sx, disabled, ...props }: ButtonProps)
       disableElevation
       disabled={disabled}
       sx={[
-        (theme: any) => ({
+        {
           background: disabled ? undefined : GRADIENT_CTA,
           color: disabled ? undefined : "#fff",
-          boxShadow: disabled ? undefined : theme.vars.customShadows.gradientButton,
+          boxShadow: disabled ? undefined : GRADIENT_SHADOW,
           "&:hover": disabled
             ? undefined
-            : { background: GRADIENT_CTA, filter: "brightness(1.06)", boxShadow: theme.vars.customShadows.gradientButton },
-        }),
+            : { background: GRADIENT_CTA, filter: "brightness(1.06)", boxShadow: GRADIENT_SHADOW },
+        },
         ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
       ]}
       {...props}
diff --git a/job-tracker-ui/src/components/JobDetailsDialog.tsx b/job-tracker-ui/src/components/JobDetailsDialog.tsx
index c3d5877..4dfbbb5 100644
--- a/job-tracker-ui/src/components/JobDetailsDialog.tsx
+++ b/job-tracker-ui/src/components/JobDetailsDialog.tsx
@@ -29,6 +29,7 @@ import { emptyTailoredCvDraft, joinLines, normalizeTailoredCvDraft, splitLines }
 import Correspondence from "./Correspondence";
 import Attachments from "./Attachments";
 import JobFlowBar from "./JobFlowBar";
+import GradientButton from "./GradientButton";
 import { useI18n } from "../i18n/I18nProvider";
 import { useJobWorkspaceBaseData } from "./job-workspace/useJobWorkspaceBaseData";
 import { useWorkspaceTabCache } from "./job-workspace/useWorkspaceTabCache";
@@ -414,7 +415,7 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
   const showAiAttachmentPicker = tab >= 3 && tab <= 7 && jobAttachments.length > 0;
 
   const attachmentPicker = showAiAttachmentPicker ? (
-    <Box sx={{ mb: 2, p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+    <Box sx={{ mb: 2, p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
       <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
         <Typography variant="caption" sx={{ color: "text.secondary" }}>{t("jobDetailsAttachmentContextPicker")}</Typography>
         <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
@@ -620,22 +621,37 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
 
   return (
     <Dialog open={open} onClose={onClose} fullWidth maxWidth="lg">
-      <DialogTitle sx={{ pb: 1 }}>
+      <DialogTitle sx={{ pb: 1.5 }}>
         <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
           <Box>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>{t("jobTableOpen")}</Typography>
-            <Typography variant="h6">{title}</Typography>
+            <Typography variant="overline" sx={{ color: "text.secondary", fontWeight: 700 }}>{t("jobTableOpen")}</Typography>
+            <Typography variant="h5" sx={{ fontWeight: 800, letterSpacing: "-0.01em" }}>{title}</Typography>
           </Box>
-          {job && <Chip label={job.status} color={statusChipColor(job.status)} size="small" />}
+          {job && <Chip label={job.status} color={statusChipColor(job.status)} sx={{ fontWeight: 700, borderRadius: 2 }} />}
         </Box>
       </DialogTitle>
 
       <DialogContent>
         <JobFlowBar job={job} history={history} />
-        <Box sx={{ mt: 1.5, mb: 2, p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+        <Box
+          sx={{
+            mt: 1.5,
+            mb: 2,
+            p: 2,
+            borderRadius: 4,
+            backgroundColor: "background.paper",
+            boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)",
+          }}
+        >
           <Typography variant="body2" sx={{ color: "text.secondary" }}>{summaryFirstText}</Typography>
         </Box>
-        <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }} variant="scrollable" allowScrollButtonsMobile>
+        <Tabs
+          value={tab}
+          onChange={(_, v) => setTab(v)}
+          sx={{ mb: 2, "& .MuiTab-root": { fontWeight: 600, textTransform: "none", minHeight: 44 } }}
+          variant="scrollable"
+          allowScrollButtonsMobile
+        >
           <Tab label={t("jobTableOverview")} />
           <Tab label={t("jobDetailsTabCorrespondence")} />
           <Tab label={t("jobDetailsTabAttachments")} />
@@ -672,8 +688,8 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
         {tab === 0 && (
           <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 }}>
             <Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
-              <Typography variant="overline">{t("jobDetailsStrategySnapshot")}</Typography>
-              <Button size="small" variant="outlined" disabled={loadingStrategySnapshot} onClick={async () => {
+              <Typography variant="overline" sx={{ fontWeight: 700 }}>{t("jobDetailsStrategySnapshot")}</Typography>
+              <GradientButton size="small" disabled={loadingStrategySnapshot} onClick={async () => {
                 if (!jobId) return;
                 setLoadingStrategySnapshot(true);
                 try {
@@ -690,10 +706,10 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
                 } finally {
                   setLoadingStrategySnapshot(false);
                 }
-              }}>{loadingStrategySnapshot ? t("jobDetailsRefreshing") : t("jobDetailsGenerateStrategySnapshot")}</Button>
+              }}>{loadingStrategySnapshot ? t("jobDetailsRefreshing") : t("jobDetailsGenerateStrategySnapshot")}</GradientButton>
             </Box>
             {candidateFit || focusPlan ? (
-              <Box sx={{ gridColumn: "1 / -1", p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+              <Box sx={{ gridColumn: "1 / -1", p: 2, borderRadius: 4, backgroundColor: "background.paper", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
                 <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center", mb: 1 }}>
                   {candidateFit ? <Chip size="small" color={candidateFit.matchScore >= 75 ? "success" : candidateFit.matchScore >= 55 ? "warning" : "default"} label={t("jobDetailsMatchPercent", { count: candidateFit.matchScore })} /> : null}
                   {candidateFit?.fitLevel ? <Chip size="small" variant="outlined" label={candidateFit.fitLevel} /> : null}
@@ -949,13 +965,13 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
                   </Box>
 
                   <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-                    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+                    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.paper" }}>
                       <Typography variant="overline">Rendered CV snapshot</Typography>
                       <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>This plain-text snapshot stays deterministic and is what the job stores immediately after saving the draft.</Typography>
                       <TextField value={tailoredCvDraft.renderedText} multiline minRows={12} fullWidth InputProps={{ readOnly: true }} />
                       <Typography variant="caption" sx={{ color: "text.secondary", mt: 1, display: "block" }}>{t("jobDetailsLastUpdated", { value: job?.tailoredCvUpdatedAt ? new Date(job.tailoredCvUpdatedAt).toLocaleString() : t("jobDetailsNotSavedYet") })}</Typography>
                     </Box>
-                    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+                    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.paper" }}>
                       <Typography variant="overline">PDF-style preview</Typography>
                       <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>Preview and PDF export use the same HTML template contract. Accent color and photo settings apply here.</Typography>
                       {tailoredCvPreview ? (
@@ -964,7 +980,7 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
                         <Typography sx={{ color: "text.secondary" }}>Build the PDF layout preview to inspect the ATS template before downloading.</Typography>
                       )}
                     </Box>
-                    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+                    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.paper" }}>
                       <Typography variant="overline">Saved job material</Typography>
                       <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>Saving the tailored draft updates the job-scoped CV text without touching your master profile.</Typography>
                       <Typography variant="body2"><strong>Tailored CV:</strong> {(job?.tailoredCvText ?? "").trim() ? "Saved on this job" : "Not saved yet"}</Typography>
@@ -1045,7 +1061,7 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
                   statusLabel={recruiterMessageStatus.label}
                   statusColor={recruiterMessageStatus.color}
                 />
-                <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+                <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.paper" }}>
                   <Typography variant="overline">Saved working material</Typography>
                   <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>These saved copies are what follow-up drafting and later slices can trust and reuse.</Typography>
                   <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
@@ -1067,7 +1083,7 @@ export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0,
           <Box>
             {loadingDraft ? <Box sx={{ py: 4, display: "flex", justifyContent: "center" }}><CircularProgress size={28} /></Box> : followUpDraft ? (
               <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-                <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+                <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
                   <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
                     <Typography variant="overline">Follow-up context</Typography>
                     <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
@@ -1214,7 +1230,7 @@ function MatchScoreCard({ score, loading }: { score: MatchScore | null; loading:
 
   if (loading && !score) {
     return (
-      <Box sx={{ p: 1.5, mb: 2, borderRadius: 3, border: "1px solid", borderColor: "divider", display: "flex", alignItems: "center", gap: 1.5 }}>
+      <Box sx={{ p: 1.5, mb: 2, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", display: "flex", alignItems: "center", gap: 1.5 }}>
         <CircularProgress size={18} />
         <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("matchScoreLoading")}</Typography>
       </Box>
@@ -1228,7 +1244,7 @@ function MatchScoreCard({ score, loading }: { score: MatchScore | null; loading:
   const bandLabel = t(`matchScoreBand_${score.band}` as any) || score.band;
 
   return (
-    <Box sx={{ p: 1.75, mb: 2, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+    <Box sx={{ p: 1.75, mb: 2, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
       <Box sx={{ display: "flex", gap: 2.5, alignItems: "center", flexWrap: "wrap", mb: 1.5 }}>
         {score.hasEnoughSignal ? (
           <Box role="img" aria-label={`${t("matchScoreTitle")}: ${score.score}%`} sx={{ position: "relative", width: 92, height: 92, flexShrink: 0 }}>
@@ -1314,7 +1330,7 @@ function ListCard({ title, items, subtitle }: { title: string; items: string[];
   const { t } = useI18n();
 
   return (
-    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
       <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
         <Box>
           <Typography variant="overline">{title}</Typography>
@@ -1333,7 +1349,7 @@ function WorkspaceDraftCard({ title, value, onChange, statusLabel, statusColor }
   const { t } = useI18n();
 
   return (
-    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
       <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
         <Typography variant="overline">{title}</Typography>
         <Box sx={{ display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" }}>
@@ -1355,7 +1371,7 @@ function DraftCard({ title, content, onSave, saving }: { title: string; content:
   }, [content]);
 
   return (
-    <Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
+    <Box sx={{ p: 1.5, borderRadius: 3, boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.default" }}>
       <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
         <Typography variant="overline">{title}</Typography>
         <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>