pxengine 0.1.60 → 0.1.61

package/config/tailwind-preset.js

@@ -121,6 +121,10 @@ module.exports = {
         interactionBg: "var(--interaction-bg)",
         purpleLight: "var(--purpleLight)",
         purpleText2: "var(--purple-text-2)",
+        gold: "var(--gold)",
+        cardSurface: "var(--cardSurface)",
+        cardText: "var(--cardText)",
+        cardBorder: "var(--cardBorder)",
         green100: "#dcfce7",
         // Landing page colors
         landingDarkestBlue: "var(--landing-darkest-blue)",

package/dist/index.cjs

@@ -34330,19 +34330,19 @@ var EditableField = import_react54.default.memo(
       "div",
       {
         className: cn(
-          "relative z-10 group flex flex-col gap-2 p-3 bg-paperBackground rounded-md mb-8",
+          "relative z-10 group flex flex-col gap-1.5 p-2.5 bg-black border border-cardBorder rounded-lg mb-4",
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "flex justify-between items-start mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "w-full flex justify-between items-center flex-wrap gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "flex justify-between items-start mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "w-full flex justify-between items-center flex-wrap gap-1.5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               "h4",
               {
-                className: "px-[6px] py-[2px] tracking-widest bg-purple200 hover:bg-purple200 text-purpleText text-xs font-normal rounded-[4px]",
+                className: "px-1.5 py-px tracking-widest border border-cardBorder text-gold text-[9px] font-medium uppercase rounded-[3px]",
                 children: label
               }
             ),
-            isEditingProp ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center gap-3", children: [
+            isEditingProp ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
                 "button",
                 {
@@ -34353,7 +34353,7 @@ var EditableField = import_react54.default.memo(
                   className: "text-gray-500 hover:text-gray-700 transition-colors",
                   disabled: isSaving,
                   title: "Cancel",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(X, { className: "h-5 w-5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(X, { className: "h-4 w-4" })
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
@@ -34366,37 +34366,31 @@ var EditableField = import_react54.default.memo(
                   className: "text-gray600 hover:text-gray600 transition-colors",
                   disabled: isSaving,
                   title: "Save",
-                  children: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(LoaderCircle, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Save, { className: "h-5 w-5" })
+                  children: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Save, { className: "h-4 w-4" })
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: cn(
-              "inline-flex items-center gap-1.5 text-[0.75rem] font-medium px-2 py-0.5 rounded-full",
-              isChanged ? "bg-yellow100 text-warningcolor" : "text-green-600 dark:text-green-500 bg-green-500/5"
-            ), children: [
-              isChanged ? "Changed by you" : "Suggested by an Agent",
-              isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                "span",
-                {
-                  className: "flex items-center gap-1 cursor-pointer text-foreground hover:text-green-700 transition-colors ml-1 pl-1.5 ",
-                  onClick: (e) => {
-                    if (shouldStopPropagation !== false) {
-                      e.stopPropagation();
-                    }
-                    onEdit?.();
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(SquarePen, { className: "h-5 w-5" })
-                }
-              )
-            ] })
+            ] }) : isLatestMessage ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+              "button",
+              {
+                className: "p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-gray300 transition-colors",
+                onClick: (e) => {
+                  if (shouldStopPropagation !== false) {
+                    e.stopPropagation();
+                  }
+                  onEdit?.();
+                },
+                title: "Edit",
+                children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(SquarePen, { className: "h-3.5 w-3.5" })
+              }
+            ) : null
           ] }) }),
           isEditingProp ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "flex flex-col gap-3", children: renderInput() }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "div",
             {
               className: cn(
-                "relative flex items-start justify-between rounded-lg px-3 py-2",
-                "text-base text-foreground/90 font-medium leading-relaxed"
+                "relative flex items-start justify-between rounded-md px-2 py-1.5",
+                "text-sm text-cardText font-medium leading-relaxed"
               ),
-              style: { fontFamily: "Noto Sans, sans-serif" },
               children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "flex-1", children: formattedValue() })
             }
           )
@@ -34607,7 +34601,7 @@ var FormCard = import_react56.default.memo(
       "div",
       {
         className: cn(
-          "relative w-full rounded-[20px] bg-paperBackground dark:bg-gray100 border border-gray400 shadow-lg overflow-hidden mb-6 font-noto",
+          "relative w-full rounded-lg bg-cardSurface border border-gray400 shadow-sm overflow-hidden mb-4",
           className
         ),
         children: [
@@ -34620,18 +34614,18 @@ var FormCard = import_react56.default.memo(
               children: copied ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Check, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Copy, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "p-6 relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "p-4 relative", children: [
             !hideTitle && title && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
               "h3",
               {
-                className: "text-gray900 dark:text-white mb-12 text-[1rem] font-bold",
+                className: "text-cardText mb-6 text-sm font-semibold",
                 children: title
               }
             ),
             showTimeline && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
               "div",
               {
-                className: "absolute z-0 left-[60px] top-[100px] bottom-[60px] w-[3px]",
+                className: "absolute z-0 left-[48px] top-[70px] bottom-[40px] w-[2px]",
                 style: {
                   background: `
                   radial-gradient(circle closest-side, #3C3D3E 98%, transparent) 50%/2px 5px repeat-y,
@@ -34664,7 +34658,7 @@ var FormCard = import_react56.default.memo(
               field.key
             ))
           ] }),
-          isLatestMessage && onProceed && proceedLabel ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "my-6 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+          isLatestMessage && onProceed && proceedLabel ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "my-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "button",
             {
               onClick: () => {
@@ -34673,14 +34667,10 @@ var FormCard = import_react56.default.memo(
                 }
               },
               className: cn(
-                "px-6 py-2.5 border rounded-full transition-colors text-sm font-medium flex items-center gap-2",
-                "bg-purpleLight dark:bg-purple200 text-purpleText2 dark:text-purpleText border-purpleText1 dark:border-purple100",
-                "hover:bg-purpleText1 dark:hover:bg-purple100 dark:hover:text-white"
+                "px-4 py-1.5 border rounded-lg transition-colors text-xs font-medium",
+                "bg-cardSurface hover:bg-cardSurface/80 text-gold border-cardBorder"
               ),
-              children: [
-                proceedLabel,
-                /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ChevronRight, { className: "w-4 h-4" })
-              ]
+              children: proceedLabel
             }
           ) }) : !isLatestMessage && footer ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "flex justify-end items-center pb-4 pr-4 gap-1 text-green-600 text-sm font-medium", children: footer }) : null
         ]
@@ -37119,7 +37109,7 @@ var CountrySelectEdit = ({
     inputValue.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "flex flex-wrap gap-1.5", children: inputValue.map((countryCode) => /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
       Badge2,
       {
-        className: "flex items-center gap-1 px-2 py-1 bg-grayPill border border-foreground rounded-md text-white text-sm font-grotesk font-medium",
+        className: "flex items-center gap-1 px-2 py-0.5 bg-grayPill border border-gray400 rounded-md text-white text-xs font-medium",
         children: [
           countryCode,
           /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
@@ -37155,7 +37145,7 @@ var CountrySelectDisplay = ({ value }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
       "div",
       {
-        className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-foreground rounded-md text-foreground text-sm font-grotesk font-medium",
+        className: "flex items-center gap-1.5 px-2 py-0.5 bg-grayPill border border-gray400 rounded-md text-foreground text-xs font-medium",
         children: country ? country.name : item
       },
       item
@@ -37204,7 +37194,7 @@ var KeywordBundlesEdit = ({
             /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "flex flex-wrap gap-1.5", children: Array.isArray(bundle.keywords) && bundle.keywords.map((keyword, kIndex) => /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
               "div",
               {
-                className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-white rounded-md text-white text-sm font-medium hover:bg-red-900/40 hover:border-red-500 transition-all cursor-pointer group",
+                className: "flex items-center gap-1.5 px-2 py-0.5 bg-grayPill border border-gray400 rounded-md text-white text-xs font-medium hover:bg-red-900/40 hover:border-red-500 transition-all cursor-pointer group",
                 onClick: () => {
                   const updatedBundles = [...bundles];
                   const currentKeywords = parseKeywords(updatedBundles[bundleIndex].keywords);
@@ -37303,7 +37293,7 @@ var KeywordBundlesDisplay = ({ value }) => {
       /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: deduped.map((keyword) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
         "div",
         {
-          className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-white rounded-md text-white text-sm font-medium",
+          className: "flex items-center gap-1.5 px-2 py-0.5 bg-grayPill border border-gray400 rounded-md text-white text-xs font-medium",
           children: keyword
         },
         keyword
@@ -37374,7 +37364,7 @@ var PlatformSelectDisplay = ({ value }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: displayValues.map((platform) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
     "div",
     {
-      className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-foreground rounded-md text-foreground text-sm font-grotesk font-medium",
+      className: "flex items-center gap-1.5 px-2 py-0.5 bg-grayPill border border-gray400 rounded-md text-foreground text-xs font-medium",
       children: platform
     },
     platform
@@ -37399,7 +37389,7 @@ var StringArrayDisplay = ({ value }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: value.map((item) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
     "div",
     {
-      className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-foreground rounded-md text-foreground text-sm font-grotesk font-medium",
+      className: "flex items-center gap-1.5 px-2 py-0.5 bg-grayPill border border-gray400 rounded-md text-foreground text-xs font-medium",
       children: item
     },
     item
@@ -37558,9 +37548,9 @@ var CampaignSeedCard = import_react64.default.memo(
         onProceed: handleProceed,
         showTimeline: true,
         isLatestMessage: effectiveIsLatest,
-        className: cn("font-noto", className),
-        footer: !effectiveIsLatest && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-[10px] font-semibold py-4 pr-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(CircleCheck, { className: "h-3.5 w-3.5" }),
+        className,
+        footer: !effectiveIsLatest && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex justify-end items-center gap-1 text-green-600 text-[10px] font-semibold py-2 pr-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(CircleCheck, { className: "h-3 w-3" }),
           /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { children: selectionStatus === "agent" ? "Suggested by Agent" : "Selected by you" })
         ] }) : formCardProps.footer
       }
@@ -37725,8 +37715,8 @@ var SearchSpecCard = import_react65.default.memo(
         onProceed: handleProceed,
         isLatestMessage: effectiveIsLatest,
         className,
-        footer: !effectiveIsLatest && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(CircleCheck, { className: "h-4 w-4" }),
+        footer: !effectiveIsLatest && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex justify-end items-center gap-1 text-green-600 text-[10px] font-semibold py-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(CircleCheck, { className: "h-3 w-3" }),
           /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by User" })
         ] }) : formCardProps.footer
       }
@@ -37884,75 +37874,61 @@ var MCQCard = import_react66.default.memo(
       "div",
       {
         className: cn(
-          "p-6 rounded-[20px] border border-gray400 bg-background dark:bg-gray200 font-noto w-full",
+          "p-4 rounded-lg border border-gray400 bg-cardSurface w-full",
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("h4", { className: "font-medium text-foreground px-3 py-1 rounded-md inline-block mb-2", children: question }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "space-y-4", children: optionsEntries.map(([key, label]) => {
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("p", { className: "text-sm text-cardText", children: question }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "space-y-2.5 mb-4", children: optionsEntries.map(([key, label]) => {
             const isSelected = selectedOption === key;
             const isRecommended = key === recommended;
-            return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
               "div",
               {
                 onClick: (e) => handleOptionClick(key, e),
                 className: cn(
-                  "cursor-pointer rounded-xl p-3 transition-colors relative",
-                  "border border-transparent bg-paperBackground",
+                  "cursor-pointer rounded-lg p-3 transition-colors",
+                  "border bg-black",
+                  isSelected ? "border-cardBorder" : "border-gray400",
                   !selectedOption && !isOptionsDisabled && "hover:border-gray500",
                   (isLoading || isOptionsDisabled) && "opacity-50 cursor-not-allowed"
                 ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "absolute top-1/2 left-4 transform -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex items-start gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "mt-0.5 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
                     "div",
                     {
                       className: cn(
-                        "w-5 h-5 rounded-full border flex items-center justify-center transition-colors",
-                        isSelected ? "border-purple100 bg-gray300" : cn(
-                          "border-gray300 bg-background",
-                          !selectedOption && !isOptionsDisabled && "hover:border-purple100"
+                        "w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors",
+                        isSelected ? "border-gold" : cn(
+                          "border-gray500",
+                          !selectedOption && !isOptionsDisabled && "hover:border-gold"
                         )
                       ),
-                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-purple100" })
+                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "w-2 h-2 rounded-full bg-gold" })
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "pl-12", children: [
-                    (isRecommended || isSelected) && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex gap-2 mb-2 flex-wrap", children: [
-                      isRecommended && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "flex text-xs font-semibold", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("p", { className: "bg-greenBackground text-greenText px-2 py-1 rounded-[20px]", children: "Recommended" }) }),
-                      isSelected && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "flex text-xs font-semibold", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-                        "p",
-                        {
-                          className: cn(
-                            "px-2 py-1 rounded-[20px]",
-                            selectedOption === recommended ? "bg-purpleLight text-purpleText2 dark:bg-primary/20 dark:text-primary" : "bg-paperBackground text-primaryDark2 dark:bg-primary/20 dark:text-primary"
-                          ),
-                          children: "Selected by you"
-                        }
-                      ) })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "text-base font-medium text-txtColor", children: label })
+                  /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                    isRecommended && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("p", { className: "text-xs font-semibold text-gold mb-1", children: "Recommended" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("p", { className: "text-sm text-cardText", children: label })
                   ] })
-                ]
+                ] })
               },
               key
             );
-          }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { className: "flex justify-between items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "flex-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-              "button",
-              {
-                onClick: handleProceed,
-                disabled: isContinueDisabled || isLoading || !selectedOption && !recommended,
-                className: cn(
-                  "flex-3 px-4 py-2 border rounded-full text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-                  "bg-purpleLight dark:bg-purple200 hover:bg-purpleText1 dark:hover:bg-purple100 text-purpleText2 dark:text-purpleText border-purpleText1 dark:border-purple-border dark:hover:text-white"
-                ),
-                children: isLoading ? "Sending..." : "Continue"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "flex-1" })
-          ] })
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+            "button",
+            {
+              onClick: handleProceed,
+              disabled: isContinueDisabled || isLoading || !selectedOption && !recommended,
+              className: cn(
+                "px-4 py-1.5 border rounded-lg text-xs font-medium transition-colors",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                "bg-cardSurface hover:bg-cardSurface/80 text-gold border-cardBorder"
+              ),
+              children: isLoading ? "Sending..." : "Continue"
+            }
+          ) })
         ]
       }
     );
@@ -38613,9 +38589,9 @@ var CampaignConceptCard = import_react68.default.memo(
                       idx + 1,
                       "."
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "inline-flex items-center bg-grayPill border border-foreground px-2 py-1 text-foreground text-sm font-grotesk font-medium rounded-md", children: String(label) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-foreground", children: "=" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "inline-flex items-center bg-grayPill border border-foreground px-2 py-1 text-foreground text-sm rounded-md font-grotesk font-medium", children: formatVal(value) })
+                    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "inline-flex items-center bg-black border border-cardBorder px-2 py-0.5 text-cardText text-xs font-medium rounded-md", children: String(label) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-cardText", children: "=" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "inline-flex items-center bg-black border border-cardBorder px-2 py-1 text-cardText text-sm rounded-md font-grotesk font-medium", children: formatVal(value) })
                   ] }, idx);
                 }) });
               }
@@ -38628,9 +38604,9 @@ var CampaignConceptCard = import_react68.default.memo(
                     idx + 1,
                     "."
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "inline-flex items-center bg-grayPill border border-foreground px-2 py-1 text-foreground text-sm font-grotesk font-medium rounded-md", children: formatKey(k) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-foreground", children: "=" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "inline-flex items-center bg-grayPill border border-foreground px-2 py-1 text-foreground text-sm rounded-md font-grotesk font-medium", children: formatVal(v) })
+                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "inline-flex items-center bg-black border border-cardBorder px-2 py-0.5 text-cardText text-xs font-medium rounded-md", children: formatKey(k) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-cardText", children: "=" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "inline-flex items-center bg-black border border-cardBorder px-2 py-1 text-cardText text-sm rounded-md font-grotesk font-medium", children: formatVal(v) })
                 ] }, k)) });
               }
               return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-muted-foreground text-sm", children: String(val) });
@@ -38672,7 +38648,7 @@ var CampaignConceptCard = import_react68.default.memo(
               if (!val)
                 return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
               const displayValue = typeof val === "object" && !Array.isArray(val) ? `${val.min ?? 0}-${val.max ?? 0}` : String(val);
-              return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-foreground text-sm", children: displayValue });
+              return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-cardText text-sm", children: displayValue });
             },
             renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
               Input,
@@ -38697,7 +38673,7 @@ var CampaignConceptCard = import_react68.default.memo(
           return {
             ...field,
             label: field.label || "Primary KPI",
-            renderDisplay: (val) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-foreground text-sm", children: val ? String(val) : "-" }),
+            renderDisplay: (val) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-cardText text-sm", children: val ? String(val) : "-" }),
             renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
               Input,
               {
@@ -38715,7 +38691,7 @@ var CampaignConceptCard = import_react68.default.memo(
             label: field.label || "Secondary KPIs",
             renderDisplay: (val) => {
               const display = Array.isArray(val) ? val.map(String).join(", ") : val ? String(val) : "-";
-              return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-foreground text-sm", children: display });
+              return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-cardText text-sm", children: display });
             },
             renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
               Textarea,
@@ -38742,7 +38718,7 @@ var CampaignConceptCard = import_react68.default.memo(
           return {
             ...field,
             type: "textarea",
-            renderDisplay: (val) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-foreground text-sm leading-relaxed", children: val ? String(val) : "-" })
+            renderDisplay: (val) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-cardText text-sm leading-relaxed", children: val ? String(val) : "-" })
           };
         }
         return {
@@ -38756,7 +38732,7 @@ var CampaignConceptCard = import_react68.default.memo(
                 return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
                   "span",
                   {
-                    className: "inline-flex items-center bg-grayPill border border-foreground px-3 py-1 text-foreground text-sm font-grotesk font-medium rounded-md",
+                    className: "inline-flex items-center bg-black border border-cardBorder px-2 py-0.5 text-cardText text-xs font-medium rounded-md",
                     children: label
                   },
                   idx
@@ -38766,7 +38742,7 @@ var CampaignConceptCard = import_react68.default.memo(
             if (typeof val === "object" && val !== null) {
               return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "text-muted-foreground text-xs font-mono bg-paperBackground p-2 rounded mt-1 overflow-auto max-h-24", children: Object.entries(val).map(([k, v]) => `${k.replace(/_/g, " ")}: ${v}`).join("\n") });
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-foreground text-sm", children: val !== void 0 && val !== null ? String(val) : "-" });
+            return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-cardText text-sm", children: val !== void 0 && val !== null ? String(val) : "-" });
           }
         };
       });
@@ -38775,19 +38751,19 @@ var CampaignConceptCard = import_react68.default.memo(
       "div",
       {
         className: cn(
-          "w-full rounded-xl border bg-background dark:bg-gray100 relative transition-all duration-300",
-          isSelected || isRecommended ? "border-2 border-green500" : "border-gray400",
+          "w-full rounded-lg border bg-cardSurface relative transition-all duration-300",
+          isSelected || isRecommended ? "border-2 border-cardBorder" : "border-gray400",
           className
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
             "div",
             {
-              className: "px-5 py-4 relative flex items-start justify-between cursor-pointer select-none",
+              className: "px-4 py-2.5 relative flex items-center justify-between cursor-pointer select-none",
               onClick: handleToggle,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("h3", { className: "mb-1 py-1 text-txtColor font-bold text-lg", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("h3", { className: "text-cardText font-semibold text-sm", children: [
                     "Concept ",
                     index !== void 0 ? index : "",
                     " :",
@@ -38795,8 +38771,8 @@ var CampaignConceptCard = import_react68.default.memo(
                     typeof cardTitle === "object" ? JSON.stringify(cardTitle) : String(cardTitle)
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
-                    isRecommended && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "inline-flex text-[10px] font-bold uppercase tracking-widest", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "bg-green-600/20 text-green-600 px-2 py-1 rounded-[20px]", children: "Recommended" }) }),
-                    !effectiveIsLatest && selectionStatus && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "inline-flex text-[10px] font-bold uppercase tracking-widest text-[#3B82F6]", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "bg-[#3B82F6]/10 px-2 py-0.5 rounded border border-[#3B82F6]/20", children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by You" }) })
+                    isRecommended && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-gold", children: "Recommended" }),
+                    !effectiveIsLatest && selectionStatus && /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-gold", children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by You" })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
@@ -38812,7 +38788,7 @@ var CampaignConceptCard = import_react68.default.memo(
                           e.stopPropagation();
                           handleToggle();
                         },
-                        className: "p-2 bg-background hover:bg-gray200 dark:hover:bg-gray200 text-foreground rounded-lg shadow-lg",
+                        className: "p-2 bg-cardSurface hover:bg-gray200 text-cardText rounded-lg",
                         "aria-label": isOpen ? "Collapse" : "Expand",
                         title: isOpen ? "Collapse" : "Expand",
                         children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
@@ -38836,11 +38812,11 @@ var CampaignConceptCard = import_react68.default.memo(
               exit: { height: 0, opacity: 0 },
               transition: { duration: 0.2, ease: "easeIn" },
               className: "overflow-hidden",
-              children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "px-4 py-3 w-full relative", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "px-3 py-2 w-full relative", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
                   "div",
                   {
-                    className: "absolute left-[60px] top-[100px] bottom-[60px] w-[3px]",
+                    className: "absolute left-[48px] top-[70px] bottom-[40px] w-[2px]",
                     style: {
                       background: `radial-gradient(circle closest-side, #3C3D3E 98%, transparent) 50%/2px 5px repeat-y, linear-gradient(#3C3D3E 50%, transparent 0) 50%/2px 10px repeat-y`
                     }
@@ -38860,7 +38836,7 @@ var CampaignConceptCard = import_react68.default.memo(
                     hideTitle: true,
                     hideCopyButton: true,
                     className: "bg-transparent border-none shadow-none mb-0 p-0",
-                    footer: !effectiveIsLatest && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-[10px] font-semibold py-4 pr-6", children: [
+                    footer: !effectiveIsLatest && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "flex justify-end items-center gap-1 text-green-600 text-[10px] font-semibold py-2 pr-4", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(CircleCheck, { className: "h-3.5 w-3.5" }),
                       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by You" })
                     ] }) : formCardProps.footer