sync: update from private repo (d8074a7)

ui/src/components/embed/AmazonProductsCard.tsx

@@ -29,7 +29,7 @@ export function AmazonProductsCard({ data, onExpand }: { data: AmazonData; onExp
             href={p.productUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="bg-white border border-slate-200 rounded-lg p-2 cursor-pointer hover:border-blue-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
+            className="bg-canvas border border-slate-200 rounded-lg p-2 cursor-pointer hover:border-blue-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
             style={{ minWidth: 160, maxWidth: 160 }}
           >
             <div className="w-full h-20 bg-slate-100 rounded flex items-center justify-center mb-2 overflow-hidden">

ui/src/components/embed/AmazonProductsDetail.tsx

@@ -25,7 +25,7 @@ export function AmazonProductsDetail({ data }: { data: AmazonData }) {
 
       <div className="space-y-6">
         {products.map((p, i) => (
-          <div key={p.asin} className="bg-white border border-slate-200 rounded-xl p-4">
+          <div key={p.asin} className="bg-canvas border border-slate-200 rounded-xl p-4">
             <div className="flex gap-4 flex-col sm:flex-row">
               {/* Product image */}
               <div className="w-full sm:w-40 h-40 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">

ui/src/components/embed/EmbedModal.tsx

@@ -36,7 +36,7 @@ export function EmbedModal({ open, onClose, children }: EmbedModalProps) {
       {/* Modal content */}
       <div
         className="
-          relative bg-white overflow-y-auto
+          relative bg-surface overflow-y-auto
           w-full h-full
           sm:w-auto sm:h-auto sm:max-w-[720px] sm:max-h-[85vh] sm:min-w-[400px]
           sm:rounded-2xl sm:shadow-2xl sm:m-4

ui/src/components/embed/MapPlacesCard.tsx

@@ -17,7 +17,7 @@ export function MapPlacesCard({ data, onExpand }: { data: MapData; onExpand: ()
         {places.slice(0, 5).map((p, i) => (
           <div
             key={`${p.lat}-${p.lon}`}
-            className="flex items-start gap-2 bg-white border border-slate-200 rounded-lg px-3 py-2"
+            className="flex items-start gap-2 bg-canvas border border-slate-200 rounded-lg px-3 py-2"
           >
             <span className="text-slate-400 font-mono flex-shrink-0" style={{ fontSize: 11 }}>{i + 1}</span>
             <div className="min-w-0">

ui/src/components/embed/MapPlacesDetail.tsx

@@ -98,7 +98,7 @@ export function MapPlacesDetail({ data }: { data: MapData }) {
       {/* Place list */}
       <div className="space-y-4">
         {places.map((p, i) => (
-          <div key={`${p.lat}-${p.lon}`} className="bg-white border border-slate-200 rounded-xl p-4">
+          <div key={`${p.lat}-${p.lon}`} className="bg-canvas border border-slate-200 rounded-xl p-4">
             <div className="text-slate-400 mb-1" style={{ fontSize: 13 }}>#{i + 1}</div>
             <h3 className="text-sm font-semibold text-slate-800 leading-snug mb-2">{p.name}</h3>
 

ui/src/components/embed/XPostsCard.tsx

@@ -26,7 +26,7 @@ export function XPostsCard({ data, onExpand }: { data: XPostData; onExpand: () =
             href={p.postUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-start gap-2 bg-white border border-slate-200 rounded-lg px-3 py-2 no-underline hover:border-blue-300 hover:shadow-sm transition-all"
+            className="flex items-start gap-2 bg-canvas border border-slate-200 rounded-lg px-3 py-2 no-underline hover:border-blue-300 hover:shadow-sm transition-all"
           >
             <img
               src={p.authorImageUrl}

ui/src/components/embed/XPostsDetail.tsx

@@ -28,7 +28,7 @@ export function XPostsDetail({ data }: { data: XPostData }) {
 
       <div className="space-y-4">
         {posts.map((p) => (
-          <div key={p.id} className="bg-white border border-slate-200 rounded-xl p-4">
+          <div key={p.id} className="bg-canvas border border-slate-200 rounded-xl p-4">
             {/* Author header */}
             <div className="flex items-center gap-3 mb-3">
               <img

ui/src/components/embed/YouTubeVideosCard.tsx

@@ -20,7 +20,7 @@ export function YouTubeVideosCard({ data, onExpand }: { data: YouTubeData; onExp
             href={v.videoUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="bg-white border border-slate-200 rounded-lg overflow-hidden cursor-pointer hover:border-red-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
+            className="bg-canvas border border-slate-200 rounded-lg overflow-hidden cursor-pointer hover:border-red-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
             style={{ minWidth: 200, maxWidth: 200 }}
           >
             <div className="relative">

ui/src/components/embed/YouTubeVideosDetail.tsx

@@ -11,7 +11,7 @@ export function YouTubeVideosDetail({ data }: { data: YouTubeData }) {
 
       <div className="space-y-6">
         {videos.map((v, i) => (
-          <div key={v.videoId} className="bg-white border border-slate-200 rounded-xl p-4">
+          <div key={v.videoId} className="bg-canvas border border-slate-200 rounded-xl p-4">
             <div className="flex gap-4 flex-col sm:flex-row">
               {/* Thumbnail */}
               <a