1

src/components/custom-world-home/CustomWorldCreationHub.tsx

@@ -21,7 +21,7 @@ type CustomWorldCreationHubProps = {
 
 function EmptyState({ title }: { title: string }) {
   return (
-    <div className="flex min-h-[16rem] flex-col items-center justify-center rounded-[1.8rem] border border-white/8 bg-white/5 px-6 py-8 text-center">
+    <div className="platform-remap-surface flex min-h-[16rem] flex-col items-center justify-center rounded-[1.8rem] border border-white/8 bg-white/5 px-6 py-8 text-center">
       <div className="text-lg font-semibold text-white">{title}</div>
     </div>
   );
@@ -56,7 +56,13 @@ export function CustomWorldCreationHub({
       className="flex h-full min-h-0 flex-col overflow-y-auto overscroll-y-contain pr-1 pb-[max(1rem,env(safe-area-inset-bottom))]"
       style={{ WebkitOverflowScrolling: 'touch' }}
     >
-      <div className="sticky top-0 z-20 -mx-3 bg-[linear-gradient(180deg,rgba(10,12,18,0.96),rgba(10,12,18,0.88),rgba(10,12,18,0))] px-3 pb-4 pt-1 sm:static sm:mx-0 sm:bg-none sm:px-0 sm:pb-5 sm:pt-0">
+      <div
+        className="platform-remap-surface sticky top-0 z-20 -mx-3 px-3 pb-4 pt-1 sm:static sm:mx-0 sm:bg-none sm:px-0 sm:pb-5 sm:pt-0"
+        style={{
+          background:
+            'linear-gradient(180deg, var(--platform-modal-fill), transparent)',
+        }}
+      >
         <div className="flex items-start justify-between gap-3">
           <div>
             <button

src/components/custom-world-home/CustomWorldCreationLauncherModal.tsx

@@ -42,8 +42,8 @@ export function CustomWorldCreationLauncherModal({
   const unansweredQuestions = questions.filter((question) => !question.answer?.trim());
 
   return (
-    <div className="fixed inset-0 z-[90] flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm">
-      <div className="flex max-h-[92vh] w-full max-w-2xl flex-col overflow-hidden rounded-[2rem] border border-white/10 bg-[#11161f] shadow-[0_30px_90px_rgba(0,0,0,0.6)]">
+    <div className="platform-overlay fixed inset-0 z-[90] flex items-center justify-center p-4 backdrop-blur-sm">
+      <div className="platform-modal-shell platform-remap-surface flex max-h-[92vh] w-full max-w-2xl flex-col overflow-hidden rounded-[2rem] shadow-[0_30px_90px_rgba(0,0,0,0.6)]">
         <div className="flex items-center justify-between border-b border-white/10 px-5 py-4">
           <div>
             <div className="text-base font-semibold text-white">

src/components/custom-world-home/CustomWorldWorkCard.tsx

@@ -1,4 +1,5 @@
 import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
+import { CustomWorldCoverArtwork } from '../CustomWorldCoverArtwork';
 import { getNineSliceStyle, UI_CHROME } from '../../uiAssets';
 
 function formatUpdatedAt(value: string) {
@@ -37,15 +38,14 @@ export function CustomWorldWorkCard({
         paddingY: 15,
       })}
     >
-      {item.coverImageSrc ? (
-        <img
-          src={item.coverImageSrc}
-          alt={item.title}
-          className="absolute inset-0 h-full w-full object-cover opacity-20"
-          style={{ imageRendering: 'pixelated' }}
-        />
-      ) : null}
-      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(8,10,14,0.12),rgba(8,10,14,0.82))]" />
+      <CustomWorldCoverArtwork
+        imageSrc={item.coverImageSrc}
+        title={item.title}
+        fallbackLabel={item.title.slice(0, 4) || '封面'}
+        renderMode={item.coverRenderMode}
+        characterImageSrcs={item.coverCharacterImageSrcs}
+        className="absolute inset-0"
+      />
       <div className="relative z-10 flex h-full min-h-[12rem] flex-col">
         <div className="flex items-start justify-between gap-3">
           <div className="flex flex-wrap gap-2">

src/components/custom-world-home/CustomWorldWorkTabs.tsx

@@ -23,7 +23,7 @@ export function CustomWorldWorkTabs({
   onChange,
 }: CustomWorldWorkTabsProps) {
   return (
-    <div className="flex items-center gap-2 overflow-x-auto pb-1">
+    <div className="platform-remap-surface flex items-center gap-2 overflow-x-auto pb-1">
       {FILTER_OPTIONS.map((option) => {
         const count =
           option.id === 'draft'