@primestyleai/tryon 4.6.0 → 4.7.1

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; }
@@ -384,7 +384,7 @@ const STYLES = `
     transition: all 0.25s ease; font-family: inherit; white-space: nowrap;
   }
   .ps-tryon-lang-trigger:hover, .ps-tryon-lang-trigger.ps-active {
-    border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(187,148,92,0.06);
+    border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.06);
   }
   .ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; }
   .ps-tryon-lang-current {
@@ -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,8 +421,8 @@ 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.ps-selected { background: rgba(187,148,92,0.1); color: var(--ps-accent); }
+  .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(33,84,239,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); } }
@@ -466,7 +466,7 @@ const STYLES = `
   .ps-tryon-feature-title { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); margin-bottom: 2px; }
   .ps-tryon-feature-desc { font-size: 0.7vw; color: var(--ps-text-secondary); }
   .ps-tryon-cta {
-    width: 100%; padding: 1vw; background: var(--ps-accent); color: #111; border: none;
+    width: 100%; padding: 1vw; background: var(--ps-accent); color: #fff; border: none;
     border-radius: 0.8vw; font-size: 1vw; font-weight: 700; cursor: pointer;
     display: flex; align-items: center; justify-content: center; gap: 0.5vw; transition: all 0.2s;
     font-family: var(--ps-modal-font, system-ui, sans-serif);
@@ -477,18 +477,18 @@ const STYLES = `
 
   /* Upload */
   .ps-tryon-upload {
-    border: 2px dashed var(--ps-upload-border, #333); border-radius: 0.63vw;
+    border: 2px dashed var(--ps-upload-border, var(--ps-border-color)); border-radius: 0.63vw;
     padding: 2.08vw 1.25vw; text-align: center; cursor: pointer; transition: all 0.2s;
     background: var(--ps-upload-bg, transparent); display: flex; flex-direction: column; align-items: center;
   }
-  .ps-tryon-upload:hover, .ps-tryon-drag-over { border-color: var(--ps-accent); background: rgba(187,148,92,0.05); }
+  .ps-tryon-upload:hover, .ps-tryon-drag-over { border-color: var(--ps-accent); background: rgba(33,84,239,0.05); }
   .ps-tryon-upload svg { color: var(--ps-upload-icon-color, var(--ps-accent)); margin-bottom: 0.63vw; }
-  .ps-tryon-upload-text { font-size: 0.73vw; color: var(--ps-upload-color, #fff); margin: 0 0 0.21vw; }
+  .ps-tryon-upload-text { font-size: 0.73vw; color: var(--ps-upload-color, var(--ps-text-primary)); margin: 0 0 0.21vw; }
   .ps-tryon-upload-hint { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }
   .ps-tryon-preview {
     position: relative; margin-bottom: 0.21vw;
     height: 20vw; border-radius: 0.63vw;
-    overflow: hidden; background: #0a0a0a;
+    overflow: hidden; background: var(--ps-bg-tertiary);
   }
   .ps-tryon-preview-blur {
     position: absolute; inset: -20px; background-size: cover; background-position: center;
@@ -706,26 +706,26 @@ const STYLES = `
     margin-bottom: 0.6vw;
   }
   .ps-tryon-v2-title {
-    font-size: 1.2vw; font-weight: 300; color: #fff;
+    font-size: 1.2vw; font-weight: 300; color: var(--ps-text-primary);
     letter-spacing: 0.2em; text-transform: uppercase; margin: 0;
     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;
   }
   .ps-tryon-v2-unit.ps-on {
-    background: rgba(187,148,92,0.15); color: var(--ps-accent);
+    background: rgba(33,84,239,0.15); color: var(--ps-accent);
   }
 
   /* Body type card selector */
@@ -739,15 +739,15 @@ 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 {
-    border-color: var(--ps-accent); background: rgba(187,148,92,0.06);
+    border-color: var(--ps-accent); background: rgba(33,84,239,0.06);
   }
   .ps-tryon-bodytype-card.ps-active {
-    border-color: var(--ps-accent); background: rgba(187,148,92,0.12);
+    border-color: var(--ps-accent); background: rgba(33,84,239,0.12);
     color: var(--ps-accent);
   }
   .ps-tryon-bodytype-label {
@@ -757,26 +757,26 @@ const STYLES = `
   /* Separator */
   .ps-tryon-v2-sep {
     height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(187,148,92,0.2), transparent);
+    background: linear-gradient(90deg, transparent, rgba(33,84,239,0.2), transparent);
     margin-bottom: 0.8vw;
   }
 
   /* 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;
   }
-  .ps-tryon-v2-profile:focus { border-color: rgba(187,148,92,0.3); }
+  .ps-tryon-v2-profile:focus { border-color: rgba(33,84,239,0.3); }
 
   /* Fields container — scrollable */
   .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,9 +801,9 @@ 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-size: 1vw; font-weight: 400; color: var(--ps-text-primary);
     font-family: inherit; outline: none;
     -moz-appearance: textfield;
     transition: border-color 0.3s;
@@ -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; }
@@ -830,7 +830,7 @@ const STYLES = `
   }
   .ps-tryon-v2-cta:hover {
     background: var(--ps-accent-light);
-    box-shadow: 0 0.3vw 1.5vw rgba(187,148,92,0.25);
+    box-shadow: 0 0.3vw 1.5vw rgba(33,84,239,0.25);
     transform: translateY(-1px);
   }
   .ps-tryon-v2-cta svg { width: 0.8vw; height: 0.8vw; stroke: currentColor; }
@@ -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);
@@ -880,13 +880,13 @@ const STYLES = `
   .ps-tryon-sr-card-row:nth-child(4) { animation-delay: 0.18s; }
   .ps-tryon-sr-card-row:hover {
     border-color: var(--ps-accent);
-    background: rgba(187,148,92,0.04);
+    background: rgba(33,84,239,0.04);
     transform: translateX(0.15vw);
   }
   .ps-tryon-sr-card-icon {
     width: 2vw; height: 2vw; flex-shrink: 0;
     display: flex; align-items: center; justify-content: center;
-    background: rgba(187,148,92,0.06); border: 1px solid rgba(187,148,92,0.1);
+    background: rgba(33,84,239,0.06); border: 1px solid rgba(33,84,239,0.1);
     border-radius: 50%; color: var(--ps-accent);
   }
   .ps-tryon-sr-card-icon svg { stroke: currentColor; }
@@ -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);
@@ -927,7 +927,7 @@ const STYLES = `
   .ps-tryon-sr-card-v2.ps-full { flex: 1 1 100%; max-width: 100%; min-height: 5vw; padding: 0.8vw; }
   .ps-tryon-sr-card-v2:hover {
     border-color: var(--ps-accent);
-    background: rgba(187,148,92,0.06);
+    background: rgba(33,84,239,0.06);
     transform: translateY(-2px);
     box-shadow: 0 0.4vw 1.5vw rgba(0,0,0,0.3);
   }
@@ -935,11 +935,11 @@ 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 {
-    font-size: 2.2vw; font-weight: 200; color: #fff;
+    font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);
     line-height: 1; letter-spacing: -0.02em;
   }
   .ps-tryon-sr-card-v2.ps-full .ps-tryon-sr-card-v2-value { font-size: 1.8vw; }
@@ -947,7 +947,7 @@ const STYLES = `
     font-size: 0.5vw; font-weight: 600; color: var(--ps-accent);
     text-transform: uppercase; letter-spacing: 0.1em;
     margin-top: 0.15vw;
-    border: 1px solid rgba(187,148,92,0.25); border-radius: 2vw;
+    border: 1px solid rgba(33,84,239,0.25); border-radius: 2vw;
     padding: 0.1vw 0.5vw;
   }
   .ps-tryon-sr-card-v2-img { display: none; }
@@ -956,26 +956,26 @@ 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;
   }
   .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);
+    border-color: var(--ps-accent); background: rgba(33,84,239,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);
-    color: #fff; font-size: 0.6vw; cursor: pointer;
+    background: rgba(0,0,0,0.7); border: 1px solid rgba(0,0,0,0.08);
+    color: var(--ps-text-muted); 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;
@@ -1033,13 +1033,13 @@ const STYLES = `
     margin-top: 0.5vw; flex-shrink: 0;
   }
   .ps-tryon-v2-alt button {
-    background: none; border: none; color: rgba(187,148,92,0.5);
+    background: none; border: none; color: rgba(33,84,239,0.5);
     font-size: 0.58vw; font-weight: 500; cursor: pointer;
     font-family: inherit; letter-spacing: 0.04em;
     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,21 +1052,21 @@ 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.ps-active { color: var(--ps-accent); background: rgba(187,148,92,0.08); }
+  .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(33,84,239,0.08); }
 
   .ps-tryon-sf-profile-bar { margin-bottom: 0.7vw; }
   .ps-tryon-sf-profile-select {
@@ -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; }
 
@@ -1180,13 +1180,13 @@ const STYLES = `
   /* Mode switch — below button */
   .ps-tryon-sf-mode-switch { margin-top: 0.5vw; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.25vw; }
   .ps-tryon-sf-switch-btn {
-    background: none; border: none; color: rgba(187,148,92,0.7); font-size: 0.65vw;
+    background: none; border: none; color: rgba(33,84,239,0.7); font-size: 0.65vw;
     font-weight: 500; cursor: pointer; font-family: inherit;
     display: inline-flex; align-items: center; gap: 0.2vw;
     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 */
@@ -1199,7 +1199,7 @@ const STYLES = `
     padding: 0.4vw 0.8vw; border-radius: 0.45vw; transition: all 0.2s;
   }
   .ps-tryon-sf-measure-overlay:hover { border-color: var(--ps-accent); color: var(--ps-text-primary); }
-  .ps-tryon-sf-measure-overlay.ps-active { border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(187,148,92,0.15); }
+  .ps-tryon-sf-measure-overlay.ps-active { border-color: var(--ps-accent); color: var(--ps-accent); background: rgba(33,84,239,0.15); }
   .ps-tryon-sf-measure-overlay svg { stroke: currentColor; }
 
   /* Estimation review view */
@@ -1211,7 +1211,7 @@ const STYLES = `
   }
   .ps-tryon-sf-estimated-badge {
     display: inline-block; font-size: 0.45vw; padding: 0.08vw 0.25vw;
-    border-radius: 0.2vw; background: rgba(187,148,92,0.15); color: var(--ps-accent);
+    border-radius: 0.2vw; background: rgba(33,84,239,0.15); color: var(--ps-accent);
     letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; width: fit-content;
   }
   .ps-tryon-sf-edit-icon {
@@ -1254,7 +1254,7 @@ const STYLES = `
     font-weight: 600; cursor: pointer; font-family: inherit;
     flex-shrink: 0; letter-spacing: 0.06em; text-transform: uppercase;
     transition: background 0.2s ease, opacity 0.2s ease;
-    box-shadow: 0 0.2vw 1vw rgba(187,148,92,0.15);
+    box-shadow: 0 0.2vw 1vw rgba(33,84,239,0.15);
     display: inline-flex; align-items: center; gap: 0.35vw;
   }
   .ps-tryon-sf-next:hover { background: var(--ps-accent-hover); }
@@ -1282,7 +1282,7 @@ const STYLES = `
     padding: 0.3vw 1.4vw; cursor: pointer; font-family: inherit; transition: all 0.15s;
   }
   .ps-hpk-toggle button.ps-on {
-    background: var(--ps-accent); color: #111; border-radius: 2vw;
+    background: var(--ps-accent); color: #fff; border-radius: 2vw;
   }
 
   /* Main visual area */
@@ -1344,16 +1344,16 @@ const STYLES = `
   /* Horizontal indicator line — spans full width */
   .ps-hpk-line {
     position: absolute; left: 0; right: 0; height: 2px;
-    background: rgba(187,148,92,0.5); z-index: 3;
+    background: rgba(33,84,239,0.5); z-index: 3;
     transform: translateY(50%); pointer-events: none;
-    box-shadow: 0 0 8px rgba(187,148,92,0.3);
+    box-shadow: 0 0 8px rgba(33,84,239,0.3);
   }
   .ps-hpk-line::before {
     content: ''; position: absolute; left: 50%; top: 50%;
     transform: translate(-50%, -50%);
     width: 10px; height: 10px; border-radius: 50%;
     border: 2px solid var(--ps-accent); background: var(--ps-bg-secondary);
-    box-shadow: 0 0 8px rgba(187,148,92,0.6);
+    box-shadow: 0 0 8px rgba(33,84,239,0.6);
   }
 
   /* ══════════ Weight Picker ══════════ */
@@ -1398,7 +1398,7 @@ const STYLES = `
   .ps-wpk-ind-dot {
     width: 10px; height: 10px; border-radius: 50%;
     background: var(--ps-accent); border: 2px solid #fff; flex-shrink: 0;
-    box-shadow: 0 0 8px rgba(187,148,92,0.7);
+    box-shadow: 0 0 8px rgba(33,84,239,0.7);
   }
 
   .ps-wpk-labels {
@@ -1480,7 +1480,7 @@ const STYLES = `
     padding: 0.31vw 0.73vw; background: transparent; border: none; color: var(--ps-text-secondary);
     font-size: 0.63vw; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;
   }
-  .ps-tryon-unit-btn.ps-active { background: var(--ps-accent); color: #111; }
+  .ps-tryon-unit-btn.ps-active { background: var(--ps-accent); color: #fff; }
 
   /* Unit tabs (cm / inches) */
   .ps-tryon-unit-tabs {
@@ -1494,9 +1494,9 @@ 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;
+    background: var(--ps-accent); color: #fff;
   }
   .ps-tryon-section-label { font-size: 0.57vw; font-weight: 700; color: var(--ps-accent); text-transform: uppercase; letter-spacing: 0.08em; margin: 0.21vw 0 0.1vw; }
   .ps-tryon-optional-section { border-top: 1px solid var(--ps-border-color); padding-top: 0.52vw; margin-top: 0.31vw; }
@@ -1537,13 +1537,13 @@ const STYLES = `
   }
   .ps-tryon-scan-overlay {
     position: absolute; inset: 0;
-    background: linear-gradient(180deg, rgba(187,148,92,0.05) 0%, transparent 40%, transparent 60%, rgba(187,148,92,0.05) 100%);
+    background: linear-gradient(180deg, rgba(33,84,239,0.05) 0%, transparent 40%, transparent 60%, rgba(33,84,239,0.05) 100%);
     pointer-events: none;
   }
   .ps-tryon-scan-line {
     position: absolute; left: 0; right: 0; height: 3px;
     background: linear-gradient(90deg, transparent, #bb945c 20%, var(--ps-accent-light) 50%, #bb945c 80%, transparent);
-    box-shadow: 0 0 0.78vw rgba(187,148,92,0.6), 0 0 2.08vw rgba(187,148,92,0.2);
+    box-shadow: 0 0 0.78vw rgba(33,84,239,0.6), 0 0 2.08vw rgba(33,84,239,0.2);
     animation: ps-scan 2.5s ease-in-out infinite;
     pointer-events: none; z-index: 2;
   }
@@ -1671,10 +1671,10 @@ const STYLES = `
     flex: 1; padding: 0.63vw; font-family: var(--ps-modal-font, system-ui, sans-serif);
     font-size: 0.68vw; font-weight: 600; border-radius: 0.52vw; cursor: pointer; transition: all 0.2s; border: none;
   }
-  .ps-tryon-btn-download { background: var(--ps-accent); color: #111; }
+  .ps-tryon-btn-download { background: var(--ps-accent); color: #fff; }
   .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; }
@@ -1704,7 +1704,7 @@ const STYLES = `
   }
   .ps-tryon-sr-chart-btn {
     position: absolute; bottom: 1vw; left: 1vw;
-    background: rgba(255,255,255,0.95); color: #111; border: none;
+    background: rgba(255,255,255,0.95); color: var(--ps-text-primary); border: none;
     padding: 0.4vw 0.8vw; border-radius: 0.3vw; font-size: 0.7vw; font-weight: 600;
     cursor: pointer; font-family: inherit; transition: all 0.2s;
   }
@@ -1742,7 +1742,7 @@ const STYLES = `
   .ps-tryon-sr-size-changed {
     display: inline-flex; align-items: center; gap: 0.3vw;
     padding: 0.3vw 0.6vw; border-radius: 0.3vw;
-    background: rgba(187,148,92,0.08); border: 1px solid rgba(187,148,92,0.2);
+    background: rgba(33,84,239,0.08); border: 1px solid rgba(33,84,239,0.2);
     font-size: 0.7vw; color: var(--ps-accent-light);
   }
   .ps-tryon-sr-size-changed svg { stroke: var(--ps-accent); }
@@ -1830,7 +1830,7 @@ const STYLES = `
     gap: 0.4vw; cursor: pointer; transition: all 0.2s; min-height: 8vw;
   }
   .ps-tryon-upload-modal-dropzone:hover { border-color: var(--ps-accent); }
-  .ps-tryon-upload-modal-dropzone.ps-drag-over { border-color: var(--ps-accent); background: rgba(187,148,92,0.06); }
+  .ps-tryon-upload-modal-dropzone.ps-drag-over { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }
   .ps-tryon-upload-modal-dropzone svg { color: var(--ps-text-muted); }
   .ps-tryon-upload-modal-dropzone p {
     font-size: 0.75vw; color: #ccc; margin: 0; font-weight: 500;
@@ -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;
   }
@@ -1914,7 +1914,7 @@ const STYLES = `
     cursor: pointer; transition: all 0.2s; text-align: center;
   }
   .ps-tryon-guide-dropzone:hover, .ps-tryon-guide-dropzone.ps-drag {
-    border-color: var(--ps-accent); background: rgba(187,148,92,0.05);
+    border-color: var(--ps-accent); background: rgba(33,84,239,0.05);
   }
   .ps-tryon-guide-dropzone svg { color: #555; stroke: #555; }
   .ps-tryon-guide-dropzone-text { margin: 0; font-size: 0.9vw; color: var(--ps-text-primary); font-weight: 600; }
@@ -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;
   }
@@ -2009,7 +2009,7 @@ const STYLES = `
   .ps-tryon-chart-section-rec strong {
     color: var(--ps-accent); font-weight: 700; font-size: 0.7vw;
   }
-  .ps-active-row td { color: var(--ps-text-primary) !important; background: rgba(187,148,92,0.1); }
+  .ps-active-row td { color: var(--ps-text-primary) !important; background: rgba(33,84,239,0.1); }
   .ps-active-row .ps-size-col { color: var(--ps-accent) !important; font-weight: 700; }
 
   .ps-tryon-sr-chart-table-wrap { overflow-x: auto; max-height: 14vw; overflow-y: auto; }
@@ -2019,7 +2019,7 @@ const STYLES = `
     border-bottom: 1px solid var(--ps-border-color); position: sticky; top: 0; background: #111211;
   }
   .ps-tryon-sr-chart-table td { padding: 0.3vw 0.5vw; color: var(--ps-text-secondary); border-bottom: 1px solid #1a1a1a; }
-  .ps-tryon-sr-chart-active td { color: var(--ps-text-primary); background: rgba(187,148,92,0.08); }
+  .ps-tryon-sr-chart-active td { color: var(--ps-text-primary); background: rgba(33,84,239,0.08); }
 
   /* Size chips */
   .ps-tryon-sr-chips { display: flex; flex-wrap: wrap; gap: 0.4vw; justify-content: center; margin-top: 3.5vh; }
@@ -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;
@@ -2084,7 +2084,7 @@ const STYLES = `
   .ps-tryon-sec-bigcard:hover {
     border-color: var(--ps-accent);
     transform: translateY(-0.2vw) scale(1.015);
-    box-shadow: 0 0.8vw 2.5vw rgba(0,0,0,0.5), 0 0 0 1px rgba(187,148,92,0.1);
+    box-shadow: 0 0.8vw 2.5vw rgba(0,0,0,0.5), 0 0 0 1px rgba(33,84,239,0.1);
   }
   .ps-tryon-sec-bigcard:not(.ps-has-img) {
     align-items: center; justify-content: center;
@@ -2121,12 +2121,12 @@ const STYLES = `
   .ps-tryon-sec-bigcard-icon {
     width: 2.8vw; height: 2.8vw;
     display: flex; align-items: center; justify-content: center;
-    background: rgba(187,148,92,0.06); border: 1px solid rgba(187,148,92,0.12);
+    background: rgba(33,84,239,0.06); border: 1px solid rgba(33,84,239,0.12);
     border-radius: 50%;
     color: var(--ps-accent); transition: all 0.3s;
   }
   .ps-tryon-sec-bigcard:hover .ps-tryon-sec-bigcard-icon {
-    background: rgba(187,148,92,0.12); border-color: rgba(187,148,92,0.25);
+    background: rgba(33,84,239,0.12); border-color: rgba(33,84,239,0.25);
     transform: scale(1.06);
   }
   .ps-tryon-sec-bigcard-icon svg { stroke: currentColor; }
@@ -2137,14 +2137,14 @@ const STYLES = `
     text-shadow: 0 1px 6px rgba(0,0,0,0.8);
   }
   .ps-tryon-sec-bigcard-size {
-    font-size: 2.2vw; font-weight: 200; color: #fff;
+    font-size: 2.2vw; font-weight: 200; color: var(--ps-text-primary);
     text-shadow: 0 2px 8px rgba(0,0,0,0.5);
     line-height: 1; letter-spacing: -0.02em;
   }
   .ps-tryon-sec-bigcard-badge {
     font-size: 0.45vw; font-weight: 600; text-transform: uppercase;
     color: var(--ps-accent); background: none;
-    border: 1px solid rgba(187,148,92,0.3);
+    border: 1px solid rgba(33,84,239,0.3);
     padding: 0.12vw 0.45vw; border-radius: 2vw; letter-spacing: 0.08em;
   }
   .ps-tryon-sec-bigcard-fit {
@@ -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,12 +2175,12 @@ 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;
     display: flex; align-items: center; justify-content: center;
-    background: rgba(187,148,92,0.08); border: 1px solid rgba(187,148,92,0.12);
+    background: rgba(33,84,239,0.08); border: 1px solid rgba(33,84,239,0.12);
     border-radius: 50%; color: var(--ps-accent);
   }
   .ps-tryon-sec-detail-icon svg { stroke: currentColor; }
@@ -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 {
@@ -2308,7 +2308,7 @@ const STYLES = `
   }
   .ps-tryon-sr-cta:hover {
     background: var(--ps-accent-light);
-    box-shadow: 0 0.3vw 1.5vw rgba(187,148,92,0.25);
+    box-shadow: 0 0.3vw 1.5vw rgba(33,84,239,0.25);
     transform: translateY(-1px);
   }
 
@@ -2319,7 +2319,7 @@ const STYLES = `
     width: 0.25vw; height: 0.25vw; border-radius: 50%; background: var(--ps-accent);
   }
   .ps-tryon-sr-chip.ps-active .ps-tryon-sr-rec-dot { background: #fff; }
-  .ps-tryon-sr-chip.ps-recommended { border-color: rgba(187,148,92,0.4); }
+  .ps-tryon-sr-chip.ps-recommended { border-color: rgba(33,84,239,0.4); }
 
   /* ── Full Size Chart Overlay ── */
   .ps-tryon-fc-overlay {
@@ -2383,10 +2383,10 @@ const STYLES = `
     color: var(--ps-text-secondary); border-bottom: 1px solid #1e1e1e;
   }
   .ps-tryon-fc-table td:first-child { text-align: left; font-weight: 600; color: #ccc; }
-  .ps-tryon-fc-rec-row td { color: var(--ps-text-primary); font-weight: 600; background: rgba(187,148,92,0.05); }
+  .ps-tryon-fc-rec-row td { color: var(--ps-text-primary); font-weight: 600; background: rgba(33,84,239,0.05); }
   .ps-tryon-fc-rec-pill {
     display: inline-flex; align-items: center; justify-content: center;
-    background: #fff; color: #111; padding: 0.15vw 0.5vw;
+    background: #fff; color: var(--ps-text-primary); padding: 0.15vw 0.5vw;
     border-radius: 1vw; font-weight: 800; font-size: 0.7vw;
   }
 
@@ -2404,13 +2404,13 @@ const STYLES = `
   }
   .ps-tryon-save-row input:focus { border-color: var(--ps-accent); }
   .ps-tryon-save-row button {
-    padding: 0.52vw 1.04vw; background: var(--ps-accent); color: #111; border: none; border-radius: 0.52vw;
+    padding: 0.52vw 1.04vw; background: var(--ps-accent); color: #fff; border: none; border-radius: 0.52vw;
     font-size: 0.68vw; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;
   }
   .ps-tryon-save-row button:hover { opacity: 0.9; }
   .ps-tryon-save-btn-group { display: flex; gap: 0.31vw; }
   .ps-tryon-save-new-btn { background: transparent !important; border: 1.5px solid var(--ps-accent) !important; color: var(--ps-accent) !important; }
-  .ps-tryon-save-new-btn:hover { background: rgba(187,148,92,0.1) !important; }
+  .ps-tryon-save-new-btn:hover { background: rgba(33,84,239,0.1) !important; }
   .ps-tryon-save-done { font-size: 0.63vw; color: #4ade80; margin-top: 0.52vw; display: flex; align-items: center; gap: 0.31vw; justify-content: center; }
   .ps-tryon-save-done svg { stroke: currentColor; }
 
@@ -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;
@@ -2446,7 +2446,7 @@ const STYLES = `
     color: var(--ps-accent); font-size: 1vw; font-weight: 600; cursor: pointer;
     font-family: inherit; transition: all 0.2s; flex-shrink: 0; line-height: 1;
   }
-  .ps-tryon-drawer-add-btn:hover { border-color: var(--ps-accent); background: rgba(187,148,92,0.1); }
+  .ps-tryon-drawer-add-btn:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.1); }
   .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 0.52vw; max-width: 100%; overflow-x: hidden; }
   .ps-tryon-drawer-empty { text-align: center; padding: 1.67vw 0.83vw; color: var(--ps-text-muted); font-size: 0.73vw; }
 
@@ -2459,7 +2459,7 @@ const STYLES = `
   .ps-tryon-profile-avatar {
     width: 2.08vw; height: 2.08vw; border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
-    background: rgba(187,148,92,0.1); flex-shrink: 0;
+    background: rgba(33,84,239,0.1); flex-shrink: 0;
   }
   .ps-tryon-profile-avatar svg { stroke: var(--ps-accent); fill: none; }
   .ps-tryon-profile-info { flex: 1; min-width: 0; }
@@ -2473,9 +2473,9 @@ const STYLES = `
     display: flex; gap: 0.73vw; padding: 0.73vw;
     border: 1px solid var(--ps-border-color); border-radius: 0.63vw; align-items: flex-start; transition: all 0.2s;
   }
-  .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-item:hover { border-color: var(--ps-accent); box-shadow: 0 0.21vw 0.63vw rgba(33,84,239,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; }
@@ -2485,9 +2485,9 @@ const STYLES = `
     flex-shrink: 0; width: 2.08vw; height: 2.08vw; border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-light));
-    color: #111; font-size: 0.68vw; font-weight: 700;
+    color: var(--ps-text-primary); 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;
@@ -2497,12 +2497,12 @@ const STYLES = `
   .ps-tryon-history-clickable { cursor: pointer; }
   .ps-tryon-history-sections { display: flex; flex-wrap: wrap; gap: 0.3vw; margin-top: 0.31vw; }
   .ps-tryon-history-section-chip {
-    font-size: 0.55vw; font-weight: 600; color: var(--ps-text-primary); background: rgba(187,148,92,0.18);
-    border: 1px solid rgba(187,148,92,0.3); border-radius: 0.3vw; padding: 0.15vw 0.4vw;
+    font-size: 0.55vw; font-weight: 600; color: var(--ps-text-primary); background: rgba(33,84,239,0.18);
+    border: 1px solid rgba(33,84,239,0.3); border-radius: 0.3vw; padding: 0.15vw 0.4vw;
   }
   .ps-tryon-history-tryon-badge {
     display: inline-block; font-size: 0.5vw; font-weight: 600; color: var(--ps-accent);
-    background: rgba(187,148,92,0.12); border: 1px solid rgba(187,148,92,0.25);
+    background: rgba(33,84,239,0.12); border: 1px solid rgba(33,84,239,0.25);
     border-radius: 0.25vw; padding: 0.1vw 0.35vw; margin-top: 0.25vw;
   }
 
@@ -2523,8 +2523,8 @@ const STYLES = `
     font-family: inherit; text-align: left; transition: all 0.2s;
     flex: 1;
   }
-  .ps-tryon-quiz-option:hover { border-color: var(--ps-accent); background: rgba(187,148,92,0.06); }
-  .ps-tryon-quiz-option.ps-active { border-color: var(--ps-accent); background: rgba(187,148,92,0.12); }
+  .ps-tryon-quiz-option:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }
+  .ps-tryon-quiz-option.ps-active { border-color: var(--ps-accent); background: rgba(33,84,239,0.12); }
   .ps-tryon-quiz-option-label { font-size: 0.8vw; font-weight: 600; }
   .ps-tryon-quiz-option-desc { font-size: 0.6vw; color: var(--ps-text-secondary); }
 
@@ -2541,8 +2541,8 @@ const STYLES = `
     color: var(--ps-text-muted); font-size: 0.62vw; font-weight: 600; cursor: pointer;
     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.ps-active { background: var(--ps-accent); color: #fff; }
+  .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 {
@@ -2564,7 +2564,7 @@ const STYLES = `
   .ps-tryon-pe-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.8vw; margin-top: 1.2vw; }
   .ps-tryon-pe-actions .ps-tryon-est-back { font-size: 0.65vw; }
   .ps-tryon-pe-save {
-    padding: 0.45vw 1.2vw; background: var(--ps-accent); color: #111; border: none;
+    padding: 0.45vw 1.2vw; background: var(--ps-accent); color: #fff; border: none;
     border-radius: 0.4vw; font-size: 0.65vw; font-weight: 600; cursor: pointer;
     font-family: inherit; letter-spacing: 0.06em; text-transform: uppercase;
     display: inline-flex; align-items: center; gap: 0.3vw;
@@ -2577,7 +2577,7 @@ const STYLES = `
     font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s;
     display: flex; align-items: center; justify-content: center; gap: 0.3vw;
   }
-  .ps-tryon-drawer-create:hover { border-color: var(--ps-accent); background: rgba(187,148,92,0.06); }
+  .ps-tryon-drawer-create:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.06); }
   .ps-tryon-drawer-clear {
     background: none; border: none; color: var(--ps-text-muted); font-size: 0.6vw;
     font-weight: 500; cursor: pointer; font-family: inherit; padding: 0.3vw 0;
@@ -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; }
@@ -2720,7 +2720,7 @@ const STYLES = `
   .ps-bp-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
   .ps-bp-shapes-header { flex-shrink: 0; margin-bottom: 0.6vw; text-align: left; }
   .ps-bp-shapes-header .ps-bp-title { font-size: 1vw; font-weight: 600; }
-  .ps-bp-shapes-header .ps-bp-subtitle { font-size: 0.55vw; color: rgba(255,255,255,0.45); font-weight: 400; }
+  .ps-bp-shapes-header .ps-bp-subtitle { font-size: 0.55vw; color: var(--ps-text-muted); font-weight: 400; }
 
   /* Split layout: product left, form right — FIXED vh height, never changes */
   .ps-bp-layout {
@@ -2742,7 +2742,7 @@ const STYLES = `
     cursor: pointer; border: 2px dashed var(--ps-border-color);
     align-self: stretch; align-items: center; justify-content: center;
   }
-  .ps-bp-upload-zone:hover { border-color: var(--ps-accent); background: rgba(187,148,92,0.04); }
+  .ps-bp-upload-zone:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.04); }
   .ps-bp-upload-placeholder {
     display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vw;
     color: var(--ps-text-muted);
@@ -2755,7 +2755,7 @@ const STYLES = `
     position: absolute; top: 0.5vw; right: 0.5vw;
     width: 1.6vw; height: 1.6vw; display: flex; align-items: center; justify-content: center;
     background: rgba(0,0,0,0.6); border: none; border-radius: 50%;
-    color: #fff; font-size: 1vw; cursor: pointer; line-height: 1;
+    color: var(--ps-text-primary); font-size: 1vw; cursor: pointer; line-height: 1;
     transition: background 0.15s; z-index: 2;
   }
   .ps-bp-image-remove:hover { background: rgba(0,0,0,0.8); }
@@ -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.ps-selected { color: var(--ps-accent); background: rgba(187,148,92,0.1); }
+  .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(33,84,239,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);
-    border-radius: 0.35vw; color: rgba(255,255,255,0.55);
+    background: transparent; border: 1px solid rgba(0,0,0,0.08);
+    border-radius: 0.35vw; color: var(--ps-text-secondary);
     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;
+    color: #fff !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 */
@@ -2950,14 +2950,14 @@ const STYLES = `
     box-shadow: 0 1px 4px rgba(0,0,0,0.05);
   }
   .ps-bp-option:hover {
-    border-color: rgba(187,148,92,0.5);
+    border-color: rgba(33,84,239,0.5);
     box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     transform: translateY(-1px);
   }
   .ps-bp-option:hover .ps-bp-illust svg { transform: scale(1.05); }
   .ps-bp-option-selected {
     border-color: var(--ps-accent) !important;
-    box-shadow: 0 4px 12px rgba(187,148,92,0.18) !important;
+    box-shadow: 0 4px 12px rgba(33,84,239,0.18) !important;
   }
   .ps-bp-option-icon {
     width: 6vw; height: 6vw; flex-shrink: 0;
@@ -2970,7 +2970,7 @@ const STYLES = `
     flex: 1; font-size: 0.73vw; font-weight: 500;
     color: #555; text-align: center;
   }
-  .ps-bp-option-selected .ps-bp-option-label { color: #111; font-weight: 600; }
+  .ps-bp-option-selected .ps-bp-option-label { color: var(--ps-accent); font-weight: 600; }
   .ps-bp-option::after {
     content: "›"; font-size: 1.1vw; color: #ccc; flex-shrink: 0;
     transition: all 0.25s ease;
@@ -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,13 +3007,13 @@ 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;
   }
   .ps-bp-img-card:hover {
-    border-color: rgba(187,148,92,0.4);
+    border-color: rgba(33,84,239,0.4);
     transform: translateY(-1px);
   }
   .ps-bp-img-card-selected {
@@ -3021,7 +3021,7 @@ const STYLES = `
     border-width: 2.5px !important;
   }
   .ps-bp-img-card-selected .ps-bp-img-card-label {
-    font-weight: 700; color: rgba(255,255,255,0.7);
+    font-weight: 700; color: var(--ps-accent);
   }
   .ps-bp-img-card-check {
     display: none; position: absolute; top: 0.3vw; right: 0.3vw;
@@ -3038,18 +3038,18 @@ const STYLES = `
     background: transparent;
   }
   .ps-bp-img-card-img {
-    width: 100%; height: 100%; object-fit: cover;
+    width: 100%; height: 100%; object-fit: contain;
   }
   .ps-bp-img-card .ps-bp-illust { width: 80%; height: 80%; }
   .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: var(--ps-text-secondary); 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;
   }
@@ -3064,7 +3064,7 @@ const STYLES = `
     font-family: inherit; text-align: left;
   }
   .ps-bp-photo-upload:hover {
-    border-color: var(--ps-accent); background: rgba(187,148,92,0.04);
+    border-color: var(--ps-accent); background: rgba(33,84,239,0.04);
     color: var(--ps-text-secondary);
   }
   .ps-bp-photo-upload svg { flex-shrink: 0; opacity: 0.6; }
@@ -3074,7 +3074,7 @@ const STYLES = `
   .ps-bp-photo-preview {
     display: flex; align-items: center; gap: 0.6vw;
     padding: 0.5vw; border: 1.5px solid var(--ps-accent);
-    border-radius: 0.5vw; background: rgba(187,148,92,0.06);
+    border-radius: 0.5vw; background: rgba(33,84,239,0.06);
   }
   .ps-bp-photo-thumb {
     width: 2.8vw; height: 2.8vw; object-fit: cover;
@@ -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 {
@@ -3843,8 +3843,8 @@ function SizingChoiceView({
   const renderExactFields = () => {
     if (sizeGuideFetching) {
       return /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-row ps-tryon-sf-skeleton", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-label ps-tryon-skel-bar", style: { width: "40%", height: "0.9em", borderRadius: "4px", background: "rgba(255,255,255,0.08)" } }),
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-input-wrap", children: /* @__PURE__ */ jsx("div", { className: "ps-tryon-skel-bar", style: { width: "100%", height: "2.2em", borderRadius: "6px", background: "rgba(255,255,255,0.06)" } }) })
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-label ps-tryon-skel-bar", style: { width: "40%", height: "0.9em", borderRadius: "4px", background: "rgba(0,0,0,0.05)" } }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-input-wrap", children: /* @__PURE__ */ jsx("div", { className: "ps-tryon-skel-bar", style: { width: "100%", height: "2.2em", borderRadius: "6px", background: "rgba(0,0,0,0.04)" } }) })
       ] }, `skel-${i}`)) });
     }
     const reqFields = dynamicFields.filter((f) => f.required);
@@ -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;
@@ -4199,7 +4199,7 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
           {
             x: x2 + 10 * scale,
             y: cy + 1 * scale,
-            fill: "rgba(255,255,255,0.85)",
+            fill: "rgba(0,0,0,0.7)",
             fontSize: Math.round(11 * scale),
             fontWeight: "500",
             fontFamily: "system-ui, -apple-system, sans-serif",
@@ -4933,7 +4933,7 @@ function SizeResultView({
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-v2-panel", children: [
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
             /* @__PURE__ */ jsx("h3", { className: "ps-tryon-v2-title", children: t("Virtual Try-On") }),
-            /* @__PURE__ */ jsx("button", { style: { background: "none", border: "none", color: "rgba(255,255,255,0.3)", cursor: "pointer", fontSize: "1.2vw" }, onClick: () => setShowPhotoGuide(false), children: "✕" })
+            /* @__PURE__ */ jsx("button", { style: { background: "none", border: "none", color: "rgba(0,0,0,0.3)", cursor: "pointer", fontSize: "1.2vw" }, onClick: () => setShowPhotoGuide(false), children: "✕" })
           ] }),
           /* @__PURE__ */ jsx("p", { className: "ps-tryon-v2-subtitle", children: t("Upload a full-body photo to see how it looks on you") }),
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-v2-sep" }),
@@ -4966,7 +4966,7 @@ function SizeResultView({
             " ",
             t("Start Try-On")
           ] }),
-          /* @__PURE__ */ jsx("p", { style: { fontSize: "0.5vw", color: "rgba(255,255,255,0.25)", textAlign: "center", marginTop: "0.3vw" }, children: t("Your photo is private and never shared") })
+          /* @__PURE__ */ jsx("p", { style: { fontSize: "0.5vw", color: "rgba(0,0,0,0.25)", textAlign: "center", marginTop: "0.3vw" }, children: t("Your photo is private and never shared") })
         ] }, "panel-guide")
       ] }) }),
       showFullChart && sizeGuide && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chart-overlay", children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-chart-modal", children: [