sixseconds-modules 3.0.3 → 3.0.6

package/dist/index.cjs.js

@@ -574,150 +574,6 @@ const ResetPasswordValidationUtil = (t) => Yup.object().shape({
   newPassword: commonUtil(t).password.required(t(COMMON_VALIDATION_MASSAGE.password)),
   passwordConfirmation: commonUtil(t).confirmPass
 });
-if (env.VITE_MODULES_SSO_BACKEND_BASE_URL === void 0) {
-  throw new Error("env is not set");
-}
-function createAxiosInstance(baseUrl) {
-  return axios.create({
-    baseURL: urlcat(baseUrl, "/api/"),
-    headers: {
-      "Content-Type": "application/json"
-    },
-    withCredentials: true
-  });
-}
-async function req(config) {
-  const baseUrl = env.VITE_MODULES_SSO_BACKEND_BASE_URL;
-  const axiosInstance = createAxiosInstance(baseUrl);
-  try {
-    const response = await axiosInstance.request({ ...config });
-    return {
-      remote: SERVER_STATUS.success,
-      data: response?.data?.data
-    };
-  } catch (error) {
-    if (error.response) {
-      const axiosError = error;
-      const errorMessage = axiosError.response?.data?.message || ALERT_MESSAGES.fallbackError;
-      const errorCode = axiosError.response?.status;
-      const errorData = axiosError.response?.data?.data || null;
-      return {
-        status: errorCode,
-        remote: SERVER_STATUS.failure,
-        error: {
-          message: errorMessage,
-          data: errorData
-        }
-      };
-    }
-    throw error;
-  }
-}
-const transformNotifications = (itm) => {
-  return {
-    id: itm.id,
-    title: itm.title,
-    date: formatDateUtil(itm.created_at),
-    type: itm.message_type,
-    status: itm.app_access,
-    source: itm.app_access
-  };
-};
-const transformMenuBuilderData = (itm) => {
-  return {
-    label: itm.name,
-    value: itm.route,
-    target: itm.target,
-    id: itm.id,
-    order: itm.order,
-    children: itm.children?.length ? itm.children.map((data) => transformMenuBuilderData(data)) : []
-  };
-};
-async function getDropDownMenuApi(params) {
-  const res = await req({
-    url: urlcat("menu/menus", params),
-    method: "GET"
-  });
-  if (res.remote === SERVER_STATUS.success) {
-    return {
-      remote: SERVER_STATUS.success,
-      data: res?.data?.map(transformMenuBuilderData)
-    };
-  }
-  return res;
-}
-async function notificationApi(data) {
-  const res = await req({
-    url: urlcat("/notification/index", data),
-    method: "GET"
-  });
-  if (res.remote === SERVER_STATUS.success) {
-    return {
-      remote: SERVER_STATUS.success,
-      data: res?.data?.pager
-    };
-  }
-  return res;
-}
-async function changeUserPasswordApi(payload) {
-  const res = await req({
-    url: `/auth/change-password`,
-    method: "POST",
-    data: payload
-  });
-  if (res.remote === SERVER_STATUS.success) {
-    return {
-      remote: SERVER_STATUS.success,
-      data: res?.data?.pager
-    };
-  }
-  return res;
-}
-async function autoLoginApi(id, userDetails) {
-  const response = await req({
-    url: urlcat("/auto-authenticate/:id", { id }),
-    method: "POST"
-  });
-  if (response.remote === "success") {
-    return response;
-  }
-  return response;
-}
-const useFormikWithDefaultsProps = (props) => {
-  return formik.useFormik({
-    validateOnChange: false,
-    validateOnBlur: false,
-    ...props
-  });
-};
-function useMediaQuery(query) {
-  const getMatch = () => typeof window !== "undefined" ? window.matchMedia(query).matches : false;
-  const [matches, setMatches] = React.useState(getMatch);
-  React.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mql = window.matchMedia(query);
-    const onChange = () => setMatches(mql.matches);
-    onChange();
-    mql.addEventListener("change", onChange);
-    return () => mql.removeEventListener("change", onChange);
-  }, [query]);
-  return matches;
-}
-function useClickAway(ref, onAway, active = true) {
-  React.useEffect(() => {
-    if (!active || typeof document === "undefined") return;
-    const handler = (e) => {
-      const el = ref.current;
-      if (el && !el.contains(e.target)) onAway();
-    };
-    document.addEventListener("mousedown", handler);
-    document.addEventListener("touchstart", handler);
-    return () => {
-      document.removeEventListener("mousedown", handler);
-      document.removeEventListener("touchstart", handler);
-    };
-  }, [ref, onAway, active]);
-}
 function Btn({
   variant = "ghost",
   btnTitle,
@@ -817,6 +673,41 @@ function LabeledInput({ label, required, type = "text", wrapClassName, className
     ] })
   ] });
 }
+const useFormikWithDefaultsProps = (props) => {
+  return formik.useFormik({
+    validateOnChange: false,
+    validateOnBlur: false,
+    ...props
+  });
+};
+function useMediaQuery(query) {
+  const getMatch = () => typeof window !== "undefined" ? window.matchMedia(query).matches : false;
+  const [matches, setMatches] = React.useState(getMatch);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function useClickAway(ref, onAway, active = true) {
+  React.useEffect(() => {
+    if (!active || typeof document === "undefined") return;
+    const handler = (e) => {
+      const el = ref.current;
+      if (el && !el.contains(e.target)) onAway();
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("touchstart", handler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("touchstart", handler);
+    };
+  }, [ref, onAway, active]);
+}
 function Dropdown({ onClose, className, style, children }) {
   const ref = React.useRef(null);
   useClickAway(ref, onClose);
@@ -943,6 +834,115 @@ function ViewProfileDialog({ userData, setInitialState, isOpen }) {
     ] })
   ] }) }) });
 }
+if (env.VITE_MODULES_SSO_BACKEND_BASE_URL === void 0) {
+  throw new Error("env is not set");
+}
+function createAxiosInstance(baseUrl) {
+  return axios.create({
+    baseURL: urlcat(baseUrl, "/api/"),
+    headers: {
+      "Content-Type": "application/json"
+    },
+    withCredentials: true
+  });
+}
+async function req(config) {
+  const baseUrl = env.VITE_MODULES_SSO_BACKEND_BASE_URL;
+  const axiosInstance = createAxiosInstance(baseUrl);
+  try {
+    const response = await axiosInstance.request({ ...config });
+    return {
+      remote: SERVER_STATUS.success,
+      data: response?.data?.data
+    };
+  } catch (error) {
+    if (error.response) {
+      const axiosError = error;
+      const errorMessage = axiosError.response?.data?.message || ALERT_MESSAGES.fallbackError;
+      const errorCode = axiosError.response?.status;
+      const errorData = axiosError.response?.data?.data || null;
+      return {
+        status: errorCode,
+        remote: SERVER_STATUS.failure,
+        error: {
+          message: errorMessage,
+          data: errorData
+        }
+      };
+    }
+    throw error;
+  }
+}
+const transformNotifications = (itm) => {
+  return {
+    id: itm.id,
+    title: itm.title,
+    date: formatDateUtil(itm.created_at),
+    type: itm.message_type,
+    status: itm.app_access,
+    source: itm.app_access
+  };
+};
+const transformMenuBuilderData = (itm) => {
+  return {
+    label: itm.name,
+    value: itm.route,
+    target: itm.target,
+    id: itm.id,
+    order: itm.order,
+    children: itm.children?.length ? itm.children.map((data) => transformMenuBuilderData(data)) : []
+  };
+};
+async function getDropDownMenuApi(params) {
+  const res = await req({
+    url: urlcat("menu/menus", params),
+    method: "GET"
+  });
+  if (res.remote === SERVER_STATUS.success) {
+    return {
+      remote: SERVER_STATUS.success,
+      data: res?.data?.map(transformMenuBuilderData)
+    };
+  }
+  return res;
+}
+async function notificationApi(data) {
+  const res = await req({
+    url: urlcat("/notification/index", data),
+    method: "GET"
+  });
+  if (res.remote === SERVER_STATUS.success) {
+    return {
+      remote: SERVER_STATUS.success,
+      data: res?.data?.pager
+    };
+  }
+  return res;
+}
+async function changeUserPasswordApi(payload) {
+  const res = await req({
+    url: `/auth/change-password`,
+    method: "POST",
+    data: payload
+  });
+  if (res.remote === SERVER_STATUS.success) {
+    return {
+      remote: SERVER_STATUS.success,
+      data: res?.data?.pager
+    };
+  }
+  return res;
+}
+async function autoLoginApi(id, userDetails) {
+  const response = await req({
+    url: urlcat("/auto-authenticate/:id", { id }),
+    method: "POST"
+  });
+  if (response.remote === "success") {
+    return response;
+  }
+  return response;
+}
 function FormikErrorMsg({ fieldName, formik: formik$1 }) {
   const error = formik.getIn(formik$1.errors, fieldName);
   React.useEffect(() => {
@@ -1007,6 +1007,47 @@ function ChangePasswordDialog({ isOpen, email, t: t2, setInitialState }) {
     ] })
   ] }) }) });
 }
+function BackArrow({ style, isBack = true, title = "Back" }) {
+  const handleBack = () => {
+    if (isBack) window.history.back();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ssh-back", style, onClick: handleBack, title, children: /* @__PURE__ */ jsxRuntime.jsx(SVG.LeftArrow, {}) });
+}
+function Warning({ message }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ssh-scope ssh-warning", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SVG.Warning, {}),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ssh-warning__text", children: message })
+  ] });
+}
+function PreviousLoginBanner({ t: t2, router, style }) {
+  const prev = CookiesUtil.get(STORAGE_VALUES.previousLoginBanner) || {};
+  CookiesUtil.set(STORAGE_VALUES.previousLoginBanner, prev);
+  const handleAutoLogin = async () => {
+    try {
+      const res = await autoLoginApi(prev?.id);
+      if (res.remote === "success") {
+        CookiesUtil.remove(STORAGE_VALUES.previousLoginBanner);
+        if (router) {
+          router.reload();
+          router.replace(ROUTES.home);
+        } else {
+          window.location.reload();
+          window.location.href = ROUTES.home;
+        }
+      }
+    } catch {
+      toast.error(t2(ALERT_MESSAGES.fallbackError));
+    }
+  };
+  if (!prev.id || !prev.isAllowToAccess) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ssh-scope ssh-banner", style, children: [
+    "Go back to",
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "ssh-banner__link", onClick: handleAutoLogin, children: prev.name || prev.email || prev.id }),
+    " ",
+    "Profile"
+  ] });
+}
 function AppMenus({ menuItems, setInitialState, t: t2, appName, router }) {
   const handleRedirection2 = (name, link, type) => {
     if (router && name === APP_NAMES.sso && type === "tab") {
@@ -1019,38 +1060,38 @@ function AppMenus({ menuItems, setInitialState, t: t2, appName, router }) {
       window.open(`${link}?source=${name}`, "_blank");
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Dropdown,
+  return /* @__PURE__ */ jsxRuntime.jsx(Dropdown, { onClose: () => handleCloseUtil(setInitialState), className: "ssh-apps ssh-scroll", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ssh-apps__grid", children: menuItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
     {
-      onClose: () => handleCloseUtil(setInitialState),
-      className: "ssh-scroll",
-      style: { maxHeight: 450, minWidth: 320 },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ssh-apps__grid", children: menuItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          className: "ssh-apps__item",
-          onClick: () => handleRedirection2(appName, item.link, item.type),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { className: "ssh-apps__icon", src: item.icon, alt: item.name }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ssh-apps__label", children: t2(item.name) })
-          ]
-        },
-        index
-      )) })
-    }
-  );
+      type: "button",
+      className: "ssh-apps__item",
+      onClick: () => handleRedirection2(appName, item.link, item.type),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("img", { className: "ssh-apps__icon", src: item.icon, alt: item.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ssh-apps__label", children: t2(item.name) })
+      ]
+    },
+    index
+  )) }) });
 }
 function Language({ interFaceLangList, updateInterfaceLang, selectedInterFaceLang, setInitialState, t: t2 }) {
   const onPick = (lang) => {
     updateInterfaceLang?.(lang);
     setInitialState((p) => ({ ...p, toggles: { ...p.toggles, lang: false } }));
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Dropdown, { onClose: () => handleCloseUtil(setInitialState), className: "ssh-lang", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ssh-lang__list ssh-scroll", children: interFaceLangList?.length ? interFaceLangList.map((lang, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "ssh-lang__item", onClick: () => onPick(lang), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("img", { className: "ssh-lang__flag", src: lang?.flag || IMAGES.DefaultLang, alt: lang?.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ssh-lang__label", children: t2(lang?.label) }),
-    selectedInterFaceLang?.value === lang?.value && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "ssh-lang__check" })
-  ] }, i)) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ssh-lang__label", children: t2(ALERT_MESSAGES.dataNoFount) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Dropdown, { onClose: () => handleCloseUtil(setInitialState), className: "ssh-lang", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ssh-lang__list ssh-scroll", children: interFaceLangList?.length ? interFaceLangList.map((lang, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      className: `ssh-lang__item${selectedInterFaceLang?.value === lang?.value ? " ssh-lang__item--active" : ""}`,
+      onClick: () => onPick(lang),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("img", { className: "ssh-lang__flag", src: lang?.flag || IMAGES.DefaultLang, alt: lang?.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ssh-lang__label", children: t2(lang?.label) }),
+        selectedInterFaceLang?.value === lang?.value && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "ssh-lang__check" })
+      ]
+    },
+    i
+  )) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ssh-lang__label", children: t2(ALERT_MESSAGES.dataNoFount) }) }) });
 }
 function Logo({ style }) {
   const base2 = env.VITE_MODULES_SSO_FRONTEND_BASE_URL || "";
@@ -1407,47 +1448,7 @@ function Header({
     /* @__PURE__ */ jsxRuntime.jsx(ViewProfileDialog, { isOpen: state.toggles.viewProfile, userData, setInitialState: setState })
   ] });
 }
-function PreviousLoginBanner({ t: t2, router, style }) {
-  const prev = CookiesUtil.get(STORAGE_VALUES.previousLoginBanner) || {};
-  CookiesUtil.set(STORAGE_VALUES.previousLoginBanner, prev);
-  const handleAutoLogin = async () => {
-    try {
-      const res = await autoLoginApi(prev?.id);
-      if (res.remote === "success") {
-        CookiesUtil.remove(STORAGE_VALUES.previousLoginBanner);
-        if (router) {
-          router.reload();
-          router.replace(ROUTES.home);
-        } else {
-          window.location.reload();
-          window.location.href = ROUTES.home;
-        }
-      }
-    } catch {
-      toast.error(t2(ALERT_MESSAGES.fallbackError));
-    }
-  };
-  if (!prev.id || !prev.isAllowToAccess) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ssh-scope ssh-banner", style, children: [
-    "Go back to",
-    " ",
-    /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "ssh-banner__link", onClick: handleAutoLogin, children: prev.name || prev.email || prev.id }),
-    " ",
-    "Profile"
-  ] });
-}
-function BackArrow({ style, isBack = true, title = "Back" }) {
-  const handleBack = () => {
-    if (isBack) window.history.back();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ssh-back", style, onClick: handleBack, title, children: /* @__PURE__ */ jsxRuntime.jsx(SVG.LeftArrow, {}) });
-}
-function Warning({ message }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ssh-scope ssh-warning", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SVG.Warning, {}),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ssh-warning__text", children: message })
-  ] });
-}
+exports.APP_NAMES = APP_NAMES;
 exports.BackArrow = BackArrow;
 exports.ChangePasswordDialog = ChangePasswordDialog;
 exports.CookiesUtil = CookiesUtil;
@@ -1470,7 +1471,7 @@ exports.Warning = Warning;
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode('@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");\n\n/* ==========================================================================\n   SixSeconds Header — raw, namespaced CSS.\n\n   Isolation strategy (no MUI, no Shadow DOM):\n   - Every class is prefixed `ssh-`, so the host app can never accidentally\n     target our elements and our rules can never target the host\'s.\n   - `.ssh-scope` (placed on every top-level rendered node) does `all: initial`,\n     which resets the INHERITED properties (font, color, line-height, …) that\n     would otherwise cascade in from the host — giving our tree a clean baseline.\n     Because `.ssh-scope` is a class (0,1,0) it beats a host `div`/element rule\n     (0,0,x), so it wins without `!important`.\n   - Component rules use single `.ssh-*` classes (0,1,0), which beat any host\n     GLOBAL element selector (`button`, `a`, `ul li`, … all 0,0,x) — so host\n     resets/normalizes cannot restyle our controls. We set every property we\n     care about explicitly, so nothing is left to the host.\n   ========================================================================== */\n\n/* ---- scope / boundary reset ------------------------------------------------ */\n.ssh-scope {\n  all: initial;\n  box-sizing: border-box;\n  display: block;\n  font-family:\n    "Inter",\n    system-ui,\n    -apple-system,\n    "Segoe UI",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1c1e;\n  text-align: left;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.ssh-scope *,\n.ssh-scope *::before,\n.ssh-scope *::after {\n  box-sizing: border-box;\n}\n.ssh-scope img,\n.ssh-scope svg {\n  max-width: 100%;\n}\n.ssh-scope a {\n  color: inherit;\n  text-decoration: none;\n}\n.ssh-scope button {\n  font-family: inherit;\n}\n\n/* colour + token helpers (kept literal so there is no theme dependency) */\n:root {\n  --ssh-brand: #0073b1;\n  --ssh-brand-strong: #007fc0;\n  --ssh-ink: #1a1c1e;\n  --ssh-muted: #5f6368;\n  --ssh-line: #e0e0e0;\n  --ssh-line-soft: #f1f3f4;\n  --ssh-surface: #fff;\n  --ssh-hover: #f8f9fa;\n  --ssh-danger: #d32f2f;\n}\n\n/* ---- header bar ------------------------------------------------------------ */\n.ssh-header {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  height: 64px;\n  width: 100%;\n  background: var(--ssh-surface);\n  color: var(--ssh-ink);\n  border-bottom: 1px solid var(--ssh-line);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n}\n.ssh-header__inner {\n  width: 100%;\n  max-width: 100%;\n  padding: 0 24px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.ssh-header__left,\n.ssh-header__center,\n.ssh-header__right {\n  display: flex;\n  align-items: center;\n}\n.ssh-header__left {\n  gap: 8px;\n}\n.ssh-header__right {\n  gap: 4px;\n  margin: 10px 0;\n}\n.ssh-header__actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n/* ---- logo ------------------------------------------------------------------ */\n.ssh-logo {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ssh-logo--full {\n  width: 200px;\n  max-width: 200px;\n}\n.ssh-logo--full svg,\n.ssh-logo--small svg {\n  height: 40px;\n  width: auto;\n}\n.ssh-logo--small {\n  display: none;\n}\n\n/* ---- primitives: buttons --------------------------------------------------- */\n.ssh-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1.2;\n  padding: 10px 16px;\n  border: 1px solid transparent;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--ssh-ink);\n  cursor: pointer;\n  text-transform: none;\n  transition:\n    background 0.2s ease,\n    color 0.2s ease,\n    border-color 0.2s ease;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.ssh-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.ssh-btn--primary {\n  background: var(--ssh-brand);\n  color: #fff;\n  border-color: var(--ssh-brand);\n}\n.ssh-btn--primary:hover:not(:disabled) {\n  background: #005a8b;\n  border-color: #005a8b;\n}\n.ssh-btn--outline {\n  background: transparent;\n  color: var(--ssh-muted);\n  border-color: var(--ssh-line);\n}\n.ssh-btn--outline:hover:not(:disabled) {\n  color: var(--ssh-brand);\n  border-color: var(--ssh-brand);\n  background: rgba(0, 115, 177, 0.04);\n}\n.ssh-btn--danger {\n  background: var(--ssh-danger);\n  color: #fff;\n  border-color: var(--ssh-danger);\n}\n.ssh-btn--danger:hover:not(:disabled) {\n  background: #b71c1c;\n  border-color: #b71c1c;\n}\n.ssh-btn--ghost {\n  background: transparent;\n  color: var(--ssh-muted);\n}\n.ssh-btn--ghost:hover:not(:disabled) {\n  background: rgba(0, 115, 177, 0.04);\n}\n.ssh-btn--block {\n  width: 100%;\n}\n\n/* ---- primitives: icon trigger --------------------------------------------- */\n.ssh-icon-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n  padding: 6px;\n  border: 0;\n  background: transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  color: #808080;\n  transition: background 0.2s ease;\n}\n.ssh-icon-trigger:hover {\n  background: var(--ssh-hover);\n}\n.ssh-icon-trigger svg {\n  width: 32px;\n  height: 32px;\n  color: currentColor;\n}\n\n/* ---- primitives: avatar ---------------------------------------------------- */\n.ssh-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  overflow: hidden;\n  background: #ccc;\n  color: var(--ssh-ink);\n  font-weight: 600;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.ssh-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* ---- primitives: badge ----------------------------------------------------- */\n.ssh-badge {\n  position: relative;\n  display: inline-flex;\n}\n.ssh-badge__count {\n  position: absolute;\n  top: -4px;\n  right: -6px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  background: var(--ssh-danger);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 18px;\n  text-align: center;\n}\n\n/* ---- primitives: dropdown panel ------------------------------------------- */\n.ssh-dropdown {\n  position: absolute;\n  top: 60px;\n  right: 0;\n  background: var(--ssh-surface);\n  border: 1px solid var(--ssh-line);\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n  z-index: 1100;\n  padding: 16px;\n}\n.ssh-dropdown--profile {\n  width: 280px;\n  padding: 0;\n  overflow: hidden;\n}\n[dir="rtl"] .ssh-dropdown {\n  right: auto;\n  left: 0;\n}\n\n/* custom scrollbar for scrollable panels */\n.ssh-scroll {\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.ssh-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n.ssh-scroll::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 10px;\n}\n.ssh-scroll::-webkit-scrollbar-thumb {\n  background: #ccc;\n  border-radius: 10px;\n}\n.ssh-scroll::-webkit-scrollbar-thumb:hover {\n  background: #bbb;\n}\n\n/* ---- desktop nav menu ------------------------------------------------------ */\n.ssh-nav {\n  display: flex;\n}\n.ssh-menu {\n  display: flex;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.ssh-menu__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 16px;\n}\n.ssh-menu__link {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 4px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2a2a2a;\n  transition: color 0.2s ease;\n}\n.ssh-menu__link:hover {\n  color: var(--ssh-brand);\n}\n.ssh-menu__caret {\n  width: 14px;\n  height: 14px;\n  transition: transform 0.2s ease;\n}\n.ssh-menu__item:hover .ssh-menu__caret {\n  transform: rotate(180deg);\n}\n.ssh-submenu {\n  position: absolute;\n  top: 150%;\n  left: 0;\n  width: 220px;\n  background: #fff;\n  border: 1px solid #e2e8f0;\n  border-top: 3px solid var(--ssh-brand);\n  border-radius: 4px;\n  box-shadow:\n    0 12px 48px rgba(0, 0, 0, 0.12),\n    0 4px 16px rgba(0, 0, 0, 0.08);\n  list-style: none;\n  margin: 0;\n  padding: 8px 0;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(12px);\n  transition:\n    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    visibility 0.25s;\n  z-index: 1000;\n}\n.ssh-menu__item:hover .ssh-submenu {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n.ssh-submenu li {\n  list-style: none;\n}\n.ssh-submenu__link {\n  display: block;\n  padding: 12px 28px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: #2a2a2a;\n  white-space: normal;\n  transition: all 0.2s ease;\n}\n.ssh-submenu__link:hover {\n  background: #f0f7fb;\n  color: var(--ssh-brand);\n  padding-left: 32px;\n}\n\n/* ---- mobile nav menu ------------------------------------------------------- */\n.ssh-mobile-menu {\n  position: fixed;\n  left: 0;\n  top: 64px;\n  width: 100%;\n  height: 95vh;\n  background: #fff;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n  padding: 8px 20px 12px;\n  overflow-y: auto;\n}\n.ssh-mobile-menu__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  margin-bottom: 4px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #1a1c1e;\n  border-bottom: 1px solid var(--ssh-line-soft);\n}\n.ssh-mobile-submenu {\n  list-style: none;\n  margin: 0;\n  padding-left: 15px;\n  background: #fbfbfc;\n}\n.ssh-mobile-submenu__link {\n  display: block;\n  padding: 12px 32px;\n  font-size: 14px;\n  font-weight: 400;\n  color: #4a4d50;\n}\n\n/* ---- app menu grid --------------------------------------------------------- */\n.ssh-apps {\n  padding: 16px;\n  background: #fff;\n  max-height: 450px;\n  min-width: 320px;\n}\n.ssh-apps__grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n}\n.ssh-apps__item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 8px;\n  padding: 12px 8px;\n  border: 0;\n  border-radius: 12px;\n  background: transparent;\n  cursor: pointer;\n  text-align: center;\n  transition: background 0.2s ease;\n}\n.ssh-apps__item:hover {\n  background: var(--ssh-hover);\n}\n.ssh-apps__icon {\n  width: 40px;\n  height: 40px;\n  object-fit: contain;\n}\n.ssh-apps__label {\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--ssh-ink);\n  word-break: break-word;\n}\n\n/* ---- language dropdown ----------------------------------------------------- */\n.ssh-lang-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n  padding: 4px;\n  border: 0;\n  background: transparent;\n  color: #777;\n  cursor: pointer;\n}\n.ssh-lang-trigger__flag {\n  width: 40px;\n  height: auto;\n  aspect-ratio: 3 / 2;\n  object-fit: cover;\n}\n.ssh-lang {\n  max-width: 333px;\n  min-width: 333px;\n}\n.ssh-lang__list {\n  list-style: none;\n  margin: 0;\n  padding: 0 16px 0 0;\n  max-height: 300px;\n}\n.ssh-lang__item {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 0;\n  border-bottom: 1px solid var(--ssh-line-soft);\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n.ssh-lang__item:last-child {\n  border-bottom: 0;\n}\n.ssh-lang__item:hover {\n  background: var(--ssh-hover);\n}\n.ssh-lang__flag {\n  width: 40px;\n  height: 26px;\n  aspect-ratio: 3 / 2;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n.ssh-lang__label {\n  font-size: 16px;\n  font-weight: 500;\n  margin: 0;\n}\n.ssh-lang__check {\n  width: 24px;\n  height: 24px;\n  color: var(--ssh-brand-strong);\n  margin-left: auto;\n}\n\n/* ---- notification dropdown ------------------------------------------------- */\n.ssh-notif {\n  min-width: 420px;\n  max-width: 460px;\n}\n.ssh-notif__tabs {\n  display: flex;\n  border-bottom: 1px solid var(--ssh-line);\n  margin-bottom: 16px;\n}\n.ssh-notif__tab {\n  padding: 8px 20px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  background: transparent;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--ssh-muted);\n  text-transform: capitalize;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.ssh-notif__tab:hover {\n  background: rgba(0, 115, 177, 0.04);\n}\n.ssh-notif__tab--active {\n  font-weight: 600;\n  color: var(--ssh-brand);\n  border-bottom-color: var(--ssh-brand);\n}\n.ssh-notif__title {\n  font-size: 16px;\n  font-weight: 500;\n  color: #000;\n  margin: 4px 0;\n}\n.ssh-notif__list {\n  max-height: 300px;\n  padding-right: 5px;\n}\n.ssh-notif__item {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 16px;\n  cursor: pointer;\n}\n.ssh-notif__item:hover {\n  background: var(--ssh-hover);\n}\n.ssh-notif__body {\n  flex: 1;\n}\n.ssh-notif__name {\n  font-size: 16px;\n  font-weight: 500;\n  color: #000;\n  margin: 0;\n}\n.ssh-notif__meta {\n  font-size: 14px;\n  color: #666;\n}\n.ssh-notif__link {\n  color: rgb(25, 118, 210);\n  margin-left: 5px;\n  cursor: pointer;\n}\n.ssh-notif__empty,\n.ssh-notif__loader {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 12px;\n  color: #000;\n}\n\n/* ---- user profile menu ----------------------------------------------------- */\n.ssh-profile {\n  position: relative;\n}\n.ssh-profile__trigger {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n}\n.ssh-profile__head {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 16px;\n  background: var(--ssh-hover);\n  border-bottom: 1px solid var(--ssh-line-soft);\n}\n.ssh-profile__avatar {\n  width: 65px;\n  height: 65px;\n  border: 2px solid #fff;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  font-size: 22px;\n}\n.ssh-profile__id {\n  flex: 1;\n  min-width: 0;\n}\n.ssh-profile__name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--ssh-ink);\n  margin: 0;\n}\n.ssh-profile__email {\n  font-size: 13px;\n  color: var(--ssh-muted);\n  margin: 2px 0 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ssh-profile__role {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--ssh-brand);\n  text-transform: uppercase;\n  margin-top: 2px;\n}\n.ssh-profile__menu {\n  list-style: none;\n  margin: 0;\n  padding: 8px 0;\n}\n.ssh-profile__item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  cursor: pointer;\n  color: var(--ssh-ink);\n  transition:\n    background 0.2s ease,\n    color 0.2s ease;\n}\n.ssh-profile__item:hover {\n  background: var(--ssh-hover);\n  color: var(--ssh-brand);\n}\n.ssh-profile__item--danger {\n  border-top: 1px solid var(--ssh-line-soft);\n}\n.ssh-profile__item--danger:hover {\n  color: var(--ssh-danger);\n}\n.ssh-profile__item-icon {\n  width: 25px;\n  height: 25px;\n  color: currentColor;\n  flex-shrink: 0;\n}\n.ssh-profile__item-label {\n  font-size: 14px;\n  font-weight: 400;\n  margin: 0;\n}\n\n/* ---- dialog ---------------------------------------------------------------- */\n.ssh-dialog-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 1300;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  background: rgba(0, 0, 0, 0.5);\n}\n.ssh-dialog {\n  width: 100%;\n  max-height: calc(100vh - 64px);\n  overflow-y: auto;\n  background: #fff;\n  border-radius: 16px;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);\n}\n.ssh-dialog--xs {\n  max-width: 400px;\n}\n.ssh-dialog--sm {\n  max-width: 600px;\n}\n.ssh-dialog--md {\n  max-width: 900px;\n}\n.ssh-dialog__close-row {\n  display: flex;\n  justify-content: flex-end;\n  padding: 12px;\n}\n.ssh-dialog__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  border: 0;\n  border-radius: 50%;\n  background: #f5f5f5;\n  color: var(--ssh-muted);\n  cursor: pointer;\n}\n.ssh-dialog__close:hover {\n  background: #eee;\n  color: #111;\n}\n.ssh-dialog__close svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* danger / confirm dialog */\n.ssh-danger {\n  padding: 24px;\n}\n.ssh-danger__icon {\n  color: var(--ssh-danger);\n  width: 48px;\n  height: 48px;\n}\n.ssh-danger__title {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--ssh-ink);\n  margin: 16px 0 0;\n}\n.ssh-danger__desc {\n  font-size: 15px;\n  font-weight: 400;\n  color: var(--ssh-muted);\n  margin: 8px 0 0;\n}\n.ssh-danger__actions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-top: 24px;\n}\n\n/* ---- form field ------------------------------------------------------------ */\n.ssh-field {\n  display: block;\n}\n.ssh-field__label {\n  display: block;\n  padding: 13px 0 4px 1px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n  line-height: normal;\n}\n.ssh-field__req {\n  color: var(--ssh-danger);\n  margin-left: 2px;\n}\n.ssh-input-wrap {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ssh-input {\n  width: 100%;\n  height: 40px;\n  padding: 0 14px;\n  font-family: inherit;\n  font-size: 14px;\n  color: var(--ssh-ink);\n  background: #fff;\n  border: 1px solid var(--ssh-line);\n  border-radius: 20px;\n  outline: none;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease;\n}\n.ssh-input::placeholder {\n  color: #9aa0a6;\n}\n.ssh-input:focus {\n  border-color: var(--ssh-brand);\n  box-shadow: 0 0 0 3px rgba(0, 115, 177, 0.12);\n}\n.ssh-input:disabled {\n  background: #e9e6e6;\n}\n.ssh-input--has-toggle {\n  padding-right: 42px;\n}\n.ssh-input__toggle {\n  position: absolute;\n  right: 12px;\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  color: gray;\n}\n.ssh-input__toggle svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* ---- view profile dialog --------------------------------------------------- */\n.ssh-vp {\n  padding: 0 24px 40px;\n}\n.ssh-vp__grid {\n  display: grid;\n  grid-template-columns: 5fr 7fr;\n  gap: 48px;\n  margin-top: 12px;\n}\n.ssh-vp__avatar {\n  width: 150px;\n  height: 150px;\n  border: 4px solid var(--ssh-brand);\n  box-shadow: 0 8px 24px rgba(0, 115, 177, 0.15);\n  margin-bottom: 32px;\n  font-size: 44px;\n}\n.ssh-vp__side {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  margin-left: 16px;\n}\n.ssh-vp__section-label {\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--ssh-ink);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin: 0 0 12px;\n}\n.ssh-vp__row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ssh-vp__value {\n  font-size: 15px;\n  color: var(--ssh-muted);\n}\n.ssh-vp__chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.ssh-chip {\n  display: inline-flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 12px;\n  border: 1px solid var(--ssh-line);\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--ssh-ink);\n}\n.ssh-vp__name {\n  font-size: 28px;\n  font-weight: 700;\n  color: var(--ssh-ink);\n  margin: 0;\n}\n.ssh-vp__title {\n  font-size: 16px;\n  color: var(--ssh-brand);\n  font-weight: 600;\n  margin: 4px 0 16px;\n}\n.ssh-vp__bio {\n  font-size: 15px;\n  line-height: 1.7;\n  color: var(--ssh-muted);\n}\n.ssh-vp__divider {\n  height: 1px;\n  background: var(--ssh-line-soft);\n  border: 0;\n  margin: 20px 0;\n}\n.ssh-vp__link {\n  color: var(--ssh-brand);\n  font-weight: 500;\n  cursor: pointer;\n}\n.ssh-vp__socials {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n}\n.ssh-vp__social {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  background: var(--ssh-brand);\n  color: #fff;\n  transition:\n    background 0.2s ease,\n    transform 0.2s ease;\n}\n.ssh-vp__social:hover {\n  background: #005a8b;\n  transform: translateY(-2px);\n}\n.ssh-vp__social svg {\n  width: 18px;\n  height: 18px;\n}\n.ssh-vp__facts {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 20px;\n  background: #f9fafb;\n  border: 1px solid var(--ssh-line-soft);\n  border-radius: 12px;\n  margin: 24px 0;\n}\n.ssh-vp__fact {\n  display: flex;\n  gap: 12px;\n}\n.ssh-vp__fact-label {\n  font-weight: 600;\n  color: var(--ssh-ink);\n  min-width: 80px;\n  font-size: 15px;\n}\n.ssh-vp__section {\n  margin-bottom: 20px;\n}\n\n/* ---- change password (dialog body) ---------------------------------------- */\n.ssh-cp {\n  padding: 0 24px 32px;\n}\n.ssh-cp__title {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--ssh-ink);\n  margin: 0 0 20px;\n}\n.ssh-cp__card {\n  padding: 24px;\n  background: #fff;\n  border: 1px solid var(--ssh-line-soft);\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n/* ---- previous-login banner ------------------------------------------------- */\n.ssh-banner {\n  width: 100%;\n  padding: 6px 12px;\n  margin-top: 64px;\n  background: var(--ssh-brand-strong);\n  color: #fff;\n  text-align: center;\n  font-size: 14px;\n  text-transform: capitalize;\n}\n.ssh-banner__link {\n  cursor: pointer;\n  text-decoration: underline;\n  font-weight: 600;\n}\n\n/* ---- misc elements --------------------------------------------------------- */\n.ssh-warning {\n  display: flex;\n  gap: 8px;\n  margin-top: 16px;\n}\n.ssh-warning__text {\n  font-size: 14px;\n  color: var(--ssh-muted);\n}\n.ssh-error-msg {\n  display: block;\n  color: var(--ssh-danger);\n  font-size: 13px;\n  font-weight: 600;\n  margin-top: 4px;\n}\n.ssh-back {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin-right: 8px;\n  cursor: pointer;\n}\n.ssh-spin {\n  animation: ssh-spin 0.8s linear infinite;\n}\n@keyframes ssh-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ---- responsive ------------------------------------------------------------ */\n@media (max-width: 1324px) {\n  .ssh-nav--desktop {\n    display: none;\n  }\n}\n@media (min-width: 1325px) {\n  .ssh-hamburger {\n    display: none;\n  }\n}\n@media (max-width: 600px) {\n  .ssh-header__inner {\n    padding: 0 12px;\n  }\n  .ssh-logo--full {\n    display: none;\n  }\n  .ssh-logo--small {\n    display: flex;\n  }\n  .ssh-notif,\n  .ssh-lang {\n    min-width: 280px;\n    max-width: 90vw;\n  }\n  .ssh-dropdown--profile {\n    width: 280px;\n  }\n  .ssh-vp__grid {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n  .ssh-icon-trigger svg {\n    width: 26px;\n    height: 26px;\n  }\n}'));
+      elementStyle.appendChild(document.createTextNode('@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");\n\n/* ==========================================================================\n   SixSeconds Header — raw, namespaced CSS.\n\n   Isolation strategy (no MUI, no Shadow DOM):\n   - Every class is prefixed `ssh-`, so the host app can never accidentally\n     target our elements and our rules can never target the host\'s.\n   - `.ssh-scope` (placed on every top-level rendered node) does `all: initial`,\n     which resets the INHERITED properties (font, color, line-height, …) that\n     would otherwise cascade in from the host — giving our tree a clean baseline.\n     Because `.ssh-scope` is a class (0,1,0) it beats a host `div`/element rule\n     (0,0,x), so it wins without `!important`.\n   - Component rules use single `.ssh-*` classes (0,1,0), which beat any host\n     GLOBAL element selector (`button`, `a`, `ul li`, … all 0,0,x) — so host\n     resets/normalizes cannot restyle our controls. We set every property we\n     care about explicitly, so nothing is left to the host.\n   ========================================================================== */\n\n/* ---- scope / boundary reset ------------------------------------------------ */\n.ssh-scope {\n  all: initial;\n  box-sizing: border-box;\n  display: block;\n  font-family:\n    "Inter",\n    system-ui,\n    -apple-system,\n    "Segoe UI",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1c1e;\n  text-align: left;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.ssh-scope *,\n.ssh-scope *::before,\n.ssh-scope *::after {\n  box-sizing: border-box;\n}\n.ssh-scope img,\n.ssh-scope svg {\n  max-width: 100%;\n}\n.ssh-scope a {\n  color: inherit;\n  text-decoration: none;\n}\n.ssh-scope button {\n  font-family: inherit;\n}\n\n/* colour + token helpers (kept literal so there is no theme dependency) */\n:root {\n  --ssh-brand: #0073b1;\n  --ssh-brand-strong: #007fc0;\n  --ssh-brand-soft: rgba(0, 115, 177, 0.08);\n  --ssh-ink: #1a1c1e;\n  --ssh-muted: #5f6368;\n  --ssh-line: #e0e0e0;\n  --ssh-line-soft: #f1f3f4;\n  --ssh-surface: #fff;\n  --ssh-hover: #f8f9fa;\n  --ssh-danger: #d32f2f;\n  --ssh-danger-soft: rgba(211, 47, 47, 0.08);\n  /* layered elevation for panels + dialogs */\n  --ssh-shadow-panel: 0 2px 4px rgba(16, 24, 40, 0.04), 0 12px 32px -8px rgba(16, 24, 40, 0.16);\n  --ssh-shadow-dialog: 0 4px 8px rgba(16, 24, 40, 0.06), 0 24px 56px -12px rgba(16, 24, 40, 0.28);\n  --ssh-radius: 14px;\n  --ssh-ease: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n/* ---- motion primitives ----------------------------------------------------- */\n@keyframes ssh-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes ssh-pop-in {\n  from {\n    opacity: 0;\n    transform: translateY(-8px) scale(0.97);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n@keyframes ssh-dialog-in {\n  from {\n    opacity: 0;\n    transform: translateY(12px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .ssh-scope *,\n  .ssh-dialog-overlay,\n  .ssh-dialog,\n  .ssh-dropdown {\n    animation-duration: 0.001ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.001ms !important;\n  }\n}\n\n/* ---- header bar ------------------------------------------------------------ */\n.ssh-header {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  height: 64px;\n  width: 100%;\n  background: var(--ssh-surface);\n  color: var(--ssh-ink);\n  border-bottom: 1px solid var(--ssh-line);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n}\n.ssh-header__inner {\n  width: 100%;\n  max-width: 100%;\n  padding: 0 24px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.ssh-header__left,\n.ssh-header__center,\n.ssh-header__right {\n  display: flex;\n  align-items: center;\n}\n.ssh-header__left {\n  gap: 8px;\n}\n.ssh-header__right {\n  gap: 4px;\n  margin: 10px 0;\n}\n.ssh-header__actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n/* ---- logo ------------------------------------------------------------------ */\n.ssh-logo {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ssh-logo--full {\n  width: 200px;\n  max-width: 200px;\n}\n.ssh-logo--full svg,\n.ssh-logo--small svg {\n  height: 40px;\n  width: auto;\n}\n.ssh-logo--small {\n  display: none;\n}\n\n/* ---- primitives: buttons --------------------------------------------------- */\n.ssh-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1.2;\n  padding: 10px 16px;\n  border: 1px solid transparent;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--ssh-ink);\n  cursor: pointer;\n  text-transform: none;\n  transition:\n    background 0.2s ease,\n    color 0.2s ease,\n    border-color 0.2s ease;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.ssh-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.ssh-btn--primary {\n  background: var(--ssh-brand);\n  color: #fff;\n  border-color: var(--ssh-brand);\n}\n.ssh-btn--primary:hover:not(:disabled) {\n  background: #005a8b;\n  border-color: #005a8b;\n}\n.ssh-btn--outline {\n  background: transparent;\n  color: var(--ssh-muted);\n  border-color: var(--ssh-line);\n}\n.ssh-btn--outline:hover:not(:disabled) {\n  color: var(--ssh-brand);\n  border-color: var(--ssh-brand);\n  background: rgba(0, 115, 177, 0.04);\n}\n.ssh-btn--danger {\n  background: var(--ssh-danger);\n  color: #fff;\n  border-color: var(--ssh-danger);\n}\n.ssh-btn--danger:hover:not(:disabled) {\n  background: #b71c1c;\n  border-color: #b71c1c;\n}\n.ssh-btn--ghost {\n  background: transparent;\n  color: var(--ssh-muted);\n}\n.ssh-btn--ghost:hover:not(:disabled) {\n  background: rgba(0, 115, 177, 0.04);\n}\n.ssh-btn--block {\n  width: 100%;\n}\n\n/* ---- primitives: icon trigger --------------------------------------------- */\n.ssh-icon-trigger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n  padding: 6px;\n  border: 0;\n  background: transparent;\n  border-radius: 8px;\n  cursor: pointer;\n  color: #808080;\n  transition: background 0.2s ease;\n}\n.ssh-icon-trigger:hover {\n  background: var(--ssh-hover);\n}\n.ssh-icon-trigger svg {\n  width: 32px;\n  height: 32px;\n  color: currentColor;\n}\n\n/* ---- primitives: avatar ---------------------------------------------------- */\n.ssh-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  overflow: hidden;\n  background: #ccc;\n  color: var(--ssh-ink);\n  font-weight: 600;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.ssh-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* ---- primitives: badge ----------------------------------------------------- */\n.ssh-badge {\n  position: relative;\n  display: inline-flex;\n}\n.ssh-badge__count {\n  position: absolute;\n  top: -4px;\n  right: -6px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  background: var(--ssh-danger);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 18px;\n  text-align: center;\n}\n\n/* ---- primitives: dropdown panel ------------------------------------------- */\n.ssh-dropdown {\n  position: absolute;\n  top: 60px;\n  right: 0;\n  background: var(--ssh-surface);\n  border: 1px solid var(--ssh-line-soft);\n  border-radius: var(--ssh-radius);\n  box-shadow: var(--ssh-shadow-panel);\n  z-index: 1100;\n  padding: 16px;\n  transform-origin: top right;\n  animation: ssh-pop-in 0.22s var(--ssh-ease);\n}\n[dir="rtl"] .ssh-dropdown {\n  transform-origin: top left;\n}\n.ssh-dropdown--profile {\n  width: 280px;\n  padding: 0;\n  overflow: hidden;\n}\n[dir="rtl"] .ssh-dropdown {\n  right: auto;\n  left: 0;\n}\n\n/* custom scrollbar for scrollable panels */\n.ssh-scroll {\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.ssh-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n.ssh-scroll::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 10px;\n}\n.ssh-scroll::-webkit-scrollbar-thumb {\n  background: #ccc;\n  border-radius: 10px;\n}\n.ssh-scroll::-webkit-scrollbar-thumb:hover {\n  background: #bbb;\n}\n\n/* ---- desktop nav menu ------------------------------------------------------ */\n.ssh-nav {\n  display: flex;\n}\n.ssh-menu {\n  display: flex;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.ssh-menu__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 16px;\n}\n.ssh-menu__link {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 4px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #2a2a2a;\n  transition: color 0.2s ease;\n}\n.ssh-menu__link:hover {\n  color: var(--ssh-brand);\n}\n.ssh-menu__caret {\n  width: 14px;\n  height: 14px;\n  transition: transform 0.2s ease;\n}\n.ssh-menu__item:hover .ssh-menu__caret {\n  transform: rotate(180deg);\n}\n.ssh-submenu {\n  position: absolute;\n  top: 150%;\n  left: 0;\n  width: 220px;\n  background: #fff;\n  border: 1px solid #e2e8f0;\n  border-top: 3px solid var(--ssh-brand);\n  border-radius: 4px;\n  box-shadow:\n    0 12px 48px rgba(0, 0, 0, 0.12),\n    0 4px 16px rgba(0, 0, 0, 0.08);\n  list-style: none;\n  margin: 0;\n  padding: 8px 0;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(12px);\n  transition:\n    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    visibility 0.25s;\n  z-index: 1000;\n}\n.ssh-menu__item:hover .ssh-submenu {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n.ssh-submenu li {\n  list-style: none;\n}\n.ssh-submenu__link {\n  display: block;\n  padding: 12px 28px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: #2a2a2a;\n  white-space: normal;\n  transition: all 0.2s ease;\n}\n.ssh-submenu__link:hover {\n  background: #f0f7fb;\n  color: var(--ssh-brand);\n  padding-left: 32px;\n}\n\n/* ---- mobile nav menu ------------------------------------------------------- */\n.ssh-mobile-menu {\n  position: fixed;\n  left: 0;\n  top: 64px;\n  width: 100%;\n  height: 95vh;\n  background: #fff;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n  padding: 8px 20px 12px;\n  overflow-y: auto;\n}\n.ssh-mobile-menu__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  margin-bottom: 4px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #1a1c1e;\n  border-bottom: 1px solid var(--ssh-line-soft);\n}\n.ssh-mobile-submenu {\n  list-style: none;\n  margin: 0;\n  padding-left: 15px;\n  background: #fbfbfc;\n}\n.ssh-mobile-submenu__link {\n  display: block;\n  padding: 12px 32px;\n  font-size: 14px;\n  font-weight: 400;\n  color: #4a4d50;\n}\n\n/* ---- app menu grid --------------------------------------------------------- */\n.ssh-apps {\n  padding: 16px;\n  background: #fff;\n  max-height: 450px;\n  min-width: 480px;\n}\n.ssh-apps__grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 10px;\n}\n.ssh-apps__item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 10px;\n  padding: 16px 10px;\n  min-width: 0;\n  border: 1px solid transparent;\n  border-radius: 12px;\n  background: transparent;\n  cursor: pointer;\n  text-align: center;\n  transition:\n    background 0.2s ease,\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    transform 0.2s var(--ssh-ease);\n}\n.ssh-apps__item:hover {\n  background: var(--ssh-surface);\n  border-color: var(--ssh-line-soft);\n  box-shadow: var(--ssh-shadow-panel);\n  transform: translateY(-3px);\n}\n.ssh-apps__icon {\n  width: 40px;\n  height: 40px;\n  object-fit: contain;\n  transition: transform 0.2s var(--ssh-ease);\n}\n.ssh-apps__item:hover .ssh-apps__icon {\n  transform: scale(1.08);\n}\n.ssh-apps__label {\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.3;\n  color: var(--ssh-ink);\n  /* wrap only between whole words — never split a word mid-character */\n  word-break: normal;\n  overflow-wrap: normal;\n  hyphens: none;\n}\n\n/* ---- language dropdown ----------------------------------------------------- */\n.ssh-lang-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n  padding: 4px;\n  border: 0;\n  background: transparent;\n  color: #777;\n  cursor: pointer;\n}\n.ssh-lang-trigger__flag {\n  width: 40px;\n  height: auto;\n  aspect-ratio: 3 / 2;\n  object-fit: cover;\n}\n.ssh-lang {\n  max-width: 333px;\n  min-width: 333px;\n  padding: 8px;\n}\n.ssh-lang__list {\n  list-style: none;\n  margin: 0;\n  padding: 0 4px 0 0;\n  max-height: 320px;\n}\n.ssh-lang__item {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 10px 12px;\n  border-radius: 10px;\n  cursor: pointer;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease;\n}\n.ssh-lang__item:hover {\n  background: var(--ssh-brand-soft);\n}\n.ssh-lang__item:hover .ssh-lang__label {\n  color: var(--ssh-brand);\n}\n.ssh-lang__item--active {\n  background: var(--ssh-brand-soft);\n}\n.ssh-lang__item--active .ssh-lang__label {\n  color: var(--ssh-brand);\n  font-weight: 600;\n}\n.ssh-lang__flag {\n  width: 40px;\n  height: 26px;\n  aspect-ratio: 3 / 2;\n  object-fit: cover;\n  border-radius: 4px;\n  box-shadow: 0 0 0 1px var(--ssh-line-soft);\n  flex-shrink: 0;\n}\n.ssh-lang__label {\n  font-size: 15px;\n  font-weight: 500;\n  margin: 0;\n  transition: color 0.18s ease;\n}\n.ssh-lang__check {\n  width: 22px;\n  height: 22px;\n  color: var(--ssh-brand-strong);\n  margin-left: auto;\n}\n\n/* ---- notification dropdown ------------------------------------------------- */\n.ssh-notif {\n  min-width: 420px;\n  max-width: 460px;\n}\n.ssh-notif__tabs {\n  display: flex;\n  border-bottom: 1px solid var(--ssh-line);\n  margin-bottom: 16px;\n}\n.ssh-notif__tab {\n  padding: 8px 20px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  background: transparent;\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--ssh-muted);\n  text-transform: capitalize;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.ssh-notif__tab:hover {\n  background: rgba(0, 115, 177, 0.04);\n}\n.ssh-notif__tab--active {\n  font-weight: 600;\n  color: var(--ssh-brand);\n  border-bottom-color: var(--ssh-brand);\n}\n.ssh-notif__title {\n  font-size: 16px;\n  font-weight: 500;\n  color: #000;\n  margin: 4px 0;\n}\n.ssh-notif__list {\n  max-height: 300px;\n  padding-right: 5px;\n}\n.ssh-notif__item {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 16px;\n  cursor: pointer;\n}\n.ssh-notif__item:hover {\n  background: var(--ssh-hover);\n}\n.ssh-notif__body {\n  flex: 1;\n}\n.ssh-notif__name {\n  font-size: 16px;\n  font-weight: 500;\n  color: #000;\n  margin: 0;\n}\n.ssh-notif__meta {\n  font-size: 14px;\n  color: #666;\n}\n.ssh-notif__link {\n  color: rgb(25, 118, 210);\n  margin-left: 5px;\n  cursor: pointer;\n}\n.ssh-notif__empty,\n.ssh-notif__loader {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 12px;\n  color: #000;\n}\n\n/* ---- user profile menu ----------------------------------------------------- */\n.ssh-profile {\n  position: relative;\n}\n.ssh-profile__trigger {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n}\n.ssh-profile__head {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 20px 16px;\n  background: linear-gradient(135deg, rgba(0, 115, 177, 0.1), rgba(0, 127, 192, 0.02));\n  border-bottom: 1px solid var(--ssh-line-soft);\n}\n.ssh-profile__avatar {\n  width: 64px;\n  height: 64px;\n  border: 3px solid #fff;\n  box-shadow:\n    0 0 0 1px var(--ssh-line-soft),\n    0 4px 12px rgba(0, 115, 177, 0.2);\n  font-size: 22px;\n}\n.ssh-profile__id {\n  flex: 1;\n  min-width: 0;\n}\n.ssh-profile__name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--ssh-ink);\n  margin: 0;\n}\n.ssh-profile__email {\n  font-size: 13px;\n  color: var(--ssh-muted);\n  margin: 2px 0 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ssh-profile__role {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--ssh-brand);\n  text-transform: uppercase;\n  margin-top: 2px;\n}\n.ssh-profile__menu {\n  list-style: none;\n  margin: 0;\n  padding: 8px;\n}\n.ssh-profile__item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 11px 12px;\n  border-radius: 10px;\n  cursor: pointer;\n  color: var(--ssh-ink);\n  transition:\n    background 0.18s ease,\n    color 0.18s ease;\n}\n.ssh-profile__item:hover {\n  background: var(--ssh-brand-soft);\n  color: var(--ssh-brand);\n}\n.ssh-profile__item--danger {\n  margin-top: 6px;\n  position: relative;\n}\n.ssh-profile__item--danger::before {\n  content: "";\n  position: absolute;\n  top: -3px;\n  left: 12px;\n  right: 12px;\n  height: 1px;\n  background: var(--ssh-line-soft);\n}\n.ssh-profile__item--danger:hover {\n  background: var(--ssh-danger-soft);\n  color: var(--ssh-danger);\n}\n.ssh-profile__item-icon {\n  width: 25px;\n  height: 25px;\n  color: currentColor;\n  flex-shrink: 0;\n}\n.ssh-profile__item-label {\n  font-size: 14px;\n  font-weight: 400;\n  margin: 0;\n}\n\n/* ---- dialog ---------------------------------------------------------------- */\n.ssh-dialog-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 1300;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  background: rgba(16, 24, 40, 0.5);\n  -webkit-backdrop-filter: blur(4px);\n  backdrop-filter: blur(4px);\n  animation: ssh-fade-in 0.2s ease;\n}\n.ssh-dialog {\n  position: relative;\n  width: 100%;\n  max-height: calc(100vh - 64px);\n  overflow-y: auto;\n  background: #fff;\n  border-radius: 18px;\n  box-shadow: var(--ssh-shadow-dialog);\n  animation: ssh-dialog-in 0.28s var(--ssh-ease);\n}\n.ssh-dialog--xs {\n  max-width: 400px;\n}\n.ssh-dialog--sm {\n  max-width: 600px;\n}\n.ssh-dialog--md {\n  max-width: 900px;\n}\n.ssh-dialog__close-row {\n  position: sticky;\n  top: 0;\n  display: flex;\n  justify-content: flex-end;\n  padding: 12px;\n  z-index: 1;\n}\n.ssh-dialog__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  border: 0;\n  border-radius: 50%;\n  background: #f2f4f7;\n  color: var(--ssh-muted);\n  cursor: pointer;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease,\n    transform 0.18s ease;\n}\n.ssh-dialog__close:hover {\n  background: #e4e7ec;\n  color: #111;\n  transform: rotate(90deg);\n}\n.ssh-dialog__close svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* danger / confirm dialog */\n.ssh-danger {\n  padding: 8px 28px 28px;\n  text-align: center;\n}\n.ssh-danger__icon {\n  color: var(--ssh-danger);\n  width: 40px;\n  height: 40px;\n  padding: 14px;\n  border-radius: 50%;\n  background: var(--ssh-danger-soft);\n  box-sizing: content-box;\n}\n.ssh-danger__title {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--ssh-ink);\n  margin: 16px 0 0;\n}\n.ssh-danger__desc {\n  font-size: 15px;\n  font-weight: 400;\n  color: var(--ssh-muted);\n  margin: 8px 0 0;\n}\n.ssh-danger__actions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-top: 24px;\n}\n\n/* ---- form field ------------------------------------------------------------ */\n.ssh-field {\n  display: block;\n}\n.ssh-field__label {\n  display: block;\n  padding: 13px 0 4px 1px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n  line-height: normal;\n}\n.ssh-field__req {\n  color: var(--ssh-danger);\n  margin-left: 2px;\n}\n.ssh-input-wrap {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ssh-input {\n  width: 100%;\n  height: 40px;\n  padding: 0 14px;\n  font-family: inherit;\n  font-size: 14px;\n  color: var(--ssh-ink);\n  background: #fff;\n  border: 1px solid var(--ssh-line);\n  border-radius: 20px;\n  outline: none;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease;\n}\n.ssh-input::placeholder {\n  color: #9aa0a6;\n}\n.ssh-input:focus {\n  border-color: var(--ssh-brand);\n  box-shadow: 0 0 0 3px rgba(0, 115, 177, 0.12);\n}\n.ssh-input:disabled {\n  background: #e9e6e6;\n}\n.ssh-input--has-toggle {\n  padding-right: 42px;\n}\n.ssh-input__toggle {\n  position: absolute;\n  right: 12px;\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  color: gray;\n}\n.ssh-input__toggle svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* ---- view profile dialog --------------------------------------------------- */\n.ssh-vp {\n  padding: 0 24px 40px;\n}\n.ssh-vp__grid {\n  display: grid;\n  grid-template-columns: 5fr 7fr;\n  gap: 48px;\n  margin-top: 12px;\n}\n.ssh-vp__avatar {\n  width: 150px;\n  height: 150px;\n  border: 4px solid var(--ssh-brand);\n  box-shadow: 0 8px 24px rgba(0, 115, 177, 0.15);\n  margin-bottom: 32px;\n  font-size: 44px;\n}\n.ssh-vp__side {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  margin-left: 16px;\n}\n.ssh-vp__section-label {\n  font-size: 14px;\n  font-weight: 700;\n  color: var(--ssh-ink);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin: 0 0 12px;\n}\n.ssh-vp__row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ssh-vp__value {\n  font-size: 15px;\n  color: var(--ssh-muted);\n}\n.ssh-vp__chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.ssh-chip {\n  display: inline-flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 12px;\n  border: 1px solid var(--ssh-line);\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--ssh-ink);\n}\n.ssh-vp__name {\n  font-size: 28px;\n  font-weight: 700;\n  color: var(--ssh-ink);\n  margin: 0;\n}\n.ssh-vp__title {\n  font-size: 16px;\n  color: var(--ssh-brand);\n  font-weight: 600;\n  margin: 4px 0 16px;\n}\n.ssh-vp__bio {\n  font-size: 15px;\n  line-height: 1.7;\n  color: var(--ssh-muted);\n}\n.ssh-vp__divider {\n  height: 1px;\n  background: var(--ssh-line-soft);\n  border: 0;\n  margin: 20px 0;\n}\n.ssh-vp__link {\n  color: var(--ssh-brand);\n  font-weight: 500;\n  cursor: pointer;\n}\n.ssh-vp__socials {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n}\n.ssh-vp__social {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  background: var(--ssh-brand);\n  color: #fff;\n  transition:\n    background 0.2s ease,\n    transform 0.2s ease;\n}\n.ssh-vp__social:hover {\n  background: #005a8b;\n  transform: translateY(-2px);\n}\n.ssh-vp__social svg {\n  width: 18px;\n  height: 18px;\n}\n.ssh-vp__facts {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 20px;\n  background: #f9fafb;\n  border: 1px solid var(--ssh-line-soft);\n  border-radius: 12px;\n  margin: 24px 0;\n}\n.ssh-vp__fact {\n  display: flex;\n  gap: 12px;\n}\n.ssh-vp__fact-label {\n  font-weight: 600;\n  color: var(--ssh-ink);\n  min-width: 80px;\n  font-size: 15px;\n}\n.ssh-vp__section {\n  margin-bottom: 20px;\n}\n\n/* ---- change password (dialog body) ---------------------------------------- */\n.ssh-cp {\n  padding: 0 24px 32px;\n}\n.ssh-cp__title {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--ssh-ink);\n  margin: 0 0 20px;\n}\n.ssh-cp__card {\n  padding: 24px;\n  background: #fff;\n  border: 1px solid var(--ssh-line-soft);\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n/* ---- previous-login banner ------------------------------------------------- */\n.ssh-banner {\n  width: 100%;\n  padding: 6px 12px;\n  margin-top: 64px;\n  background: var(--ssh-brand-strong);\n  color: #fff;\n  text-align: center;\n  font-size: 14px;\n  text-transform: capitalize;\n}\n.ssh-banner__link {\n  cursor: pointer;\n  text-decoration: underline;\n  font-weight: 600;\n}\n\n/* ---- misc elements --------------------------------------------------------- */\n.ssh-warning {\n  display: flex;\n  gap: 8px;\n  margin-top: 16px;\n}\n.ssh-warning__text {\n  font-size: 14px;\n  color: var(--ssh-muted);\n}\n.ssh-error-msg {\n  display: block;\n  color: var(--ssh-danger);\n  font-size: 13px;\n  font-weight: 600;\n  margin-top: 4px;\n}\n.ssh-back {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  margin-right: 8px;\n  cursor: pointer;\n}\n.ssh-spin {\n  animation: ssh-spin 0.8s linear infinite;\n}\n@keyframes ssh-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ---- responsive ------------------------------------------------------------ */\n@media (max-width: 1324px) {\n  .ssh-nav--desktop {\n    display: none;\n  }\n}\n@media (min-width: 1325px) {\n  .ssh-hamburger {\n    display: none;\n  }\n}\n@media (max-width: 600px) {\n  .ssh-header__inner {\n    padding: 0 12px;\n  }\n  .ssh-logo--full {\n    display: none;\n  }\n  .ssh-logo--small {\n    display: flex;\n  }\n  .ssh-notif,\n  .ssh-lang {\n    min-width: 280px;\n    max-width: 90vw;\n  }\n  .ssh-apps {\n    min-width: 300px;\n    max-width: 92vw;\n  }\n  .ssh-dropdown--profile {\n    width: 280px;\n  }\n  .ssh-vp__grid {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n  .ssh-icon-trigger svg {\n    width: 26px;\n    height: 26px;\n  }\n}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {