smartcomply-web-sdk 1.0.62 → 1.0.64

package/dist/smartcomply.browser.js

@@ -4672,8 +4672,14 @@ var SmartComplySDK = (() => {
   `;
     document.head.appendChild(s2);
   }
+  var DEFAULT_COLORS = {
+    primary: "#3b82f6",
+    success: "#22c55e",
+    error: "#ef4444",
+    warning: "#fbbf24"
+  };
   var LivenessUI = class {
-    constructor() {
+    constructor(colors) {
       this.root = null;
       this.videoEl = null;
       this.instructionEl = null;
@@ -4687,6 +4693,7 @@ var SmartComplySDK = (() => {
       this.scanStartMs = 0;
       this.scanDurationMs = 0;
       this.faceTracked = false;
+      this.colors = { ...DEFAULT_COLORS, ...colors };
     }
     mount(container, challenge) {
       injectLivenessKeyframes();
@@ -4761,7 +4768,7 @@ var SmartComplySDK = (() => {
       confOval.setAttribute("rx", "64");
       confOval.setAttribute("ry", "86");
       confOval.setAttribute("fill", "none");
-      confOval.setAttribute("stroke", "#3b82f6");
+      confOval.setAttribute("stroke", this.colors.primary);
       confOval.setAttribute("stroke-width", "2.5");
       confOval.setAttribute("stroke-linecap", "round");
       const circ = 2 * Math.PI * Math.sqrt((64 * 64 + 86 * 86) / 2);
@@ -4770,7 +4777,7 @@ var SmartComplySDK = (() => {
       confOval.style.cssText = "transition:stroke-dashoffset 0.2s linear,stroke 0.3s ease;transform:rotate(-90deg);transform-origin:70px 90px;";
       this.confidenceRingEl = confOval;
       const bracketGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
-      bracketGroup.setAttribute("stroke", "#3b82f6");
+      bracketGroup.setAttribute("stroke", this.colors.primary);
       bracketGroup.setAttribute("stroke-width", "3");
       bracketGroup.setAttribute("stroke-linecap", "round");
       bracketGroup.setAttribute("fill", "none");
@@ -4831,7 +4838,7 @@ var SmartComplySDK = (() => {
       for (let i2 = 0; i2 < 3; i2++) {
         const dot = document.createElement("div");
         dot.style.cssText = `
-        width:6px;height:6px;border-radius:50%;background:#3b82f6;
+        width:6px;height:6px;border-radius:50%;background:${this.colors.primary};
         animation:sc-scan-dot 1.1s ease-in-out ${i2 * 0.18}s infinite;
       `;
         this.dotsEl.appendChild(dot);
@@ -4870,7 +4877,7 @@ var SmartComplySDK = (() => {
       const pct = this.scanDurationMs > 0 ? Math.min(1, elapsed / this.scanDurationMs) : 0;
       const circ = 2 * Math.PI * Math.sqrt((64 * 64 + 86 * 86) / 2);
       this.confidenceRingEl.setAttribute("stroke-dashoffset", `${circ * (1 - pct)}`);
-      this.confidenceRingEl.setAttribute("stroke", livenessConfirmed ? "#22c55e" : "#3b82f6");
+      this.confidenceRingEl.setAttribute("stroke", livenessConfirmed ? this.colors.success : this.colors.primary);
     }
     /**
      * Reflects whether a face is currently detected in-frame — brightens the
@@ -4906,7 +4913,7 @@ var SmartComplySDK = (() => {
         <div style="text-align:center;color:#fff;animation:sc-pop-in 0.35s ease;padding:24px;">
           <div style="width:72px;height:72px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:32px;
             background:${ok ? "rgba(34,197,94,0.2)" : "rgba(239,68,68,0.2)"};
-            border:3px solid ${ok ? "#22c55e" : "#ef4444"};">
+            border:3px solid ${ok ? this.colors.success : this.colors.error};">
             ${ok ? "✓" : "✕"}
           </div>
           <div style="font-size:17px;font-weight:700;margin-bottom:8px;">${ok ? "Verification submitted" : "Submission failed"}</div>
@@ -4924,10 +4931,10 @@ var SmartComplySDK = (() => {
         this.overlayEl.style.display = "flex";
         this.overlayEl.innerHTML = `
         <div style="text-align:center;color:#fff;animation:sc-pop-in 0.35s ease;padding:24px;">
-          <div style="width:72px;height:72px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:32px;background:rgba(251,191,36,0.15);border:3px solid #fbbf24;">⏱</div>
+          <div style="width:72px;height:72px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:32px;background:rgba(251,191,36,0.15);border:3px solid ${this.colors.warning};">⏱</div>
           <div style="font-size:17px;font-weight:700;margin-bottom:8px;">Time's Up</div>
           <div style="font-size:12px;opacity:0.6;margin-bottom:18px;">We couldn't confirm liveness in time. Please try again.</div>
-          <button id="sc-retry-btn" style="padding:11px 28px;border-radius:10px;background:#3b82f6;color:#fff;border:none;cursor:pointer;font-size:14px;font-weight:600;width:100%;max-width:180px;">Try Again</button>
+          <button id="sc-retry-btn" style="padding:11px 28px;border-radius:10px;background:${this.colors.primary};color:#fff;border:none;cursor:pointer;font-size:14px;font-weight:600;width:100%;max-width:180px;">Try Again</button>
         </div>`;
         const btn = this.overlayEl.querySelector("#sc-retry-btn");
         if (btn) {
@@ -4961,13 +4968,13 @@ var SmartComplySDK = (() => {
         docVideo.srcObject = stream;
         const guideOverlay = document.createElement("div");
         guideOverlay.style.cssText = "position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;";
-        guideOverlay.innerHTML = `<div style="width:83%;height:53%;border:2px dashed rgba(255,255,255,0.55);border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,0.45);position:relative;"><div style="position:absolute;top:-2px;left:-2px;width:18px;height:18px;border-top:3px solid #3b82f6;border-left:3px solid #3b82f6;border-radius:4px 0 0 0;"></div><div style="position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-top:3px solid #3b82f6;border-right:3px solid #3b82f6;border-radius:0 4px 0 0;"></div><div style="position:absolute;bottom:-2px;left:-2px;width:18px;height:18px;border-bottom:3px solid #3b82f6;border-left:3px solid #3b82f6;border-radius:0 0 0 4px;"></div><div style="position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-bottom:3px solid #3b82f6;border-right:3px solid #3b82f6;border-radius:0 0 4px 0;"></div></div>`;
+        guideOverlay.innerHTML = `<div style="width:83%;height:53%;border:2px dashed rgba(255,255,255,0.55);border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,0.45);position:relative;"><div style="position:absolute;top:-2px;left:-2px;width:18px;height:18px;border-top:3px solid ${this.colors.primary};border-left:3px solid ${this.colors.primary};border-radius:4px 0 0 0;"></div><div style="position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-top:3px solid ${this.colors.primary};border-right:3px solid ${this.colors.primary};border-radius:0 4px 0 0;"></div><div style="position:absolute;bottom:-2px;left:-2px;width:18px;height:18px;border-bottom:3px solid ${this.colors.primary};border-left:3px solid ${this.colors.primary};border-radius:0 0 0 4px;"></div><div style="position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-bottom:3px solid ${this.colors.primary};border-right:3px solid ${this.colors.primary};border-radius:0 0 4px 0;"></div></div>`;
         const header = document.createElement("div");
         header.style.cssText = "position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(0,0,0,0.88) 0%,transparent 100%);padding:18px 16px 40px;text-align:center;";
         header.innerHTML = `<div style="color:#fff;font-size:16px;font-weight:700;margin-bottom:6px;">Scan Your ID Document</div><div style="color:rgba(255,255,255,0.6);font-size:12px;line-height:1.6;">Fit your document inside the frame.<br>Make sure all text and corners are visible.</div>`;
         const bottomPanel = document.createElement("div");
         bottomPanel.style.cssText = "position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.6) 70%,transparent 100%);padding:16px;";
-        bottomPanel.innerHTML = `<div style="font-size:11px;color:rgba(255,255,255,0.4);text-align:center;margin-bottom:12px;">💡 Good lighting · No glare · All 4 corners visible</div><button id="sc-capture-doc-btn" style="width:100%;padding:12px;border-radius:12px;background:#3b82f6;color:#fff;border:none;cursor:pointer;font-size:15px;font-weight:700;margin-bottom:8px;">Capture Document</button><label style="width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.18);cursor:pointer;color:rgba(255,255,255,0.6);font-size:13px;font-weight:500;"><span>📁</span><span>Upload from gallery instead</span><input id="sc-upload-doc-input" type="file" accept="image/*" style="display:none;" /></label>`;
+        bottomPanel.innerHTML = `<div style="font-size:11px;color:rgba(255,255,255,0.4);text-align:center;margin-bottom:12px;">Good lighting · No glare · All 4 corners visible</div><button id="sc-capture-doc-btn" style="width:100%;padding:12px;border-radius:12px;background:${this.colors.primary};color:#fff;border:none;cursor:pointer;font-size:15px;font-weight:700;margin-bottom:8px;">Capture Document</button><label style="width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.18);cursor:pointer;color:rgba(255,255,255,0.6);font-size:13px;font-weight:500;"><span>📁</span><span>Upload from gallery instead</span><input id="sc-upload-doc-input" type="file" accept="image/*" style="display:none;" /></label>`;
         docRoot.appendChild(docVideo);
         docRoot.appendChild(guideOverlay);
         docRoot.appendChild(header);
@@ -5323,7 +5330,7 @@ var SmartComplySDK = (() => {
       const camera = new CameraManager();
       const recorder = new VideoRecorder();
       const faceEngine = new FaceDetectorEngine();
-      const ui2 = new LivenessUI();
+      const ui2 = new LivenessUI(params.colors);
       let cleanedUp = false;
       const cleanup = () => {
         if (cleanedUp) return;
@@ -5713,6 +5720,20 @@ var SmartComplySDK = (() => {
   };
 
   // src/flow/theme.ts
+  var RADIUS = {
+    sm: 8,
+    md: 12,
+    lg: 16,
+    pill: 999
+  };
+  var TYPE = {
+    xs: 12,
+    sm: 13,
+    base: 15,
+    headingSm: 16,
+    heading: 18,
+    headingLg: 22
+  };
   var THEMES = {
     default: {
       primary: "#3b82f6",
@@ -5953,14 +5974,90 @@ var SmartComplySDK = (() => {
     return Math.min(maxWidth / srcWidth, maxHeight / srcHeight, 1);
   }
 
+  // src/flow/icons.ts
+  var PATHS = {
+    shield: '<path d="M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5l8-3z"/>',
+    "id-card": '<rect x="2" y="5" width="20" height="14" rx="2"/><circle cx="8" cy="12" r="2"/><path d="M13 10h6M13 14h4"/>',
+    document: '<path d="M6 2h9l5 5v15H6z"/><path d="M15 2v5h5"/><path d="M9 13h6M9 17h6"/>',
+    check: '<path d="M4 12l6 6L20 6"/>',
+    close: '<path d="M5 5l14 14M19 5L5 19"/>',
+    camera: '<path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.5"/>',
+    gallery: '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M21 15l-5-5-9 9"/>',
+    network: '<path d="M2 8.5a17 17 0 0120 0M5.5 12.5a12 12 0 0113 0M9 16.5a6 6 0 016 0"/><circle cx="12" cy="20" r="1"/>',
+    clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/>',
+    search: '<circle cx="10.5" cy="10.5" r="6.5"/><path d="M20 20l-4.8-4.8"/>',
+    calendar: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>',
+    face: '<circle cx="12" cy="12" r="9"/><path d="M9 10h.01M15 10h.01M8.5 15c1 1.2 2.2 1.8 3.5 1.8s2.5-.6 3.5-1.8"/>',
+    warning: '<path d="M12 3l10 18H2z"/><path d="M12 10v4"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/>',
+    passport: '<rect x="5" y="2" width="14" height="20" rx="2"/><circle cx="12" cy="9" r="2.5"/><path d="M9 15h6"/>',
+    car: '<path d="M4 16V11l2-5h12l2 5v5"/><path d="M4 16h16M7 16v2M17 16v2"/><circle cx="7.5" cy="14" r="1"/><circle cx="16.5" cy="14" r="1"/>',
+    ballot: '<rect x="4" y="8" width="16" height="12" rx="1"/><path d="M9 8V5a3 3 0 016 0v3"/><path d="M12 12v4"/>',
+    refresh: '<path d="M4 4v6h6"/><path d="M20 20v-6h-6"/><path d="M20 10a8 8 0 00-14.6-4.6M4 14a8 8 0 0014.6 4.6"/>'
+  };
+  function icon(name, size = 24) {
+    const d2 = PATHS[name];
+    return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${d2}</svg>`;
+  }
+
+  // src/flow/spinner.ts
+  var injected = false;
+  function injectSpinnerKeyframes() {
+    if (injected || document.getElementById("sc-spinner-kf")) {
+      injected = true;
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "sc-spinner-kf";
+    style.textContent = `
+    @keyframes sc-spin { to { transform: rotate(360deg); } }
+    @keyframes sc-spinner-pulse {
+      0%, 100% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.1); opacity: 0.8; }
+    }
+  `;
+    document.head.appendChild(style);
+    injected = true;
+  }
+  function renderSpinner(theme, opts = {}) {
+    injectSpinnerKeyframes();
+    const size = opts.size ?? 44;
+    const wrap = document.createElement("div");
+    wrap.style.cssText = `position:relative;width:${size}px;height:${size}px;flex-shrink:0;`;
+    const ring = document.createElement("div");
+    ring.style.cssText = `
+    position:absolute;inset:0;border-radius:50%;
+    border:${Math.max(2, Math.round(size / 20))}px solid ${theme.border};
+    border-top-color:${theme.primary};
+    animation:sc-spin 0.9s linear infinite;
+  `;
+    wrap.appendChild(ring);
+    if (opts.icon) {
+      const center = document.createElement("div");
+      center.style.cssText = `
+      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
+      color:${theme.primary};animation:sc-spinner-pulse 2s ease-in-out infinite;
+    `;
+      center.innerHTML = opts.icon;
+      wrap.appendChild(center);
+    }
+    return wrap;
+  }
+  function renderInlineSpinner(color = "#fff", size = 13) {
+    injectSpinnerKeyframes();
+    return `<span style="display:inline-block;width:${size}px;height:${size}px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);border-top-color:${color};animation:sc-spin 0.6s linear infinite;flex-shrink:0;"></span>`;
+  }
+
   // src/flow/DocumentCapture.ts
   var DocumentCapture = class {
     constructor() {
       this.root = null;
       this.videoEl = null;
+      this.videoWrapEl = null;
       this.cameraManager = new CameraManager();
+      this.orientationHandler = null;
       this.resolveCapture = null;
       this.rejectCapture = null;
+      this.frontViaCamera = false;
       this.frontBlob = null;
       this.backBlob = null;
       this.currentSide = "front";
@@ -5992,6 +6089,7 @@ var SmartComplySDK = (() => {
         this.rejectCapture = reject;
         this.frontBlob = null;
         this.backBlob = null;
+        this.frontViaCamera = false;
         this.currentSide = "front";
         this.requiresBackOverride = requiresBack;
         this.renderChoiceScreen(container, theme, documentType);
@@ -6034,14 +6132,14 @@ var SmartComplySDK = (() => {
       iconBox.style.cssText = `
       width:48px;height:48px;border-radius:14px;flex-shrink:0;
       display:flex;align-items:center;justify-content:center;
-      font-size:24px;
+      color:${theme.primary};
       background:${theme.primary}15;
       border:1.5px solid ${theme.primary}30;
     `;
-      iconBox.textContent = this._docIcon(documentType);
+      iconBox.innerHTML = icon(this._docIcon(documentType), 22);
       const titleBlock = document.createElement("div");
       const titleEl = document.createElement("div");
-      titleEl.style.cssText = `color:${theme.text};font-size:16px;font-weight:700;line-height:1.3;`;
+      titleEl.style.cssText = `color:${theme.text};font-size:${TYPE.headingSm}px;font-weight:700;line-height:1.3;`;
       titleEl.textContent = `Capture your ${docLabel}`;
       const subEl = document.createElement("div");
       subEl.style.cssText = `color:${theme.textSecondary};font-size:12px;margin-top:2px;`;
@@ -6066,7 +6164,7 @@ var SmartComplySDK = (() => {
       transition:all 0.15s ease;min-height:80px;
       box-shadow:0 4px 14px ${theme.primary}30;
     `;
-      cameraBtn.innerHTML = `<span style="font-size:26px;">📷</span><span>Take Photo</span><span style="font-size:10px;opacity:0.8;font-weight:500;">Use camera</span>`;
+      cameraBtn.innerHTML = `<span style="display:inline-flex;">${icon("camera", 24)}</span><span>Take Photo</span><span style="font-size:10px;opacity:0.8;font-weight:500;">Use camera</span>`;
       cameraBtn.addEventListener("mouseenter", () => {
         cameraBtn.style.opacity = "0.9";
         cameraBtn.style.transform = "translateY(-1px)";
@@ -6088,7 +6186,7 @@ var SmartComplySDK = (() => {
       font-size:13px;font-weight:600;font-family:inherit;
       transition:all 0.15s ease;min-height:80px;
     `;
-      uploadBtn.innerHTML = `<span style="font-size:26px;">🖼️</span><span>From Gallery</span><span style="font-size:10px;color:${theme.textMuted || theme.textSecondary};font-weight:500;">Upload file</span>`;
+      uploadBtn.innerHTML = `<span style="display:inline-flex;">${icon("gallery", 24)}</span><span>From Gallery</span><span style="font-size:10px;color:${theme.textMuted || theme.textSecondary};font-weight:500;">Upload file</span>`;
       uploadBtn.addEventListener("mouseenter", () => {
         uploadBtn.style.borderColor = theme.primary;
         uploadBtn.style.transform = "translateY(-1px)";
@@ -6107,7 +6205,7 @@ var SmartComplySDK = (() => {
       tips.style.cssText = `
       margin:0 20px 16px;padding:12px 14px;
       background:${theme.shimmer || theme.cardBg};
-      border:1px solid ${theme.border};border-radius:12px;
+      border:1px solid ${theme.border};border-radius:${RADIUS.md}px;
     `;
       const tipsGrid = document.createElement("div");
       tipsGrid.style.cssText = `
@@ -6122,7 +6220,7 @@ var SmartComplySDK = (() => {
       tipItems.forEach((t2) => {
         const row = document.createElement("div");
         row.style.cssText = `display:flex;align-items:center;gap:5px;font-size:11px;color:${theme.textSecondary};`;
-        row.innerHTML = `<span style="color:${theme.primary};font-weight:700;flex-shrink:0;">✓</span><span>${t2}</span>`;
+        row.innerHTML = `<span style="color:${theme.primary};flex-shrink:0;display:inline-flex;">${icon("check", 12)}</span><span>${t2}</span>`;
         tipsGrid.appendChild(row);
       });
       tips.appendChild(tipsGrid);
@@ -6159,45 +6257,84 @@ var SmartComplySDK = (() => {
       this.root.appendChild(fileInput);
       container.appendChild(this.root);
     }
-    /** Returns an appropriate emoji icon for the document type. */
+    /** Returns the icon name matching the document type. */
     _docIcon(documentType) {
       const t2 = documentType.toLowerCase();
-      if (t2.includes("passport")) return "📘";
-      if (t2.includes("driver") || t2.includes("licen")) return "🚗";
-      if (t2.includes("voter") || t2.includes("pvc")) return "🗳️";
-      return "🪪";
+      if (t2.includes("passport")) return "passport";
+      if (t2.includes("driver") || t2.includes("licen")) return "car";
+      if (t2.includes("voter") || t2.includes("pvc")) return "ballot";
+      return "id-card";
     }
     renderCameraView(container, theme, documentType) {
       const wrapper = document.createElement("div");
-      wrapper.style.cssText = "position:relative;width:100%;border-radius:12px;overflow:hidden;background:#000;";
+      wrapper.style.cssText = `
+      position:relative;width:100%;max-width:420px;margin:0 auto;
+      background:#0a0a0a;border-radius:${RADIUS.lg}px;overflow:hidden;
+      box-shadow:0 8px 32px rgba(0,0,0,0.4);
+    `;
+      this.videoWrapEl = wrapper;
       this.videoEl = document.createElement("video");
       this.videoEl.autoplay = true;
       this.videoEl.playsInline = true;
       this.videoEl.muted = true;
       this.videoEl.style.cssText = "width:100%;display:block;aspect-ratio:4/3;object-fit:cover;";
       wrapper.appendChild(this.videoEl);
-      const guide = document.createElement("div");
-      guide.style.cssText = `
-      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
-      pointer-events:none;
+      const vignette = document.createElement("div");
+      vignette.style.cssText = `
+      position:absolute;inset:0;pointer-events:none;
+      box-shadow:inset 0 0 0 9999px rgba(0,0,0,0.38);
+      -webkit-mask:radial-gradient(ellipse 46% 34% at 50% 50%, transparent 60%, #000 100%);
+      mask:radial-gradient(ellipse 46% 34% at 50% 50%, transparent 60%, #000 100%);
     `;
-      const rect = document.createElement("div");
-      rect.style.cssText = `
-      width:85%;height:60%;border:2px solid rgba(255,255,255,0.6);
-      border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,0.4);
+      wrapper.appendChild(vignette);
+      const guideWrap = document.createElement("div");
+      guideWrap.style.cssText = `
+      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
+      width:84%;aspect-ratio:16/10;pointer-events:none;
     `;
-      guide.appendChild(rect);
-      wrapper.appendChild(guide);
-      const guideLbl = document.createElement("div");
-      guideLbl.style.cssText = `
-      position:absolute;bottom:60px;left:0;right:0;text-align:center;
-      color:#fff;font-size:13px;font-weight:600;
-      text-shadow:0 1px 3px rgba(0,0,0,0.5);
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.setAttribute("viewBox", "0 0 160 100");
+      svg.style.cssText = "width:100%;height:100%;overflow:visible;";
+      const bracketGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      bracketGroup.setAttribute("stroke", theme.primary);
+      bracketGroup.setAttribute("stroke-width", "3");
+      bracketGroup.setAttribute("stroke-linecap", "round");
+      bracketGroup.setAttribute("fill", "none");
+      const bLen = 16;
+      const bx0 = 4, bx1 = 156, by0 = 4, by1 = 96;
+      const brackets = [
+        `M${bx0},${by0 + bLen} L${bx0},${by0} L${bx0 + bLen},${by0}`,
+        `M${bx1 - bLen},${by0} L${bx1},${by0} L${bx1},${by0 + bLen}`,
+        `M${bx0},${by1 - bLen} L${bx0},${by1} L${bx0 + bLen},${by1}`,
+        `M${bx1 - bLen},${by1} L${bx1},${by1} L${bx1},${by1 - bLen}`
+      ];
+      for (const d2 of brackets) {
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", d2);
+        bracketGroup.appendChild(path);
+      }
+      svg.appendChild(bracketGroup);
+      guideWrap.appendChild(svg);
+      wrapper.appendChild(guideWrap);
+      const header = document.createElement("div");
+      header.style.cssText = `
+      position:absolute;top:0;left:0;right:0;
+      background:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,transparent 100%);
+      padding:14px 16px 32px;text-align:center;
     `;
-      guideLbl.textContent = `Align your ${this.getDocumentLabel(documentType)} within the frame`;
-      wrapper.appendChild(guideLbl);
+      header.innerHTML = `<div style="color:#fff;font-size:${TYPE.sm}px;font-weight:600;">Align your ${this.getDocumentLabel(documentType)} within the frame</div>`;
+      wrapper.appendChild(header);
+      const footer = document.createElement("div");
+      footer.style.cssText = `
+      position:absolute;bottom:0;left:0;right:0;
+      background:linear-gradient(0deg,rgba(0,0,0,0.7) 0%,transparent 100%);
+      padding:28px 10px 18px;text-align:center;
+    `;
+      footer.innerHTML = `<div style="font-size:${TYPE.xs}px;color:rgba(255,255,255,0.55);">Good lighting · No glare · All 4 corners visible</div>`;
+      wrapper.appendChild(footer);
       container.appendChild(wrapper);
       const captureBtn = document.createElement("button");
+      captureBtn.setAttribute("aria-label", "Capture photo");
       captureBtn.style.cssText = `
       display:block;margin:16px auto 0;width:64px;height:64px;
       border-radius:50%;border:4px solid ${theme.primary};
@@ -6223,6 +6360,39 @@ var SmartComplySDK = (() => {
       container.appendChild(captureBtn);
       this.openCamera();
     }
+    /**
+     * Matches the video box's aspect-ratio CSS to the stream's actual
+     * negotiated dimensions instead of a single hardcoded ratio — a stream
+     * that's natively 16:9 no longer gets force-cropped into a 4:3 box.
+     * Clamped to a sane document-shaped range so a degenerate/unusual stream
+     * can't produce a sliver-thin or absurdly tall box.
+     */
+    _fitToStream() {
+      if (!this.videoEl) return;
+      const { videoWidth: w2, videoHeight: h2 } = this.videoEl;
+      if (!w2 || !h2) return;
+      const ratio = Math.min(Math.max(w2 / h2, 1), 2);
+      this.videoEl.style.aspectRatio = `${ratio}`;
+    }
+    /**
+     * Re-fits the video box when the device rotates mid-capture. Does not
+     * re-request getUserMedia (disruptive/slow) — the stream's dimensions
+     * don't change on rotation, only the viewport does, so re-reading the
+     * already-known videoWidth/videoHeight is enough to keep the box sane.
+     */
+    _watchOrientation() {
+      this._unwatchOrientation();
+      this.orientationHandler = () => this._fitToStream();
+      window.addEventListener("orientationchange", this.orientationHandler);
+      window.addEventListener("resize", this.orientationHandler);
+    }
+    _unwatchOrientation() {
+      if (this.orientationHandler) {
+        window.removeEventListener("orientationchange", this.orientationHandler);
+        window.removeEventListener("resize", this.orientationHandler);
+        this.orientationHandler = null;
+      }
+    }
     async openCamera() {
       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
         this.rejectCapture?.(new Error("Camera access is not supported in this browser. Please use a modern browser like Chrome, Firefox, or Safari."));
@@ -6269,6 +6439,8 @@ var SmartComplySDK = (() => {
       });
       if (this.videoEl) {
         this.videoEl.srcObject = stream;
+        this.videoEl.addEventListener("loadedmetadata", () => this._fitToStream(), { once: true });
+        this._watchOrientation();
       }
     }
     captureFrame(container, theme, documentType) {
@@ -6285,7 +6457,7 @@ var SmartComplySDK = (() => {
             this.stopCamera();
             this.showLoadingState("Analyzing photo...", theme);
             const quality = await this._assessImageQuality(canvas, ctx);
-            this.showPreview(container, theme, blob, documentType, quality);
+            this.showPreview(container, theme, blob, documentType, quality, true);
           }
         },
         "image/jpeg",
@@ -6327,28 +6499,37 @@ var SmartComplySDK = (() => {
         return null;
       }
     }
-    showPreview(container, theme, imageData, documentType, quality) {
+    showPreview(container, theme, imageData, documentType, quality, viaCamera) {
       if (this.root) this.root.innerHTML = "";
       else {
         this.root = document.createElement("div");
         container.appendChild(this.root);
       }
       this.root.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:16px;";
+      const stepBadge = document.createElement("div");
+      stepBadge.style.cssText = `
+      display:inline-flex;align-items:center;gap:5px;
+      padding:3px 11px;border-radius:${RADIUS.pill}px;
+      font-size:10.5px;font-weight:600;letter-spacing:0.2px;
+      color:${theme.primary};background:${theme.primary}15;border:1px solid ${theme.primary}30;
+    `;
+      stepBadge.textContent = "STEP 1 OF 2 · CHECK THE PHOTO";
+      this.root.appendChild(stepBadge);
       const img = document.createElement("img");
       const imageUrl = URL.createObjectURL(imageData);
       img.src = imageUrl;
       img.style.cssText = `
-      width:100%;max-height:300px;object-fit:contain;border-radius:12px;
+      width:100%;max-height:300px;object-fit:contain;border-radius:${RADIUS.md}px;
       border:2px solid ${theme.border};
     `;
       this.root.appendChild(img);
       img._blobUrl = imageUrl;
       const label = document.createElement("div");
-      label.style.cssText = `color:${theme.textSecondary};font-size:13px;text-align:center;font-weight:500;`;
+      label.style.cssText = `color:${theme.text};font-size:${TYPE.base}px;font-weight:700;text-align:center;`;
       label.textContent = "Does the photo look clear?";
       this.root.appendChild(label);
       const sublabel = document.createElement("div");
-      sublabel.style.cssText = `color:${theme.textMuted};font-size:11px;text-align:center;line-height:1.6;`;
+      sublabel.style.cssText = `color:${theme.textMuted};font-size:${TYPE.xs}px;text-align:center;line-height:1.6;`;
       sublabel.textContent = "All text must be readable and all four corners must be visible.";
       this.root.appendChild(sublabel);
       const qualityIsPoor = !!quality && !quality.isValid;
@@ -6388,7 +6569,7 @@ var SmartComplySDK = (() => {
         }
         useBtn.textContent = "Processing...";
         useBtn.disabled = true;
-        this.compressImage(imageData, 2e3, 1500, 0.92).then((compressed) => this.handleCaptureComplete(compressed, container, theme, documentType)).catch(() => this.handleCaptureComplete(imageData, container, theme, documentType));
+        this.compressImage(imageData, 2e3, 1500, 0.92).then((compressed) => this.handleCaptureComplete(compressed, container, theme, documentType, viaCamera)).catch(() => this.handleCaptureComplete(imageData, container, theme, documentType, viaCamera));
       };
       const useBtn = this.createButton(qualityIsPoor ? "Use Anyway ⚠" : "Use Photo ✓", theme, !qualityIsPoor);
       useBtn.style.flex = "1";
@@ -6409,11 +6590,12 @@ var SmartComplySDK = (() => {
       btnRow.appendChild(useBtn);
       this.root.appendChild(btnRow);
     }
-    handleCaptureComplete(imageData, container, theme, documentType) {
+    handleCaptureComplete(imageData, container, theme, documentType, viaCamera) {
       const requiresBack = this.shouldCaptureBackSide(documentType);
       const wasCapturingFront = this.currentSide === "front";
       if (wasCapturingFront) {
         this.frontBlob = imageData;
+        this.frontViaCamera = viaCamera;
       } else {
         this.backBlob = imageData;
       }
@@ -6429,13 +6611,14 @@ var SmartComplySDK = (() => {
       }
       const result = {
         front: this.frontBlob,
-        back: this.backBlob || void 0
+        back: this.backBlob || void 0,
+        viaCamera: this.frontViaCamera
       };
       this.resolveCapture?.(result);
     }
     async handleFileUploadComplete(imageData, container, theme, documentType) {
       const quality = await this._assessBlobQuality(imageData);
-      this.showPreview(container, theme, imageData, documentType, quality);
+      this.showPreview(container, theme, imageData, documentType, quality, false);
     }
     validateFile(file) {
       const allowedTypes = ["image/jpeg", "image/jpg", "image/png"];
@@ -6456,63 +6639,30 @@ var SmartComplySDK = (() => {
       if (input) input.click();
     }
     stopCamera() {
+      this._unwatchOrientation();
       this.cameraManager.stop();
       if (this.videoEl) {
         this.videoEl.srcObject = null;
         this.videoEl = null;
       }
+      this.videoWrapEl = null;
     }
     showLoadingState(message, theme) {
       if (!this.root) return;
       this.root.innerHTML = "";
       this.root.style.cssText = "display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 20px;min-height:300px;";
-      const spinnerContainer = document.createElement("div");
-      spinnerContainer.style.cssText = "position:relative;width:80px;height:80px;";
-      const spinner = document.createElement("div");
-      spinner.style.cssText = `
-      position:absolute;inset:0;border-radius:50%;
-      border:4px solid ${theme.border};
-      border-top-color:${theme.primary};
-      animation:sc-spin 1s linear infinite;
-    `;
-      spinnerContainer.appendChild(spinner);
-      const centerIcon = document.createElement("div");
-      centerIcon.style.cssText = `
-      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
-      font-size:28px;animation:pulse 2s ease-in-out infinite;
-    `;
-      centerIcon.textContent = "📄";
-      spinnerContainer.appendChild(centerIcon);
-      this.root.appendChild(spinnerContainer);
+      this.root.appendChild(renderSpinner(theme, { size: 80, icon: icon("document", 28) }));
       const loadingText = document.createElement("div");
-      loadingText.style.cssText = `
-      color:${theme.text};font-size:16px;font-weight:600;text-align:center;
-      animation:fadeIn 0.5s ease-out;
-    `;
+      loadingText.style.cssText = `color:${theme.text};font-size:${TYPE.heading}px;font-weight:600;text-align:center;`;
       loadingText.textContent = message;
       this.root.appendChild(loadingText);
-      if (!document.head.querySelector("style[data-pulse-animation]")) {
-        const style2 = document.createElement("style");
-        style2.setAttribute("data-pulse-animation", "true");
-        style2.textContent = `
-        @keyframes pulse {
-          0%, 100% { transform: scale(1); opacity: 1; }
-          50% { transform: scale(1.1); opacity: 0.8; }
-        }
-        @keyframes fadeIn {
-          from { opacity: 0; transform: translateY(10px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-      `;
-        document.head.appendChild(style2);
-      }
     }
     showError(message) {
       if (!this.root) return;
       const errorContainer = document.createElement("div");
       errorContainer.style.cssText = `
       display:flex;align-items:center;gap:12px;padding:16px;
-      background:#ff444415;border:1px solid #ff444430;border-radius:12px;
+      background:#ff444415;border:1px solid #ff444430;border-radius:${RADIUS.md}px;
       color:#ff4444;font-size:14px;margin-top:16px;animation:shake 0.5s ease-in-out;
     `;
       errorContainer.innerHTML = `
@@ -6520,16 +6670,16 @@ var SmartComplySDK = (() => {
       <span>${message}</span>
     `;
       if (!document.head.querySelector("style[data-shake-animation]")) {
-        const style2 = document.createElement("style");
-        style2.setAttribute("data-shake-animation", "true");
-        style2.textContent = `
+        const style = document.createElement("style");
+        style.setAttribute("data-shake-animation", "true");
+        style.textContent = `
         @keyframes shake {
           0%, 100% { transform: translateX(0); }
           25% { transform: translateX(-5px); }
           75% { transform: translateX(5px); }
         }
       `;
-        document.head.appendChild(style2);
+        document.head.appendChild(style);
       }
       this.root.appendChild(errorContainer);
       setTimeout(() => errorContainer.remove(), 5e3);
@@ -6538,7 +6688,7 @@ var SmartComplySDK = (() => {
       const btn = document.createElement("button");
       btn.textContent = label;
       btn.style.cssText = `
-      padding:16px 24px;border-radius:12px;font-size:16px;font-weight:600;
+      padding:16px 24px;border-radius:${RADIUS.md}px;font-size:16px;font-weight:600;
       cursor:pointer;transition:all 0.2s ease;border:none;width:100%;
       min-height:52px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
       ${isPrimary ? `background:${theme.primary};color:#fff;box-shadow:0 4px 12px ${theme.primary}30;` : `background:${theme.inputBg};color:${theme.text};border:2px solid ${theme.border};`}
@@ -6865,17 +7015,6 @@ var SmartComplySDK = (() => {
     if (map[key]) return map[key];
     return code.replace(/_/g, " ").replace(/\b\w/g, (c2) => c2.toUpperCase());
   }
-  var style = document.createElement("style");
-  style.textContent = `
-  @keyframes sc-spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-`;
-  if (!document.head.querySelector("style[data-sc-animations]")) {
-    style.setAttribute("data-sc-animations", "true");
-    document.head.appendChild(style);
-  }
   var _SmartComplyFlow = class _SmartComplyFlow {
     constructor(options) {
       this.theme = getTheme("default");
@@ -6903,6 +7042,11 @@ var SmartComplySDK = (() => {
       this.idNumber = "";
       this.documentBlob = null;
       this.documentBackBlob = null;
+      // Whether the document's front image came from the live camera vs. a
+      // gallery/file upload — gates whether pre-warming the liveness camera on
+      // the confirm screens makes sense (reusing an already-open camera) or
+      // would surprise a user who hasn't touched their camera yet this session.
+      this._documentViaCamera = false;
       this.identityCheckId = null;
       this.verificationResult = null;
       this.livenessEntryId = null;
@@ -7217,27 +7361,9 @@ var SmartComplySDK = (() => {
     // ── Loading ─────────────────────────────────────────────────────
     renderLoading(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:16px;";
-      const spinnerWrap = document.createElement("div");
-      spinnerWrap.style.cssText = "position:relative;width:60px;height:60px;flex-shrink:0;";
-      const ring = document.createElement("div");
-      ring.style.cssText = `
-      position:absolute;inset:0;border-radius:50%;
-      border:3px solid ${this.theme.border};
-      border-top-color:${this.theme.primary};
-      animation:sc-spin 0.9s linear infinite;
-    `;
-      const centre = document.createElement("div");
-      centre.style.cssText = `
-      position:absolute;inset:0;
-      display:flex;align-items:center;justify-content:center;
-      font-size:22px;
-    `;
-      centre.textContent = "🛡️";
-      spinnerWrap.appendChild(ring);
-      spinnerWrap.appendChild(centre);
-      container.appendChild(spinnerWrap);
+      container.appendChild(renderSpinner(this.theme, { size: 60, icon: icon("shield", 22) }));
       const label = document.createElement("div");
-      label.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:600;`;
+      label.style.cssText = `color:${this.theme.text};font-size:${TYPE.base}px;font-weight:600;`;
       label.textContent = "Setting up secure session";
       container.appendChild(label);
       const sub = document.createElement("div");
@@ -7255,11 +7381,11 @@ var SmartComplySDK = (() => {
       iconWrap.style.cssText = `
       width:50px;height:50px;border-radius:14px;
       display:flex;align-items:center;justify-content:center;
-      font-size:22px;
+      color:${this.theme.primary};
       background:linear-gradient(135deg,${this.theme.primary}22,${this.theme.primaryGlow});
       border:1.5px solid ${this.theme.primary}33;
     `;
-      iconWrap.textContent = isDocFlow ? "🪪" : "🛡️";
+      iconWrap.innerHTML = icon(isDocFlow ? "id-card" : "shield", 24);
       topRow.appendChild(iconWrap);
       const badge = document.createElement("div");
       badge.style.cssText = `
@@ -7277,7 +7403,7 @@ var SmartComplySDK = (() => {
       titleWrap.style.cssText = "display:flex;flex-direction:column;gap:5px;";
       const title = document.createElement("h2");
       title.style.cssText = `
-      color:${this.theme.text};font-size:20px;font-weight:700;
+      color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;
       margin:0;line-height:1.2;
     `;
       const brandName = this.sdkConfig?.brand_name;
@@ -7303,7 +7429,7 @@ var SmartComplySDK = (() => {
       const stepsWrap = document.createElement("div");
       stepsWrap.style.cssText = `
       width:100%;display:flex;flex-direction:column;gap:0;
-      border-radius:12px;overflow:hidden;
+      border-radius:${RADIUS.md}px;overflow:hidden;
       border:1.5px solid ${this.theme.border};
     `;
       steps.forEach((step, i2) => {
@@ -7316,7 +7442,7 @@ var SmartComplySDK = (() => {
       `;
         const iconEl = document.createElement("div");
         iconEl.style.cssText = `
-        width:28px;height:28px;border-radius:8px;flex-shrink:0;
+        width:28px;height:28px;border-radius:${RADIUS.sm}px;flex-shrink:0;
         display:flex;align-items:center;justify-content:center;
         font-size:13px;
         background:${this.theme.primary}12;
@@ -7509,7 +7635,7 @@ var SmartComplySDK = (() => {
         if (field.type === "dropdown" || field.type === "select") {
           const select = document.createElement("select");
           select.style.cssText = `
-          width:100%;padding:13px 16px;border-radius:12px;
+          width:100%;padding:13px 16px;border-radius:${RADIUS.md}px;
           font-size:15px;
           background:${this.theme.inputBg};
           color:${this.theme.text};
@@ -7546,7 +7672,7 @@ var SmartComplySDK = (() => {
           fileInput.type = "file";
           fileInput.accept = "image/*";
           fileInput.style.cssText = `
-          width:100%;padding:12px 16px;border-radius:12px;
+          width:100%;padding:12px 16px;border-radius:${RADIUS.md}px;
           font-size:14px;font-weight:500;
           background:${this.theme.inputBg};
           color:${this.theme.text};
@@ -7587,7 +7713,7 @@ var SmartComplySDK = (() => {
           input.maxLength = rule?.maxLen ? rule.maxLen + 2 : 50;
           if (rule?.numeric) input.inputMode = "numeric";
           input.style.cssText = `
-          width:100%;padding:14px 16px;border-radius:12px;
+          width:100%;padding:14px 16px;border-radius:${RADIUS.md}px;
           font-size:16px;font-weight:500;
           background:${this.theme.inputBg};
           color:${this.theme.text};
@@ -7644,7 +7770,7 @@ var SmartComplySDK = (() => {
       errorEl.id = "sc-id-error";
       errorEl.style.cssText = `
       color:${this.theme.error};font-size:13px;display:none;
-      padding:8px 12px;border-radius:8px;background:${this.theme.errorBg};
+      padding:8px 12px;border-radius:${RADIUS.sm}px;background:${this.theme.errorBg};
     `;
       container.appendChild(errorEl);
       const submitBtn = this.createPrimaryButton("Verify & Continue");
@@ -7662,7 +7788,7 @@ var SmartComplySDK = (() => {
       };
       submitBtn.addEventListener("click", async () => {
         submitBtn.disabled = true;
-        submitBtn.innerHTML = `<span style="display:inline-flex;align-items:center;justify-content:center;gap:8px;"><span style="width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;animation:sc-spin 0.6s linear infinite;display:inline-block;flex-shrink:0;"></span>Verifying...</span>`;
+        submitBtn.innerHTML = `<span style="display:inline-flex;align-items:center;justify-content:center;gap:8px;">${renderInlineSpinner("#fff", 13)}Verifying...</span>`;
         errorEl.style.display = "none";
         try {
           this.verificationResult = await this.sdk.onboarding.verify({
@@ -7760,11 +7886,11 @@ var SmartComplySDK = (() => {
       }
       this._prewarmCamera();
       const iconWrap = document.createElement("div");
-      iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      iconWrap.textContent = "🛡️";
+      iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;color:${this.theme.primary};`;
+      iconWrap.innerHTML = icon("shield", 28);
       container.appendChild(iconWrap);
       const title = document.createElement("h2");
-      title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+      title.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
       title.textContent = this._ivsName ? `Is this you?` : "Identity Confirmed";
       container.appendChild(title);
       if (this._ivsName) {
@@ -7822,13 +7948,22 @@ var SmartComplySDK = (() => {
         this._renderRetryLimitReached(container);
         return;
       }
-      this._prewarmCamera();
+      if (this._documentViaCamera) this._prewarmCamera();
+      const stepBadge = document.createElement("div");
+      stepBadge.style.cssText = `
+      display:inline-flex;align-items:center;gap:5px;
+      padding:3px 11px;border-radius:${RADIUS.pill}px;
+      font-size:10.5px;font-weight:600;letter-spacing:0.2px;
+      color:${this.theme.primary};background:${this.theme.primary}15;border:1px solid ${this.theme.primary}30;
+    `;
+      stepBadge.textContent = "STEP 2 OF 2 · CHECK WHAT WE READ";
+      container.appendChild(stepBadge);
       const iconWrap = document.createElement("div");
-      iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      iconWrap.textContent = "📄";
+      iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;color:${this.theme.primary};`;
+      iconWrap.innerHTML = icon("document", 28);
       container.appendChild(iconWrap);
       const title = document.createElement("h2");
-      title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+      title.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
       title.textContent = "Are these your details?";
       container.appendChild(title);
       const sub = document.createElement("p");
@@ -7906,19 +8041,10 @@ var SmartComplySDK = (() => {
     // ── W6+W7+W8: OCR Gate (document verification) ───────────────────
     renderOcrGate(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0;text-align:center;";
-      const spinnerWrap = document.createElement("div");
-      spinnerWrap.style.cssText = "position:relative;width:52px;height:52px;flex-shrink:0;";
-      const ring = document.createElement("div");
-      ring.style.cssText = `position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.9s linear infinite;`;
-      const centre = document.createElement("div");
-      centre.style.cssText = "position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;";
-      centre.textContent = "📄";
-      spinnerWrap.appendChild(ring);
-      spinnerWrap.appendChild(centre);
-      container.appendChild(spinnerWrap);
+      container.appendChild(renderSpinner(this.theme, { size: 52, icon: icon("document", 20) }));
       const statusEl = document.createElement("div");
       statusEl.setAttribute("aria-live", "polite");
-      statusEl.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:600;`;
+      statusEl.style.cssText = `color:${this.theme.text};font-size:${TYPE.base}px;font-weight:600;`;
       statusEl.textContent = "Reading your document…";
       container.appendChild(statusEl);
       const subEl = document.createElement("div");
@@ -7990,12 +8116,12 @@ var SmartComplySDK = (() => {
     }
     _renderExpiredDocument(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
-      const icon = document.createElement("div");
-      icon.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      icon.textContent = "📅";
-      container.appendChild(icon);
+      const icon2 = document.createElement("div");
+      icon2.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
+      icon2.textContent = "📅";
+      container.appendChild(icon2);
       const t2 = document.createElement("h2");
-      t2.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+      t2.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
       t2.textContent = "Document Expired";
       container.appendChild(t2);
       const d2 = document.createElement("p");
@@ -8019,12 +8145,12 @@ var SmartComplySDK = (() => {
     }
     _renderOcrQualityFail(container, reason) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
-      const icon = document.createElement("div");
-      icon.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      icon.textContent = "🔍";
-      container.appendChild(icon);
+      const icon2 = document.createElement("div");
+      icon2.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
+      icon2.textContent = "🔍";
+      container.appendChild(icon2);
       const t2 = document.createElement("h2");
-      t2.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+      t2.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
       t2.textContent = "Document Photo Unclear";
       container.appendChild(t2);
       const msg = reason === "image_too_blurry" ? "Your document photo is too blurry. Please retake it in good lighting with a steady hand." : reason === "image_too_dark" ? "Your document photo is too dark. Please retake it in better lighting." : reason === "image_too_bright" ? "Your document photo has too much glare. Please reduce reflections and retake." : reason === "document_not_detected" ? "We could not detect a document in the photo. Please ensure the full ID is visible." : "We could not read your document clearly. Please retake the photo in good lighting with no glare.";
@@ -8053,11 +8179,11 @@ var SmartComplySDK = (() => {
         verificationResult: this.verificationResult || void 0
       });
       const iconWrap = document.createElement("div");
-      iconWrap.style.cssText = `width:80px;height:80px;border-radius:50%;background:${this.theme.successBg};border:3px solid ${this.theme.success};display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:${this.theme.success};animation:sc-pop 0.4s ease;`;
-      iconWrap.textContent = "✓";
+      iconWrap.style.cssText = `width:80px;height:80px;border-radius:50%;background:${this.theme.successBg};border:3px solid ${this.theme.success};display:flex;align-items:center;justify-content:center;color:${this.theme.success};animation:sc-pop 0.4s ease;`;
+      iconWrap.innerHTML = icon("check", 36);
       container.appendChild(iconWrap);
       const title = document.createElement("h2");
-      title.style.cssText = `color:${this.theme.text};font-size:22px;font-weight:700;margin:0;`;
+      title.style.cssText = `color:${this.theme.text};font-size:${TYPE.headingLg}px;font-weight:700;margin:0;`;
       title.textContent = "You're all done!";
       container.appendChild(title);
       const desc = document.createElement("p");
@@ -8077,12 +8203,12 @@ var SmartComplySDK = (() => {
     // ── W14: Retry limit reached ─────────────────────────────────────
     _renderRetryLimitReached(container) {
       container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:24px 0;";
-      const icon = document.createElement("div");
-      icon.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
-      icon.textContent = "⚠️";
-      container.appendChild(icon);
+      const icon2 = document.createElement("div");
+      icon2.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
+      icon2.textContent = "⚠️";
+      container.appendChild(icon2);
       const t2 = document.createElement("h2");
-      t2.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+      t2.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
       t2.textContent = "Unable to Complete Verification";
       container.appendChild(t2);
       const d2 = document.createElement("p");
@@ -8114,6 +8240,7 @@ var SmartComplySDK = (() => {
     async processDocumentCaptureResult(result, captureContainer, container) {
       this.documentBlob = await _compressImage(result.front, 1600, 0.85);
       this.documentBackBlob = result.back ? await _compressImage(result.back, 1600, 0.85) : null;
+      this._documentViaCamera = result.viaCamera;
       await this.processDocumentBlob(this.documentBlob, captureContainer, container);
     }
     /**
@@ -8131,15 +8258,12 @@ var SmartComplySDK = (() => {
             throw new Error("Document image is too large. Please retake in better lighting or use a clearer photo.");
           }
           this.documentBlob = blob;
-          captureContainer.innerHTML = `
-      <div style="display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;">
-        <div style="position:relative;width:52px;height:52px;">
-          <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
-          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔍</div>
-        </div>
+          captureContainer.innerHTML = "";
+          captureContainer.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;";
+          captureContainer.appendChild(renderSpinner(this.theme, { size: 52, icon: icon("search", 20) }));
+          captureContainer.insertAdjacentHTML("beforeend", `
         <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Scanning document...</div>
-        <div style="color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:200px;line-height:1.5;">Running OCR and verifying your identity</div>
-      </div>`;
+        <div style="color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:200px;line-height:1.5;">Running OCR and verifying your identity</div>`);
           const identifier = Object.values(this.collectedFields)[0] || this.idNumber || this.selectedIdType || `DOC-${Date.now()}`;
           const COUNTRY_CODES = {
             nigeria: "NG",
@@ -8189,15 +8313,12 @@ var SmartComplySDK = (() => {
             retryCount++;
             console.log(`Retrying document processing (attempt ${retryCount}/${maxRetries})`);
             if (captureContainer) {
-              captureContainer.innerHTML = `
-              <div style="display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;">
-                <div style="position:relative;width:52px;height:52px;">
-                  <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
-                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔄</div>
-                </div>
+              captureContainer.innerHTML = "";
+              captureContainer.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;";
+              captureContainer.appendChild(renderSpinner(this.theme, { size: 52, icon: icon("refresh", 20) }));
+              captureContainer.insertAdjacentHTML("beforeend", `
                 <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Retrying...</div>
-                <div style="color:${this.theme.textSecondary};font-size:12px;max-width:240px;line-height:1.5;">Attempt ${retryCount} of ${maxRetries}</div>
-              </div>`;
+                <div style="color:${this.theme.textSecondary};font-size:12px;max-width:240px;line-height:1.5;">Attempt ${retryCount} of ${maxRetries}</div>`);
             }
             await new Promise((resolve) => setTimeout(resolve, 2e3));
             return attemptProcessing();
@@ -8232,10 +8353,10 @@ var SmartComplySDK = (() => {
         const wrap = document.createElement("div");
         wrap.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;";
         wrap.setAttribute("role", "alert");
-        const icon = document.createElement("div");
-        icon.style.cssText = `width:56px;height:56px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:26px;`;
-        icon.textContent = "🔍";
-        wrap.appendChild(icon);
+        const icon2 = document.createElement("div");
+        icon2.style.cssText = `width:56px;height:56px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:26px;`;
+        icon2.textContent = "🔍";
+        wrap.appendChild(icon2);
         const titleEl = document.createElement("div");
         titleEl.style.cssText = `color:${this.theme.text};font-size:14px;font-weight:700;`;
         titleEl.textContent = "Document Could Not Be Verified";
@@ -8248,7 +8369,7 @@ var SmartComplySDK = (() => {
           const retryBtn = document.createElement("button");
           retryBtn.textContent = "Try Again";
           retryBtn.setAttribute("aria-label", "Retake document photo");
-          retryBtn.style.cssText = `margin-top:8px;padding:12px 24px;border-radius:8px;background:${this.theme.primary};color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;`;
+          retryBtn.style.cssText = `margin-top:8px;padding:12px 24px;border-radius:${RADIUS.sm}px;background:${this.theme.primary};color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;`;
           retryBtn.addEventListener("click", () => this.showStep("document_capture"));
           wrap.appendChild(retryBtn);
         }
@@ -8298,7 +8419,13 @@ var SmartComplySDK = (() => {
           identity_check: this.identityCheckId || void 0,
           verification_type: this.identityCheckId ? "data_verification" : this.documentBlob ? "document_verification" : "liveness_only",
           // B4: pass pre-warmed stream so camera.open() is skipped
-          prewarmedStream: this._prewarmedStream || void 0
+          prewarmedStream: this._prewarmedStream || void 0,
+          colors: {
+            primary: this.theme.primary,
+            success: this.theme.success,
+            error: this.theme.error,
+            warning: this.theme.warning
+          }
         },
         ["BLINK"],
         this.livenessEntryId || void 0
@@ -8333,21 +8460,21 @@ var SmartComplySDK = (() => {
       const isExpiredDoc = /document.*expired|expired.*document/i.test(message);
       const isFaceMatch = /face.*match|selfie.*match|does not match/i.test(message);
       const isBillingErr = /wallet|balance|insufficient.*fund|payment.*required/i.test(message);
-      const errorIcon = isCameraErr ? "📷" : isNetworkErr ? "📡" : isAuthErr ? "⏱" : isDocQuality ? "🔍" : isExpiredDoc ? "📅" : isFaceMatch ? "🤳" : isBillingErr ? "⚠️" : "✕";
+      const errorIconName = isCameraErr ? "camera" : isNetworkErr ? "network" : isAuthErr ? "clock" : isDocQuality ? "search" : isExpiredDoc ? "calendar" : isFaceMatch ? "face" : isBillingErr ? "warning" : "close";
       const errorTitle = isCameraErr ? "Camera Access Required" : isNetworkErr ? "Connection Problem" : isAuthErr ? "Session Expired" : isDocQuality ? "Document Photo Unclear" : isExpiredDoc ? "Document Expired" : isFaceMatch ? "Face Match Failed" : isBillingErr ? "Verification Unavailable" : "Verification Unsuccessful";
       const userMessage = isCameraErr ? "Please allow camera access in your browser settings and try again." : isNetworkErr ? "Check your internet connection and try again." : isAuthErr ? "Your session has expired. Please start again." : isDocQuality ? _sanitizeUserMessage(message) || "Please retake your document photo in good lighting with no glare." : isExpiredDoc ? "The document you submitted has expired. Please use a valid, current ID." : isFaceMatch ? "Your selfie did not match the photo on your ID. Please ensure you are using your own valid document and face the camera directly." : isBillingErr ? "Verification is temporarily unavailable. Please contact support." : _sanitizeUserMessage(message) || "We were unable to complete your verification. Please try again.";
       const iconWrap = document.createElement("div");
       iconWrap.style.cssText = `
       width:72px;height:72px;border-radius:50%;
       display:flex;align-items:center;justify-content:center;
-      font-size:28px;
+      color:${this.theme.error};
       background:${this.theme.errorBg};
       border:3px solid ${this.theme.error};
     `;
-      iconWrap.textContent = errorIcon;
+      iconWrap.innerHTML = icon(errorIconName, 28);
       wrapper.appendChild(iconWrap);
       const title = document.createElement("h2");
-      title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+      title.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
       title.textContent = errorTitle;
       wrapper.appendChild(title);
       const desc = document.createElement("p");
@@ -8385,7 +8512,7 @@ var SmartComplySDK = (() => {
       this.headerBackBtn.innerHTML = "&#8592;";
       this.headerBackBtn.setAttribute("aria-label", "Go back to previous step");
       this.headerBackBtn.style.cssText = `
-      width:30px;height:30px;border-radius:8px;flex-shrink:0;
+      width:30px;height:30px;border-radius:${RADIUS.sm}px;flex-shrink:0;
       display:none;align-items:center;justify-content:center;
       border:1.5px solid ${this.theme.border};cursor:pointer;
       font-size:16px;line-height:1;
@@ -8441,7 +8568,7 @@ var SmartComplySDK = (() => {
       closeBtn.innerHTML = "✕";
       closeBtn.setAttribute("aria-label", "Close identity verification");
       closeBtn.style.cssText = `
-      width:32px;height:32px;border-radius:8px;flex-shrink:0;
+      width:32px;height:32px;border-radius:${RADIUS.sm}px;flex-shrink:0;
       display:flex;align-items:center;justify-content:center;
       border:none;cursor:pointer;font-size:16px;
       background:${this.theme.shimmer};color:${this.theme.textMuted};
@@ -8478,7 +8605,7 @@ var SmartComplySDK = (() => {
     createStepTitle(text) {
       const el = document.createElement("h3");
       el.style.cssText = `
-      color:${this.theme.text};font-size:18px;font-weight:700;
+      color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;
       margin:0;
     `;
       el.textContent = text;
@@ -8488,7 +8615,7 @@ var SmartComplySDK = (() => {
       const card = document.createElement("button");
       card.setAttribute("aria-label", subtitle ? `${title}: ${subtitle}` : title);
       card.style.cssText = `
-      width:100%;padding:13px 16px;border-radius:12px;
+      width:100%;padding:13px 16px;border-radius:${RADIUS.md}px;
       background:${this.theme.cardBg};
       border:2px solid ${this.theme.border};
       cursor:pointer;text-align:left;
@@ -8528,7 +8655,7 @@ var SmartComplySDK = (() => {
       const btn = document.createElement("button");
       btn.textContent = text;
       btn.style.cssText = `
-      width:100%;padding:14px;border-radius:12px;
+      width:100%;padding:14px;border-radius:${RADIUS.md}px;
       font-size:15px;font-weight:600;
       background:${this.theme.primary};color:#fff;
       border:none;cursor:pointer;
@@ -8549,7 +8676,7 @@ var SmartComplySDK = (() => {
       const btn = document.createElement("button");
       btn.textContent = text;
       btn.style.cssText = `
-      width:100%;padding:12px;border-radius:12px;
+      width:100%;padding:12px;border-radius:${RADIUS.md}px;
       font-size:14px;font-weight:500;
       background:transparent;color:${this.theme.textSecondary};
       border:none;cursor:pointer;
@@ -8665,12 +8792,9 @@ var SmartComplySDK = (() => {
     }
     injectStyles() {
       if (document.getElementById("sc-flow-styles")) return;
-      const style2 = document.createElement("style");
-      style2.id = "sc-flow-styles";
-      style2.textContent = `
-      @keyframes sc-spin {
-        to { transform: rotate(360deg); }
-      }
+      const style = document.createElement("style");
+      style.id = "sc-flow-styles";
+      style.textContent = `
       @keyframes sc-pop {
         0% { transform: scale(0.8); opacity: 0; }
         50% { transform: scale(1.05); }
@@ -8696,7 +8820,7 @@ var SmartComplySDK = (() => {
         border-radius: 4px;
       }
     `;
-      document.head.appendChild(style2);
+      document.head.appendChild(style);
     }
   };
   _SmartComplyFlow.MAX_RETRIES = 3;