@primestyleai/tryon 4.7.0 → 4.7.2

package/dist/react/index.js

@@ -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 {
@@ -422,7 +422,7 @@ const STYLES = `
     font-family: inherit; text-align: left;
   }
   .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-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;
   }
@@ -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,7 +706,7 @@ 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;
   }
@@ -725,7 +725,7 @@ const STYLES = `
     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 */
@@ -744,10 +744,10 @@ const STYLES = `
     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,7 +757,7 @@ 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;
   }
 
@@ -770,7 +770,7 @@ const STYLES = `
     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 {
@@ -803,7 +803,7 @@ const STYLES = `
     flex: 1; border: none;
     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;
@@ -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; }
@@ -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; }
@@ -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);
   }
@@ -939,7 +939,7 @@ const STYLES = `
     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; }
@@ -962,7 +962,7 @@ const STYLES = `
     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(0,0,0,0.06); cursor: default; }
   .ps-tryon-guide-drop-v2 svg { color: rgba(0,0,0,0.2); }
@@ -975,7 +975,7 @@ const STYLES = `
     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(0,0,0,0.08);
-    color: #fff; font-size: 0.6vw; cursor: pointer;
+    color: var(--ps-text-muted); font-size: 0.6vw; cursor: pointer;
     display: flex; align-items: center; justify-content: center;
     transition: background 0.2s;
   }
@@ -1033,7 +1033,7 @@ 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;
@@ -1066,7 +1066,7 @@ const STYLES = `
     font-family: inherit; transition: all 0.25s; letter-spacing: 0.06em; text-transform: uppercase;
   }
   .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-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 {
@@ -1180,7 +1180,7 @@ 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;
@@ -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 {
@@ -1496,7 +1496,7 @@ const STYLES = `
   .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(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,7 +1671,7 @@ 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(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); }
@@ -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;
@@ -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; }
@@ -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; }
@@ -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 {
@@ -2180,7 +2180,7 @@ const STYLES = `
   .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; }
@@ -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; }
 
@@ -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,7 +2473,7 @@ 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, #FFFFFF); flex-shrink: 0; }
   .ps-tryon-history-info { flex: 1; min-width: 0; }
@@ -2485,7 +2485,7 @@ 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, #FFFFFF); flex-shrink: 0; border: 2px solid var(--ps-accent); }
   .ps-tryon-history-delete {
@@ -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,7 +2541,7 @@ 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.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 {
@@ -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;
@@ -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); }
@@ -2907,21 +2907,21 @@ const STYLES = `
     transition: all 0.15s;
   }
   .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-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(0,0,0,0.08);
-    border-radius: 0.35vw; color: rgba(255,255,255,0.55);
+    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(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 {
@@ -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;
@@ -3013,7 +3013,7 @@ const STYLES = `
     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,13 +3038,13 @@ 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(0,0,0,0.08); text-align: center; width: 100%;
+    color: var(--ps-text-secondary); text-align: center; width: 100%;
     transition: opacity 0.2s;
   }
   /* Hover hint text below cards */
@@ -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;
@@ -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);
@@ -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: [