@neofaceid/web-sdk 1.28.2 → 1.30.0

package/dist/neoface-id-sdk.es.js

@@ -4342,21 +4342,209 @@ object({
   task_id: string().optional(),
   status: string().optional()
 });
+const BLUE = {
+  400: "#00B0F8",
+  500: "#0091F6",
+  700: "#0059C4"
+};
+const GOLD = {
+  500: "#F1BE00"
+};
+const INK = {
+  25: "#F7F9FC",
+  50: "#F1F5FA",
+  100: "#E6ECF4",
+  300: "#AFBDCE",
+  400: "#8496AD",
+  500: "#617489",
+  600: "#48586B",
+  800: "#1E2B3C",
+  900: "#111C2B",
+  950: "#0A1320"
+};
+const LIGHT_TOKENS = {
+  ground: INK[25],
+  surface: "#FFFFFF",
+  surfaceMuted: INK[50],
+  line: INK[100],
+  text: INK[950],
+  textMuted: INK[600],
+  textSubtle: INK[500],
+  action: BLUE[700],
+  actionText: "#FFFFFF",
+  accent: GOLD[500],
+  overlay: "rgba(10,19,32,.55)",
+  focusRing: BLUE[700]
+};
+const DARK_TOKENS = {
+  ground: INK[950],
+  surface: INK[900],
+  surfaceMuted: INK[800],
+  line: "#22334D",
+  text: "#EEF3F9",
+  textMuted: INK[300],
+  textSubtle: INK[400],
+  action: BLUE[500],
+  actionText: "#FFFFFF",
+  accent: GOLD[500],
+  overlay: "rgba(10,19,32,.72)",
+  focusRing: BLUE[400]
+};
+function contrastRatio(hexA, hexB) {
+  const lumA = luminance(hexA);
+  const lumB = luminance(hexB);
+  const [hi, lo] = lumA > lumB ? [lumA, lumB] : [lumB, lumA];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function luminance(hex) {
+  const [r, g, b] = parseHex(hex).map((v) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function parseHex(hex) {
+  let h = hex.trim().replace("#", "");
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) return [0, 0, 0];
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16)
+  ];
+}
+const ALLOWED_RADIUS = [8, 16, 24];
+function resolveTheme(options = {}) {
+  const mode = resolveMode(options.theme);
+  const tokens = mode === "dark" ? { ...DARK_TOKENS } : { ...LIGHT_TOKENS };
+  let radius = 16;
+  if (options.radius !== void 0) {
+    if (ALLOWED_RADIUS.includes(options.radius)) {
+      radius = options.radius;
+    } else {
+      console.warn(
+        `[NeoFaceID SDK] radius ${options.radius} inválido — permitidos: 8, 16, 24. Usando 16.`
+      );
+    }
+  }
+  let accent = tokens.action;
+  let accentFellBack = false;
+  if (options.accent) {
+    const ratio = contrastRatio(options.accent, "#FFFFFF");
+    if (ratio >= 4.5) {
+      accent = options.accent;
+    } else {
+      accentFellBack = true;
+      console.warn(
+        `[NeoFaceID SDK] accent ${options.accent} reprova AA vs branco (${ratio.toFixed(2)}:1). Usando ${BLUE[700]}.`
+      );
+      accent = BLUE[700];
+    }
+  }
+  return { mode, tokens: { ...tokens, action: accent }, radius, accent, accentFellBack };
+}
+function resolveMode(theme) {
+  if (theme === "dark") return "dark";
+  if (theme === "light") return "light";
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+  }
+  return "light";
+}
+const CSS_VAR = {
+  ground: "--nfid-ground",
+  surface: "--nfid-surface",
+  surfaceMuted: "--nfid-surface-muted",
+  line: "--nfid-line",
+  text: "--nfid-text",
+  textMuted: "--nfid-text-muted",
+  textSubtle: "--nfid-text-subtle",
+  action: "--nfid-action",
+  actionText: "--nfid-action-text",
+  accent: "--nfid-accent",
+  overlay: "--nfid-overlay",
+  focusRing: "--nfid-focus-ring",
+  radius: "--nfid-radius"
+};
+const INJECTED_STYLE_ID = "neofaceid-focus-frame-tokens";
+function injectThemeStyles$1(options = {}) {
+  const resolved = resolveTheme(options);
+  if (typeof document === "undefined") return resolved;
+  const css = buildRootCss(resolved);
+  const existing = document.getElementById(INJECTED_STYLE_ID);
+  if (existing) {
+    if (existing.textContent !== css) existing.textContent = css;
+    return resolved;
+  }
+  const style = document.createElement("style");
+  style.id = INJECTED_STYLE_ID;
+  style.textContent = css;
+  document.head.appendChild(style);
+  return resolved;
+}
+function buildRootCss(theme) {
+  const t = theme.tokens;
+  return `.neofaceid-root {
+  ${CSS_VAR.ground}: ${t.ground};
+  ${CSS_VAR.surface}: ${t.surface};
+  ${CSS_VAR.surfaceMuted}: ${t.surfaceMuted};
+  ${CSS_VAR.line}: ${t.line};
+  ${CSS_VAR.text}: ${t.text};
+  ${CSS_VAR.textMuted}: ${t.textMuted};
+  ${CSS_VAR.textSubtle}: ${t.textSubtle};
+  ${CSS_VAR.action}: ${t.action};
+  ${CSS_VAR.actionText}: ${t.actionText};
+  ${CSS_VAR.accent}: ${t.accent};
+  ${CSS_VAR.overlay}: ${t.overlay};
+  ${CSS_VAR.focusRing}: ${t.focusRing};
+  ${CSS_VAR.radius}: ${theme.radius}px;
+  color: var(${CSS_VAR.text});
+  font-family: inherit;
+}
+.neofaceid-root :focus-visible {
+  outline: 2px solid var(${CSS_VAR.focusRing});
+  outline-offset: 2px;
+}`;
+}
+function injectScopedStyles$1(id, css) {
+  if (typeof document === "undefined") return;
+  const existing = document.getElementById(id);
+  if (existing) {
+    if (existing.textContent !== css) existing.textContent = css;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
 const __vite_import_meta_env__ = {};
 const ENVIRONMENT_URLS = {
   development: "http://localhost:8000",
   sandbox: "https://sandbox-core.neofaceid.com",
   production: "https://core.neofaceid.com.br"
 };
-let globalConfig = {
-  baseUrl: ENVIRONMENT_URLS.sandbox,
-  // Default para sandbox
-  applicationToken: null,
-  environment: "sandbox",
-  initialized: false
-};
+const DEFAULT_LOCALE = "pt-BR";
+const DEFAULT_RADIUS = 16;
+const DEFAULT_THEME = "light";
+const ALLOWED_RADII = [8, 16, 24];
+function makeDefaultConfig() {
+  return {
+    baseUrl: ENVIRONMENT_URLS.sandbox,
+    applicationToken: null,
+    environment: "sandbox",
+    initialized: false,
+    appName: null,
+    accent: null,
+    radius: DEFAULT_RADIUS,
+    theme: DEFAULT_THEME,
+    locale: DEFAULT_LOCALE,
+    resolvedTheme: null
+  };
+}
+let globalConfig = makeDefaultConfig();
 function init(options = {}) {
-  const { environment, baseUrl, applicationToken } = options;
+  const { environment, baseUrl, applicationToken, appName, accent, radius, theme, locale } = options;
   if (baseUrl) {
     globalConfig.baseUrl = baseUrl;
     globalConfig.environment = "custom";
@@ -4383,9 +4571,40 @@ function init(options = {}) {
       "[NeoFaceID SDK] applicationToken vazio em init() — 401 esperado em chamadas autenticadas."
     );
   }
+  if (appName && appName.trim()) {
+    globalConfig.appName = appName.trim();
+  } else if (appName !== void 0) {
+    console.warn(
+      '[NeoFaceID SDK] init({ appName }) vazio — modais cairão para o fallback "sua aplicação".'
+    );
+  }
+  if (radius !== void 0) {
+    if (ALLOWED_RADII.includes(radius)) {
+      globalConfig.radius = radius;
+    } else {
+      console.warn(
+        `[NeoFaceID SDK] radius ${radius} inválido em init() — permitidos: 8, 16, 24. Usando 16.`
+      );
+      globalConfig.radius = DEFAULT_RADIUS;
+    }
+  }
+  if (theme) globalConfig.theme = theme;
+  if (locale) globalConfig.locale = locale;
+  if (accent !== void 0) globalConfig.accent = accent;
+  const resolved = resolveTheme({
+    accent: globalConfig.accent ?? void 0,
+    radius: globalConfig.radius,
+    theme: globalConfig.theme
+  });
+  globalConfig.resolvedTheme = resolved;
+  injectThemeStyles$1({
+    accent: globalConfig.accent ?? void 0,
+    radius: globalConfig.radius,
+    theme: globalConfig.theme
+  });
   globalConfig.initialized = true;
   console.log(
-    `[NeoFaceID SDK] Inicializado - Ambiente: ${globalConfig.environment}, URL: ${globalConfig.baseUrl}`
+    `[NeoFaceID SDK] Inicializado — Ambiente: ${globalConfig.environment}, URL: ${globalConfig.baseUrl}, appName: ${globalConfig.appName ?? "(vazio)"}, theme: ${resolved.mode}, radius: ${globalConfig.radius}`
   );
 }
 function getBaseUrl() {
@@ -4406,6 +4625,25 @@ function isInitialized() {
 function getConfig() {
   return { ...globalConfig };
 }
+function getAppName() {
+  return globalConfig.appName;
+}
+function getAccent() {
+  return globalConfig.accent;
+}
+function getRadius() {
+  return globalConfig.radius;
+}
+function getTheme() {
+  return globalConfig.theme;
+}
+function getResolvedThemeMode() {
+  var _a2;
+  return ((_a2 = globalConfig.resolvedTheme) == null ? void 0 : _a2.mode) ?? (globalConfig.theme === "dark" ? "dark" : "light");
+}
+function getLocale() {
+  return globalConfig.locale;
+}
 const getApiBaseUrl = () => getBaseUrl();
 const REQUEST_TIMEOUT = 1e4;
 const ensureSecureContext = () => {
@@ -6042,7 +6280,7 @@ const styles = {
     padding: "12px 24px",
     borderRadius: "24px",
     border: "none",
-    backgroundColor: "#007AFF",
+    backgroundColor: "#0059C4",
     color: "white",
     fontSize: "16px",
     fontWeight: "bold",
@@ -6156,6 +6394,9 @@ function FaceCaptureModal({
     };
     detectFaces();
   };
+  useEffect(() => {
+    injectThemeStyles$1();
+  }, []);
   useEffect(() => {
     const loadModels = async () => {
       try {
@@ -6243,7 +6484,7 @@ function FaceCaptureModal({
     dispatch({ type: "RESET" });
     setLivenessAttempts(0);
   };
-  return /* @__PURE__ */ jsxs("div", { style: styles.overlay, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "neofaceid-root", style: styles.overlay, children: [
     /* @__PURE__ */ jsx("style", { children: keyframes }),
     /* @__PURE__ */ jsx("style", { children: mediaStyles }),
     /* @__PURE__ */ jsxs("div", { style: styles.modal, className: "modal", children: [
@@ -6308,9 +6549,10 @@ class ForgotPasswordModal {
   }
   open() {
     if (this.modalElement) return;
+    injectThemeStyles$1();
     this.addStyles();
     this.modalElement = document.createElement("div");
-    this.modalElement.className = "neoface-forgot-modal";
+    this.modalElement.className = "neofaceid-root neoface-forgot-modal";
     this.renderEmailForm();
     document.body.appendChild(this.modalElement);
   }
@@ -6327,10 +6569,10 @@ class ForgotPasswordModal {
         <div class="neoface-forgot-content">
           <div class="neoface-forgot-icon">
             <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <circle cx="32" cy="32" r="28" stroke="#7c3aed" stroke-width="3" fill="none"/>
-              <rect x="22" y="28" width="20" height="16" rx="3" stroke="#7c3aed" stroke-width="2.5" fill="none"/>
-              <path d="M26 28v-4a6 6 0 0 1 12 0v4" stroke="#7c3aed" stroke-width="2.5" stroke-linecap="round"/>
-              <circle cx="32" cy="36" r="2" fill="#7c3aed"/>
+              <circle cx="32" cy="32" r="28" stroke="#0059C4" stroke-width="3" fill="none"/>
+              <rect x="22" y="28" width="20" height="16" rx="3" stroke="#0059C4" stroke-width="2.5" fill="none"/>
+              <path d="M26 28v-4a6 6 0 0 1 12 0v4" stroke="#0059C4" stroke-width="2.5" stroke-linecap="round"/>
+              <circle cx="32" cy="36" r="2" fill="#0059C4"/>
             </svg>
           </div>
 
@@ -6376,8 +6618,8 @@ class ForgotPasswordModal {
     content.innerHTML = `
       <div class="neoface-forgot-success-icon">
         <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="32" cy="32" r="28" stroke="#10b981" stroke-width="3" fill="none"/>
-          <path d="M20 32 L28 40 L44 24" stroke="#10b981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+          <circle cx="32" cy="32" r="28" stroke="#0E9F6E" stroke-width="3" fill="none"/>
+          <path d="M20 32 L28 40 L44 24" stroke="#0E9F6E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </div>
 
@@ -6429,9 +6671,7 @@ class ForgotPasswordModal {
   addStyles() {
     const styleId = "neoface-forgot-password-modal-styles";
     if (document.getElementById(styleId)) return;
-    const style = document.createElement("style");
-    style.id = styleId;
-    style.textContent = `
+    injectScopedStyles$1(styleId, `
       .neoface-forgot-modal {
         position: fixed;
         top: 0;
@@ -6439,7 +6679,7 @@ class ForgotPasswordModal {
         width: 100%;
         height: 100%;
         z-index: 10003;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-family: inherit;
       }
 
       .neoface-forgot-overlay {
@@ -6465,7 +6705,7 @@ class ForgotPasswordModal {
       }
 
       .neoface-forgot-content {
-        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+        background: linear-gradient(135deg, #0A1320 0%, #111C2B 100%);
         border-radius: 20px;
         padding: 32px;
         max-width: 400px;
@@ -6545,8 +6785,8 @@ class ForgotPasswordModal {
 
       .neoface-forgot-input:focus {
         outline: none;
-        border-color: #7c3aed;
-        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
+        border-color: #0059C4;
+        box-shadow: 0 0 0 3px rgba(0, 89, 196, 0.2);
         background: rgba(255, 255, 255, 0.12);
       }
 
@@ -6555,19 +6795,19 @@ class ForgotPasswordModal {
         padding: 14px 24px;
         border-radius: 12px;
         border: none;
-        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+        background: linear-gradient(135deg, #0059C4 0%, #00449A 100%);
         color: white;
         font-size: 16px;
         font-weight: 600;
         cursor: pointer;
         transition: all 0.2s;
-        box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
+        box-shadow: 0 4px 16px rgba(0, 89, 196, 0.3);
         font-family: inherit;
       }
 
       .neoface-forgot-btn-primary:hover:not(:disabled) {
         transform: translateY(-2px);
-        box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
+        box-shadow: 0 8px 24px rgba(0, 89, 196, 0.4);
       }
 
       .neoface-forgot-btn-primary:disabled {
@@ -6626,8 +6866,7 @@ class ForgotPasswordModal {
           font-size: 20px;
         }
       }
-    `;
-    document.head.appendChild(style);
+    `);
   }
 }
 const modalReducer = (state, action) => {
@@ -6750,6 +6989,9 @@ function BiometricRegistrationModal({
     "ok"
   );
   const [cameraReady, setCameraReady] = useState(false);
+  useEffect(() => {
+    injectThemeStyles$1();
+  }, []);
   useEffect(() => {
     if (state.status === "liveness") {
       const newStep = state.step;
@@ -7546,7 +7788,7 @@ function BiometricRegistrationModal({
         }
 
         .modal-content {
-          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+          background: linear-gradient(135deg, #0A1320 0%, #111C2B 100%);
           border-radius: 24px;
           width: 100%;
           max-width: 420px;
@@ -7596,7 +7838,7 @@ function BiometricRegistrationModal({
 
         .icon-wrapper {
           display: inline-block;
-          color: #7c3aed;
+          color: #0059C4;
           margin-bottom: 24px;
         }
 
@@ -7617,7 +7859,7 @@ function BiometricRegistrationModal({
           font-size: 28px;
           font-weight: 700;
           margin: 0 0 12px 0;
-          background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
+          background: linear-gradient(135deg, #0059C4 0%, #a78bfa 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
@@ -7662,7 +7904,7 @@ function BiometricRegistrationModal({
 
         .req-icon.success {
           background: rgba(16, 185, 129, 0.15);
-          color: #10b981;
+          color: #0E9F6E;
           border: 1.5px solid rgba(16, 185, 129, 0.3);
         }
 
@@ -7671,18 +7913,18 @@ function BiometricRegistrationModal({
           padding: 16px 32px;
           border-radius: 12px;
           border: none;
-          background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+          background: linear-gradient(135deg, #0059C4 0%, #00449A 100%);
           color: white;
           font-size: 16px;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s;
-          box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
+          box-shadow: 0 4px 16px rgba(0, 89, 196, 0.3);
         }
 
         .primary-button:hover {
           transform: translateY(-2px);
-          box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
+          box-shadow: 0 8px 24px rgba(0, 89, 196, 0.4);
         }
 
         .primary-button:active {
@@ -7708,7 +7950,7 @@ function BiometricRegistrationModal({
 
         .brand-name {
           font-weight: 600;
-          font-family: 'SF Pro Display', -apple-system, system-ui, sans-serif;
+          font-family: inherit;
           color: #ffffff;
           letter-spacing: 0.3px;
         }
@@ -7757,7 +7999,7 @@ function BiometricRegistrationModal({
           overflow: hidden;
           position: relative;
           /* Removida transição 'all' para evitar salto de zoom no início */
-          box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.3);
+          box-shadow: 0 0 0 4px rgba(0, 89, 196, 0.3);
           background: #000;
         }
 
@@ -7856,7 +8098,7 @@ function BiometricRegistrationModal({
 
         .progress-fill {
           height: 100%;
-          background: linear-gradient(90deg, #7c3aed 0%, #10b981 100%);
+          background: linear-gradient(90deg, #0059C4 0%, #0E9F6E 100%);
           border-radius: 2px;
           transition: width 0.05s linear;
         }
@@ -7922,8 +8164,8 @@ function BiometricRegistrationModal({
         .spinner {
           position: absolute;
           inset: 0;
-          border: 4px solid rgba(124, 58, 237, 0.2);
-          border-top-color: #7c3aed;
+          border: 4px solid rgba(0, 89, 196, 0.2);
+          border-top-color: #0059C4;
           border-radius: 50%;
           animation: spin 1s linear infinite;
         }
@@ -7931,7 +8173,7 @@ function BiometricRegistrationModal({
         .spinner-ring {
           position: absolute;
           inset: -10px;
-          border: 2px solid rgba(124, 58, 237, 0.1);
+          border: 2px solid rgba(0, 89, 196, 0.1);
           border-radius: 50%;
           animation: pulseSpinner 2s ease-in-out infinite;
         }
@@ -7967,7 +8209,7 @@ function BiometricRegistrationModal({
         }
 
         .success-icon {
-          color: #10b981;
+          color: #0E9F6E;
           animation: scaleIn 0.6s ease-out;
         }
 
@@ -8049,12 +8291,12 @@ function BiometricRegistrationModal({
         }
 
         .profile-main-icon {
-          background: rgba(124, 58, 237, 0.1);
-          color: #7c3aed;
+          background: rgba(0, 89, 196, 0.1);
+          color: #0059C4;
           padding: 20px;
           border-radius: 50%;
-          border: 2px solid rgba(124, 58, 237, 0.2);
-          box-shadow: 0 0 30px rgba(124, 58, 237, 0.2);
+          border: 2px solid rgba(0, 89, 196, 0.2);
+          box-shadow: 0 0 30px rgba(0, 89, 196, 0.2);
         }
 
         .profile-main-icon svg {
@@ -8066,10 +8308,10 @@ function BiometricRegistrationModal({
           position: absolute;
           bottom: -4px;
           right: -4px;
-          background: #10b981;
+          background: #0E9F6E;
           border-radius: 50%;
           padding: 4px;
-          border: 3px solid #16213e;
+          border: 3px solid #111C2B;
           width: 24px;
           height: 24px;
           display: flex;
@@ -8127,7 +8369,7 @@ function BiometricRegistrationModal({
           }
         }
       ` }),
-    /* @__PURE__ */ jsx("div", { className: "modal-overlay", children: /* @__PURE__ */ jsxs("div", { className: "modal-content", children: [
+    /* @__PURE__ */ jsx("div", { className: "neofaceid-root modal-overlay", children: /* @__PURE__ */ jsxs("div", { className: "modal-content", children: [
       /* @__PURE__ */ jsx("button", { type: "button", className: "close-button", onClick: onClose, children: "×" }),
       state.status === "liveness" && renderLivenessDetection(),
       state.status === "camera-loading" && renderCameraLoading(),
@@ -8238,18 +8480,18 @@ function ConsentModalComponent({
         }
         .neofaceid-consent-overlay {
           position: fixed; inset: 0;
-          background: rgba(10, 19, 32, 0.55);
+          background: var(--nfid-overlay);
           backdrop-filter: blur(3px);
           -webkit-backdrop-filter: blur(3px);
           display: flex; align-items: center; justify-content: center;
           z-index: 10001; padding: 20px;
           animation: neofaceidConsentFadeIn 200ms ease-out;
           font-family: inherit;
-          color: #0A1320;
+          color: var(--nfid-text);
         }
         .neofaceid-consent-modal {
-          background: #FFFFFF;
-          border-radius: 16px;
+          background: var(--nfid-surface);
+          border-radius: var(--nfid-radius, 16px);
           padding: 28px;
           max-width: 440px;
           width: 100%;
@@ -8266,7 +8508,7 @@ function ConsentModalComponent({
         .neofaceid-consent-appname {
           font-size: 17px;
           font-weight: 700;
-          color: #0A1320;
+          color: var(--nfid-text);
           line-height: 1.2;
         }
         .neofaceid-consent-brand-caption {
@@ -8274,19 +8516,19 @@ function ConsentModalComponent({
           font-weight: 700;
           letter-spacing: 0.09em;
           text-transform: uppercase;
-          color: #617489;
+          color: var(--nfid-text-subtle);
         }
         .neofaceid-consent-title {
           font-size: 22px;
           font-weight: 700;
-          color: #0A1320;
+          color: var(--nfid-text);
           margin: 0 0 8px;
           line-height: 1.25;
           letter-spacing: -0.015em;
         }
         .neofaceid-consent-duration {
           font-size: 14px;
-          color: #48586B;
+          color: var(--nfid-text-muted);
           margin: 0 0 20px;
           line-height: 1.5;
         }
@@ -8303,30 +8545,30 @@ function ConsentModalComponent({
         }
         .neofaceid-consent-bullet-icon {
           flex-shrink: 0;
-          color: #0059C4;
+          color: var(--nfid-action);
           margin-top: 2px;
         }
         .neofaceid-consent-bullet-title {
           font-size: 14px;
           font-weight: 600;
-          color: #0A1320;
+          color: var(--nfid-text);
           margin: 0 0 2px;
           line-height: 1.35;
         }
         .neofaceid-consent-bullet-body {
           font-size: 13px;
-          color: #48586B;
+          color: var(--nfid-text-muted);
           margin: 0;
           line-height: 1.45;
         }
         .neofaceid-consent-link {
           display: inline-block;
           font-size: 13px;
-          color: #0059C4;
+          color: var(--nfid-action);
           text-decoration: underline;
           margin-bottom: 20px;
         }
-        .neofaceid-consent-link:hover { color: #00449A; }
+        .neofaceid-consent-link:hover { opacity: 0.85; }
         .neofaceid-consent-actions {
           display: flex;
           flex-direction: column;
@@ -8335,7 +8577,7 @@ function ConsentModalComponent({
         .neofaceid-consent-button {
           min-height: 44px;
           padding: 12px 20px;
-          border-radius: 16px;
+          border-radius: var(--nfid-radius, 16px);
           border: none;
           font-size: 15px;
           font-weight: 600;
@@ -8344,32 +8586,32 @@ function ConsentModalComponent({
           font-family: inherit;
         }
         .neofaceid-consent-button-primary {
-          background: #0059C4;
-          color: #FFFFFF;
+          background: var(--nfid-action);
+          color: var(--nfid-action-text);
         }
-        .neofaceid-consent-button-primary:hover { background: #00449A; }
+        .neofaceid-consent-button-primary:hover { opacity: 0.92; }
         .neofaceid-consent-button-primary:focus-visible {
-          outline: 2px solid #0059C4;
+          outline: 2px solid var(--nfid-focus-ring);
           outline-offset: 2px;
         }
         .neofaceid-consent-button-ghost {
           background: transparent;
-          color: #334255;
+          color: var(--nfid-text-muted);
         }
-        .neofaceid-consent-button-ghost:hover { background: #F1F5FA; }
+        .neofaceid-consent-button-ghost:hover { background: var(--nfid-surface-muted); }
         .neofaceid-consent-footer {
           display: flex;
           justify-content: center;
           margin-top: 20px;
           padding-top: 16px;
-          border-top: 1px solid #E6ECF4;
+          border-top: 1px solid var(--nfid-line);
         }
         .neofaceid-consent-seal {
           font-size: 11px;
           font-weight: 700;
           letter-spacing: 0.09em;
           text-transform: uppercase;
-          color: #617489;
+          color: var(--nfid-text-subtle);
         }
         @media (max-width: 640px) {
           .neofaceid-consent-modal { padding: 22px; border-radius: 16px; }
@@ -8380,7 +8622,7 @@ function ConsentModalComponent({
           .neofaceid-consent-modal { animation: none; }
         }
       ` }),
-    /* @__PURE__ */ jsx("div", { className: "neofaceid-consent-overlay", role: "dialog", "aria-modal": "true", "aria-labelledby": "neofaceid-consent-title", children: /* @__PURE__ */ jsxs("div", { className: "neofaceid-consent-modal", children: [
+    /* @__PURE__ */ jsx("div", { className: "neofaceid-root neofaceid-consent-overlay", role: "dialog", "aria-modal": "true", "aria-labelledby": "neofaceid-consent-title", children: /* @__PURE__ */ jsxs("div", { className: "neofaceid-consent-modal", children: [
       /* @__PURE__ */ jsxs("div", { className: "neofaceid-consent-header", children: [
         /* @__PURE__ */ jsx("span", { className: "neofaceid-consent-appname", children: appName }),
         /* @__PURE__ */ jsx("span", { className: "neofaceid-consent-brand-caption", children: "NeoFaceID" })
@@ -8455,6 +8697,7 @@ class ConsentModal {
   }
   show(props) {
     if (this.container) return;
+    injectThemeStyles$1();
     this.container = document.createElement("div");
     this.container.id = "neofaceid-consent-modal-container";
     document.body.appendChild(this.container);
@@ -8487,10 +8730,11 @@ class ConsentModal {
 }
 const DEFAULT_APP_NAME = "sua aplicação";
 function requestConsent(info = {}) {
-  const appName = info.appName ?? DEFAULT_APP_NAME;
-  if (!info.appName) {
+  const globalAppName = getAppName();
+  const appName = info.appName ?? globalAppName ?? DEFAULT_APP_NAME;
+  if (!info.appName && !globalAppName) {
     console.warn(
-      '[NeoFaceID SDK] requestConsent chamado sem appName — usando fallback "sua aplicação". Passe o nome do integrador via NeoFaceSDK.init({ appName }).'
+      '[NeoFaceID SDK] requestConsent sem appName — usando fallback "sua aplicação". Passe via NeoFaceSDK.init({ appName }) ou opts do caller.'
     );
   }
   const flow = info.flow ?? "verification";
@@ -8554,7 +8798,7 @@ class BiometricCaptureModal {
    */
   async createModal() {
     this.modal = document.createElement("div");
-    this.modal.className = "neofaceid-biometric-modal";
+    this.modal.className = "neofaceid-root neofaceid-biometric-modal";
     const title = this.options.title || this.getDefaultTitle();
     const subtitle = this.options.subtitle || this.getDefaultSubtitle();
     this.modal.innerHTML = `
@@ -8587,6 +8831,7 @@ class BiometricCaptureModal {
         </div>
       </div>
     `;
+    injectThemeStyles$1();
     this.addStyles();
     this.addEventListeners();
     document.body.appendChild(this.modal);
@@ -8783,9 +9028,7 @@ class BiometricCaptureModal {
     if (existingStyles) {
       existingStyles.remove();
     }
-    const style = document.createElement("style");
-    style.id = styleId;
-    style.textContent = `
+    injectScopedStyles$1(styleId, `
       .neofaceid-biometric-modal {
         position: fixed;
         top: 0;
@@ -8793,7 +9036,7 @@ class BiometricCaptureModal {
         width: 100%;
         height: 100%;
         z-index: 10000;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-family: inherit;
       }
 
       .neofaceid-modal-overlay {
@@ -8901,7 +9144,7 @@ class BiometricCaptureModal {
       .neofaceid-frame {
         width: 200px;
         height: 200px;
-        border: 3px solid #4CAF50;
+        border: 3px solid #0E9F6E;
         border-radius: 50%;
         box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
         animation: pulse 2s infinite;
@@ -8967,7 +9210,7 @@ class BiometricCaptureModal {
       }
 
       .neofaceid-capture-btn {
-        background: #4CAF50;
+        background: #0E9F6E;
         color: white;
       }
 
@@ -9002,8 +9245,7 @@ class BiometricCaptureModal {
           height: 150px;
         }
       }
-    `;
-    document.head.appendChild(style);
+    `);
   }
 }
 class BiometricStatusOverlay {
@@ -9058,7 +9300,7 @@ class BiometricStatusOverlay {
         z-index: 10000;
         pointer-events: none;
         animation: neofaceid-fadeIn 0.3s ease-out;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        font-family: inherit;
       }
 
       .neofaceid-overlay-container.fade-out {
@@ -9088,11 +9330,11 @@ class BiometricStatusOverlay {
         height: 80px;
         object-fit: contain;
         transition: all 0.5s ease;
-        filter: drop-shadow(0 4px 12px rgba(124, 58, 237, 0.3));
+        filter: drop-shadow(0 4px 12px rgba(0, 89, 196, 0.3));
       }
 
       /* Cores por estado */
-      .neofaceid-state-preparing .neofaceid-logo { filter: drop-shadow(0 0 15px rgba(124, 58, 237, 0.4)); }
+      .neofaceid-state-preparing .neofaceid-logo { filter: drop-shadow(0 0 15px rgba(0, 89, 196, 0.4)); }
       .neofaceid-state-detecting .neofaceid-logo { filter: hue-rotate(180deg) drop-shadow(0 0 15px rgba(59, 130, 246, 0.6)); }
       .neofaceid-state-waiting-for-face .neofaceid-logo { filter: hue-rotate(30deg) drop-shadow(0 0 15px rgba(251, 146, 60, 0.6)); }
       .neofaceid-state-capturing .neofaceid-logo { filter: hue-rotate(45deg) drop-shadow(0 0 15px rgba(245, 158, 11, 0.6)); }
@@ -9150,7 +9392,7 @@ class BiometricStatusOverlay {
       .neofaceid-success-icon {
         width: 80px;
         height: 80px;
-        color: #10b981;
+        color: #0E9F6E;
         animation: neofaceid-scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
       }
 
@@ -9300,142 +9542,132 @@ function FallbackPromptComponent({
         .neofaceid-fallback-overlay {
           position: fixed;
           inset: 0;
-          background: rgba(0, 0, 0, 0.6);
-          backdrop-filter: blur(8px);
+          background: var(--nfid-overlay);
+          backdrop-filter: blur(3px);
+          -webkit-backdrop-filter: blur(3px);
           display: flex;
           align-items: center;
           justify-content: center;
           z-index: 10001;
           padding: 20px;
           animation: fadeIn 0.3s ease-out;
+          font-family: inherit;
         }
 
         .neofaceid-fallback-prompt {
-          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-          border-radius: 20px;
-          padding: 32px;
+          background: var(--nfid-surface);
+          border-radius: var(--nfid-radius, 16px);
+          padding: 28px;
           max-width: 400px;
           width: 100%;
-          box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
-          animation: slideUp 0.4s ease-out;
+          box-shadow: 0 1px 3px rgba(10, 19, 32, 0.08);
+          animation: slideUp 0.32s cubic-bezier(.2,0,0,1);
           text-align: center;
+          box-sizing: border-box;
         }
 
+        /* Falha de captura é atenção (dourado), nunca crítico (vermelho). */
         .neofaceid-fallback-icon {
-          width: 64px;
-          height: 64px;
+          width: 56px;
+          height: 56px;
           margin: 0 auto 20px;
-          color: #ef4444;
-          animation: scaleIn 0.4s ease-out;
-        }
-
-        @keyframes scaleIn {
-          0% {
-            transform: scale(0);
-            opacity: 0;
-          }
-          50% {
-            transform: scale(1.1);
-          }
-          100% {
-            transform: scale(1);
-            opacity: 1;
-          }
+          color: #F1BE00;
         }
 
         .neofaceid-fallback-title {
-          font-size: 22px;
+          font-size: 20px;
           font-weight: 700;
-          color: white;
-          margin: 0 0 12px 0;
+          color: var(--nfid-text);
+          margin: 0 0 8px 0;
+          line-height: 1.25;
         }
 
         .neofaceid-fallback-message {
-          font-size: 15px;
-          color: rgba(255, 255, 255, 0.7);
-          margin: 0 0 28px 0;
+          font-size: 14px;
+          color: var(--nfid-text-muted);
+          margin: 0 0 24px 0;
           line-height: 1.5;
         }
 
         .neofaceid-fallback-actions {
           display: flex;
           flex-direction: column;
-          gap: 12px;
+          gap: 10px;
         }
 
         .neofaceid-fallback-button {
-          padding: 14px 24px;
-          border-radius: 12px;
+          min-height: 44px;
+          padding: 12px 20px;
+          border-radius: var(--nfid-radius, 16px);
           border: none;
-          font-size: 16px;
+          font-size: 15px;
           font-weight: 600;
           cursor: pointer;
-          transition: all 0.2s;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          transition: background 120ms ease-out;
+          font-family: inherit;
         }
 
         .neofaceid-fallback-button-primary {
-          background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
-          color: white;
-          box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
-        }
-
-        .neofaceid-fallback-button-primary:hover {
-          transform: translateY(-2px);
-          box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
+          background: var(--nfid-action);
+          color: var(--nfid-action-text);
         }
-
-        .neofaceid-fallback-button-primary:active {
-          transform: translateY(0);
+        .neofaceid-fallback-button-primary:hover { opacity: 0.92; }
+        .neofaceid-fallback-button-primary:focus-visible {
+          outline: 2px solid var(--nfid-focus-ring);
+          outline-offset: 2px;
         }
 
         .neofaceid-fallback-button-secondary {
-          background: rgba(255, 255, 255, 0.1);
-          color: white;
-          border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-
-        .neofaceid-fallback-button-secondary:hover {
-          background: rgba(255, 255, 255, 0.15);
-          border-color: rgba(255, 255, 255, 0.3);
+          background: var(--nfid-surface-muted);
+          color: var(--nfid-text);
+          border: 1px solid var(--nfid-line);
         }
+        .neofaceid-fallback-button-secondary:hover { opacity: 0.9; }
 
         .neofaceid-fallback-button-ghost {
           background: transparent;
-          color: rgba(255, 255, 255, 0.7);
+          color: var(--nfid-text-muted);
+          min-height: 44px;
           padding: 10px;
         }
-
         .neofaceid-fallback-button-ghost:hover {
-          color: white;
-          background: rgba(255, 255, 255, 0.05);
+          background: var(--nfid-surface-muted);
         }
 
         @media (max-width: 640px) {
           .neofaceid-fallback-prompt {
-            padding: 24px;
-            border-radius: 16px;
+            padding: 22px;
           }
-
           .neofaceid-fallback-title {
-            font-size: 20px;
+            font-size: 18px;
           }
         }
       ` }),
-    /* @__PURE__ */ jsx("div", { className: "neofaceid-fallback-overlay", children: /* @__PURE__ */ jsxs("div", { className: "neofaceid-fallback-prompt", children: [
-      /* @__PURE__ */ jsx("div", { className: "neofaceid-fallback-icon", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r: "30", stroke: "currentColor", strokeWidth: "3", fill: "none" }),
+    /* @__PURE__ */ jsx("div", { className: "neofaceid-root neofaceid-fallback-overlay", role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxs("div", { className: "neofaceid-fallback-prompt", children: [
+      /* @__PURE__ */ jsx("div", { className: "neofaceid-fallback-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx(
           "path",
           {
-            d: "M20 20 L44 44 M44 20 L20 44",
+            d: "M32 8 L58 54 H6 Z",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M32 26 V38",
             stroke: "currentColor",
             strokeWidth: "3",
             strokeLinecap: "round"
           }
-        )
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "32", cy: "45", r: "2", fill: "currentColor" })
       ] }) }),
-      /* @__PURE__ */ jsx("h3", { className: "neofaceid-fallback-title", children: "Não foi possível reconhecer" }),
+      /* @__PURE__ */ jsx("h3", { className: "neofaceid-fallback-title", children: "Vamos tentar de outro jeito" }),
       /* @__PURE__ */ jsx("p", { className: "neofaceid-fallback-message", children: (error == null ? void 0 : error.getFriendlyMessage()) || "Não conseguimos reconhecer sua face. Tente novamente ou use email e senha." }),
       /* @__PURE__ */ jsxs("div", { className: "neofaceid-fallback-actions", children: [
         /* @__PURE__ */ jsx(
@@ -9490,6 +9722,7 @@ class FallbackPrompt {
     if (this.container) {
       return;
     }
+    injectThemeStyles$1();
     this.container = document.createElement("div");
     this.container.id = "neofaceid-fallback-prompt";
     document.body.appendChild(this.container);
@@ -9563,9 +9796,10 @@ class EmailPasswordModal {
     }
   }
   createModal() {
+    injectThemeStyles$1();
     this.addStyles();
     this.modalElement = document.createElement("div");
-    this.modalElement.className = "neoface-email-password-modal";
+    this.modalElement.className = "neofaceid-root neoface-email-password-modal";
     this.modalElement.innerHTML = `
       <div class="neoface-email-modal-overlay">
         <div class="neoface-email-modal-content">
@@ -9601,9 +9835,7 @@ class EmailPasswordModal {
     if (existingStyles) {
       return;
     }
-    const style = document.createElement("style");
-    style.id = styleId;
-    style.textContent = `
+    injectScopedStyles$1(styleId, `
       .neoface-email-password-modal {
         position: fixed;
         top: 0;
@@ -9611,7 +9843,7 @@ class EmailPasswordModal {
         width: 100%;
         height: 100%;
         z-index: 10002;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-family: inherit;
       }
 
       .neoface-email-modal-overlay {
@@ -9643,7 +9875,7 @@ class EmailPasswordModal {
       }
 
       .neoface-email-modal-content {
-        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+        background: linear-gradient(135deg, #0A1320 0%, #111C2B 100%);
         border-radius: 20px;
         padding: 32px;
         max-width: 400px;
@@ -9694,8 +9926,8 @@ class EmailPasswordModal {
 
       .neoface-email-modal-content input:focus {
         outline: none;
-        border-color: #7c3aed;
-        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
+        border-color: #0059C4;
+        box-shadow: 0 0 0 3px rgba(0, 89, 196, 0.2);
         background: rgba(255, 255, 255, 0.15);
       }
 
@@ -9704,19 +9936,19 @@ class EmailPasswordModal {
         padding: 14px 24px;
         border-radius: 12px;
         border: none;
-        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
+        background: linear-gradient(135deg, #0059C4 0%, #00449A 100%);
         color: white;
         font-size: 16px;
         font-weight: 600;
         cursor: pointer;
         transition: all 0.2s;
-        box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
+        box-shadow: 0 4px 16px rgba(0, 89, 196, 0.3);
         font-family: inherit;
       }
 
       .neoface-email-submit-btn:hover {
         transform: translateY(-2px);
-        box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
+        box-shadow: 0 8px 24px rgba(0, 89, 196, 0.4);
       }
 
       .neoface-email-submit-btn:active {
@@ -9768,7 +10000,7 @@ class EmailPasswordModal {
 
       .neoface-email-brand-name {
         font-weight: 600;
-        font-family: 'SF Pro Display', -apple-system, system-ui, sans-serif;
+        font-family: inherit;
         color: #ffffff;
         letter-spacing: 0.3px;
       }
@@ -9795,8 +10027,7 @@ class EmailPasswordModal {
           font-size: 20px;
         }
       }
-    `;
-    document.head.appendChild(style);
+    `);
   }
   async handleSubmit(event) {
     event.preventDefault();
@@ -10640,8 +10871,8 @@ const biometricDetection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   initializeBiometricDetection,
   isAdvancedDetectionAvailable
 }, Symbol.toStringTag, { value: "Module" }));
-const VERSION = "1.28.2";
-const RELEASE_DATE = "2026-09-01";
+const VERSION = "1.30.0";
+const RELEASE_DATE = "2026-09-02";
 let cachedSession = null;
 function getCachedCaptureSession() {
   return cachedSession;
@@ -10956,27 +11187,30 @@ class OnboardingCaptureModal {
         </div>
       </div>
     `;
-    const style = document.createElement("style");
-    style.textContent = `
-      .neofaceid-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index: 9999; }
-      .neofaceid-modal { background:#fff; border-radius:12px; width: 92%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow:hidden; }
-      .neofaceid-modal-header { padding: 16px 20px; border-bottom: 1px solid #eee; display:flex; align-items:center; justify-content:space-between; }
-      .neofaceid-title { margin:0; font-size: 20px; color:#333; }
-      .neofaceid-close-btn { background:none; border:none; font-size:24px; cursor:pointer; color:#666; }
-      .neofaceid-modal-body { padding: 16px 20px; }
-      .neofaceid-subtitle { margin: 0 0 12px 0; color:#666; }
-      .neofaceid-camera-container { position: relative; background:#000; border-radius:8px; overflow:hidden; aspect-ratio: 4/3; margin-bottom: 12px; }
-      .neofaceid-video { width:100%; height:100%; object-fit: cover; }
-      .neofaceid-canvas { position:absolute; top:0; left:0; }
-      .neofaceid-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
-      .neofaceid-frame { width: 200px; height: 200px; border: 3px solid #4CAF50; border-radius: 50%; box-shadow: 0 0 0 2px rgba(76,175,80,0.3); }
-      .neofaceid-countdown { position:absolute; top:16px; right:16px; background: rgba(0,0,0,0.7); color:#fff; width: 48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
-      .neofaceid-modal-footer { padding: 16px 20px; border-top: 1px solid #eee; display:flex; gap: 8px; justify-content:flex-end; }
-      .neofaceid-cancel-btn { background:#f5f5f5; color:#666; border:none; border-radius:6px; padding:10px 18px; cursor:pointer; }
-      .neofaceid-capture-btn { background:#4CAF50; color:#fff; border:none; border-radius:6px; padding:10px 18px; cursor:pointer; }
-      .neofaceid-capture-btn:disabled { background:#ccc; cursor:not-allowed; }
-    `;
-    document.head.appendChild(style);
+    injectThemeStyles();
+    injectScopedStyles(
+      "neofaceid-onboarding-capture-styles",
+      `
+      .neofaceid-root .neofaceid-modal-overlay { position: fixed; inset: 0; background: var(--nfid-overlay); display:flex; align-items:center; justify-content:center; z-index: 9999; }
+      .neofaceid-root .neofaceid-modal { background: var(--nfid-surface); border-radius: var(--nfid-radius, 16px); width: 92%; max-width: 640px; box-shadow: 0 1px 3px rgba(10,19,32,.08); overflow:hidden; }
+      .neofaceid-root .neofaceid-modal-header { padding: 16px 20px; border-bottom: 1px solid var(--nfid-line); display:flex; align-items:center; justify-content:space-between; }
+      .neofaceid-root .neofaceid-title { margin:0; font-size: 20px; color: var(--nfid-text); }
+      .neofaceid-root .neofaceid-close-btn { background:none; border:none; font-size:24px; cursor:pointer; color: var(--nfid-text-muted); min-width: 44px; min-height: 44px; }
+      .neofaceid-root .neofaceid-modal-body { padding: 16px 20px; }
+      .neofaceid-root .neofaceid-subtitle { margin: 0 0 12px 0; color: var(--nfid-text-muted); }
+      .neofaceid-root .neofaceid-camera-container { position: relative; background:#000; border-radius:8px; overflow:hidden; aspect-ratio: 4/3; margin-bottom: 12px; }
+      .neofaceid-root .neofaceid-video { width:100%; height:100%; object-fit: cover; }
+      .neofaceid-root .neofaceid-canvas { position:absolute; top:0; left:0; }
+      .neofaceid-root .neofaceid-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
+      .neofaceid-root .neofaceid-frame { width: 200px; height: 200px; border: 3px solid #0E9F6E; border-radius: 50%; box-shadow: 0 0 0 2px rgba(14,159,110,0.3); }
+      .neofaceid-root .neofaceid-countdown { position:absolute; top:16px; right:16px; background: rgba(0,0,0,0.7); color:#fff; width: 48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
+      .neofaceid-root .neofaceid-modal-footer { padding: 16px 20px; border-top: 1px solid var(--nfid-line); display:flex; gap: 8px; justify-content:flex-end; }
+      .neofaceid-root .neofaceid-cancel-btn { background: var(--nfid-surface-muted); color: var(--nfid-text-muted); border:none; border-radius:8px; padding:10px 18px; cursor:pointer; min-height: 44px; }
+      .neofaceid-root .neofaceid-capture-btn { background: var(--nfid-action); color: var(--nfid-action-text); border:none; border-radius:8px; padding:10px 18px; cursor:pointer; min-height: 44px; }
+      .neofaceid-root .neofaceid-capture-btn:disabled { background: var(--nfid-line); cursor:not-allowed; }
+    `
+    );
+    overlay.classList.add("neofaceid-root");
     document.body.appendChild(overlay);
     this.overlay = overlay;
     this.video = this.overlay.querySelector(".neofaceid-video");
@@ -11691,12 +11925,9 @@ class DocumentCaptureModal {
         <div class="neoface-doc-content"></div>
       </div>
     `;
-    if (!document.getElementById("neoface-doc-styles-v2")) {
-      const style = document.createElement("style");
-      style.id = "neoface-doc-styles-v2";
-      style.textContent = this.getStyles();
-      document.head.appendChild(style);
-    }
+    injectThemeStyles$1();
+    injectScopedStyles$1("neoface-doc-styles-v2", this.getStyles());
+    overlay.classList.add("neofaceid-root");
     document.body.appendChild(overlay);
     this.overlay = overlay;
   }
@@ -12181,12 +12412,12 @@ class DocumentCaptureModal {
         align-items: center;
         justify-content: center;
         z-index: 10000;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-family: inherit;
         padding: 16px;
       }
       
       .neoface-doc-modal {
-        background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
+        background: linear-gradient(145deg, #0A1320 0%, #111C2B 100%);
         border-radius: 24px;
         width: 100%;
         max-width: 520px;
@@ -12228,7 +12459,7 @@ class DocumentCaptureModal {
       }
       
       .neoface-doc-step-badge {
-        background: linear-gradient(135deg, #00c8ff, #0099cc);
+        background: linear-gradient(135deg, #0091F6, #0099cc);
         color: #fff;
         font-size: 12px;
         font-weight: 600;
@@ -12293,7 +12524,7 @@ class DocumentCaptureModal {
         height: 44px;
         background: rgba(0, 200, 255, 0.15);
         border-radius: 12px;
-        color: #00c8ff;
+        color: #0091F6;
       }
       
       .neoface-doc-select-icon svg {
@@ -12314,7 +12545,7 @@ class DocumentCaptureModal {
       }
       
       .neoface-doc-select-option:hover .neoface-doc-select-arrow {
-        color: #00c8ff;
+        color: #0091F6;
         transform: translateX(4px);
       }
       
@@ -12341,7 +12572,7 @@ class DocumentCaptureModal {
       }
       
       .neoface-doc-tip-icon {
-        color: #00c8ff;
+        color: #0091F6;
         flex-shrink: 0;
       }
       
@@ -12386,7 +12617,7 @@ class DocumentCaptureModal {
         position: absolute;
         width: 28px;
         height: 28px;
-        border-color: #00c8ff;
+        border-color: #0091F6;
         border-style: solid;
       }
       
@@ -12401,7 +12632,7 @@ class DocumentCaptureModal {
         left: 50%;
         transform: translateX(-50%);
         background: rgba(0, 0, 0, 0.7);
-        color: #00c8ff;
+        color: #0091F6;
         font-size: 12px;
         font-weight: 500;
         padding: 6px 14px;
@@ -12422,7 +12653,7 @@ class DocumentCaptureModal {
         width: 48px;
         height: 48px;
         border: 4px solid rgba(255, 255, 255, 0.2);
-        border-top-color: #00c8ff;
+        border-top-color: #0091F6;
         border-radius: 50%;
         animation: neoface-doc-spin 0.8s linear infinite;
       }
@@ -12493,7 +12724,7 @@ class DocumentCaptureModal {
       }
       
       .neoface-doc-preview-hint svg {
-        color: #00c8ff;
+        color: #0091F6;
         flex-shrink: 0;
       }
       
@@ -12520,7 +12751,7 @@ class DocumentCaptureModal {
       }
       
       .neoface-doc-btn-primary {
-        background: linear-gradient(135deg, #00c8ff 0%, #0099cc 100%);
+        background: linear-gradient(135deg, #0091F6 0%, #0099cc 100%);
         color: #fff;
       }
       
@@ -12530,7 +12761,7 @@ class DocumentCaptureModal {
       }
       
       .neoface-doc-btn-success {
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        background: linear-gradient(135deg, #0E9F6E 0%, #059669 100%);
         color: #fff;
       }
       
@@ -12578,7 +12809,7 @@ class DocumentCaptureModal {
       .neoface-doc-brand-name {
         font-size: 13px;
         font-weight: 700;
-        color: #00c8ff;
+        color: #0091F6;
         letter-spacing: 1px;
       }
       
@@ -12763,11 +12994,17 @@ export {
   completeOnboardingWithData,
   confirmPasswordReset,
   detectBiometricType,
+  getAccent,
+  getAppName,
   getApplicationToken,
   getBaseUrl,
   getCachedCaptureSession,
   getConfig,
   getEnvironment,
+  getLocale,
+  getRadius,
+  getResolvedThemeMode,
+  getTheme,
   identifyPerson,
   identifyPersonAsync,
   init,