sixseconds-modules 3.0.6 → 3.0.7

package/dist/index.cjs.js

@@ -1380,14 +1380,14 @@ function Header({
               onClick: (e) => handleOpenUtil(e, setState),
               "aria-label": "Language",
               children: [
-                selectedInterFaceLang?.flag ? /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   "img",
                   {
                     className: "ssh-lang-trigger__flag",
                     alt: "language",
-                    src: selectedInterFaceLang.flag || IMAGES.DefaultLang
+                    src: selectedInterFaceLang?.flag || IMAGES.DefaultLang
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(SVG.Globe, { style: { width: 32, height: 32 } }),
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx(SVG.Dawn, {})
               ]
             }
@@ -1471,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-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}'));
+      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\n.ssh-scope *,\n.ssh-scope *::before,\n.ssh-scope *::after {\n  box-sizing: border-box;\n}\n\n.ssh-scope img,\n.ssh-scope svg {\n  max-width: 100%;\n}\n\n.ssh-scope a {\n  color: inherit;\n  text-decoration: none;\n}\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\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes ssh-pop-in {\n  from {\n    opacity: 0;\n    transform: translateY(-8px) scale(0.97);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes ssh-dialog-in {\n  from {\n    opacity: 0;\n    transform: translateY(12px) scale(0.98);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\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\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\n.ssh-header__left,\n.ssh-header__center,\n.ssh-header__right {\n  display: flex;\n  align-items: center;\n}\n\n.ssh-header__left {\n  gap: 8px;\n}\n\n.ssh-header__right {\n  gap: 4px;\n  margin: 10px 0;\n}\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\n.ssh-logo--full {\n  width: 200px;\n  max-width: 200px;\n}\n\n.ssh-logo--full svg,\n.ssh-logo--small svg {\n  height: 40px;\n  width: auto;\n}\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\n.ssh-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.ssh-btn--primary {\n  background: var(--ssh-brand);\n  color: #fff;\n  border-color: var(--ssh-brand);\n}\n\n.ssh-btn--primary:hover:not(:disabled) {\n  background: #005a8b;\n  border-color: #005a8b;\n}\n\n.ssh-btn--outline {\n  background: transparent;\n  color: var(--ssh-muted);\n  border-color: var(--ssh-line);\n}\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\n.ssh-btn--danger {\n  background: var(--ssh-danger);\n  color: #fff;\n  border-color: var(--ssh-danger);\n}\n\n.ssh-btn--danger:hover:not(:disabled) {\n  background: #b71c1c;\n  border-color: #b71c1c;\n}\n\n.ssh-btn--ghost {\n  background: transparent;\n  color: var(--ssh-muted);\n}\n\n.ssh-btn--ghost:hover:not(:disabled) {\n  background: rgba(0, 115, 177, 0.04);\n}\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\n.ssh-icon-trigger:hover {\n  background: var(--ssh-hover);\n}\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\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\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\n[dir="rtl"] .ssh-dropdown {\n  transform-origin: top left;\n}\n\n.ssh-dropdown--profile {\n  width: 280px;\n  padding: 0;\n  overflow: hidden;\n}\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\n.ssh-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n\n.ssh-scroll::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 10px;\n}\n\n.ssh-scroll::-webkit-scrollbar-thumb {\n  background: #ccc;\n  border-radius: 10px;\n}\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\n.ssh-menu {\n  display: flex;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.ssh-menu__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 16px;\n}\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\n.ssh-menu__link:hover {\n  color: var(--ssh-brand);\n}\n\n.ssh-menu__caret {\n  width: 14px;\n  height: 14px;\n  transition: transform 0.2s ease;\n}\n\n.ssh-menu__item:hover .ssh-menu__caret {\n  transform: rotate(180deg);\n}\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\n.ssh-menu__item:hover .ssh-submenu {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.ssh-submenu li {\n  list-style: none;\n}\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\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\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\n.ssh-mobile-submenu {\n  list-style: none;\n  margin: 0;\n  padding-left: 15px;\n  background: #fbfbfc;\n}\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\n.ssh-apps__grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 10px;\n}\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\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\n.ssh-apps__icon {\n  width: 40px;\n  height: 40px;\n  object-fit: contain;\n  transition: transform 0.2s var(--ssh-ease);\n}\n\n.ssh-apps__item:hover .ssh-apps__icon {\n  transform: scale(1.08);\n}\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\n.ssh-lang-trigger__flag {\n  width: 33px;\n  height: 33px;\n  aspect-ratio: 3 / 2;\n  object-fit: cover;\n}\n\n.ssh-lang {\n  max-width: 333px;\n  min-width: 333px;\n  padding: 8px;\n}\n\n.ssh-lang__list {\n  list-style: none;\n  margin: 0;\n  padding: 0 4px 0 0;\n  max-height: 320px;\n}\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\n.ssh-lang__item:hover {\n  background: var(--ssh-brand-soft);\n}\n\n.ssh-lang__item:hover .ssh-lang__label {\n  color: var(--ssh-brand);\n}\n\n.ssh-lang__item--active {\n  background: var(--ssh-brand-soft);\n}\n\n.ssh-lang__item--active .ssh-lang__label {\n  color: var(--ssh-brand);\n  font-weight: 600;\n}\n\n.ssh-lang__flag {\n  width: 33px;\n  height: 33px;\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\n.ssh-lang__label {\n  font-size: 15px;\n  font-weight: 500;\n  margin: 0;\n  transition: color 0.18s ease;\n}\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\n.ssh-notif__tabs {\n  display: flex;\n  border-bottom: 1px solid var(--ssh-line);\n  margin-bottom: 16px;\n}\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\n.ssh-notif__tab:hover {\n  background: rgba(0, 115, 177, 0.04);\n}\n\n.ssh-notif__tab--active {\n  font-weight: 600;\n  color: var(--ssh-brand);\n  border-bottom-color: var(--ssh-brand);\n}\n\n.ssh-notif__title {\n  font-size: 16px;\n  font-weight: 500;\n  color: #000;\n  margin: 4px 0;\n}\n\n.ssh-notif__list {\n  max-height: 300px;\n  padding-right: 5px;\n}\n\n.ssh-notif__item {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.ssh-notif__item:hover {\n  background: var(--ssh-hover);\n}\n\n.ssh-notif__body {\n  flex: 1;\n}\n\n.ssh-notif__name {\n  font-size: 16px;\n  font-weight: 500;\n  color: #000;\n  margin: 0;\n}\n\n.ssh-notif__meta {\n  font-size: 14px;\n  color: #666;\n}\n\n.ssh-notif__link {\n  color: rgb(25, 118, 210);\n  margin-left: 5px;\n  cursor: pointer;\n}\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\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\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\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\n.ssh-profile__id {\n  flex: 1;\n  min-width: 0;\n}\n\n.ssh-profile__name {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--ssh-ink);\n  margin: 0;\n}\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\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\n.ssh-profile__menu {\n  list-style: none;\n  margin: 0;\n  padding: 8px;\n}\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\n.ssh-profile__item:hover {\n  background: var(--ssh-brand-soft);\n  color: var(--ssh-brand);\n}\n\n.ssh-profile__item--danger {\n  margin-top: 6px;\n  position: relative;\n}\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\n.ssh-profile__item--danger:hover {\n  background: var(--ssh-danger-soft);\n  color: var(--ssh-danger);\n}\n\n.ssh-profile__item-icon {\n  width: 25px;\n  height: 25px;\n  color: currentColor;\n  flex-shrink: 0;\n}\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\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\n.ssh-dialog--xs {\n  max-width: 400px;\n}\n\n.ssh-dialog--sm {\n  max-width: 600px;\n}\n\n.ssh-dialog--md {\n  max-width: 900px;\n}\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\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\n.ssh-dialog__close:hover {\n  background: #e4e7ec;\n  color: #111;\n  transform: rotate(90deg);\n}\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\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\n.ssh-danger__title {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--ssh-ink);\n  margin: 16px 0 0;\n}\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\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\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\n.ssh-field__req {\n  color: var(--ssh-danger);\n  margin-left: 2px;\n}\n\n.ssh-input-wrap {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\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\n.ssh-input::placeholder {\n  color: #9aa0a6;\n}\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\n.ssh-input:disabled {\n  background: #e9e6e6;\n}\n\n.ssh-input--has-toggle {\n  padding-right: 42px;\n}\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\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\n.ssh-vp__grid {\n  display: grid;\n  grid-template-columns: 5fr 7fr;\n  gap: 48px;\n  margin-top: 12px;\n}\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\n.ssh-vp__side {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  margin-left: 16px;\n}\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\n.ssh-vp__row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.ssh-vp__value {\n  font-size: 15px;\n  color: var(--ssh-muted);\n}\n\n.ssh-vp__chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\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\n.ssh-vp__name {\n  font-size: 28px;\n  font-weight: 700;\n  color: var(--ssh-ink);\n  margin: 0;\n}\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\n.ssh-vp__bio {\n  font-size: 15px;\n  line-height: 1.7;\n  color: var(--ssh-muted);\n}\n\n.ssh-vp__divider {\n  height: 1px;\n  background: var(--ssh-line-soft);\n  border: 0;\n  margin: 20px 0;\n}\n\n.ssh-vp__link {\n  color: var(--ssh-brand);\n  font-weight: 500;\n  cursor: pointer;\n}\n\n.ssh-vp__socials {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n}\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\n.ssh-vp__social:hover {\n  background: #005a8b;\n  transform: translateY(-2px);\n}\n\n.ssh-vp__social svg {\n  width: 18px;\n  height: 18px;\n}\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\n.ssh-vp__fact {\n  display: flex;\n  gap: 12px;\n}\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\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\n.ssh-cp__title {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--ssh-ink);\n  margin: 0 0 20px;\n}\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\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\n.ssh-warning__text {\n  font-size: 14px;\n  color: var(--ssh-muted);\n}\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\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\n.ssh-spin {\n  animation: ssh-spin 0.8s linear infinite;\n}\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\n@media (min-width: 1325px) {\n  .ssh-hamburger {\n    display: none;\n  }\n}\n\n@media (max-width: 600px) {\n  .ssh-header__inner {\n    padding: 0 12px;\n  }\n\n  .ssh-logo--full {\n    display: none;\n  }\n\n  .ssh-logo--small {\n    display: flex;\n  }\n\n  .ssh-notif,\n  .ssh-lang {\n    min-width: 280px;\n    max-width: 90vw;\n  }\n\n  .ssh-apps {\n    /* anchor to the viewport edge (not the far-left trigger) so it never\n       overflows off-screen on narrow devices */\n    position: fixed;\n    top: 64px;\n    right: 8px;\n    left: auto;\n    min-width: 0;\n    width: min(92vw, 380px);\n    padding: 12px;\n  }\n\n  [dir="rtl"] .ssh-apps {\n    right: auto;\n    left: 8px;\n  }\n\n  .ssh-apps__grid {\n    gap: 6px;\n  }\n\n  .ssh-apps__item {\n    padding: 12px 6px;\n    gap: 8px;\n  }\n\n  .ssh-apps__icon {\n    width: 34px;\n    height: 34px;\n  }\n\n  .ssh-apps__label {\n    font-size: 12px;\n  }\n\n  .ssh-dropdown--profile {\n    width: 280px;\n  }\n\n  .ssh-vp__grid {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n  .ssh-icon-trigger svg {\n    width: 26px;\n    height: 26px;\n  }\n}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {