@ltm-blueverse/alpha-semantic-hub 0.7.0 → 0.7.2

package/explorer/src/workspaces/OntologyWorkspace/HealthTab.tsx

@@ -105,7 +105,7 @@ export function HealthTab({ onFixInEditor }: HealthTabProps) {
             {health.dimensions.map((dimension) => (
               <div key={dimension.key} style={dimensionCardStyle}>
                 <div style={dimensionHeadStyle}>
-                  <span style={{ color: "#fff0f2", fontWeight: 900 }}>{dimension.label}</span>
+                  <span style={{ color: "#2d1619", fontWeight: 900 }}>{dimension.label}</span>
                   <span style={statusBadgeStyle(dimension.status)}>{dimension.status}</span>
                 </div>
                 <div style={barTrackStyle}>
@@ -141,8 +141,8 @@ function IssueRow({ issue, onFixInEditor }: { issue: HealthIssue; onFixInEditor?
     <div style={issueRowStyle}>
       <div style={severityDotStyle(issue.severity)} />
       <div>
-        <div style={{ color: "#fff0f2", fontWeight: 800 }}>{issue.entity_label || issue.category}</div>
-        <div style={{ color: "#c99aa3", fontSize: 13, lineHeight: 1.45 }}>{issue.message}</div>
+        <div style={{ color: "#2d1619", fontWeight: 800 }}>{issue.entity_label || issue.category}</div>
+        <div style={{ color: "#aa485b", fontSize: 13, lineHeight: 1.45 }}>{issue.message}</div>
         {issue.entity_uri ? <div style={monoStyle}>{issue.entity_uri}</div> : null}
       </div>
       <span style={categoryStyle}>{issue.category}</span>
@@ -160,13 +160,13 @@ function IssueRow({ issue, onFixInEditor }: { issue: HealthIssue; onFixInEditor?
 
 function dimensionColor(score: number, status: string) {
   if (status === "unavailable") return "#9c7a82";
-  if (score >= 80) return "#7ce7d3";
-  if (score >= 55) return "#ff7a45";
-  return "#ff9daf";
+  if (score >= 80) return "#0e8571";
+  if (score >= 55) return "#e86a2e";
+  return "#e0556d";
 }
 
 function statusBadgeStyle(status: string): CSSProperties {
-  const color = status === "ok" ? "#7ce7d3" : status === "unavailable" ? "#9c7a82" : "#ff7a45";
+  const color = status === "ok" ? "#0e8571" : status === "unavailable" ? "#9c7a82" : "#e86a2e";
   return {
     color,
     background: `${color}18`,
@@ -180,35 +180,35 @@ function statusBadgeStyle(status: string): CSSProperties {
 }
 
 function severityDotStyle(severity: string): CSSProperties {
-  const color = severity === "critical" ? "#ff9daf" : severity === "warning" ? "#ff7a45" : "#ff2d4b";
+  const color = severity === "critical" ? "#e0556d" : severity === "warning" ? "#e86a2e" : "#ff2d4b";
   return { width: 10, height: 10, borderRadius: "50%", background: color, boxShadow: `0 0 18px ${color}55`, marginTop: 5 };
 }
 
 const pageStyle: CSSProperties = { height: "100%", overflow: "auto", padding: 22, display: "flex", flexDirection: "column", gap: 16 };
-const heroStyle: CSSProperties = { display: "flex", justifyContent: "space-between", gap: 18, padding: 22, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 22, background: "linear-gradient(135deg, rgba(11,25,42,0.94), rgba(7,14,25,0.9))" };
-const kickerStyle: CSSProperties = { display: "inline-flex", gap: 8, alignItems: "center", color: "#9ee8d7", fontSize: 11, fontWeight: 900, letterSpacing: "0.12em", textTransform: "uppercase" };
-const titleStyle: CSSProperties = { margin: "8px 0", color: "#fff0f2", fontSize: 26, letterSpacing: "-0.04em" };
-const textStyle: CSSProperties = { margin: 0, color: "#c99aa3", lineHeight: 1.6, maxWidth: 620 };
+const heroStyle: CSSProperties = { display: "flex", justifyContent: "space-between", gap: 18, padding: 22, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 22, background: "linear-gradient(135deg, rgba(255, 255, 255,0.94), rgba(255, 255, 255,0.9))" };
+const kickerStyle: CSSProperties = { display: "inline-flex", gap: 8, alignItems: "center", color: "#0e7f66", fontSize: 11, fontWeight: 900, letterSpacing: "0.12em", textTransform: "uppercase" };
+const titleStyle: CSSProperties = { margin: "8px 0", color: "#2d1619", fontSize: 26, letterSpacing: "-0.04em" };
+const textStyle: CSSProperties = { margin: 0, color: "#aa485b", lineHeight: 1.6, maxWidth: 620 };
 const selectorShellStyle: CSSProperties = { minWidth: 320 };
 const labelStyle: CSSProperties = { display: "block", color: "#9c7a82", fontSize: 11, fontWeight: 800, margin: "0 0 6px", textTransform: "uppercase", letterSpacing: "0.08em" };
-const inputStyle: CSSProperties = { width: "100%", boxSizing: "border-box", border: "1px solid rgba(255,107,129,0.14)", borderRadius: 12, padding: "10px 12px", background: "rgba(6,3,5,0.8)", color: "#fff0f2" };
+const inputStyle: CSSProperties = { width: "100%", boxSizing: "border-box", border: "1px solid rgba(255,107,129,0.14)", borderRadius: 12, padding: "10px 12px", background: "rgba(255, 255, 255,0.8)", color: "#2d1619" };
 const scoreGridStyle: CSSProperties = { display: "grid", gridTemplateColumns: "220px repeat(5, minmax(180px, 1fr))", gap: 12 };
-const scoreCardStyle: CSSProperties = { padding: 18, borderRadius: 20, background: "rgba(15,35,52,0.88)", border: "1px solid rgba(124,231,211,0.2)", display: "flex", flexDirection: "column", gap: 10 };
-const scoreValueStyle: CSSProperties = { color: "#9ee8d7", fontSize: 52, lineHeight: 1, fontWeight: 950, letterSpacing: "-0.06em" };
-const dimensionCardStyle: CSSProperties = { padding: 16, borderRadius: 18, background: "rgba(12,6,9,0.78)", border: "1px solid rgba(255,107,129,0.12)" };
+const scoreCardStyle: CSSProperties = { padding: 18, borderRadius: 20, background: "rgba(255, 255, 255,0.88)", border: "1px solid rgba(124,231,211,0.2)", display: "flex", flexDirection: "column", gap: 10 };
+const scoreValueStyle: CSSProperties = { color: "#0e7f66", fontSize: 52, lineHeight: 1, fontWeight: 950, letterSpacing: "-0.06em" };
+const dimensionCardStyle: CSSProperties = { padding: 16, borderRadius: 18, background: "rgba(255, 255, 255,0.78)", border: "1px solid rgba(255,107,129,0.12)" };
 const dimensionHeadStyle: CSSProperties = { display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center", marginBottom: 12 };
-const barTrackStyle: CSSProperties = { height: 8, borderRadius: 999, background: "rgba(255,255,255,0.06)", overflow: "hidden" };
+const barTrackStyle: CSSProperties = { height: 8, borderRadius: 999, background: "rgba(28, 20, 24,0.06)", overflow: "hidden" };
 const barFillStyle: CSSProperties = { height: "100%", borderRadius: 999 };
-const dimensionFootStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 6, color: "#c99aa3", fontSize: 12, marginTop: 10 };
-const cardStyle: CSSProperties = { padding: 18, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 20, background: "rgba(12,6,9,0.78)" };
-const sectionTitleStyle: CSSProperties = { margin: "0 0 14px", color: "#fff0f2", fontSize: 16 };
+const dimensionFootStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 6, color: "#aa485b", fontSize: 12, marginTop: 10 };
+const cardStyle: CSSProperties = { padding: 18, border: "1px solid rgba(255,107,129,0.12)", borderRadius: 20, background: "rgba(255, 255, 255,0.78)" };
+const sectionTitleStyle: CSSProperties = { margin: "0 0 14px", color: "#2d1619", fontSize: 16 };
 const issueListStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 8 };
-const issueRowStyle: CSSProperties = { display: "grid", gridTemplateColumns: "14px 1fr auto auto", gap: 12, alignItems: "start", padding: 12, borderRadius: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,107,129,0.08)" };
-const categoryStyle: CSSProperties = { color: "#9ee8d7", border: "1px solid rgba(158,232,215,0.22)", borderRadius: 999, padding: "4px 8px", fontSize: 10, fontWeight: 900 };
-const smallButtonStyle: CSSProperties = { display: "inline-flex", gap: 6, alignItems: "center", border: "1px solid rgba(255,107,129,0.16)", borderRadius: 10, padding: "7px 9px", background: "rgba(255,107,129,0.08)", color: "#fff0f2", cursor: "pointer", fontWeight: 800 };
-const secondaryButtonStyle: CSSProperties = { display: "inline-flex", gap: 8, alignItems: "center", justifyContent: "center", border: "1px solid rgba(255,107,129,0.16)", borderRadius: 12, padding: "10px 12px", background: "rgba(255,107,129,0.08)", color: "#fff0f2", cursor: "pointer", fontWeight: 900 };
+const issueRowStyle: CSSProperties = { display: "grid", gridTemplateColumns: "14px 1fr auto auto", gap: 12, alignItems: "start", padding: 12, borderRadius: 14, background: "rgba(28, 20, 24,0.03)", border: "1px solid rgba(255,107,129,0.08)" };
+const categoryStyle: CSSProperties = { color: "#0e7f66", border: "1px solid rgba(158,232,215,0.22)", borderRadius: 999, padding: "4px 8px", fontSize: 10, fontWeight: 900 };
+const smallButtonStyle: CSSProperties = { display: "inline-flex", gap: 6, alignItems: "center", border: "1px solid rgba(255,107,129,0.16)", borderRadius: 10, padding: "7px 9px", background: "rgba(255,107,129,0.08)", color: "#2d1619", cursor: "pointer", fontWeight: 800 };
+const secondaryButtonStyle: CSSProperties = { display: "inline-flex", gap: 8, alignItems: "center", justifyContent: "center", border: "1px solid rgba(255,107,129,0.16)", borderRadius: 12, padding: "10px 12px", background: "rgba(255,107,129,0.08)", color: "#2d1619", cursor: "pointer", fontWeight: 900 };
 const monoStyle: CSSProperties = { marginTop: 4, color: "#9c7a82", fontSize: 11, fontFamily: "JetBrains Mono, monospace", wordBreak: "break-all" };
 const mutedStyle: CSSProperties = { margin: 0, color: "#9c7a82", fontSize: 13 };
-const loadingStyle: CSSProperties = { display: "inline-flex", alignItems: "center", gap: 8, color: "#c99aa3", padding: 18 };
+const loadingStyle: CSSProperties = { display: "inline-flex", alignItems: "center", gap: 8, color: "#aa485b", padding: 18 };
 const emptyStyle: CSSProperties = { color: "#9c7a82", padding: 22 };
-const errorStyle: CSSProperties = { display: "flex", alignItems: "center", gap: 8, padding: 12, borderRadius: 14, color: "#ffb4c2", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" };
+const errorStyle: CSSProperties = { display: "flex", alignItems: "center", gap: 8, padding: 12, borderRadius: 14, color: "#e98498", background: "rgba(255,157,175,0.1)", border: "1px solid rgba(255,157,175,0.18)" };

package/explorer/src/workspaces/OntologyWorkspace/OntologyEditor.tsx

@@ -66,7 +66,7 @@ const ontologyFlowThemeCss = `
     overflow: hidden;
     border: 1px solid rgba(255, 107, 129, 0.2);
     border-radius: 9px;
-    background: rgba(6, 13, 26, 0.96);
+    background: rgba(255, 255, 255, 0.96);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
   }
 
@@ -75,24 +75,24 @@ const ontologyFlowThemeCss = `
     height: 30px;
     background: transparent;
     border-bottom-color: rgba(255, 107, 129, 0.14);
-    color: #c99aa3;
+    color: #aa485b;
     transition: color 140ms ease, background 140ms ease;
   }
 
   .ontology-editor-flow .react-flow__controls-button:hover {
     background: rgba(255, 45, 75, 0.14);
-    color: #fff0f2;
+    color: #2d1619;
   }
 
   .ontology-editor-flow .react-flow__controls-button:focus-visible {
     position: relative;
     z-index: 1;
-    outline: 2px solid #ff6b81;
+    outline: 2px solid #d41736;
     outline-offset: -2px;
   }
 
   .ontology-editor-flow .react-flow__controls-button:disabled {
-    background: rgba(6, 3, 5, 0.32);
+    background: rgba(255, 255, 255, 0.32);
     color: #40566f;
   }
 `;
@@ -102,7 +102,7 @@ const classNodeStyle: React.CSSProperties = {
   borderRadius: "8px",
   background: "linear-gradient(135deg, rgba(255, 45, 75, 0.15), rgba(255, 45, 75, 0.05))",
   border: "1px solid rgba(255, 107, 129, 0.3)",
-  color: "#fff0f2",
+  color: "#2d1619",
   fontSize: "13px",
   fontWeight: "600",
   minWidth: "140px",
@@ -118,7 +118,7 @@ const classNodeHeader: React.CSSProperties = {
 
 const classNodeSub: React.CSSProperties = {
   fontSize: "11px",
-  color: "#c99aa3",
+  color: "#aa485b",
   fontWeight: "500",
 };
 
@@ -216,8 +216,8 @@ function buildEditorElements(apiNodes: OntologyGraphNode[], apiEdges: OntologyGr
     type: "default",
     markerEnd: { type: MarkerType.ArrowClosed },
     style: { stroke: "rgba(255, 107, 129, 0.72)", strokeWidth: 1.5 },
-    labelStyle: { fill: "#c8dcf5", fontSize: 11, fontWeight: 600 },
-    labelBgStyle: { fill: "#0b0508", fillOpacity: 0.9 },
+    labelStyle: { fill: "#2a4261", fontSize: 11, fontWeight: 600 },
+    labelBgStyle: { fill: "#ffffff", fillOpacity: 0.9 },
   }));
   return { nodes, edges };
 }
@@ -491,7 +491,7 @@ export function OntologyEditor() {
     display: "flex",
     gap: "8px",
     padding: "12px 16px",
-    background: "rgba(6, 3, 5, 0.92)",
+    background: "rgba(255, 255, 255, 0.92)",
     borderBottom: "1px solid rgba(255, 120, 140, 0.12)",
     flexWrap: "wrap",
   };
@@ -504,7 +504,7 @@ export function OntologyEditor() {
     borderRadius: "8px",
     border: "1px solid rgba(255, 107, 129, 0.18)",
     background: "rgba(255, 45, 75, 0.08)",
-    color: "#fff0f2",
+    color: "#2d1619",
     fontSize: "12px",
     fontWeight: "600",
     cursor: "pointer",
@@ -515,15 +515,15 @@ export function OntologyEditor() {
     padding: "8px 12px",
     borderRadius: "8px",
     border: "1px solid rgba(255, 107, 129, 0.18)",
-    background: "rgba(6, 3, 5, 0.88)",
-    color: "#fff0f2",
+    background: "rgba(255, 255, 255, 0.88)",
+    color: "#2d1619",
     fontSize: "12px",
     minWidth: "260px",
   };
 
   const contextMenuStyle: React.CSSProperties = {
     position: "fixed",
-    background: "rgba(12, 6, 9, 0.95)",
+    background: "rgba(255, 255, 255, 0.95)",
     border: "1px solid rgba(255, 107, 129, 0.3)",
     borderRadius: "8px",
     padding: "8px 0",
@@ -537,7 +537,7 @@ export function OntologyEditor() {
     display: "flex",
     alignItems: "center",
     gap: "10px",
-    color: "#fff0f2",
+    color: "#2d1619",
     fontSize: "13px",
     cursor: "pointer",
     transition: "160ms ease",
@@ -548,7 +548,7 @@ export function OntologyEditor() {
     width: "320px",
     minWidth: "320px",
     boxSizing: "border-box",
-    background: "rgba(12, 6, 9, 0.95)",
+    background: "rgba(255, 255, 255, 0.95)",
     borderLeft: "1px solid rgba(255, 120, 140, 0.12)",
     padding: "20px",
     overflow: "auto",
@@ -556,7 +556,7 @@ export function OntologyEditor() {
   };
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%", background: "#0b0508" }}>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", background: "#ffffff" }}>
       <style>{ontologyFlowThemeCss}</style>
       <div style={toolbarStyle}>
         <select
@@ -624,9 +624,9 @@ export function OntologyEditor() {
             onEdgeContextMenu={handleEdgeContextMenu}
             nodeTypes={nodeTypes}
             fitView
-            style={{ background: "#0b0508" }}
+            style={{ background: "#ffffff" }}
           >
-            <Background color="#1a2d3d" gap={20} />
+            <Background color="#f9fafa" gap={20} />
             <Controls />
             <MiniMap {...ONTOLOGY_MINIMAP_THEME} />
           </ReactFlow>
@@ -635,10 +635,10 @@ export function OntologyEditor() {
             <div style={canvasMessageStyle}>Loading ontology structure…</div>
           )}
           {!isLoadingGraph && graphError && (
-            <div style={{ ...canvasMessageStyle, color: "#ff9a8d" }}>{graphError}</div>
+            <div style={{ ...canvasMessageStyle, color: "#3f1f1b" }}>{graphError}</div>
           )}
           {!isLoadingGraph && !graphError && unownedEntity && (
-            <div style={{ ...canvasMessageStyle, color: "#ff7a45" }}>
+            <div style={{ ...canvasMessageStyle, color: "#e86a2e" }}>
               No registered ontology owns {unownedEntity}. Pick an ontology above to start editing.
             </div>
           )}
@@ -662,7 +662,7 @@ export function OntologyEditor() {
                   </div>
                 </>
               ) : (
-                <div style={{ ...contextItemStyle, cursor: "default", color: "#c99aa3" }}>
+                <div style={{ ...contextItemStyle, cursor: "default", color: "#aa485b" }}>
                   This term is read-only
                 </div>
               )}
@@ -672,7 +672,7 @@ export function OntologyEditor() {
 
         {selectedElement && (
           <div style={detailPanelStyle}>
-            <h3 style={{ margin: "0 0 16px", color: "#fff0f2", fontSize: "16px" }}>
+            <h3 style={{ margin: "0 0 16px", color: "#2d1619", fontSize: "16px" }}>
               {"source" in selectedElement
                 ? "Relationship Details"
                 : selectedElement.data.entityType === "property"
@@ -684,17 +684,17 @@ export function OntologyEditor() {
                       : "Class Details"}
             </h3>
             <div style={{ marginBottom: "12px" }}>
-              <label style={{ display: "block", color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>
+              <label style={{ display: "block", color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>
                 ID
               </label>
-              <div style={{ color: "#fff0f2", fontSize: "13px", wordBreak: "break-all" }}>
+              <div style={{ color: "#2d1619", fontSize: "13px", wordBreak: "break-all" }}>
                 {selectedElement.id}
               </div>
             </div>
             {!("source" in selectedElement) && (
               <>
                 <div style={{ marginBottom: "12px" }}>
-                  <label style={{ display: "block", color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>
+                  <label style={{ display: "block", color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>
                     Label
                   </label>
                   <input
@@ -732,17 +732,17 @@ export function OntologyEditor() {
                       padding: "8px",
                       borderRadius: "6px",
                       border: "1px solid rgba(255, 107, 129, 0.2)",
-                      background: "rgba(6, 3, 5, 0.8)",
-                      color: "#fff0f2",
+                      background: "rgba(255, 255, 255, 0.8)",
+                      color: "#2d1619",
                       fontSize: "13px",
                     }}
                   />
                 </div>
                 <div style={{ marginBottom: "12px" }}>
-                  <label style={{ display: "block", color: "#c99aa3", fontSize: "12px", marginBottom: "4px" }}>
+                  <label style={{ display: "block", color: "#aa485b", fontSize: "12px", marginBottom: "4px" }}>
                     Type
                   </label>
-                  <div style={{ color: "#fff0f2", fontSize: "13px" }}>
+                  <div style={{ color: "#2d1619", fontSize: "13px" }}>
                     {selectedElement.data.type || "owl:Class"}
                   </div>
                 </div>
@@ -763,8 +763,8 @@ const canvasMessageStyle: React.CSSProperties = {
   padding: "10px 14px",
   borderRadius: "8px",
   border: "1px solid rgba(255, 107, 129, 0.18)",
-  background: "rgba(6, 3, 5, 0.9)",
-  color: "#c99aa3",
+  background: "rgba(255, 255, 255, 0.9)",
+  color: "#aa485b",
   fontSize: "13px",
   pointerEvents: "none",
 };

package/explorer/src/workspaces/OntologyWorkspace/OntologyLoader.tsx

@@ -113,8 +113,8 @@ function PreviewCard({ preview }: { preview: OntologyPreview }) {
   return (
     <div style={previewCardStyle}>
       <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
-        <CheckCircle2 size={16} color="#4cc38a" />
-        <span style={{ color: "#4cc38a", fontSize: 12, fontWeight: 700 }}>
+        <CheckCircle2 size={16} color="#1f9d5f" />
+        <span style={{ color: "#1f9d5f", fontSize: 12, fontWeight: 700 }}>
           Preview ready
         </span>
         <Badge label={preview.format} color="#ff2d4b" />
@@ -122,7 +122,7 @@ function PreviewCard({ preview }: { preview: OntologyPreview }) {
 
       <div style={previewTitleStyle}>{preview.name}</div>
       {preview.description && (
-        <div style={{ color: "#c99aa3", fontSize: 12, marginTop: 6, lineHeight: 1.5 }}>
+        <div style={{ color: "#aa485b", fontSize: 12, marginTop: 6, lineHeight: 1.5 }}>
           {preview.description}
         </div>
       )}
@@ -156,7 +156,7 @@ function PreviewRow({
       </span>
       <span
         style={{
-          color: "#f0cdd3",
+          color: "#602b34",
           fontSize: 11,
           fontFamily: mono ? "monospace" : undefined,
           wordBreak: "break-all",
@@ -426,10 +426,10 @@ function FileUploadPanel({ onLoaded }: { onLoaded: () => void }) {
       >
         <FileUp size={24} color="#ff2d4b" />
         {fileName ? (
-          <div style={{ color: "#fff0f2", fontSize: 13, fontWeight: 600 }}>{fileName}</div>
+          <div style={{ color: "#2d1619", fontSize: 13, fontWeight: 600 }}>{fileName}</div>
         ) : (
           <>
-            <div style={{ color: "#c99aa3", fontSize: 13 }}>
+            <div style={{ color: "#aa485b", fontSize: 13 }}>
               Drop a file here or <span style={{ color: "#ff2d4b" }}>browse</span>
             </div>
             <div style={{ color: "#8f6d75", fontSize: 11 }}>
@@ -649,8 +649,8 @@ export function OntologyLoader({ onLoaded, onClose }: LoaderProps) {
       <div style={modalStyle}>
         <div style={modalHeaderStyle}>
           <div>
-            <div style={{ color: "#fff0f2", fontSize: 16, fontWeight: 800 }}>Load Ontology</div>
-            <div style={{ color: "#c99aa3", fontSize: 12, marginTop: 2 }}>
+            <div style={{ color: "#2d1619", fontSize: 16, fontWeight: 800 }}>Load Ontology</div>
+            <div style={{ color: "#aa485b", fontSize: 12, marginTop: 2 }}>
               Import from URL, upload a file, or create a new ontology
             </div>
           </div>
@@ -695,7 +695,7 @@ export function OntologyLoader({ onLoaded, onClose }: LoaderProps) {
 const overlayStyle: React.CSSProperties = {
   position: "fixed",
   inset: 0,
-  background: "rgba(6,3,5,0.78)",
+  background: "rgba(255, 255, 255,0.78)",
   backdropFilter: "blur(6px)",
   display: "flex",
   alignItems: "center",
@@ -710,8 +710,8 @@ const modalStyle: React.CSSProperties = {
   flexDirection: "column",
   borderRadius: 20,
   border: "1px solid rgba(255,107,129,0.16)",
-  background: "linear-gradient(180deg, rgba(11,21,34,0.98), rgba(6,13,22,0.96))",
-  boxShadow: "0 32px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06)",
+  background: "linear-gradient(180deg, rgba(255, 255, 255,0.98), rgba(255, 255, 255,0.96))",
+  boxShadow: "0 32px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(28, 20, 24,0.06)",
   overflow: "hidden",
 };
 
@@ -749,7 +749,7 @@ const modalTabBase: React.CSSProperties = {
 };
 
 const modalTabIdle: React.CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
 };
 
 const modalTabActive: React.CSSProperties = {
@@ -760,7 +760,7 @@ const modalTabActive: React.CSSProperties = {
 const closeIconBtnStyle: React.CSSProperties = {
   background: "transparent",
   border: "none",
-  color: "#c99aa3",
+  color: "#aa485b",
   cursor: "pointer",
   padding: 4,
   borderRadius: 8,
@@ -769,7 +769,7 @@ const closeIconBtnStyle: React.CSSProperties = {
 };
 
 const fieldLabelStyle: React.CSSProperties = {
-  color: "#c99aa3",
+  color: "#aa485b",
   fontSize: 11,
   fontWeight: 700,
   letterSpacing: "0.05em",
@@ -781,7 +781,7 @@ const inputStyle: React.CSSProperties = {
   borderRadius: 8,
   border: "1px solid rgba(255,107,129,0.16)",
   background: "rgba(0,0,0,0.24)",
-  color: "#fff0f2",
+  color: "#2d1619",
   fontSize: 13,
   outline: "none",
   boxSizing: "border-box",
@@ -798,7 +798,7 @@ const previewBtnStyle: React.CSSProperties = {
   borderRadius: 8,
   border: "1px solid rgba(255,107,129,0.2)",
   background: "rgba(255,45,75,0.08)",
-  color: "#ff6b81",
+  color: "#d41736",
   fontSize: 12,
   fontWeight: 600,
   cursor: "pointer",
@@ -816,7 +816,7 @@ const primaryBtnStyle: React.CSSProperties = {
   borderRadius: 10,
   border: "1px solid rgba(255,45,75,0.3)",
   background: "linear-gradient(135deg, rgba(255,45,75,0.2), rgba(255,45,75,0.1))",
-  color: "#ff6b81",
+  color: "#d41736",
   fontSize: 13,
   fontWeight: 700,
   cursor: "pointer",
@@ -842,7 +842,7 @@ const previewCardStyle: React.CSSProperties = {
 };
 
 const previewTitleStyle: React.CSSProperties = {
-  color: "#fff0f2",
+  color: "#2d1619",
   fontSize: 15,
   fontWeight: 800,
   letterSpacing: "-0.03em",
@@ -875,7 +875,7 @@ const successBoxStyle: React.CSSProperties = {
   borderRadius: 8,
   border: "1px solid rgba(76,195,138,0.22)",
   background: "rgba(76,195,138,0.06)",
-  color: "#4cc38a",
+  color: "#1f9d5f",
   fontSize: 12,
 };
 
@@ -887,7 +887,7 @@ const errorBoxStyle: React.CSSProperties = {
   borderRadius: 8,
   border: "1px solid rgba(255,157,175,0.22)",
   background: "rgba(255,157,175,0.06)",
-  color: "#ff9daf",
+  color: "#e0556d",
   fontSize: 12,
 };
 
@@ -902,12 +902,12 @@ const modeTabBase: React.CSSProperties = {
 
 const modeTabIdle: React.CSSProperties = {
   background: "transparent",
-  color: "#c99aa3",
+  color: "#aa485b",
   borderColor: "rgba(255,107,129,0.1)",
 };
 
 const modeTabActive: React.CSSProperties = {
   background: "rgba(255,45,75,0.14)",
-  color: "#fff0f2",
+  color: "#2d1619",
   borderColor: "rgba(255,107,129,0.24)",
 };