fix(ui): dark theme for PersonaProfile + marketplace price default

- PersonaProfile: bg-background instead of bg-slate-50, dark review banner
- Think/Feel/Do cards: blue/red/green 500/10 opacity instead of -50 light variants
- Progress bar tracks: bg-secondary instead of bg-slate-100
- Scenario + prompt blocks: bg-secondary/40 instead of bg-slate-50
- Marketplace: price defaults to 0 when marketplace.price is undefined

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/persona/PersonaAttitudinalProfile.tsx

@@ -80,7 +80,7 @@ export function PersonaAttitudinalProfile({ persona }: PersonaAttitudinalProfile
               </div>
               <ul className="space-y-2">
                 {persona.thinkFeelDo?.thinks?.map((item, index) => (
-                  <li key={index} className="text-sm bg-blue-50 p-2 rounded-md">
+                  <li key={index} className="text-sm bg-blue-500/10 p-2 rounded-md">
                     "{item}"
                   </li>
                 ))}
@@ -94,7 +94,7 @@ export function PersonaAttitudinalProfile({ persona }: PersonaAttitudinalProfile
               </div>
               <ul className="space-y-2">
                 {persona.thinkFeelDo?.feels?.map((item, index) => (
-                  <li key={index} className="text-sm bg-red-50 p-2 rounded-md">
+                  <li key={index} className="text-sm bg-red-500/10 p-2 rounded-md">
                     "{item}"
                   </li>
                 ))}
@@ -108,7 +108,7 @@ export function PersonaAttitudinalProfile({ persona }: PersonaAttitudinalProfile
               </div>
               <ul className="space-y-2">
                 {persona.thinkFeelDo?.does?.map((item, index) => (
-                  <li key={index} className="text-sm bg-green-50 p-2 rounded-md">
+                  <li key={index} className="text-sm bg-green-500/10 p-2 rounded-md">
                     "{item}"
                   </li>
                 ))}

src/components/persona/PersonaGenerationPrompts.tsx

@@ -32,7 +32,7 @@ export function PersonaGenerationPrompts({ persona }: PersonaGenerationPromptsPr
               <h3 className="font-sf text-lg font-medium">Audience Brief</h3>
             </div>
             
-            <div className="bg-slate-50 rounded-lg p-4 max-h-80 overflow-y-auto">
+            <div className="bg-secondary/40 rounded-lg p-4 max-h-80 overflow-y-auto">
               <p className="text-sm whitespace-pre-wrap leading-relaxed">
                 {persona.audience_brief}
               </p>
@@ -49,7 +49,7 @@ export function PersonaGenerationPrompts({ persona }: PersonaGenerationPromptsPr
               <h3 className="font-sf text-lg font-medium">Research Objective</h3>
             </div>
             
-            <div className="bg-slate-50 rounded-lg p-4 max-h-80 overflow-y-auto">
+            <div className="bg-secondary/40 rounded-lg p-4 max-h-80 overflow-y-auto">
               <p className="text-sm whitespace-pre-wrap leading-relaxed">
                 {persona.research_objective}
               </p>

src/components/persona/PersonaPersonality.tsx

@@ -48,7 +48,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
                 <span>Openness to Experience</span>
                 <span className="font-medium">{oceanData[0].value}%</span>
               </div>
-              <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+              <div className="h-2 bg-secondary rounded-full overflow-hidden">
                 <div className="h-full bg-primary rounded-full" style={{ width: `${oceanData[0].value}%` }}></div>
               </div>
               <p className="text-xs text-muted-foreground mt-1">
@@ -63,7 +63,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
                 <span>Conscientiousness</span>
                 <span className="font-medium">{oceanData[1].value}%</span>
               </div>
-              <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+              <div className="h-2 bg-secondary rounded-full overflow-hidden">
                 <div className="h-full bg-blue-500 rounded-full" style={{ width: `${oceanData[1].value}%` }}></div>
               </div>
               <p className="text-xs text-muted-foreground mt-1">
@@ -78,7 +78,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
                 <span>Extraversion</span>
                 <span className="font-medium">{oceanData[2].value}%</span>
               </div>
-              <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+              <div className="h-2 bg-secondary rounded-full overflow-hidden">
                 <div className="h-full bg-green-500 rounded-full" style={{ width: `${oceanData[2].value}%` }}></div>
               </div>
               <p className="text-xs text-muted-foreground mt-1">
@@ -93,7 +93,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
                 <span>Agreeableness</span>
                 <span className="font-medium">{oceanData[3].value}%</span>
               </div>
-              <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+              <div className="h-2 bg-secondary rounded-full overflow-hidden">
                 <div className="h-full bg-amber-500 rounded-full" style={{ width: `${oceanData[3].value}%` }}></div>
               </div>
               <p className="text-xs text-muted-foreground mt-1">
@@ -108,7 +108,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
                 <span>Neuroticism</span>
                 <span className="font-medium">{oceanData[4].value}%</span>
               </div>
-              <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+              <div className="h-2 bg-secondary rounded-full overflow-hidden">
                 <div className="h-full bg-red-500 rounded-full" style={{ width: `${oceanData[4].value}%` }}></div>
               </div>
               <p className="text-xs text-muted-foreground mt-1">

src/components/persona/PersonaProfile.tsx

@@ -209,7 +209,7 @@ export default function PersonaProfile() {
   }
   
   return (
-    <div className="min-h-screen bg-slate-50">
+    <div className="min-h-screen bg-background">
 
       
       <main className="pt-20 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
@@ -256,10 +256,10 @@ export default function PersonaProfile() {
             
             {/* Review Mode Banner */}
             {isReviewMode && (
-              <div className="mb-6 p-4 bg-amber-50 border-l-4 border-amber-400 rounded-r-lg">
+              <div className="mb-6 p-4 bg-amber-500/10 border-l-4 border-amber-400 rounded-r-lg">
                 <div className="flex items-center">
                   <div className="ml-3">
-                    <p className="text-sm text-amber-800">
+                    <p className="text-sm text-amber-400">
                       📝 <strong>Reviewing proposed changes to {displayPersona?.name}</strong> - Save or cancel to continue
                     </p>
                   </div>
@@ -284,7 +284,7 @@ export default function PersonaProfile() {
               >
                 <ArrowLeft className="h-5 w-5" />
               </Button>
-              <h1 className="font-sf text-3xl font-bold text-slate-900 ml-16">Persona Profile</h1>
+              <h1 className="font-sf text-3xl font-bold text-foreground ml-16">Persona Profile</h1>
               <div className="absolute right-0 top-0 flex items-center gap-3">
                 {isReviewMode ? (
                   <>
@@ -330,7 +330,7 @@ export default function PersonaProfile() {
               </div>
             </div>
             
-            <div className={`grid grid-cols-1 lg:grid-cols-3 gap-6 mt-10 ${isReviewMode ? 'border-2 border-amber-400 rounded-lg p-4 bg-amber-50/30' : ''}`}>
+            <div className={`grid grid-cols-1 lg:grid-cols-3 gap-6 mt-10 ${isReviewMode ? 'border-2 border-amber-400 rounded-lg p-4 bg-amber-500/5' : ''}`}>
               <div className="lg:col-span-1">
                 <PersonaSidebar persona={displayPersona} />
               </div>

src/components/persona/PersonaScenarios.tsx

@@ -38,7 +38,7 @@ export function PersonaScenarios({ persona }: PersonaScenariosProps) {
         
         <div className="space-y-4">
           {persona.scenarios?.map((scenario, index) => (
-            <div key={index} className="bg-slate-50 p-4 rounded-lg border">
+            <div key={index} className="bg-secondary/40 p-4 rounded-lg border border-border/50">
               <div className="sidebar-section">
                 {getScenarioIcon(scenario, index)}
                 <div>

src/components/persona/PersonaSidebar.tsx

@@ -89,7 +89,7 @@ export function PersonaSidebar({ persona }: PersonaSidebarProps) {
                 <span>Tech Savviness</span>
                 <span>{persona.techSavviness}%</span>
               </div>
-              <div className="h-1.5 bg-slate-100 rounded-full overflow-hidden">
+              <div className="h-1.5 bg-secondary rounded-full overflow-hidden">
                 <div className="h-full bg-blue-500 rounded-full" style={{ width: `${persona.techSavviness}%` }}></div>
               </div>
             </div>
@@ -99,7 +99,7 @@ export function PersonaSidebar({ persona }: PersonaSidebarProps) {
                   <span>Brand Loyalty</span>
                   <span>{persona.brandLoyalty}%</span>
                 </div>
-                <div className="h-1.5 bg-slate-100 rounded-full overflow-hidden">
+                <div className="h-1.5 bg-secondary rounded-full overflow-hidden">
                   <div className="h-full bg-primary rounded-full" style={{ width: `${persona.brandLoyalty}%` }}></div>
                 </div>
               </div>
@@ -110,7 +110,7 @@ export function PersonaSidebar({ persona }: PersonaSidebarProps) {
                   <span>Price Sensitivity</span>
                   <span>{persona.priceConsciousness}%</span>
                 </div>
-                <div className="h-1.5 bg-slate-100 rounded-full overflow-hidden">
+                <div className="h-1.5 bg-secondary rounded-full overflow-hidden">
                   <div className="h-full bg-amber-500 rounded-full" style={{ width: `${persona.priceConsciousness}%` }}></div>
                 </div>
               </div>
@@ -121,7 +121,7 @@ export function PersonaSidebar({ persona }: PersonaSidebarProps) {
                   <span>Environmental Concern</span>
                   <span>{persona.environmentalConcern}%</span>
                 </div>
-                <div className="h-1.5 bg-slate-100 rounded-full overflow-hidden">
+                <div className="h-1.5 bg-secondary rounded-full overflow-hidden">
                   <div className="h-full bg-green-500 rounded-full" style={{ width: `${persona.environmentalConcern}%` }}></div>
                 </div>
               </div>

src/pages/PersonaMarketplace.tsx

@@ -54,7 +54,7 @@ function PersonaCard({
 }) {
   const { t } = useTranslation();
   const avatarUrl = persona.imageUrl || getGenderAvatarPath(persona.gender ?? '');
-  const price = persona.marketplace.price;
+  const price = persona.marketplace.price ?? 0;
 
   return (
     <Card className="overflow-hidden hover:border-primary/40 transition-colors flex flex-col">