@primestyleai/tryon 4.6.0 → 4.7.0

package/dist/react/index.js

@@ -278,31 +278,31 @@ function getApiUrl(override) {
 const STYLES = `
   .ps-tryon-root {
     display: inline-block; visibility: visible !important;
-    --ps-accent: #bb945c;
-    --ps-accent-hover: #a07d4e;
-    --ps-accent-light: #d6ba7d;
-    --ps-text-primary: #fff;
-    --ps-text-secondary: #999;
-    --ps-text-muted: #666;
-    --ps-text-dim: #888;
-    --ps-border-color: #333;
-    --ps-border-subtle: #282828;
-    --ps-bg-primary: #111211;
-    --ps-bg-secondary: #1a1b1a;
-    --ps-bg-tertiary: #222;
-    --ps-input-bg: transparent;
-    --ps-input-border: #333;
+    --ps-accent: #2154EF;
+    --ps-accent-hover: #193EDC;
+    --ps-accent-light: #BED6FF;
+    --ps-text-primary: #1C1D1E;
+    --ps-text-secondary: #454545;
+    --ps-text-muted: #84898C;
+    --ps-text-dim: #696E71;
+    --ps-border-color: #E7E7E7;
+    --ps-border-subtle: #F0F0F0;
+    --ps-bg-primary: #FFFFFF;
+    --ps-bg-secondary: #F8FAFF;
+    --ps-bg-tertiary: #F0F0F0;
+    --ps-input-bg: #FFFFFF;
+    --ps-input-border: #E7E7E7;
     --ps-input-focus-border: var(--ps-accent);
-    --ps-error-color: #ef4444;
-    --ps-success-color: #4ade80;
-    --ps-warning-color: #f59e0b;
+    --ps-error-color: #E7000B;
+    --ps-success-color: #1C9D4C;
+    --ps-warning-color: #DF8400;
     --ps-logo-height: 2.8vw;
   }
 
   .ps-tryon-btn {
     display: inline-flex; align-items: center; gap: 0.42vw;
     padding: var(--ps-btn-padding, 0.63vw 1.25vw);
-    background: var(--ps-btn-bg, var(--ps-accent)); color: var(--ps-btn-color, #111211);
+    background: var(--ps-btn-bg, var(--ps-accent)); color: var(--ps-btn-color, #FFFFFF);
     font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);
     font-size: var(--ps-btn-font-size, 0.73vw); font-weight: var(--ps-btn-font-weight, 600);
     border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, 0.42vw);
@@ -326,11 +326,11 @@ const STYLES = `
   @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } }
 
   .ps-tryon-modal {
-    background: var(--ps-modal-bg, #111211); color: var(--ps-modal-color, #fff);
+    background: var(--ps-modal-bg, #FFFFFF); color: var(--ps-modal-color, #1C1D1E);
     border-radius: var(--ps-modal-radius, 0.83vw); width: var(--ps-modal-width, 100%);
     max-width: var(--ps-modal-max-width, 36vw); max-height: 92vh; overflow-y: auto;
     font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);
-    box-shadow: 0 1.3vw 2.6vw rgba(0,0,0,0.4); animation: ps-slide-up 0.3s ease;
+    box-shadow: 0 1.3vw 2.6vw rgba(0,0,0,0.08); animation: ps-slide-up 0.3s ease;
     scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;
     flex-shrink: 0;
   }
@@ -341,8 +341,8 @@ const STYLES = `
   /* Header */
   .ps-tryon-header {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 0.7vw 1.25vw; background: var(--ps-modal-header-bg, rgba(17,18,17,0.95));
-    border-bottom: 1px solid rgba(255,255,255,0.04);
+    padding: 0.7vw 1.25vw; background: var(--ps-modal-header-bg, rgba(255,255,255,0.95));
+    border-bottom: 1px solid var(--ps-border-color);
     border-radius: var(--ps-modal-radius, 0.83vw) var(--ps-modal-radius, 0.83vw) 0 0;
     backdrop-filter: blur(12px);
   }
@@ -372,7 +372,7 @@ const STYLES = `
     background: none; border: none; color: var(--ps-modal-close-color, #999);
     cursor: pointer; border-radius: 0.31vw; transition: background 0.15s;
   }
-  .ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
+  .ps-tryon-close:hover { background: rgba(0,0,0,0.06); }
 
   /* Language switcher */
   .ps-tryon-lang-wrap { position: relative; z-index: 10; }
@@ -401,7 +401,7 @@ const STYLES = `
     background: var(--ps-bg-secondary); border: 1.5px solid var(--ps-border-color);
     border-radius: 0.73vw;
     box-shadow: 0 1vw 3vw rgba(0,0,0,0.5),
-                0 0 0 1px rgba(255,255,255,0.03);
+                0 0 0 1px rgba(0,0,0,0.02);
     overflow: hidden;
     animation: ps-lang-open 0.2s ease both;
   }
@@ -421,7 +421,7 @@ const STYLES = `
     border-radius: 0.47vw; transition: all 0.15s ease;
     font-family: inherit; text-align: left;
   }
-  .ps-tryon-lang-item:hover { background: rgba(255,255,255,0.06); color: var(--ps-text-primary); }
+  .ps-tryon-lang-item:hover { background: rgba(0,0,0,0.04); color: var(--ps-text-primary); }
   .ps-tryon-lang-item.ps-selected { background: rgba(187,148,92,0.1); color: var(--ps-accent); }
   .ps-tryon-lang-name {
     flex: 1; font-size: 0.73vw; font-weight: 500;
@@ -452,7 +452,7 @@ const STYLES = `
   .ps-tryon-welcome { text-align: center; padding: 0.5vw 0; }
   .ps-tryon-welcome-hero { margin-bottom: 1.3vw; }
   .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }
-  .ps-tryon-welcome-product { width: 9vw; height: 10.5vw; object-fit: contain; background: var(--ps-modal-bg, #111211); border-radius: 0.9vw; border: 2px solid var(--ps-border-color); box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
+  .ps-tryon-welcome-product { width: 9vw; height: 10.5vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); border-radius: 0.9vw; border: 2px solid var(--ps-border-color); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
   .ps-tryon-welcome-sparkle { position: absolute; top: -0.5vw; right: -0.5vw; width: 1.8vw; height: 1.8vw; background: var(--ps-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }
   .ps-tryon-welcome-sparkle svg { stroke: #111; width: 0.9vw; height: 0.9vw; }
   @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@@ -711,16 +711,16 @@ const STYLES = `
     font-family: inherit;
   }
   .ps-tryon-v2-subtitle {
-    font-size: 0.65vw; font-weight: 400; color: rgba(255,255,255,0.35);
+    font-size: 0.65vw; font-weight: 400; color: rgba(0,0,0,0.25);
     margin: 0.15vw 0 0; letter-spacing: 0.03em;
   }
   .ps-tryon-v2-unit-toggle {
     display: flex; gap: 0;
-    border: 1px solid rgba(255,255,255,0.08); border-radius: 2vw; overflow: hidden;
+    border: 1px solid rgba(0,0,0,0.06); border-radius: 2vw; overflow: hidden;
   }
   .ps-tryon-v2-unit {
     background: none; border: none; padding: 0.22vw 0.7vw;
-    font-size: 0.55vw; font-weight: 700; color: rgba(255,255,255,0.3);
+    font-size: 0.55vw; font-weight: 700; color: rgba(0,0,0,0.2);
     cursor: pointer; font-family: inherit; letter-spacing: 0.1em;
     transition: all 0.25s;
   }
@@ -739,8 +739,8 @@ const STYLES = `
     flex: 1; min-width: 0;
     display: flex; flex-direction: column; align-items: center; justify-content: center;
     gap: 0.2vw; padding: 0.4vw 0.2vw;
-    border: 1.5px solid rgba(255,255,255,0.08); border-radius: 0.35vw;
-    background: transparent; color: rgba(255,255,255,0.4);
+    border: 1.5px solid rgba(0,0,0,0.06); border-radius: 0.35vw;
+    background: transparent; color: rgba(0,0,0,0.3);
     cursor: pointer; font-family: inherit; transition: all 0.2s;
   }
   .ps-tryon-bodytype-card:hover {
@@ -764,8 +764,8 @@ const STYLES = `
   /* Profile select */
   .ps-tryon-v2-profile {
     width: 100%; padding: 0.3vw 0.5vw; margin-bottom: 0.6vw;
-    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
-    border-radius: 0.3vw; color: rgba(255,255,255,0.5);
+    background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.04);
+    border-radius: 0.3vw; color: rgba(0,0,0,0.08);
     font-size: 0.6vw; font-family: inherit; cursor: pointer; outline: none;
     appearance: none; -webkit-appearance: none;
     transition: border-color 0.2s;
@@ -776,7 +776,7 @@ const STYLES = `
   .ps-tryon-v2-fields {
     flex: 1; min-height: 0; overflow-y: auto;
     display: flex; flex-direction: column; gap: 0;
-    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent;
+    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.04) transparent;
   }
 
   /* Override float-row for inline look inside v2 */
@@ -791,7 +791,7 @@ const STYLES = `
   .ps-tryon-v2-fields .ps-tryon-sf-float-label {
     flex-shrink: 0;
     font-size: 0.75vw; font-weight: 500;
-    color: rgba(255,255,255,0.5);
+    color: rgba(0,0,0,0.08);
     letter-spacing: 0.04em;
     margin: 0; white-space: nowrap;
     transition: color 0.25s;
@@ -801,7 +801,7 @@ const STYLES = `
   }
   .ps-tryon-v2-fields .ps-tryon-sf-input {
     flex: 1; border: none;
-    border-bottom: 1.5px solid rgba(255,255,255,0.2);
+    border-bottom: 1.5px solid rgba(0,0,0,0.1);
     background: none; padding: 0.25vw 0;
     font-size: 1vw; font-weight: 400; color: #fff;
     font-family: inherit; outline: none;
@@ -812,7 +812,7 @@ const STYLES = `
     border-bottom-color: var(--ps-accent);
   }
   .ps-tryon-v2-fields .ps-tryon-sf-input::placeholder {
-    color: rgba(255,255,255,0.15);
+    color: rgba(0,0,0,0.08);
   }
   .ps-tryon-v2-fields .ps-tryon-sf-input::-webkit-outer-spin-button,
   .ps-tryon-v2-fields .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@@ -867,7 +867,7 @@ const STYLES = `
     display: flex; align-items: center; gap: 0.6vw;
     padding: 0.6vw 0.7vw;
     background: rgba(255,255,255,0.02);
-    border: 1px solid rgba(255,255,255,0.06);
+    border: 1px solid rgba(0,0,0,0.04);
     border-radius: 0.5vw;
     cursor: pointer; font-family: inherit;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -898,13 +898,13 @@ const STYLES = `
     text-transform: capitalize;
   }
   .ps-tryon-sr-card-fit {
-    font-size: 0.52vw; color: rgba(255,255,255,0.4); letter-spacing: 0.03em;
+    font-size: 0.52vw; color: rgba(0,0,0,0.3); letter-spacing: 0.03em;
   }
   .ps-tryon-sr-card-size {
     font-size: 1.3vw; font-weight: 300; color: var(--ps-accent);
     letter-spacing: -0.01em;
   }
-  .ps-tryon-sr-card-row > svg { color: rgba(255,255,255,0.2); flex-shrink: 0; transition: color 0.2s; }
+  .ps-tryon-sr-card-row > svg { color: rgba(0,0,0,0.1); flex-shrink: 0; transition: color 0.2s; }
   .ps-tryon-sr-card-row:hover > svg { color: var(--ps-accent); }
 
   /* ── Result cards v2: bold, clear, unmissable ── */
@@ -916,7 +916,7 @@ const STYLES = `
     flex: 1 1 45%; max-width: 49%;
     display: flex; flex-direction: column; align-items: center; justify-content: center;
     text-align: center;
-    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
+    background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06);
     border-radius: 0.6vw; padding: 1vw 0.5vw;
     cursor: pointer; font-family: inherit;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -935,7 +935,7 @@ const STYLES = `
     display: flex; flex-direction: column; align-items: center; gap: 0.15vw; z-index: 1;
   }
   .ps-tryon-sr-card-v2-label {
-    font-size: 0.6vw; font-weight: 500; color: rgba(255,255,255,0.5);
+    font-size: 0.6vw; font-weight: 500; color: rgba(0,0,0,0.08);
     text-transform: uppercase; letter-spacing: 0.1em;
   }
   .ps-tryon-sr-card-v2-value {
@@ -956,7 +956,7 @@ const STYLES = `
   /* ── Photo guide v2 ── */
   .ps-tryon-guide-drop-v2 {
     width: 90%; height: 90%; border-radius: 0.6vw;
-    border: 1.5px dashed rgba(255,255,255,0.12);
+    border: 1.5px dashed rgba(0,0,0,0.08);
     display: flex; flex-direction: column; align-items: center; justify-content: center;
     gap: 0.3vw; cursor: pointer; transition: all 0.25s;
     position: relative; overflow: hidden;
@@ -964,17 +964,17 @@ const STYLES = `
   .ps-tryon-guide-drop-v2:hover, .ps-tryon-guide-drop-v2.ps-drag {
     border-color: var(--ps-accent); background: rgba(187,148,92,0.04);
   }
-  .ps-tryon-guide-drop-v2.ps-has { border-style: solid; border-color: rgba(255,255,255,0.08); cursor: default; }
-  .ps-tryon-guide-drop-v2 svg { color: rgba(255,255,255,0.3); }
-  .ps-tryon-guide-drop-v2-text { font-size: 0.8vw; font-weight: 500; color: rgba(255,255,255,0.6); }
-  .ps-tryon-guide-drop-v2-hint { font-size: 0.55vw; color: rgba(255,255,255,0.25); }
+  .ps-tryon-guide-drop-v2.ps-has { border-style: solid; border-color: rgba(0,0,0,0.06); cursor: default; }
+  .ps-tryon-guide-drop-v2 svg { color: rgba(0,0,0,0.2); }
+  .ps-tryon-guide-drop-v2-text { font-size: 0.8vw; font-weight: 500; color: rgba(0,0,0,0.5); }
+  .ps-tryon-guide-drop-v2-hint { font-size: 0.55vw; color: rgba(0,0,0,0.15); }
   .ps-tryon-guide-drop-v2-img {
     width: 100%; height: 100%; object-fit: contain; border-radius: 0.5vw;
   }
   .ps-tryon-guide-drop-v2-remove {
     position: absolute; top: 0.4vw; right: 0.4vw;
     width: 1.4vw; height: 1.4vw; border-radius: 50%;
-    background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.15);
+    background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.08);
     color: #fff; font-size: 0.6vw; cursor: pointer;
     display: flex; align-items: center; justify-content: center;
     transition: background 0.2s;
@@ -987,7 +987,7 @@ const STYLES = `
   }
   .ps-tryon-guide-v2-tip {
     display: flex; align-items: center; gap: 0.4vw;
-    font-size: 0.65vw; color: rgba(255,255,255,0.6);
+    font-size: 0.65vw; color: rgba(0,0,0,0.5);
   }
   .ps-tryon-guide-v2-tip-icon {
     width: 1.2vw; height: 1.2vw; flex-shrink: 0;
@@ -1039,7 +1039,7 @@ const STYLES = `
     transition: color 0.2s; padding: 0;
   }
   .ps-tryon-v2-alt button:hover { color: var(--ps-accent); }
-  .ps-tryon-v2-alt span { color: rgba(255,255,255,0.1); font-size: 0.55vw; }
+  .ps-tryon-v2-alt span { color: rgba(0,0,0,0.06); font-size: 0.55vw; }
 
   /* Active field row highlight (legacy) */
   .ps-tryon-sf-row-active { border-bottom-color: var(--ps-accent); }
@@ -1052,20 +1052,20 @@ const STYLES = `
     font-size: 1.1vw; font-weight: 300; color: var(--ps-text-primary);
     margin: 0 0 0.8vw; letter-spacing: 0.12em; text-transform: uppercase;
     text-align: left;
-    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.6) 100%);
+    background: linear-gradient(90deg, #fff 0%, rgba(0,0,0,0.5) 100%);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   .ps-tryon-sf-unit-tabs {
-    display: inline-flex; gap: 0; border: 1px solid rgba(255,255,255,0.08);
+    display: inline-flex; gap: 0; border: 1px solid rgba(0,0,0,0.06);
     border-radius: 0.3vw; overflow: hidden; margin-bottom: 1vw; align-self: flex-start;
   }
   .ps-tryon-sf-unit-tab {
     background: none; border: none; padding: 0.3vw 0.9vw;
-    font-size: 0.62vw; font-weight: 600; color: rgba(255,255,255,0.35); cursor: pointer;
+    font-size: 0.62vw; font-weight: 600; color: rgba(0,0,0,0.25); cursor: pointer;
     font-family: inherit; transition: all 0.25s; letter-spacing: 0.06em; text-transform: uppercase;
   }
-  .ps-tryon-sf-unit-tab:hover { color: rgba(255,255,255,0.6); }
+  .ps-tryon-sf-unit-tab:hover { color: rgba(0,0,0,0.5); }
   .ps-tryon-sf-unit-tab.ps-active { color: var(--ps-accent); background: rgba(187,148,92,0.08); }
 
   .ps-tryon-sf-profile-bar { margin-bottom: 0.7vw; }
@@ -1098,7 +1098,7 @@ const STYLES = `
   /* Label — subtle, editorial */
   .ps-tryon-sf-float-label {
     display: block;
-    font-size: 0.58vw; font-weight: 500; color: rgba(255,255,255,0.35);
+    font-size: 0.58vw; font-weight: 500; color: rgba(0,0,0,0.25);
     letter-spacing: 0.1em; text-transform: uppercase;
     margin-bottom: 0.15vw;
     transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1111,7 +1111,7 @@ const STYLES = `
   .ps-tryon-sf-input {
     width: 100%; box-sizing: border-box;
     background: none; border: none;
-    border-bottom: 1px solid rgba(255,255,255,0.1);
+    border-bottom: 1px solid rgba(0,0,0,0.06);
     color: var(--ps-text-primary);
     font-size: 0.85vw; font-weight: 300; font-family: inherit;
     padding: 0.4vw 0; letter-spacing: 0.02em;
@@ -1123,12 +1123,12 @@ const STYLES = `
     border-bottom-color: var(--ps-accent);
   }
   .ps-tryon-sf-input:not(:placeholder-shown) {
-    border-bottom-color: rgba(255,255,255,0.2);
+    border-bottom-color: rgba(0,0,0,0.1);
   }
   .ps-tryon-sf-input:focus:not(:placeholder-shown) {
     border-bottom-color: var(--ps-accent);
   }
-  .ps-tryon-sf-input::placeholder { color: rgba(255,255,255,0.12); }
+  .ps-tryon-sf-input::placeholder { color: rgba(0,0,0,0.08); }
   .ps-tryon-sf-input::-webkit-outer-spin-button,
   .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 
@@ -1186,7 +1186,7 @@ const STYLES = `
     transition: color 0.25s; padding: 0.15vw 0; letter-spacing: 0.03em;
   }
   .ps-tryon-sf-switch-btn:hover { color: var(--ps-accent); }
-  .ps-tryon-sf-switch-divider { color: rgba(255,255,255,0.15); font-size: 0.65vw; font-weight: 300; }
+  .ps-tryon-sf-switch-divider { color: rgba(0,0,0,0.08); font-size: 0.65vw; font-weight: 300; }
   .ps-tryon-sf-switch-btn svg { stroke: currentColor; width: 0.8vw; height: 0.8vw; }
 
   /* How to measure — overlaid on product image bottom-left */
@@ -1494,7 +1494,7 @@ const STYLES = `
     position: relative;
   }
   .ps-tryon-unit-tab:first-child { border-right: 1px solid var(--ps-border-color); }
-  .ps-tryon-unit-tab:hover { color: var(--ps-text-secondary); background: rgba(255,255,255,0.03); }
+  .ps-tryon-unit-tab:hover { color: var(--ps-text-secondary); background: rgba(0,0,0,0.02); }
   .ps-tryon-unit-tab.ps-active {
     background: var(--ps-accent); color: #111;
   }
@@ -1673,8 +1673,8 @@ const STYLES = `
   }
   .ps-tryon-btn-download { background: var(--ps-accent); color: #111; }
   .ps-tryon-btn-download:hover { opacity: 0.9; }
-  .ps-tryon-btn-retry { background: rgba(255,255,255,0.08); color: var(--ps-text-primary); border: 1px solid var(--ps-border-color) !important; }
-  .ps-tryon-btn-retry:hover { background: rgba(255,255,255,0.12); }
+  .ps-tryon-btn-retry { background: rgba(0,0,0,0.06); color: var(--ps-text-primary); border: 1px solid var(--ps-border-color) !important; }
+  .ps-tryon-btn-retry:hover { background: rgba(0,0,0,0.08); }
 
   /* ── Size Result ── */
   .ps-tryon-sr { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
@@ -1868,7 +1868,7 @@ const STYLES = `
   /* Full-screen overlay inside the modal */
   .ps-tryon-sr-chart-overlay {
     position: absolute; inset: -3vw -1.2vw; z-index: 50;
-    background: var(--ps-modal-bg, #111211);
+    background: var(--ps-modal-bg, #FFFFFF);
     display: flex; flex-direction: column;
     animation: ps-fade-in 0.2s ease;
   }
@@ -1927,12 +1927,12 @@ const STYLES = `
   .ps-tryon-guide-preview img {
     max-width: 100%; max-height: 100%; object-fit: contain;
     display: block; border-radius: 0.5vw;
-    background: var(--ps-modal-bg, #111211);
+    background: var(--ps-modal-bg, #FFFFFF);
   }
   .ps-tryon-guide-preview-remove {
     position: absolute; top: 0.4vw; right: 0.4vw;
     width: 1.4vw; height: 1.4vw; display: flex; align-items: center; justify-content: center;
-    background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;
+    background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.1); border-radius: 50%;
     color: var(--ps-text-primary); font-size: 0.65vw; cursor: pointer; font-family: inherit;
     transition: all 0.2s;
   }
@@ -2040,7 +2040,7 @@ const STYLES = `
   .ps-tryon-sr-multi-top {
     display: flex; align-items: center; justify-content: space-between;
     padding-bottom: 0.5vw; margin-bottom: 0.4vw;
-    border-bottom: 1px solid rgba(255,255,255,0.04);
+    border-bottom: 1px solid rgba(0,0,0,0.03);
   }
   .ps-tryon-sr-multi-title {
     font-size: 0.9vw; font-weight: 300; color: var(--ps-text-primary);
@@ -2066,7 +2066,7 @@ const STYLES = `
   .ps-tryon-sec-bigcard {
     position: relative; overflow: hidden;
     display: flex; flex-direction: column;
-    background: #0e0e0e; border: 1px solid rgba(255,255,255,0.06); border-radius: 0.7vw;
+    background: #0e0e0e; border: 1px solid rgba(0,0,0,0.04); border-radius: 0.7vw;
     cursor: pointer; font-family: inherit;
     text-align: center; flex: 1; min-width: 0; padding: 0;
     transition: border-color 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
@@ -2161,11 +2161,11 @@ const STYLES = `
     display: flex; flex-direction: column; gap: 0.5vw;
     animation: ps-v2-fade 0.3s ease forwards;
     flex: 1; min-height: 0; overflow-y: auto;
-    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent;
+    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.04) transparent;
   }
   .ps-tryon-sec-detail-back {
     display: inline-flex; align-items: center; gap: 0.25vw;
-    background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer;
+    background: none; border: none; color: rgba(0,0,0,0.3); cursor: pointer;
     font-size: 0.6vw; font-family: inherit; padding: 0;
     transition: color 0.2s; align-self: flex-start;
     letter-spacing: 0.03em;
@@ -2175,7 +2175,7 @@ const STYLES = `
   .ps-tryon-sec-detail-header {
     display: flex; align-items: center; gap: 0.5vw;
     padding-bottom: 0.4vw;
-    border-bottom: 1px solid rgba(255,255,255,0.06);
+    border-bottom: 1px solid rgba(0,0,0,0.04);
   }
   .ps-tryon-sec-detail-icon {
     width: 1.8vw; height: 1.8vw;
@@ -2214,7 +2214,7 @@ const STYLES = `
   }
   .ps-tryon-sr-glass-btn {
     background: rgba(0,0,0,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255,255,255,0.25); border-radius: 0.45vw;
+    border: 1px solid rgba(0,0,0,0.15); border-radius: 0.45vw;
     color: var(--ps-text-primary); font-size: 0.62vw; font-weight: 700; font-family: inherit;
     padding: 0.4vw 0.8vw; cursor: pointer; transition: all 0.2s;
     white-space: nowrap; letter-spacing: 0.02em;
@@ -2226,14 +2226,14 @@ const STYLES = `
     position: absolute; bottom: 0.5vw; left: 0.5vw; z-index: 3;
   }
   .ps-tryon-sr-glass-btn:hover {
-    background: rgba(0,0,0,0.75); border-color: rgba(255,255,255,0.4);
+    background: rgba(0,0,0,0.75); border-color: rgba(0,0,0,0.3);
   }
   .ps-tryon-sr-img-icon {
     width: 1.8vw; height: 1.8vw; display: flex; align-items: center; justify-content: center;
-    background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15); border-radius: 0.4vw;
+    background: rgba(0,0,0,0.6); border: 1px solid rgba(0,0,0,0.08); border-radius: 0.4vw;
     color: #ccc; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(4px);
   }
-  .ps-tryon-sr-img-icon:hover { background: rgba(0,0,0,0.8); color: var(--ps-text-primary); border-color: rgba(255,255,255,0.3); }
+  .ps-tryon-sr-img-icon:hover { background: rgba(0,0,0,0.8); color: var(--ps-text-primary); border-color: rgba(0,0,0,0.2); }
 
   /* See fit visually — below size chips */
   .ps-tryon-sr-visual-btn {
@@ -2426,7 +2426,7 @@ const STYLES = `
 
   /* Drawer */
   .ps-tryon-drawer {
-    position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #111211);
+    position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #FFFFFF);
     overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding: 1.04vw 1.25vw;
     transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
     box-sizing: border-box;
@@ -2475,7 +2475,7 @@ const STYLES = `
   }
   .ps-tryon-history-item:hover { border-color: var(--ps-accent); box-shadow: 0 0.21vw 0.63vw rgba(187,148,92,0.06); }
   .ps-tryon-history-images { display: flex; gap: 0.42vw; flex-shrink: 0; }
-  .ps-tryon-history-thumb { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #111211); flex-shrink: 0; }
+  .ps-tryon-history-thumb { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; }
   .ps-tryon-history-info { flex: 1; min-width: 0; }
   .ps-tryon-history-product { font-size: 0.68vw; font-weight: 600; color: var(--ps-text-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
   .ps-tryon-history-meta { font-size: 0.57vw; color: var(--ps-text-muted); margin-top: 3px; }
@@ -2487,7 +2487,7 @@ const STYLES = `
     background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-light));
     color: #111; font-size: 0.68vw; font-weight: 700;
   }
-  .ps-tryon-history-result-img { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #111211); flex-shrink: 0; border: 2px solid var(--ps-accent); }
+  .ps-tryon-history-result-img { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: contain; background: var(--ps-modal-bg, #FFFFFF); flex-shrink: 0; border: 2px solid var(--ps-accent); }
   .ps-tryon-history-delete {
     width: 1.46vw; height: 1.46vw; display: flex; align-items: center; justify-content: center;
     border: none; background: transparent; cursor: pointer; color: var(--ps-text-muted); border-radius: 0.31vw; transition: all 0.2s; flex-shrink: 0;
@@ -2542,7 +2542,7 @@ const STYLES = `
     font-family: inherit; transition: all 0.15s; white-space: nowrap; line-height: 1.2;
   }
   .ps-tryon-pe-pill-btn.ps-active { background: var(--ps-accent); color: #111; }
-  .ps-tryon-pe-pill-btn:not(.ps-active):hover { color: var(--ps-text-secondary); background: rgba(255,255,255,0.04); }
+  .ps-tryon-pe-pill-btn:not(.ps-active):hover { color: var(--ps-text-secondary); background: rgba(0,0,0,0.03); }
   .ps-tryon-pe-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw 1.6vw; width: 100%; box-sizing: border-box; }
   .ps-tryon-pe-fields .ps-tryon-sf-float-field {
     min-width: 0; padding: 0.15vw 0.4vw;
@@ -2550,7 +2550,7 @@ const STYLES = `
   }
   .ps-tryon-pe-fields .ps-tryon-sf-float-label {
     flex-shrink: 0; margin: 0; white-space: nowrap;
-    font-size: 0.58vw; color: rgba(255,255,255,0.4);
+    font-size: 0.58vw; color: rgba(0,0,0,0.3);
   }
   .ps-tryon-pe-fields .ps-tryon-sf-float-field:focus-within .ps-tryon-sf-float-label { color: var(--ps-accent); }
   .ps-tryon-pe-fields .ps-tryon-sf-input {
@@ -2602,7 +2602,7 @@ const STYLES = `
   }
   .ps-tryon-detail-header span { font-size: 0.78vw; font-weight: 600; }
   .ps-tryon-detail-header button { background: none; border: none; color: var(--ps-text-secondary); cursor: pointer; display: flex; align-items: center; border-radius: 0.31vw; padding: 0.21vw; transition: background 0.15s; }
-  .ps-tryon-detail-header button:hover { background: rgba(255,255,255,0.1); }
+  .ps-tryon-detail-header button:hover { background: rgba(0,0,0,0.06); }
   .ps-tryon-detail-body { padding: 1.04vw 1.25vw; }
   .ps-tryon-detail-gender { display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; font-weight: 600; padding-bottom: 0.73vw; border-bottom: 1px solid var(--ps-border-color); margin-bottom: 0.73vw; }
   .ps-tryon-detail-gender svg { stroke: var(--ps-accent); fill: none; }
@@ -2881,7 +2881,7 @@ const STYLES = `
   .ps-bp-bra-region-wrap { position: relative; z-index: 100; }
   .ps-bp-bra-region-trigger {
     display: flex; align-items: center; gap: 0.35vw;
-    padding: 0.45vw 0.9vw; border: 1.5px solid rgba(255,255,255,0.2);
+    padding: 0.45vw 0.9vw; border: 1.5px solid rgba(0,0,0,0.1);
     border-radius: 0.4vw; background: transparent;
     color: rgba(255,255,255,0.7); font-size: 0.8vw; font-weight: 600;
     cursor: pointer; font-family: inherit; transition: all 0.25s;
@@ -2894,7 +2894,7 @@ const STYLES = `
   .ps-bp-bra-region-dropdown {
     position: absolute; top: calc(100% + 0.3vw); right: 0;
     min-width: 5vw; background: var(--ps-bg-secondary);
-    border: 1.5px solid rgba(255,255,255,0.15); border-radius: 0.4vw;
+    border: 1.5px solid rgba(0,0,0,0.08); border-radius: 0.4vw;
     box-shadow: 0 0.5vw 1.5vw rgba(0,0,0,0.5);
     overflow: hidden; animation: ps-bp-fade 0.2s ease both;
     padding: 0.25vw; z-index: 200;
@@ -2902,30 +2902,30 @@ const STYLES = `
   .ps-bp-bra-region-item {
     display: block; width: 100%; padding: 0.4vw 0.7vw;
     background: transparent; border: none; border-radius: 0.3vw;
-    color: rgba(255,255,255,0.5); font-size: 0.75vw; font-weight: 600;
+    color: rgba(0,0,0,0.08); font-size: 0.75vw; font-weight: 600;
     cursor: pointer; font-family: inherit; text-align: left;
     transition: all 0.15s;
   }
-  .ps-bp-bra-region-item:hover { background: rgba(255,255,255,0.06); color: var(--ps-text-primary); }
+  .ps-bp-bra-region-item:hover { background: rgba(0,0,0,0.04); color: var(--ps-text-primary); }
   .ps-bp-bra-region-item.ps-selected { color: var(--ps-accent); background: rgba(187,148,92,0.1); }
   .ps-bp-bra-grid {
     display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35vw;
   }
   .ps-bp-bra-btn {
     padding: 0.4vw 0; text-align: center;
-    background: transparent; border: 1px solid rgba(255,255,255,0.15);
+    background: transparent; border: 1px solid rgba(0,0,0,0.08);
     border-radius: 0.35vw; color: rgba(255,255,255,0.55);
     font-size: 0.65vw; font-weight: 500; cursor: pointer;
     font-family: inherit; transition: all 0.2s;
   }
-  .ps-bp-bra-btn:hover { border-color: rgba(255,255,255,0.4); color: var(--ps-text-primary); }
+  .ps-bp-bra-btn:hover { border-color: rgba(0,0,0,0.3); color: var(--ps-text-primary); }
   .ps-bp-bra-btn-selected {
     background: var(--ps-accent) !important; border-color: var(--ps-accent) !important;
     color: #111 !important; font-weight: 700;
   }
   /* Bra result */
   .ps-bp-bra-result {
-    text-align: center; font-size: 0.85vw; color: rgba(255,255,255,0.6);
+    text-align: center; font-size: 0.85vw; color: rgba(0,0,0,0.5);
     margin-top: 0.8vw; font-weight: 400;
   }
   .ps-bp-bra-result strong {
@@ -2933,7 +2933,7 @@ const STYLES = `
   }
   .ps-bp-bra-bust {
     display: block; margin-top: 0.2vw;
-    font-size: 0.75vw; color: rgba(255,255,255,0.4); font-weight: 400;
+    font-size: 0.75vw; color: rgba(0,0,0,0.3); font-weight: 400;
   }
 
   /* Profile option rows — WAIR style stacked list */
@@ -2999,7 +2999,7 @@ const STYLES = `
   }
   .ps-bp-shape-label::after {
     content: ""; flex: 1; height: 1px;
-    background: linear-gradient(to right, rgba(255,255,255,0.15), transparent);
+    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
   }
   .ps-bp-shape-row {
     display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5vw;
@@ -3007,7 +3007,7 @@ const STYLES = `
   }
   .ps-bp-img-card {
     display: flex; flex-direction: column; align-items: center;
-    background: transparent; border: 2px solid rgba(255,255,255,0.15);
+    background: transparent; border: 2px solid rgba(0,0,0,0.08);
     border-radius: 0.5vw; overflow: hidden; cursor: pointer;
     transition: all 0.2s ease; padding: 0; font-family: inherit;
     position: relative;
@@ -3044,12 +3044,12 @@ const STYLES = `
   .ps-bp-img-card .ps-bp-illust svg { width: 100%; height: 100%; }
   .ps-bp-img-card-label {
     padding: 0.3vw 0.2vw; font-size: 0.6vw; font-weight: 600;
-    color: rgba(255,255,255,0.5); text-align: center; width: 100%;
+    color: rgba(0,0,0,0.08); text-align: center; width: 100%;
     transition: opacity 0.2s;
   }
   /* Hover hint text below cards */
   .ps-bp-hover-hint {
-    text-align: center; font-size: 0.7vw; color: rgba(255,255,255,0.35);
+    text-align: center; font-size: 0.7vw; color: rgba(0,0,0,0.25);
     margin: 0.15vw 0 0; min-height: 1em; transition: opacity 0.2s;
     font-weight: 400; letter-spacing: 0.01em;
   }
@@ -3092,7 +3092,7 @@ const STYLES = `
     cursor: pointer; font-size: 1vw; line-height: 1; border-radius: 0.25vw;
     transition: all 0.15s; flex-shrink: 0;
   }
-  .ps-bp-photo-remove:hover { background: rgba(255,255,255,0.1); color: var(--ps-text-primary); }
+  .ps-bp-photo-remove:hover { background: rgba(0,0,0,0.06); color: var(--ps-text-primary); }
 
   /* Error */
   .ps-bp-error {
@@ -4142,7 +4142,7 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
     const curveDepth = width * 0.06;
     const midX = (x1 + x2) / 2;
     const fitRow = fitRows.find((r) => r.area.toLowerCase() === key);
-    const color = fitRow ? fitColor(fitRow.fit) : "#bb945c";
+    const color = fitRow ? fitColor(fitRow.fit) : "#2154EF";
     const delay = i * 0.35;
     const curvePath = `M ${x1} ${cy} Q ${midX} ${cy + curveDepth} ${x2} ${cy}`;
     const lineLen = width * 1.05;