@primestyleai/tryon 3.4.2 → 3.6.0

package/dist/react/index.js

@@ -21,6 +21,22 @@ function lsSet(key, value) {
   } catch {
   }
 }
+const FALLBACK_FIELDS_FEMALE = [
+  { key: "bust", label: "Bust", required: true, unit: "cm", placeholder: "e.g. 88", category: "body" },
+  { key: "waist", label: "Waist", required: true, unit: "cm", placeholder: "e.g. 70", category: "body" },
+  { key: "hips", label: "Hips", required: true, unit: "cm", placeholder: "e.g. 96", category: "body" },
+  { key: "shoulderWidth", label: "Shoulders", required: false, unit: "cm", placeholder: "e.g. 39", category: "body" },
+  { key: "inseam", label: "Inseam", required: false, unit: "cm", placeholder: "e.g. 76", category: "body" },
+  { key: "footLengthCm", label: "Foot length", required: false, unit: "cm", placeholder: "e.g. 24", category: "shoe" }
+];
+const FALLBACK_FIELDS_MALE = [
+  { key: "chest", label: "Chest", required: true, unit: "cm", placeholder: "e.g. 104", category: "body" },
+  { key: "waist", label: "Waist", required: true, unit: "cm", placeholder: "e.g. 84", category: "body" },
+  { key: "shoulderWidth", label: "Shoulders", required: false, unit: "cm", placeholder: "e.g. 46", category: "body" },
+  { key: "sleeveLength", label: "Sleeve", required: false, unit: "cm", placeholder: "e.g. 64", category: "body" },
+  { key: "inseam", label: "Inseam", required: false, unit: "cm", placeholder: "e.g. 81", category: "body" },
+  { key: "footLengthCm", label: "Foot length", required: false, unit: "cm", placeholder: "e.g. 27", category: "shoe" }
+];
 const SIZING_COUNTRIES = [
   { code: "US", label: "United States" },
   { code: "UK", label: "United Kingdom" },
@@ -425,6 +441,12 @@ function PrimeStyleTryonInner({
       }
     }
   }, [onComplete, onError, cleanupJob]);
+  const dynamicFields = useMemo(() => {
+    if (sizeGuide?.found && sizeGuide.requiredFields && sizeGuide.requiredFields.length > 0) {
+      return sizeGuide.requiredFields;
+    }
+    return formGender === "female" ? FALLBACK_FIELDS_FEMALE : FALLBACK_FIELDS_MALE;
+  }, [sizeGuide, formGender]);
   const submitSizing = useCallback(async () => {
     if (!apiRef.current) return;
     const baseUrl = getApiUrl(apiUrl);
@@ -435,10 +457,17 @@ function PrimeStyleTryonInner({
       product: { title: productTitle, description: "", variants: [] }
     };
     if (sizeGuide?.found) payload.sizeGuide = sizeGuide;
+    payload.sizingUnit = sizingUnit;
     if (sizingMethod === "exact") {
-      const m = { gender: formRef.current.gender || "male" };
-      const keys = ["chest", "bust", "waist", "hips", "shoulderWidth", "sleeveLength", "inseam", "neckCircumference", "footLengthCm"];
-      for (const k of keys) {
+      const m = { gender: formRef.current.gender || "male", sizingUnit };
+      const numericKeys = /* @__PURE__ */ new Set();
+      for (const f of dynamicFields) {
+        if (f.unit !== "size" && !["shoeEU", "shoeUS", "shoeUK"].includes(f.key)) numericKeys.add(f.key);
+      }
+      for (const k of ["chest", "bust", "waist", "hips", "shoulderWidth", "sleeveLength", "inseam", "neckCircumference", "footLengthCm"]) {
+        if (formRef.current[k]) numericKeys.add(k);
+      }
+      for (const k of numericKeys) {
         if (formRef.current[k]) m[k] = sizingUnit === "in" ? inToCm(parseFloat(formRef.current[k])) : parseFloat(formRef.current[k]);
       }
       if (formRef.current.shoeEU) m.shoeEU = formRef.current.shoeEU;
@@ -474,7 +503,7 @@ function PrimeStyleTryonInner({
     } finally {
       setSizingLoading(false);
     }
-  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle]);
+  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields]);
   const handleSubmit = useCallback(async () => {
     if (!selectedFile || !apiRef.current || !sseRef.current) {
       const msg = !apiRef.current ? "Missing NEXT_PUBLIC_PRIMESTYLE_API_KEY" : "No file selected";
@@ -575,6 +604,11 @@ function PrimeStyleTryonInner({
     if (p.shoeUS) fd.shoeUS = p.shoeUS;
     if (p.shoeUK) fd.shoeUK = p.shoeUK;
     if (p.fitPreference) fd.fitPreference = p.fitPreference;
+    if (p.customMeasurements) {
+      for (const [key, value] of Object.entries(p.customMeasurements)) {
+        fd[key] = String(value);
+      }
+    }
     formRef.current = fd;
     setFormGender(fd.gender || "male");
     if (p.country) setSizingCountry(p.country);
@@ -610,6 +644,33 @@ function PrimeStyleTryonInner({
       weightUnit,
       createdAt: Date.now()
     };
+    const KNOWN_PROFILE_KEYS = /* @__PURE__ */ new Set([
+      "chest",
+      "bust",
+      "waist",
+      "hips",
+      "shoulderWidth",
+      "sleeveLength",
+      "inseam",
+      "neckCircumference",
+      "footLengthCm",
+      "shoeEU",
+      "shoeUS",
+      "shoeUK",
+      "fitPreference",
+      "gender",
+      "height",
+      "weight",
+      "heightFeet",
+      "heightInches"
+    ]);
+    const custom = {};
+    for (const [key, val] of Object.entries(formRef.current)) {
+      if (!KNOWN_PROFILE_KEYS.has(key) && val && !isNaN(Number(val))) {
+        custom[key] = parseFloat(val);
+      }
+    }
+    if (Object.keys(custom).length > 0) p.customMeasurements = custom;
     setProfiles((prev) => {
       const idx = prev.findIndex((x) => x.id === id);
       if (idx >= 0) {
@@ -821,7 +882,7 @@ function PrimeStyleTryonInner({
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(RulerIcon, { size: 24 }) }),
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
             /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Enter my measurements" }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Chest, waist, hips, shoes & more" })
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: sizeGuide?.requiredFields?.length ? sizeGuide.requiredFields.filter((f) => f.required).slice(0, 3).map((f) => f.label).join(", ") + (sizeGuide.requiredFields.length > 3 ? " & more" : "") : "Chest, waist, hips, shoes & more" })
           ] }),
           /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Best accuracy" })
         ] }),
@@ -891,42 +952,77 @@ function PrimeStyleTryonInner({
         setHeightUnit(v === "cm" ? "cm" : "ft");
         setWeightUnit(v === "cm" ? "kg" : "lbs");
       } }) }),
-      sizingMethod === "exact" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        isFemale ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(InputRow, { label: "Bust *", fieldKey: "bust", placeholder: isCm ? "e.g. 88" : "e.g. 35", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Waist *", fieldKey: "waist", placeholder: isCm ? "e.g. 70" : "e.g. 28", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Hips *", fieldKey: "hips", placeholder: isCm ? "e.g. 96" : "e.g. 38", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Shoulders", fieldKey: "shoulderWidth", placeholder: isCm ? "e.g. 39" : "e.g. 15", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Inseam", fieldKey: "inseam", placeholder: isCm ? "e.g. 76" : "e.g. 30", type: "number", unit: sizingUnit })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(InputRow, { label: "Chest *", fieldKey: "chest", placeholder: isCm ? "e.g. 104" : "e.g. 41", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Waist *", fieldKey: "waist", placeholder: isCm ? "e.g. 84" : "e.g. 33", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Shoulders", fieldKey: "shoulderWidth", placeholder: isCm ? "e.g. 46" : "e.g. 18", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Sleeve", fieldKey: "sleeveLength", placeholder: isCm ? "e.g. 64" : "e.g. 25", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Inseam", fieldKey: "inseam", placeholder: isCm ? "e.g. 81" : "e.g. 32", type: "number", unit: sizingUnit })
-        ] }),
-        isFemale && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-          /* @__PURE__ */ jsx("label", { children: "Fit type" }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-unit-toggle", children: ["petite", "standard", "tall", "plus"].map((fp) => /* @__PURE__ */ jsx(
-            "button",
+      sizingMethod === "exact" ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
+        const reqFields = dynamicFields.filter((f) => f.required);
+        const optFields = dynamicFields.filter((f) => !f.required);
+        const renderField = (field) => {
+          if (["shoeEU", "shoeUS", "shoeUK"].includes(field.key)) {
+            return /* @__PURE__ */ jsx(InputRow, { label: `${field.label} *`, fieldKey: field.key, placeholder: field.placeholder }, field.key);
+          }
+          const phCm = field.placeholder?.replace(/[^0-9.]/g, "") || "0";
+          const phIn = String(field.unit === "cm" ? Math.round(parseFloat(phCm) / 2.54) : phCm);
+          const placeholder = isCm ? field.placeholder || "" : `e.g. ${phIn}`;
+          return /* @__PURE__ */ jsx(
+            InputRow,
             {
-              className: `ps-tryon-unit-btn${(formRef.current.fitPreference || "standard") === fp ? " ps-active" : ""}`,
-              onClick: (e) => {
-                updateField("fitPreference", fp);
-                const btns = e.target.parentElement.querySelectorAll(".ps-tryon-unit-btn");
-                btns.forEach((b) => b.classList.toggle("ps-active", b.textContent?.toLowerCase() === fp));
-              },
-              children: fp.charAt(0).toUpperCase() + fp.slice(1)
+              label: `${field.label}${field.required ? " *" : ""}`,
+              fieldKey: field.key,
+              placeholder,
+              type: "number",
+              unit: field.unit === "cm" ? sizingUnit : void 0
             },
-            fp
-          )) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-shoe-section", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-shoe-title", children: "Shoe sizing (optional)" }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Foot length", fieldKey: "footLengthCm", placeholder: isCm ? "e.g. 27" : "e.g. 10.5", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: shoeField.label, fieldKey: shoeField.key, placeholder: shoeField.ph })
-        ] })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            field.key
+          );
+        };
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          reqFields.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-section-label", children: "Required for this product" }),
+            reqFields.map(renderField)
+          ] }),
+          isFemale && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+            /* @__PURE__ */ jsx("label", { children: "Fit type" }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-unit-toggle", children: ["petite", "standard", "tall", "plus"].map((fp) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: `ps-tryon-unit-btn${(formRef.current.fitPreference || "standard") === fp ? " ps-active" : ""}`,
+                onClick: (e) => {
+                  updateField("fitPreference", fp);
+                  const btns = e.target.parentElement.querySelectorAll(".ps-tryon-unit-btn");
+                  btns.forEach((b) => b.classList.toggle("ps-active", b.textContent?.toLowerCase() === fp));
+                },
+                children: fp.charAt(0).toUpperCase() + fp.slice(1)
+              },
+              fp
+            )) })
+          ] }),
+          optFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-optional-section", children: [
+            /* @__PURE__ */ jsxs("button", { className: "ps-tryon-optional-toggle", onClick: (e) => {
+              const wrap = e.target.closest(".ps-tryon-optional-section").querySelector(".ps-tryon-optional-fields");
+              const arrow = e.target.closest(".ps-tryon-optional-toggle").querySelector(".ps-tryon-chevron");
+              if (wrap) {
+                const open = wrap.style.display !== "none";
+                wrap.style.display = open ? "none" : "flex";
+                if (arrow) arrow.style.transform = open ? "rotate(0deg)" : "rotate(180deg)";
+              }
+            }, children: [
+              /* @__PURE__ */ jsx("span", { children: "Optional — improve accuracy & save to profile" }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-chevron", children: "▾" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-optional-fields", style: { display: "none" }, children: [
+              optFields.map(renderField),
+              !dynamicFields.some((f) => f.category === "shoe") && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(InputRow, { label: "Foot length", fieldKey: "footLengthCm", placeholder: isCm ? "e.g. 27" : "e.g. 10.5", type: "number", unit: sizingUnit }),
+                /* @__PURE__ */ jsx(InputRow, { label: shoeField.label, fieldKey: shoeField.key, placeholder: shoeField.ph })
+              ] })
+            ] })
+          ] }),
+          optFields.length === 0 && !dynamicFields.some((f) => f.category === "shoe") && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-shoe-section", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-shoe-title", children: "Shoe sizing (optional)" }),
+            /* @__PURE__ */ jsx(InputRow, { label: "Foot length", fieldKey: "footLengthCm", placeholder: isCm ? "e.g. 27" : "e.g. 10.5", type: "number", unit: sizingUnit }),
+            /* @__PURE__ */ jsx(InputRow, { label: shoeField.label, fieldKey: shoeField.key, placeholder: shoeField.ph })
+          ] })
+        ] });
+      })() }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
           /* @__PURE__ */ jsx("label", { children: "Height *" }),
           heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-height-ft", children: [
@@ -974,7 +1070,10 @@ function PrimeStyleTryonInner({
   function ProcessingView() {
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
-        previewUrl && /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: "ps-tryon-processing-model" }),
+        previewUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-processing-blur", style: { backgroundImage: `url(${previewUrl})` } }),
+          /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: "ps-tryon-processing-model" })
+        ] }),
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-line" }),
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
       ] }),
@@ -990,6 +1089,8 @@ function PrimeStyleTryonInner({
     const hasSizing = !!sizingResult || sizingLoading;
     const hasBoth = !!resultImageUrl && hasSizing;
     const [profileName, setProfileName] = useState("");
+    const [showFitDetails, setShowFitDetails] = useState(false);
+    const confidenceLabel = sizingResult?.confidence === "high" ? "High Confidence" : sizingResult?.confidence === "medium" ? "Medium Confidence" : sizingResult?.confidence === "low" ? "Low Confidence" : "";
     return /* @__PURE__ */ jsxs("div", { className: `ps-tryon-result-layout${hasBoth ? " ps-tryon-result-split" : ""}`, children: [
       resultImageUrl && /* @__PURE__ */ jsx("div", { className: "ps-tryon-result-image-col", children: /* @__PURE__ */ jsx("img", { src: resultImageUrl, alt: "Try-on result", className: cn.resultImage }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-info-col", children: [
@@ -998,20 +1099,23 @@ function PrimeStyleTryonInner({
           /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: "Analyzing your size..." })
         ] }),
         sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-confidence", children: [
-            "Confidence: ",
-            /* @__PURE__ */ jsx("span", { className: `ps-conf-${sizingResult.confidence}`, children: sizingResult.confidence })
+          /* @__PURE__ */ jsx("h3", { className: "ps-tryon-size-title", children: "Recommended Size" }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-hero-row", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize }),
+            /* @__PURE__ */ jsx("span", { className: `ps-tryon-size-conf-label ps-conf-${sizingResult.confidence}`, children: confidenceLabel })
           ] }),
-          /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: sizingResult.reasoning }),
-          sizingResult.internationalSizes && /* @__PURE__ */ jsx("div", { className: "ps-tryon-intl-sizes", children: Object.entries(sizingResult.internationalSizes).map(([k, v]) => /* @__PURE__ */ jsxs("span", { className: "ps-tryon-intl-chip", children: [
-            k,
-            ": ",
-            v
-          ] }, k)) }),
-          sizingResult.matchDetails && sizingResult.matchDetails.length > 0 && /* @__PURE__ */ jsxs("details", { className: "ps-tryon-match-details", children: [
-            /* @__PURE__ */ jsx("summary", { children: "Measurement breakdown" }),
-            /* @__PURE__ */ jsxs("table", { children: [
+          sizingResult.matchDetails && sizingResult.matchDetails.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-fit-summary", children: [
+            /* @__PURE__ */ jsx("h4", { className: "ps-tryon-fit-summary-title", children: "Fit Summary" }),
+            sizingResult.matchDetails.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-fit-row", children: [
+              /* @__PURE__ */ jsx("span", { className: `ps-tryon-fit-icon ps-fit-icon-${m.fit}`, children: m.fit === "good" ? "✓" : m.fit === "tight" ? "↑" : "↓" }),
+              /* @__PURE__ */ jsxs("span", { className: "ps-tryon-fit-text", children: [
+                /* @__PURE__ */ jsx("strong", { children: m.measurement }),
+                " ",
+                m.fit === "good" ? "within range" : m.fit === "tight" ? "may be snug" : "may be loose"
+              ] })
+            ] }, i)),
+            /* @__PURE__ */ jsx("button", { className: "ps-tryon-fit-details-toggle", onClick: () => setShowFitDetails(!showFitDetails), children: showFitDetails ? "Hide detailed fit analysis ↑" : "See detailed fit analysis ↓" }),
+            showFitDetails && /* @__PURE__ */ jsxs("table", { className: "ps-tryon-fit-table", children: [
               /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
                 /* @__PURE__ */ jsx("th", { children: "Area" }),
                 /* @__PURE__ */ jsx("th", { children: "You" }),
@@ -1025,7 +1129,15 @@ function PrimeStyleTryonInner({
                 /* @__PURE__ */ jsx("td", { className: `ps-fit-${m.fit}`, children: m.fit })
               ] }, i)) })
             ] })
-          ] })
+          ] }),
+          sizingResult.internationalSizes && Object.keys(sizingResult.internationalSizes).length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-equiv-section", children: [
+            /* @__PURE__ */ jsx("h4", { className: "ps-tryon-equiv-title", children: "Equivalent Sizes" }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-equiv-chips", children: Object.entries(sizingResult.internationalSizes).map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-equiv-chip", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-equiv-region", children: k }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-equiv-value", children: v })
+            ] }, k)) })
+          ] }),
+          (!sizingResult.matchDetails || sizingResult.matchDetails.length === 0) && sizingResult.reasoning && /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: sizingResult.reasoning })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-result-actions", cn.resultActions), children: [
           /* @__PURE__ */ jsx("button", { onClick: handleDownload, className: cx("ps-tryon-btn-download", cn.downloadButton), children: "Download" }),
@@ -1036,15 +1148,21 @@ function PrimeStyleTryonInner({
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-row", children: [
             /* @__PURE__ */ jsx("input", { type: "text", placeholder: "Name this profile (e.g. John, Sarah)", value: profileName, onChange: (e) => setProfileName(e.target.value) }),
             activeProfileId ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-btn-group", children: [
-              /* @__PURE__ */ jsx("button", { onClick: () => {
+              /* @__PURE__ */ jsxs("button", { onClick: () => {
                 if (profileName.trim()) saveProfile(profileName.trim());
-              }, children: "Update" }),
+              }, children: [
+                "💾",
+                " Update"
+              ] }),
               /* @__PURE__ */ jsx("button", { className: "ps-tryon-save-new-btn", onClick: () => {
                 if (profileName.trim()) saveProfile(profileName.trim(), true);
               }, children: "+ New" })
-            ] }) : /* @__PURE__ */ jsx("button", { onClick: () => {
+            ] }) : /* @__PURE__ */ jsxs("button", { onClick: () => {
               if (profileName.trim()) saveProfile(profileName.trim());
-            }, children: "Save" })
+            }, children: [
+              "💾",
+              " Save"
+            ] })
           ] })
         ] }),
         profileSaved && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-done", children: [
@@ -1229,242 +1347,257 @@ const STYLES = `
   .ps-tryon-overlay {
     position: fixed; inset: 0; background: var(--ps-modal-overlay, rgba(0,0,0,0.6));
     display: flex; align-items: center; justify-content: center;
-    z-index: 999999; padding: 16px; animation: ps-fade-in 0.2s ease;
+    z-index: 999999;
+    padding: clamp(10px, 0.83vw, 16px);
+    padding: max(clamp(10px, 0.83vw, 16px), env(safe-area-inset-top)) max(clamp(10px, 0.83vw, 16px), env(safe-area-inset-right)) max(clamp(10px, 0.83vw, 16px), env(safe-area-inset-bottom)) max(clamp(10px, 0.83vw, 16px), env(safe-area-inset-left));
+    animation: ps-fade-in 0.2s ease;
+    overflow-y: auto; -webkit-overflow-scrolling: touch;
   }
   @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);
-    border-radius: var(--ps-modal-radius, 16px); width: var(--ps-modal-width, 100%);
-    max-width: var(--ps-modal-max-width, 520px); max-height: 92vh; overflow-y: auto;
+    border-radius: var(--ps-modal-radius, clamp(10px, 0.83vw, 16px)); width: var(--ps-modal-width, 100%);
+    max-width: var(--ps-modal-max-width, clamp(380px, 27vw, 520px)); max-height: 92vh; overflow-y: auto;
     font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);
-    box-shadow: 0 25px 50px rgba(0,0,0,0.4); animation: ps-slide-up 0.3s ease;
+    box-shadow: 0 clamp(16px, 1.3vw, 25px) clamp(32px, 2.6vw, 50px) rgba(0,0,0,0.4); animation: ps-slide-up 0.3s ease;
     scrollbar-width: thin; scrollbar-color: #333 transparent;
+    flex-shrink: 0;
   }
-  .ps-tryon-modal-wide { max-width: 920px; }
+  .ps-tryon-modal-wide { max-width: clamp(680px, 48vw, 920px); }
   .ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }
-  @keyframes ps-slide-up { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
+  @keyframes ps-slide-up { from { transform: translateY(clamp(12px, 1.04vw, 20px)) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
 
   /* Header */
   .ps-tryon-header {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 18px 24px; background: var(--ps-modal-header-bg, #1a1b1a);
+    padding: clamp(10px, 0.94vw, 18px) clamp(14px, 1.25vw, 24px); background: var(--ps-modal-header-bg, #1a1b1a);
     border-bottom: 1px solid #333;
-    border-radius: var(--ps-modal-radius, 16px) var(--ps-modal-radius, 16px) 0 0;
+    border-radius: var(--ps-modal-radius, clamp(10px, 0.83vw, 16px)) var(--ps-modal-radius, clamp(10px, 0.83vw, 16px)) 0 0;
   }
-  .ps-tryon-title { font-size: 15px; font-weight: 600; color: var(--ps-modal-header-color, #fff); }
-  .ps-tryon-header-actions { display: flex; align-items: center; gap: 8px; }
+  .ps-tryon-title { font-size: clamp(11px, 0.78vw, 15px); font-weight: 600; color: var(--ps-modal-header-color, #fff); }
+  .ps-tryon-header-actions { display: flex; align-items: center; gap: clamp(5px, 0.42vw, 8px); }
   .ps-tryon-header-icon {
-    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
-    border: 1.5px solid #333; border-radius: 10px; background: transparent;
+    width: clamp(24px, 1.77vw, 34px); height: clamp(24px, 1.77vw, 34px); display: flex; align-items: center; justify-content: center;
+    border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: transparent;
     cursor: pointer; color: #999; transition: all 0.2s;
   }
   .ps-tryon-header-icon:hover { border-color: #bb945c; color: #bb945c; }
   .ps-tryon-header-icon svg { stroke: currentColor; fill: none; }
   .ps-tryon-close {
-    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
+    width: clamp(22px, 1.67vw, 32px); height: clamp(22px, 1.67vw, 32px); display: flex; align-items: center; justify-content: center;
     background: none; border: none; color: var(--ps-modal-close-color, #999);
-    cursor: pointer; border-radius: 6px; transition: background 0.15s;
+    cursor: pointer; border-radius: clamp(4px, 0.31vw, 6px); transition: background 0.15s;
   }
   .ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
 
   /* Stepper */
-  .ps-tryon-stepper { padding: 20px 24px 12px; }
+  .ps-tryon-stepper { padding: clamp(12px, 1.04vw, 20px) clamp(14px, 1.25vw, 24px) clamp(7px, 0.63vw, 12px); }
   .ps-tryon-stepper-track { display: flex; align-items: flex-start; }
   .ps-tryon-stepper-fragment { display: flex; align-items: flex-start; flex: 1; }
   .ps-tryon-stepper-fragment:first-child { flex: 0 0 auto; }
-  .ps-tryon-stepper-line { flex: 1; height: 2px; background: #333; margin-top: 14px; transition: background 0.4s; }
+  .ps-tryon-stepper-line { flex: 1; height: 2px; background: #333; margin-top: clamp(8px, 0.73vw, 14px); transition: background 0.4s; }
   .ps-tryon-stepper-line.ps-done { background: #bb945c; }
   .ps-tryon-stepper-step { display: flex; flex-direction: column; align-items: center; }
   .ps-tryon-stepper-circle {
-    width: 28px; height: 28px; border-radius: 50%;
+    width: clamp(20px, 1.46vw, 28px); height: clamp(20px, 1.46vw, 28px); border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
-    border: 2px solid #333; font-size: 12px; font-weight: 600; color: #666;
+    border: 2px solid #333; font-size: clamp(9px, 0.63vw, 12px); font-weight: 600; color: #666;
     transition: all 0.3s;
   }
   .ps-tryon-stepper-step.ps-done .ps-tryon-stepper-circle { background: #bb945c; border-color: #bb945c; color: #111; }
   .ps-tryon-stepper-step.ps-done .ps-tryon-stepper-circle svg { stroke: #111; }
-  .ps-tryon-stepper-step.ps-active .ps-tryon-stepper-circle { border-color: #bb945c; color: #bb945c; box-shadow: 0 0 0 4px rgba(187,148,92,0.15); }
-  .ps-tryon-stepper-label { font-size: 10px; margin-top: 5px; color: #666; font-weight: 500; text-align: center; white-space: nowrap; }
+  .ps-tryon-stepper-step.ps-active .ps-tryon-stepper-circle { border-color: #bb945c; color: #bb945c; box-shadow: 0 0 0 clamp(3px, 0.21vw, 4px) rgba(187,148,92,0.15); }
+  .ps-tryon-stepper-label { font-size: clamp(8px, 0.52vw, 10px); margin-top: clamp(3px, 0.26vw, 5px); color: #666; font-weight: 500; text-align: center; white-space: nowrap; }
   .ps-tryon-stepper-step.ps-done .ps-tryon-stepper-label { color: #bb945c; }
   .ps-tryon-stepper-step.ps-active .ps-tryon-stepper-label { color: #bb945c; font-weight: 700; }
 
   /* Body */
-  .ps-tryon-body { padding: 24px; min-height: 300px; }
-  @keyframes ps-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
+  .ps-tryon-body { padding: clamp(14px, 1.25vw, 24px); min-height: clamp(200px, 15.6vw, 300px); }
+  @keyframes ps-fade-up { from { opacity: 0; transform: translateY(clamp(7px, 0.63vw, 12px)); } to { opacity: 1; transform: translateY(0); } }
   .ps-tryon-view-enter { animation: ps-fade-up 0.35s ease both; }
 
   /* Welcome */
   .ps-tryon-welcome { text-align: center; }
-  .ps-tryon-welcome-hero { margin-bottom: 20px; }
+  .ps-tryon-welcome-hero { margin-bottom: clamp(12px, 1.04vw, 20px); }
   .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }
-  .ps-tryon-welcome-product { width: 120px; height: 140px; object-fit: cover; border-radius: 14px; border: 2px solid #333; }
-  .ps-tryon-welcome-sparkle { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; background: #bb945c; 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: 14px; height: 14px; }
-  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
-  .ps-tryon-welcome-title { font-size: 20px; font-weight: 700; color: #fff; margin: 14px 0 4px; }
-  .ps-tryon-welcome-sub { font-size: 13px; color: #999; margin: 0; }
-  .ps-tryon-features { display: flex; gap: 10px; margin: 20px 0; }
-  .ps-tryon-feature { flex: 1; padding: 14px 10px; border: 1px solid #333; border-radius: 12px; text-align: center; }
-  .ps-tryon-feature-icon { margin-bottom: 6px; color: #bb945c; display: flex; justify-content: center; }
+  .ps-tryon-welcome-product { width: clamp(80px, 6.25vw, 120px); height: clamp(96px, 7.3vw, 140px); object-fit: cover; border-radius: clamp(8px, 0.73vw, 14px); border: 2px solid #333; }
+  .ps-tryon-welcome-sparkle { position: absolute; top: clamp(-6px, -0.42vw, -8px); right: clamp(-6px, -0.42vw, -8px); width: clamp(20px, 1.46vw, 28px); height: clamp(20px, 1.46vw, 28px); background: #bb945c; 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: clamp(10px, 0.73vw, 14px); height: clamp(10px, 0.73vw, 14px); }
+  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(clamp(-4px, -0.31vw, -6px)); } }
+  .ps-tryon-welcome-title { font-size: clamp(14px, 1.04vw, 20px); font-weight: 700; color: #fff; margin: clamp(8px, 0.73vw, 14px) 0 clamp(2px, 0.21vw, 4px); }
+  .ps-tryon-welcome-sub { font-size: clamp(10px, 0.68vw, 13px); color: #999; margin: 0; }
+  .ps-tryon-features { display: flex; gap: clamp(6px, 0.52vw, 10px); margin: clamp(12px, 1.04vw, 20px) 0; }
+  .ps-tryon-feature { flex: 1; padding: clamp(8px, 0.73vw, 14px) clamp(6px, 0.52vw, 10px); border: 1px solid #333; border-radius: clamp(8px, 0.63vw, 12px); text-align: center; }
+  .ps-tryon-feature-icon { margin-bottom: clamp(4px, 0.31vw, 6px); color: #bb945c; display: flex; justify-content: center; }
   .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; }
-  .ps-tryon-feature-title { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 2px; }
-  .ps-tryon-feature-desc { font-size: 10px; color: #999; }
+  .ps-tryon-feature-title { font-size: clamp(9px, 0.63vw, 12px); font-weight: 600; color: #fff; margin-bottom: 2px; }
+  .ps-tryon-feature-desc { font-size: clamp(8px, 0.52vw, 10px); color: #999; }
   .ps-tryon-cta {
-    width: 100%; padding: 14px; background: #bb945c; color: #111; border: none;
-    border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
-    display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s;
+    width: 100%; padding: clamp(8px, 0.73vw, 14px); background: #bb945c; color: #111; border: none;
+    border-radius: clamp(8px, 0.63vw, 12px); font-size: clamp(11px, 0.78vw, 15px); font-weight: 700; cursor: pointer;
+    display: flex; align-items: center; justify-content: center; gap: clamp(5px, 0.42vw, 8px); transition: all 0.2s;
     font-family: var(--ps-modal-font, system-ui, sans-serif);
   }
   .ps-tryon-cta:hover { background: #a07d4e; transform: translateY(-1px); }
   .ps-tryon-cta svg { stroke: #111; }
-  .ps-tryon-welcome-note { font-size: 11px; color: #666; margin-top: 12px; }
+  .ps-tryon-welcome-note { font-size: clamp(8px, 0.57vw, 11px); color: #666; margin-top: clamp(7px, 0.63vw, 12px); }
 
   /* Upload */
   .ps-tryon-upload {
-    border: 2px dashed var(--ps-upload-border, #333); border-radius: 12px;
-    padding: 40px 24px; text-align: center; cursor: pointer; transition: all 0.2s;
+    border: 2px dashed var(--ps-upload-border, #333); border-radius: clamp(8px, 0.63vw, 12px);
+    padding: clamp(24px, 2.08vw, 40px) clamp(14px, 1.25vw, 24px); 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: #bb945c; background: rgba(187,148,92,0.05); }
-  .ps-tryon-upload svg { color: var(--ps-upload-icon-color, #bb945c); margin-bottom: 12px; }
-  .ps-tryon-upload-text { font-size: 14px; color: var(--ps-upload-color, #fff); margin: 0 0 4px; }
-  .ps-tryon-upload-hint { font-size: 12px; color: #999; margin: 0; }
-  .ps-tryon-preview { position: relative; margin-bottom: 4px; }
-  .ps-tryon-preview img { width: 100%; border-radius: 12px; display: block; }
+  .ps-tryon-upload svg { color: var(--ps-upload-icon-color, #bb945c); margin-bottom: clamp(7px, 0.63vw, 12px); }
+  .ps-tryon-upload-text { font-size: clamp(10px, 0.73vw, 14px); color: var(--ps-upload-color, #fff); margin: 0 0 clamp(2px, 0.21vw, 4px); }
+  .ps-tryon-upload-hint { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin: 0; }
+  .ps-tryon-preview { position: relative; margin-bottom: clamp(2px, 0.21vw, 4px); }
+  .ps-tryon-preview img { width: 100%; border-radius: clamp(8px, 0.63vw, 12px); display: block; }
   .ps-tryon-preview-remove {
-    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
+    position: absolute; top: clamp(5px, 0.42vw, 8px); right: clamp(5px, 0.42vw, 8px); width: clamp(20px, 1.46vw, 28px); height: clamp(20px, 1.46vw, 28px);
     border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;
     cursor: pointer; display: flex; align-items: center; justify-content: center;
-    font-size: 16px; transition: background 0.15s;
+    font-size: clamp(12px, 0.83vw, 16px); transition: background 0.15s;
   }
   .ps-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }
   .ps-tryon-submit {
-    width: 100%; padding: 14px; margin-top: 16px;
+    width: 100%; padding: clamp(8px, 0.73vw, 14px); margin-top: clamp(10px, 0.83vw, 16px);
     background: var(--ps-modal-primary-bg, #bb945c); color: var(--ps-modal-primary-color, #111);
     font-family: var(--ps-modal-font, system-ui, sans-serif);
-    font-size: 14px; font-weight: 600; border: none;
-    border-radius: var(--ps-modal-primary-radius, 10px);
+    font-size: clamp(10px, 0.73vw, 14px); font-weight: 600; border: none;
+    border-radius: var(--ps-modal-primary-radius, clamp(6px, 0.52vw, 10px));
     cursor: pointer; transition: all 0.2s;
-    display: flex; align-items: center; justify-content: center; gap: 8px;
+    display: flex; align-items: center; justify-content: center; gap: clamp(5px, 0.42vw, 8px);
   }
   .ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }
   .ps-tryon-submit svg { stroke: currentColor; }
 
   /* Profile bar */
-  .ps-tryon-profile-bar { margin-bottom: 16px; }
+  .ps-tryon-profile-bar { margin-bottom: clamp(10px, 0.83vw, 16px); }
   .ps-tryon-profile-select {
-    width: 100%; padding: 10px 36px 10px 14px; border: 1.5px solid #333; border-radius: 10px;
-    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit;
+    width: 100%; padding: clamp(6px, 0.52vw, 10px) clamp(22px, 1.88vw, 36px) clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
+    background: #1a1b1a; color: #fff; font-size: clamp(10px, 0.68vw, 13px); font-family: inherit;
     appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    background-repeat: no-repeat; background-position: right 14px center;
+    background-repeat: no-repeat; background-position: right clamp(8px, 0.73vw, 14px) center;
   }
   .ps-tryon-profile-select:focus { border-color: #bb945c; }
 
   /* Sizing choice */
   .ps-tryon-sizing-choice { text-align: center; }
-  .ps-tryon-section-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 16px; }
-  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: 10px; }
+  .ps-tryon-section-title { font-size: clamp(12px, 0.83vw, 16px); font-weight: 600; color: #fff; margin: 0 0 clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: clamp(6px, 0.52vw, 10px); }
   .ps-tryon-choice-card {
-    display: flex; align-items: center; gap: 14px; padding: 16px;
-    border: 1.5px solid #333; border-radius: 12px;
+    display: flex; align-items: center; gap: clamp(8px, 0.73vw, 14px); padding: clamp(10px, 0.83vw, 16px);
+    border: 1.5px solid #333; border-radius: clamp(8px, 0.63vw, 12px);
     background: #1a1b1a; cursor: pointer; transition: all 0.25s; text-align: left;
     width: 100%; font-family: inherit; position: relative; overflow: hidden;
   }
-  .ps-tryon-choice-card:hover { border-color: #bb945c; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(187,148,92,0.08); }
+  .ps-tryon-choice-card:hover { border-color: #bb945c; transform: translateY(-1px); box-shadow: 0 clamp(4px, 0.31vw, 6px) clamp(12px, 1.04vw, 20px) rgba(187,148,92,0.08); }
   .ps-tryon-choice-card:hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #bb945c; }
   .ps-tryon-choice-icon { color: #bb945c; flex-shrink: 0; }
   .ps-tryon-choice-icon svg { stroke: currentColor; fill: none; }
   .ps-tryon-choice-info { flex: 1; min-width: 0; }
-  .ps-tryon-choice-title { font-size: 14px; font-weight: 600; color: #fff; }
-  .ps-tryon-choice-desc { font-size: 12px; color: #999; margin-top: 2px; }
+  .ps-tryon-choice-title { font-size: clamp(10px, 0.73vw, 14px); font-weight: 600; color: #fff; }
+  .ps-tryon-choice-desc { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin-top: 2px; }
   .ps-tryon-choice-badge {
-    padding: 3px 10px; border-radius: 20px; flex-shrink: 0;
-    background: rgba(187,148,92,0.12); color: #bb945c; font-size: 10px; font-weight: 600;
+    padding: clamp(2px, 0.16vw, 3px) clamp(6px, 0.52vw, 10px); border-radius: clamp(12px, 1.04vw, 20px); flex-shrink: 0;
+    background: rgba(187,148,92,0.12); color: #bb945c; font-size: clamp(8px, 0.52vw, 10px); font-weight: 600;
   }
   .ps-tryon-sg-notice {
-    font-size: 12px; color: #999; text-align: center; padding: 10px 14px;
-    margin-bottom: 12px; border: 1px solid #333; border-radius: 10px; background: #1a1b1a;
+    font-size: clamp(9px, 0.63vw, 12px); color: #999; text-align: center; padding: clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px);
+    margin-bottom: clamp(7px, 0.63vw, 12px); border: 1px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: #1a1b1a;
   }
   .ps-tryon-sg-found {
     color: #4ade80; border-color: rgba(74,222,128,0.2); background: rgba(74,222,128,0.05);
-    display: flex; align-items: center; justify-content: center; gap: 6px;
+    display: flex; align-items: center; justify-content: center; gap: clamp(4px, 0.31vw, 6px);
   }
   .ps-tryon-sg-found svg { stroke: #4ade80; }
-  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; text-align: center; }
-  .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: 16px; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
+  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: clamp(24px, 2.08vw, 40px) clamp(12px, 1.04vw, 20px); text-align: center; }
+  .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: clamp(10px, 0.83vw, 16px); animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
   .ps-tryon-sg-checking-icon svg { stroke: currentColor; fill: none; }
   @keyframes ps-pulse-ruler { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
-  .ps-tryon-sg-checking-bar-wrap { width: 180px; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: 20px; }
+  .ps-tryon-sg-checking-bar-wrap { width: clamp(120px, 9.4vw, 180px); height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: clamp(12px, 1.04vw, 20px); }
   .ps-tryon-sg-checking-bar { height: 100%; width: 40%; background: linear-gradient(90deg, #bb945c, #d6ba7d); border-radius: 2px; animation: ps-sg-bar 1.5s ease-in-out infinite; }
   @keyframes ps-sg-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
-  .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: 6px; }
-  .ps-tryon-sg-checking-sub { font-size: 13px; color: #999; margin: 0; }
+  .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: clamp(4px, 0.31vw, 6px); }
+  .ps-tryon-sg-checking-sub { font-size: clamp(10px, 0.68vw, 13px); color: #999; margin: 0; }
 
   /* Back button */
-  .ps-tryon-back { display: flex; align-items: center; gap: 6px; background: none; border: none; color: #999; font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 12px; font-family: inherit; transition: color 0.2s; }
+  .ps-tryon-back { display: flex; align-items: center; gap: clamp(4px, 0.31vw, 6px); background: none; border: none; color: #999; font-size: clamp(10px, 0.68vw, 13px); cursor: pointer; padding: 0; margin-bottom: clamp(7px, 0.63vw, 12px); font-family: inherit; transition: color 0.2s; }
   .ps-tryon-back:hover { color: #fff; }
   .ps-tryon-back svg { stroke: currentColor; fill: none; }
 
   /* Sizing form */
-  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 12px; }
-  .ps-tryon-input-row { display: flex; align-items: center; gap: 10px; }
-  .ps-tryon-input-row label { font-size: 13px; font-weight: 500; color: #ccc; min-width: 90px; flex-shrink: 0; }
+  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: clamp(7px, 0.63vw, 12px); }
+  .ps-tryon-input-row { display: flex; align-items: center; gap: clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-input-row label { font-size: clamp(10px, 0.68vw, 13px); font-weight: 500; color: #ccc; min-width: clamp(60px, 4.7vw, 90px); flex-shrink: 0; }
   .ps-tryon-input-row input {
-    flex: 1; padding: 10px 14px; border: 1.5px solid #333; border-radius: 10px;
-    background: #1a1b1a; color: #fff; font-size: 14px; font-family: inherit; outline: none;
+    flex: 1; padding: clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
+    background: #1a1b1a; color: #fff; font-size: clamp(10px, 0.73vw, 14px); font-family: inherit; outline: none;
     transition: border-color 0.2s; -moz-appearance: textfield;
   }
   .ps-tryon-input-row input::-webkit-outer-spin-button,
   .ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   .ps-tryon-input-row input:focus { border-color: #bb945c; }
-  .ps-tryon-input-unit { font-size: 12px; color: #666; flex-shrink: 0; }
-  .ps-tryon-height-ft { display: flex; align-items: center; gap: 6px; flex: 1; }
-  .ps-tryon-height-ft input { width: 60px; padding: 10px 10px; border: 1.5px solid #333; border-radius: 10px; background: #1a1b1a; color: #fff; font-size: 14px; font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }
+  .ps-tryon-input-unit { font-size: clamp(9px, 0.63vw, 12px); color: #666; flex-shrink: 0; }
+  .ps-tryon-height-ft { display: flex; align-items: center; gap: clamp(4px, 0.31vw, 6px); flex: 1; }
+  .ps-tryon-height-ft input { width: clamp(42px, 3.13vw, 60px); padding: clamp(6px, 0.52vw, 10px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: #1a1b1a; color: #fff; font-size: clamp(10px, 0.73vw, 14px); font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }
   .ps-tryon-height-ft input::-webkit-outer-spin-button, .ps-tryon-height-ft input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   .ps-tryon-height-ft input:focus { border-color: #bb945c; }
-  .ps-tryon-height-ft span { font-size: 12px; color: #666; }
+  .ps-tryon-height-ft span { font-size: clamp(9px, 0.63vw, 12px); color: #666; }
   .ps-tryon-country-select {
-    flex: 1; padding: 10px 36px 10px 14px; border: 1.5px solid #333; border-radius: 10px;
-    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit;
+    flex: 1; padding: clamp(6px, 0.52vw, 10px) clamp(22px, 1.88vw, 36px) clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
+    background: #1a1b1a; color: #fff; font-size: clamp(10px, 0.68vw, 13px); font-family: inherit;
     appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
     background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    background-repeat: no-repeat; background-position: right 14px center;
+    background-repeat: no-repeat; background-position: right clamp(8px, 0.73vw, 14px) center;
   }
   .ps-tryon-country-select:focus { border-color: #bb945c; }
-  .ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid #333; border-radius: 8px; overflow: hidden; }
+  .ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid #333; border-radius: clamp(5px, 0.42vw, 8px); overflow: hidden; }
   .ps-tryon-unit-btn {
-    padding: 6px 14px; background: transparent; border: none; color: #999;
-    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;
+    padding: clamp(4px, 0.31vw, 6px) clamp(8px, 0.73vw, 14px); background: transparent; border: none; color: #999;
+    font-size: clamp(9px, 0.63vw, 12px); font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;
   }
   .ps-tryon-unit-btn.ps-active { background: #bb945c; color: #111; }
-  .ps-tryon-shoe-section { border-top: 1px solid #333; padding-top: 14px; margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
-  .ps-tryon-shoe-title { font-size: 13px; font-weight: 600; color: #999; }
-  .ps-tryon-disclaimer { font-size: 11px; color: #666; margin: 4px 0 0; }
-  .ps-tryon-form-save-toggle { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
+  .ps-tryon-section-label { font-size: clamp(8px, 0.57vw, 11px); font-weight: 700; color: #bb945c; text-transform: uppercase; letter-spacing: 0.08em; margin: clamp(2px, 0.21vw, 4px) 0 clamp(1px, 0.1vw, 2px); }
+  .ps-tryon-optional-section { border-top: 1px solid #333; padding-top: clamp(6px, 0.52vw, 10px); margin-top: clamp(4px, 0.31vw, 6px); }
+  .ps-tryon-optional-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid #333; border-radius: clamp(6px, 0.52vw, 10px); padding: clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); color: #999; font-size: clamp(10px, 0.68vw, 13px); font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
+  .ps-tryon-optional-toggle:hover { border-color: #555; color: #ccc; }
+  .ps-tryon-chevron { transition: transform 0.2s; font-size: clamp(10px, 0.73vw, 14px); }
+  .ps-tryon-optional-fields { display: flex; flex-direction: column; gap: clamp(6px, 0.52vw, 10px); padding-top: clamp(7px, 0.63vw, 12px); }
+  .ps-tryon-shoe-section { border-top: 1px solid #333; padding-top: clamp(8px, 0.73vw, 14px); margin-top: clamp(4px, 0.31vw, 6px); display: flex; flex-direction: column; gap: clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-shoe-title { font-size: clamp(10px, 0.68vw, 13px); font-weight: 600; color: #999; }
+  .ps-tryon-disclaimer { font-size: clamp(8px, 0.57vw, 11px); color: #666; margin: clamp(2px, 0.21vw, 4px) 0 0; }
+  .ps-tryon-form-save-toggle { margin-top: clamp(6px, 0.52vw, 10px); display: flex; flex-direction: column; gap: clamp(5px, 0.42vw, 8px); }
   .ps-tryon-form-save-check {
-    display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ccc; cursor: pointer; user-select: none;
+    display: flex; align-items: center; gap: clamp(5px, 0.42vw, 8px); font-size: clamp(10px, 0.68vw, 13px); color: #ccc; cursor: pointer; user-select: none;
   }
   .ps-tryon-form-save-check input[type="checkbox"] {
-    width: 16px; height: 16px; accent-color: #bb945c; cursor: pointer;
+    width: clamp(12px, 0.83vw, 16px); height: clamp(12px, 0.83vw, 16px); accent-color: #bb945c; cursor: pointer;
   }
   .ps-tryon-form-save-name {
-    padding: 8px 12px; border: 1.5px solid #333; border-radius: 10px;
-    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit; outline: none;
+    padding: clamp(5px, 0.42vw, 8px) clamp(7px, 0.63vw, 12px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
+    background: #1a1b1a; color: #fff; font-size: clamp(10px, 0.68vw, 13px); font-family: inherit; outline: none;
     transition: border-color 0.2s;
   }
   .ps-tryon-form-save-name:focus { border-color: #bb945c; }
 
   /* Processing */
-  .ps-tryon-processing { text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; }
+  .ps-tryon-processing { text-align: center; padding: clamp(14px, 1.25vw, 24px); display: flex; flex-direction: column; align-items: center; }
 
   .ps-tryon-processing-image-wrap {
-    position: relative; width: 200px; height: 260px; margin: 0 auto 24px;
-    border-radius: 16px; overflow: hidden; border: 2px solid #333;
+    position: relative; width: clamp(160px, 11.5vw, 220px); height: clamp(200px, 14.6vw, 280px); margin: 0 auto clamp(14px, 1.25vw, 24px);
+    border-radius: clamp(10px, 0.83vw, 16px); overflow: hidden; border: 2px solid #333;
+  }
+  .ps-tryon-processing-blur {
+    position: absolute; inset: clamp(-14px, -1.04vw, -20px); background-size: cover; background-position: center;
+    filter: blur(25px) brightness(0.5); transform: scale(1.2);
   }
   .ps-tryon-processing-model {
-    width: 100%; height: 100%; object-fit: cover; display: block;
+    position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block;
   }
   .ps-tryon-scan-overlay {
     position: absolute; inset: 0;
@@ -1474,7 +1607,7 @@ const STYLES = `
   .ps-tryon-scan-line {
     position: absolute; left: 0; right: 0; height: 3px;
     background: linear-gradient(90deg, transparent, #bb945c 20%, #d6ba7d 50%, #bb945c 80%, transparent);
-    box-shadow: 0 0 15px rgba(187,148,92,0.6), 0 0 40px rgba(187,148,92,0.2);
+    box-shadow: 0 0 clamp(10px, 0.78vw, 15px) rgba(187,148,92,0.6), 0 0 clamp(24px, 2.08vw, 40px) rgba(187,148,92,0.2);
     animation: ps-scan 2.5s ease-in-out infinite;
     pointer-events: none; z-index: 2;
   }
@@ -1486,35 +1619,35 @@ const STYLES = `
   }
 
   .ps-tryon-progress-section {
-    display: flex; align-items: center; gap: 12px; width: 100%; max-width: 300px; margin-bottom: 16px;
+    display: flex; align-items: center; gap: clamp(7px, 0.63vw, 12px); width: 100%; max-width: clamp(200px, 15.6vw, 300px); margin-bottom: clamp(10px, 0.83vw, 16px);
   }
   .ps-tryon-progress-bar-wrap {
-    flex: 1; height: 6px; background: #333; border-radius: 3px; overflow: hidden;
+    flex: 1; height: clamp(4px, 0.31vw, 6px); background: #333; border-radius: 3px; overflow: hidden;
   }
   .ps-tryon-progress-bar-fill {
     height: 100%; background: linear-gradient(90deg, #bb945c, #d6ba7d);
     border-radius: 3px; transition: width 0.3s ease; width: 0%;
   }
   .ps-tryon-progress-pct {
-    font-size: 13px; font-weight: 700; color: #bb945c; min-width: 36px; text-align: right;
+    font-size: clamp(10px, 0.68vw, 13px); font-weight: 700; color: #bb945c; min-width: clamp(24px, 1.88vw, 36px); text-align: right;
     font-variant-numeric: tabular-nums;
   }
 
   @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
-  .ps-tryon-processing-text { font-size: 14px; color: #fff; margin: 0 0 4px; }
-  .ps-tryon-processing-sub { font-size: 12px; color: #999; margin: 0; }
+  .ps-tryon-processing-text { font-size: clamp(10px, 0.73vw, 14px); color: #fff; margin: 0 0 clamp(2px, 0.21vw, 4px); }
+  .ps-tryon-processing-sub { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin: 0; }
 
   /* Result */
   .ps-tryon-result-layout { text-align: center; }
-  .ps-tryon-result-split { display: flex; gap: 24px; text-align: left; align-items: stretch; }
+  .ps-tryon-result-split { display: flex; gap: clamp(14px, 1.25vw, 24px); text-align: left; align-items: stretch; }
   .ps-tryon-result-image-col { flex: 0 0 45%; min-width: 0; display: flex; align-items: center; justify-content: center; }
-  .ps-tryon-result-image-col img { width: 100%; max-height: 400px; object-fit: contain; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); animation: ps-scale-in 0.5s ease both; }
+  .ps-tryon-result-image-col img { width: 100%; max-height: clamp(280px, 20.8vw, 400px); object-fit: contain; border-radius: clamp(8px, 0.73vw, 14px); box-shadow: 0 clamp(5px, 0.42vw, 8px) clamp(20px, 1.67vw, 32px) rgba(0,0,0,0.2); animation: ps-scale-in 0.5s ease both; }
   .ps-tryon-result-info-col { flex: 1; min-width: 0; }
-  .ps-tryon-result-layout:not(.ps-tryon-result-split) img { width: 100%; border-radius: 12px; margin-bottom: 16px; }
-  .ps-tryon-result-actions { display: flex; gap: 8px; margin-top: 16px; }
+  .ps-tryon-result-layout:not(.ps-tryon-result-split) img { width: 100%; border-radius: clamp(8px, 0.63vw, 12px); margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-result-actions { display: flex; gap: clamp(5px, 0.42vw, 8px); margin-top: clamp(10px, 0.83vw, 16px); }
   .ps-tryon-result-actions button {
-    flex: 1; padding: 12px; font-family: var(--ps-modal-font, system-ui, sans-serif);
-    font-size: 13px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.2s; border: none;
+    flex: 1; padding: clamp(7px, 0.63vw, 12px); font-family: var(--ps-modal-font, system-ui, sans-serif);
+    font-size: clamp(10px, 0.68vw, 13px); font-weight: 600; border-radius: clamp(6px, 0.52vw, 10px); cursor: pointer; transition: all 0.2s; border: none;
   }
   .ps-tryon-btn-download { background: #bb945c; color: #111; }
   .ps-tryon-btn-download:hover { opacity: 0.9; }
@@ -1522,121 +1655,153 @@ const STYLES = `
   .ps-tryon-btn-retry:hover { background: rgba(255,255,255,0.12); }
 
   /* Size recommendation */
-  .ps-tryon-size-recommend { margin-bottom: 16px; }
+  .ps-tryon-size-recommend { margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-size-title { font-size: clamp(13px, 0.94vw, 18px); font-weight: 700; color: #fff; margin: 0 0 clamp(8px, 0.73vw, 14px); }
+  .ps-tryon-size-hero-row {
+    display: flex; align-items: center; gap: clamp(10px, 0.83vw, 16px); padding: clamp(10px, 0.83vw, 16px) clamp(12px, 1.04vw, 20px);
+    border: 1.5px solid #333; border-radius: clamp(8px, 0.73vw, 14px); margin-bottom: clamp(10px, 0.94vw, 18px); background: rgba(255,255,255,0.02);
+  }
   .ps-tryon-size-badge {
     display: inline-flex; align-items: center; justify-content: center;
-    width: 56px; height: 56px; border-radius: 50%;
+    min-width: clamp(40px, 2.92vw, 56px); height: clamp(40px, 2.92vw, 56px); padding: 0 clamp(7px, 0.63vw, 12px); border-radius: clamp(8px, 0.63vw, 12px);
     background: linear-gradient(135deg, #bb945c, #d6ba7d);
-    color: #111; font-size: 20px; font-weight: 700; margin-bottom: 10px;
+    color: #111; font-size: clamp(16px, 1.25vw, 24px); font-weight: 800; letter-spacing: -0.02em;
   }
-  .ps-tryon-sizing-loading { text-align: center; padding: 20px 0; }
+  .ps-tryon-size-conf-label { font-size: clamp(11px, 0.78vw, 15px); font-weight: 600; }
+  .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
+
+  .ps-tryon-sizing-loading { text-align: center; padding: clamp(12px, 1.04vw, 20px) 0; }
   .ps-tryon-size-loading-spinner {
-    width: 36px; height: 36px; border: 3px solid #333;
+    width: clamp(24px, 1.88vw, 36px); height: clamp(24px, 1.88vw, 36px); border: 3px solid #333;
     border-top-color: #bb945c; border-radius: 50%;
-    animation: ps-spin 0.8s linear infinite; margin: 0 auto 12px;
+    animation: ps-spin 0.8s linear infinite; margin: 0 auto clamp(7px, 0.63vw, 12px);
   }
   @keyframes ps-spin { to { transform: rotate(360deg); } }
-  .ps-tryon-size-confidence { font-size: 12px; color: #999; margin-bottom: 8px; }
-  .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
-  .ps-tryon-size-reasoning { font-size: 13px; color: #ccc; line-height: 1.5; margin-bottom: 12px; }
-  .ps-tryon-intl-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
-  .ps-tryon-intl-chip { padding: 4px 10px; border: 1px solid #333; border-radius: 8px; font-size: 11px; color: #ccc; font-weight: 500; }
-  .ps-tryon-match-details { margin-top: 12px; }
-  .ps-tryon-match-details summary { font-size: 12px; color: #bb945c; cursor: pointer; font-weight: 600; }
-  .ps-tryon-match-details table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
-  .ps-tryon-match-details th { text-align: left; padding: 6px 8px; border-bottom: 1px solid #333; color: #999; font-weight: 600; }
-  .ps-tryon-match-details td { padding: 6px 8px; border-bottom: 1px solid #222; color: #ccc; }
+
+  /* Fit Summary */
+  .ps-tryon-fit-summary { margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-fit-summary-title { font-size: clamp(11px, 0.78vw, 15px); font-weight: 700; color: #fff; margin: 0 0 clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-fit-row { display: flex; align-items: center; gap: clamp(6px, 0.52vw, 10px); padding: clamp(5px, 0.42vw, 8px) 0; }
+  .ps-tryon-fit-icon {
+    width: clamp(16px, 1.15vw, 22px); height: clamp(16px, 1.15vw, 22px); border-radius: 50%; display: flex; align-items: center; justify-content: center;
+    font-size: clamp(9px, 0.63vw, 12px); font-weight: 700; flex-shrink: 0;
+  }
+  .ps-fit-icon-good { background: rgba(74,222,128,0.15); color: #4ade80; }
+  .ps-fit-icon-tight { background: rgba(245,158,11,0.15); color: #f59e0b; }
+  .ps-fit-icon-loose { background: rgba(96,165,250,0.15); color: #60a5fa; }
+  .ps-tryon-fit-text { font-size: clamp(10px, 0.73vw, 14px); color: #ccc; line-height: 1.4; }
+  .ps-tryon-fit-text strong { color: #fff; font-weight: 600; }
+  .ps-tryon-fit-details-toggle {
+    display: inline-block; margin-top: clamp(5px, 0.42vw, 8px); font-size: clamp(10px, 0.68vw, 13px); color: #bb945c; cursor: pointer;
+    font-weight: 600; background: none; border: none; padding: 0; font-family: inherit;
+  }
+  .ps-tryon-fit-details-toggle:hover { color: #d6ba7d; }
+  .ps-tryon-fit-table { width: 100%; border-collapse: collapse; margin-top: clamp(6px, 0.52vw, 10px); font-size: clamp(10px, 0.68vw, 13px); }
+  .ps-tryon-fit-table th { text-align: left; padding: clamp(5px, 0.42vw, 8px) clamp(6px, 0.52vw, 10px); border-bottom: 1px solid #333; color: #999; font-weight: 600; }
+  .ps-tryon-fit-table td { padding: clamp(5px, 0.42vw, 8px) clamp(6px, 0.52vw, 10px); border-bottom: 1px solid #222; color: #ccc; }
   .ps-fit-good { color: #4ade80; } .ps-fit-tight { color: #f59e0b; } .ps-fit-loose { color: #60a5fa; }
 
+  /* Equivalent Sizes */
+  .ps-tryon-equiv-section { margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-equiv-title { font-size: clamp(11px, 0.78vw, 15px); font-weight: 700; color: #fff; margin: 0 0 clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-equiv-chips { display: flex; flex-wrap: wrap; gap: clamp(5px, 0.42vw, 8px); }
+  .ps-tryon-equiv-chip {
+    display: flex; align-items: center; border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px); overflow: hidden;
+  }
+  .ps-tryon-equiv-region { padding: clamp(4px, 0.36vw, 7px) clamp(6px, 0.52vw, 10px); font-size: clamp(9px, 0.63vw, 12px); color: #999; font-weight: 600; background: rgba(255,255,255,0.03); }
+  .ps-tryon-equiv-value { padding: clamp(4px, 0.36vw, 7px) clamp(7px, 0.63vw, 12px); font-size: clamp(10px, 0.73vw, 14px); color: #fff; font-weight: 700; }
+
+  .ps-tryon-size-reasoning { font-size: clamp(10px, 0.73vw, 14px); color: #ccc; line-height: 1.6; margin-bottom: clamp(8px, 0.73vw, 14px); }
+
   /* Save profile prompt */
-  .ps-tryon-save-prompt { margin-top: 14px; padding: 14px; border: 1px solid #333; border-radius: 12px; background: #1a1b1a; }
-  .ps-tryon-save-label { font-size: 12px; color: #999; margin-bottom: 10px; }
-  .ps-tryon-save-row { display: flex; gap: 8px; }
+  .ps-tryon-save-prompt { margin-top: clamp(8px, 0.73vw, 14px); padding: clamp(8px, 0.73vw, 14px); border: 1px solid #333; border-radius: clamp(8px, 0.63vw, 12px); background: #1a1b1a; }
+  .ps-tryon-save-label { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin-bottom: clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-save-row { display: flex; gap: clamp(5px, 0.42vw, 8px); }
   .ps-tryon-save-row input {
-    flex: 1; padding: 10px 14px; border: 1.5px solid #333; border-radius: 10px;
-    background: #111211; color: #fff; font-size: 13px; font-family: inherit; outline: none;
+    flex: 1; padding: clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
+    background: #111211; color: #fff; font-size: clamp(10px, 0.68vw, 13px); font-family: inherit; outline: none;
   }
   .ps-tryon-save-row input:focus { border-color: #bb945c; }
   .ps-tryon-save-row button {
-    padding: 10px 20px; background: #bb945c; color: #111; border: none; border-radius: 10px;
-    font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;
+    padding: clamp(6px, 0.52vw, 10px) clamp(12px, 1.04vw, 20px); background: #bb945c; color: #111; border: none; border-radius: clamp(6px, 0.52vw, 10px);
+    font-size: clamp(10px, 0.68vw, 13px); 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: 6px; }
+  .ps-tryon-save-btn-group { display: flex; gap: clamp(4px, 0.31vw, 6px); }
   .ps-tryon-save-new-btn { background: transparent !important; border: 1.5px solid #bb945c !important; color: #bb945c !important; }
   .ps-tryon-save-new-btn:hover { background: rgba(187,148,92,0.1) !important; }
-  .ps-tryon-save-done { font-size: 12px; color: #4ade80; margin-top: 10px; display: flex; align-items: center; gap: 6px; justify-content: center; }
+  .ps-tryon-save-done { font-size: clamp(9px, 0.63vw, 12px); color: #4ade80; margin-top: clamp(6px, 0.52vw, 10px); display: flex; align-items: center; gap: clamp(4px, 0.31vw, 6px); justify-content: center; }
   .ps-tryon-save-done svg { stroke: currentColor; }
 
   /* Error */
-  .ps-tryon-error { text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; }
-  .ps-tryon-error svg { color: #ef4444; margin-bottom: 12px; }
-  .ps-tryon-error-text { font-size: 14px; color: #ef4444; margin: 0 0 16px; }
+  .ps-tryon-error { text-align: center; padding: clamp(14px, 1.25vw, 24px); display: flex; flex-direction: column; align-items: center; }
+  .ps-tryon-error svg { color: #ef4444; margin-bottom: clamp(7px, 0.63vw, 12px); }
+  .ps-tryon-error-text { font-size: clamp(10px, 0.73vw, 14px); color: #ef4444; margin: 0 0 clamp(10px, 0.83vw, 16px); }
 
   /* Footer */
-  .ps-tryon-powered { text-align: center; padding: 12px 24px 16px; font-size: 11px; color: #666; }
+  .ps-tryon-powered { text-align: center; padding: clamp(7px, 0.63vw, 12px) clamp(14px, 1.25vw, 24px) clamp(10px, 0.83vw, 16px); font-size: clamp(8px, 0.57vw, 11px); color: #666; }
   .ps-tryon-powered a { color: #bb945c; text-decoration: none; }
   .ps-tryon-powered a:hover { text-decoration: underline; }
 
   /* Drawer */
   .ps-tryon-drawer {
     position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #111211);
-    overflow-y: auto; scrollbar-width: thin; padding: 20px 24px;
+    overflow-y: auto; scrollbar-width: thin; padding: clamp(12px, 1.04vw, 20px) clamp(14px, 1.25vw, 24px);
     transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
   }
   .ps-tryon-drawer-open { transform: translateX(0); }
-  .ps-tryon-drawer-header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #333; }
+  .ps-tryon-drawer-header { display: flex; align-items: center; gap: clamp(6px, 0.52vw, 10px); padding-bottom: clamp(8px, 0.73vw, 14px); margin-bottom: clamp(8px, 0.73vw, 14px); border-bottom: 1px solid #333; }
   .ps-tryon-drawer-back {
-    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
-    border: 1.5px solid #333; border-radius: 10px; background: transparent;
+    width: clamp(22px, 1.67vw, 32px); height: clamp(22px, 1.67vw, 32px); display: flex; align-items: center; justify-content: center;
+    border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: transparent;
     cursor: pointer; color: #999; transition: all 0.2s; flex-shrink: 0;
   }
   .ps-tryon-drawer-back:hover { border-color: #bb945c; color: #bb945c; }
-  .ps-tryon-drawer-title { font-size: 16px; font-weight: 600; color: #fff; }
-  .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 10px; }
-  .ps-tryon-drawer-empty { text-align: center; padding: 32px 16px; color: #666; font-size: 14px; }
+  .ps-tryon-drawer-title { font-size: clamp(12px, 0.83vw, 16px); font-weight: 600; color: #fff; }
+  .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: clamp(6px, 0.52vw, 10px); }
+  .ps-tryon-drawer-empty { text-align: center; padding: clamp(20px, 1.67vw, 32px) clamp(10px, 0.83vw, 16px); color: #666; font-size: clamp(10px, 0.73vw, 14px); }
 
   /* Profile items */
   .ps-tryon-profile-item {
-    display: flex; align-items: center; gap: 12px; padding: 14px;
-    border: 1px solid #333; border-radius: 12px; cursor: pointer; transition: all 0.2s;
+    display: flex; align-items: center; gap: clamp(7px, 0.63vw, 12px); padding: clamp(8px, 0.73vw, 14px);
+    border: 1px solid #333; border-radius: clamp(8px, 0.63vw, 12px); cursor: pointer; transition: all 0.2s;
   }
   .ps-tryon-profile-item:hover { border-color: #bb945c; }
   .ps-tryon-profile-avatar {
-    width: 40px; height: 40px; border-radius: 50%;
+    width: clamp(28px, 2.08vw, 40px); height: clamp(28px, 2.08vw, 40px); border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     background: rgba(187,148,92,0.1); flex-shrink: 0;
   }
   .ps-tryon-profile-avatar svg { stroke: #bb945c; fill: none; }
   .ps-tryon-profile-info { flex: 1; min-width: 0; }
-  .ps-tryon-profile-name { font-size: 14px; font-weight: 600; color: #fff; }
-  .ps-tryon-profile-detail { font-size: 11px; color: #999; margin-top: 2px; }
+  .ps-tryon-profile-name { font-size: clamp(10px, 0.73vw, 14px); font-weight: 600; color: #fff; }
+  .ps-tryon-profile-detail { font-size: clamp(8px, 0.57vw, 11px); color: #999; margin-top: 2px; }
   .ps-tryon-profile-item > svg:last-child { color: #666; flex-shrink: 0; transition: color 0.2s; }
   .ps-tryon-profile-item:hover > svg:last-child { color: #bb945c; }
 
   /* History items */
   .ps-tryon-history-item {
-    display: flex; gap: 14px; padding: 14px;
-    border: 1px solid #333; border-radius: 12px; align-items: flex-start; transition: all 0.2s;
+    display: flex; gap: clamp(8px, 0.73vw, 14px); padding: clamp(8px, 0.73vw, 14px);
+    border: 1px solid #333; border-radius: clamp(8px, 0.63vw, 12px); align-items: flex-start; transition: all 0.2s;
   }
-  .ps-tryon-history-item:hover { border-color: #bb945c; box-shadow: 0 4px 12px rgba(187,148,92,0.06); }
-  .ps-tryon-history-images { display: flex; gap: 8px; flex-shrink: 0; }
-  .ps-tryon-history-thumb { width: 64px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
+  .ps-tryon-history-item:hover { border-color: #bb945c; box-shadow: 0 clamp(2px, 0.21vw, 4px) clamp(7px, 0.63vw, 12px) rgba(187,148,92,0.06); }
+  .ps-tryon-history-images { display: flex; gap: clamp(5px, 0.42vw, 8px); flex-shrink: 0; }
+  .ps-tryon-history-thumb { width: clamp(44px, 3.33vw, 64px); height: clamp(56px, 4.17vw, 80px); border-radius: clamp(6px, 0.52vw, 10px); object-fit: cover; flex-shrink: 0; }
   .ps-tryon-history-info { flex: 1; min-width: 0; }
-  .ps-tryon-history-product { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
-  .ps-tryon-history-meta { font-size: 11px; color: #666; margin-top: 3px; }
-  .ps-tryon-history-sizing { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
-  .ps-tryon-history-sizing-reason { font-size: 11px; color: #999; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+  .ps-tryon-history-product { font-size: clamp(10px, 0.68vw, 13px); font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+  .ps-tryon-history-meta { font-size: clamp(8px, 0.57vw, 11px); color: #666; margin-top: 3px; }
+  .ps-tryon-history-sizing { display: flex; align-items: center; gap: clamp(5px, 0.42vw, 8px); margin-top: clamp(4px, 0.31vw, 6px); }
+  .ps-tryon-history-sizing-reason { font-size: clamp(8px, 0.57vw, 11px); color: #999; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
   .ps-tryon-history-size-badge {
-    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
+    flex-shrink: 0; width: clamp(28px, 2.08vw, 40px); height: clamp(28px, 2.08vw, 40px); border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     background: linear-gradient(135deg, #bb945c, #d6ba7d);
-    color: #111; font-size: 13px; font-weight: 700;
+    color: #111; font-size: clamp(10px, 0.68vw, 13px); font-weight: 700;
   }
-  .ps-tryon-history-result-img { width: 64px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 2px solid #bb945c; }
+  .ps-tryon-history-result-img { width: clamp(44px, 3.33vw, 64px); height: clamp(56px, 4.17vw, 80px); border-radius: clamp(6px, 0.52vw, 10px); object-fit: cover; flex-shrink: 0; border: 2px solid #bb945c; }
   .ps-tryon-history-delete {
-    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
-    border: none; background: transparent; cursor: pointer; color: #666; border-radius: 6px; transition: all 0.2s; flex-shrink: 0;
+    width: clamp(20px, 1.46vw, 28px); height: clamp(20px, 1.46vw, 28px); display: flex; align-items: center; justify-content: center;
+    border: none; background: transparent; cursor: pointer; color: #666; border-radius: clamp(4px, 0.31vw, 6px); transition: all 0.2s; flex-shrink: 0;
   }
   .ps-tryon-history-delete:hover { background: rgba(239,68,68,0.1); color: #ef4444; }
   .ps-tryon-history-delete svg { stroke: currentColor; fill: none; }
@@ -1645,45 +1810,59 @@ const STYLES = `
   .ps-tryon-detail-overlay {
     position: fixed; inset: 0; background: rgba(0,0,0,0.55);
     display: flex; align-items: center; justify-content: center;
-    z-index: 9999999; padding: 16px; animation: ps-fade-in 0.2s ease;
+    z-index: 9999999; padding: clamp(10px, 0.83vw, 16px); animation: ps-fade-in 0.2s ease;
   }
   .ps-tryon-detail-modal {
-    background: #111211; border-radius: 16px; width: 100%; max-width: 440px; max-height: 85vh;
-    overflow-y: auto; box-shadow: 0 32px 64px rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;
+    background: #111211; border-radius: clamp(10px, 0.83vw, 16px); width: 100%; max-width: clamp(340px, 23vw, 440px); max-height: 85vh;
+    overflow-y: auto; box-shadow: 0 clamp(20px, 1.67vw, 32px) clamp(40px, 3.33vw, 64px) rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;
     font-family: var(--ps-modal-font, system-ui, sans-serif); color: #fff;
   }
   .ps-tryon-detail-header {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 18px 24px; border-bottom: 1px solid #333;
+    padding: clamp(10px, 0.94vw, 18px) clamp(14px, 1.25vw, 24px); border-bottom: 1px solid #333;
   }
-  .ps-tryon-detail-header span { font-size: 15px; font-weight: 600; }
-  .ps-tryon-detail-header button { background: none; border: none; color: #999; cursor: pointer; display: flex; align-items: center; border-radius: 6px; padding: 4px; transition: background 0.15s; }
+  .ps-tryon-detail-header span { font-size: clamp(11px, 0.78vw, 15px); font-weight: 600; }
+  .ps-tryon-detail-header button { background: none; border: none; color: #999; cursor: pointer; display: flex; align-items: center; border-radius: clamp(4px, 0.31vw, 6px); padding: clamp(2px, 0.21vw, 4px); transition: background 0.15s; }
   .ps-tryon-detail-header button:hover { background: rgba(255,255,255,0.1); }
-  .ps-tryon-detail-body { padding: 20px 24px; }
-  .ps-tryon-detail-gender { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding-bottom: 14px; border-bottom: 1px solid #333; margin-bottom: 14px; }
+  .ps-tryon-detail-body { padding: clamp(12px, 1.04vw, 20px) clamp(14px, 1.25vw, 24px); }
+  .ps-tryon-detail-gender { display: flex; align-items: center; gap: clamp(5px, 0.42vw, 8px); font-size: clamp(10px, 0.73vw, 14px); font-weight: 600; padding-bottom: clamp(8px, 0.73vw, 14px); border-bottom: 1px solid #333; margin-bottom: clamp(8px, 0.73vw, 14px); }
   .ps-tryon-detail-gender svg { stroke: #bb945c; fill: none; }
-  .ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
-  .ps-tryon-detail-cell { background: #1a1b1a; border-radius: 10px; padding: 12px 14px; }
-  .ps-tryon-detail-cell-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
-  .ps-tryon-detail-cell-value { font-size: 16px; font-weight: 600; color: #fff; }
-  .ps-tryon-detail-date { font-size: 11px; color: #666; text-align: center; margin-top: 8px; }
+  .ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 0.52vw, 10px); margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-detail-cell { background: #1a1b1a; border-radius: clamp(6px, 0.52vw, 10px); padding: clamp(7px, 0.63vw, 12px) clamp(8px, 0.73vw, 14px); }
+  .ps-tryon-detail-cell-label { font-size: clamp(8px, 0.57vw, 11px); color: #999; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: clamp(2px, 0.21vw, 4px); }
+  .ps-tryon-detail-cell-value { font-size: clamp(12px, 0.83vw, 16px); font-weight: 600; color: #fff; }
+  .ps-tryon-detail-date { font-size: clamp(8px, 0.57vw, 11px); color: #666; text-align: center; margin-top: clamp(5px, 0.42vw, 8px); }
   .ps-tryon-detail-delete {
-    width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
-    padding: 12px; border: 1px solid #333; border-radius: 10px; background: none;
-    color: #ef4444; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s;
-    font-family: inherit; margin-top: 16px;
+    width: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(4px, 0.31vw, 6px);
+    padding: clamp(7px, 0.63vw, 12px); border: 1px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: none;
+    color: #ef4444; font-size: clamp(10px, 0.68vw, 13px); font-weight: 500; cursor: pointer; transition: all 0.2s;
+    font-family: inherit; margin-top: clamp(10px, 0.83vw, 16px);
   }
   .ps-tryon-detail-delete:hover { background: rgba(239,68,68,0.06); border-color: #ef4444; }
   .ps-tryon-detail-delete svg { stroke: currentColor; fill: none; }
 
   /* Mobile responsive */
+  @media (max-width: 768px) {
+    .ps-tryon-overlay {
+      padding: 0;
+      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+      align-items: stretch; justify-content: stretch;
+    }
+    .ps-tryon-modal {
+      max-width: 100%; max-height: none; width: 100%;
+      border-radius: 0; box-shadow: none;
+      min-height: 100%; flex: 1;
+      display: flex; flex-direction: column;
+    }
+    .ps-tryon-modal-wide { max-width: 100%; }
+    .ps-tryon-modal > :last-child { flex: 1; }
+    .ps-tryon-header { border-radius: 0; }
+  }
   @media (max-width: 720px) {
     .ps-tryon-result-split { flex-direction: column; }
     .ps-tryon-result-image-col { flex: none; }
-    .ps-tryon-modal-wide { max-width: 520px; }
   }
   @media (max-width: 480px) {
-    .ps-tryon-modal { max-height: 100vh; border-radius: 14px; }
     .ps-tryon-body { padding: 18px; }
     .ps-tryon-header { padding: 14px 18px; }
     .ps-tryon-stepper { padding: 14px 18px 8px; }