sixseconds-modules 3.0.28 → 3.0.30

package/dist/components/common/Avatar.d.ts

@@ -6,5 +6,5 @@ interface Props {
     children?: ReactNode;
 }
 /** Circular avatar; renders the image when `src` is set, otherwise `children` (initials). */
-export declare function Avatar({ src, alt, className, children }: Props): import("react").JSX.Element;
+export declare function Avatar({ src, alt, className, children }: Props): import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/dist/components/common/Badge.d.ts

@@ -5,5 +5,5 @@ interface Props {
     className?: string;
 }
 /** Notification-style count badge on the top-right of its child. */
-export declare function Badge({ count, children, className }: Props): import("react").JSX.Element;
+export declare function Badge({ count, children, className }: Props): import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/dist/components/common/Btn.d.ts

@@ -6,5 +6,5 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
     isLoading?: boolean;
     block?: boolean;
 }
-export declare function Btn({ variant, btnTitle, isLoading, block, disabled, className, children, type, ...rest }: Props): import("react").JSX.Element;
+export declare function Btn({ variant, btnTitle, isLoading, block, disabled, className, children, type, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export default Btn;

package/dist/components/common/CriticalStyles.d.ts

@@ -5,5 +5,5 @@
  * Deliberately not `<style precedence>` (React 19 only) — the library also
  * supports React 18. See `styles/critical.ts` for the cascade reasoning.
  */
-export declare function CriticalStyles(): import("react").JSX.Element;
+export declare function CriticalStyles(): import("react/jsx-runtime").JSX.Element;
 export default CriticalStyles;

package/dist/components/common/Dialog.d.ts

@@ -13,5 +13,5 @@ interface Props {
  * The overlay carries `ssh-scope` so content is style-isolated even if the
  * dialog is used on its own. Clicking the backdrop closes it.
  */
-export declare function Dialog({ open, onClose, size, showClose, className, children }: Props): import("react").JSX.Element | null;
+export declare function Dialog({ open, onClose, size, showClose, className, children }: Props): import("react/jsx-runtime").JSX.Element | null;
 export default Dialog;

package/dist/components/common/Dropdown.d.ts

@@ -6,5 +6,5 @@ interface Props {
     children: ReactNode;
 }
 /** Absolutely-positioned dropdown panel that closes on outside click. */
-export declare function Dropdown({ onClose, className, style, children }: Props): import("react").JSX.Element;
+export declare function Dropdown({ onClose, className, style, children }: Props): import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/dist/components/common/IconBtn.d.ts

@@ -3,5 +3,5 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
 }
 /** Borderless icon trigger (grid/bell/language/avatar buttons in the header). */
-export declare function IconBtn({ className, children, type, ...rest }: Props): import("react").JSX.Element;
+export declare function IconBtn({ className, children, type, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconBtn;

package/dist/components/common/Input.d.ts

@@ -5,5 +5,5 @@ interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     wrapClassName?: string;
 }
 /** Labeled text/password input. Spreads Formik's getFieldProps (name/value/onChange/onBlur). */
-export declare function LabeledInput({ label, required, type, wrapClassName, className, ...rest }: Props): import("react").JSX.Element;
+export declare function LabeledInput({ label, required, type, wrapClassName, className, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export default LabeledInput;

package/dist/components/common/icons.d.ts

@@ -1,8 +1,8 @@
 import { SVGProps } from 'react';
-export declare const MenuIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const CloseIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const CaretDownIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const EyeOffIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const LockIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-export declare const ExitIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const MenuIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const CaretDownIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const EyeOffIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const LockIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const ExitIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dialogs/ChangePasswordDialog.d.ts

@@ -6,5 +6,5 @@ interface IProps {
     setInitialState: SetStateAction<IState>;
     isOpen: boolean;
 }
-export default function ChangePasswordDialog({ isOpen, email, t, setInitialState }: IProps): import("react").JSX.Element;
+export default function ChangePasswordDialog({ isOpen, email, t, setInitialState }: IProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/dialogs/DangerDialog.d.ts

@@ -7,5 +7,5 @@ interface IProps {
     handleClick: () => void;
     isLoading?: boolean;
 }
-declare function DangerDialog({ open, setInitialState, title, description, buttonTitle, isLoading, handleClick, }: IProps): import("react").JSX.Element;
+declare function DangerDialog({ open, setInitialState, title, description, buttonTitle, isLoading, handleClick, }: IProps): import("react/jsx-runtime").JSX.Element;
 export default DangerDialog;

package/dist/components/dialogs/ViewProfileDialog.d.ts

@@ -5,5 +5,5 @@ interface IProps {
     setInitialState: SetStateAction<IState>;
     isOpen: boolean;
 }
-export default function ViewProfileDialog({ userData, setInitialState, isOpen }: IProps): import("react").JSX.Element;
+export default function ViewProfileDialog({ userData, setInitialState, isOpen }: IProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/elements/BackArrow.d.ts

@@ -4,5 +4,5 @@ interface IProps {
     isBack?: boolean;
     title?: string;
 }
-declare function BackArrow({ style, isBack, title }: IProps): import("react").JSX.Element;
+declare function BackArrow({ style, isBack, title }: IProps): import("react/jsx-runtime").JSX.Element;
 export default BackArrow;

package/dist/components/elements/FormikErrorMsg.d.ts

@@ -2,5 +2,5 @@ interface IProps {
     fieldName: string;
     formik: any;
 }
-declare function FormikErrorMsg({ fieldName, formik }: IProps): import("react").JSX.Element | null;
+declare function FormikErrorMsg({ fieldName, formik }: IProps): import("react/jsx-runtime").JSX.Element | null;
 export default FormikErrorMsg;

package/dist/components/elements/Warning.d.ts

@@ -2,5 +2,5 @@ interface IProps {
     message: string;
     type?: "warning" | "error";
 }
-declare function Warning({ message }: IProps): import("react").JSX.Element;
+declare function Warning({ message }: IProps): import("react/jsx-runtime").JSX.Element;
 export default Warning;

package/dist/components/features/PreviousLoginBanner.d.ts

@@ -5,5 +5,5 @@ interface IProps {
     router?: any;
     style?: CSSProperties;
 }
-export declare function PreviousLoginBanner({ t, router, style }: IProps): import("react").JSX.Element | null;
+export declare function PreviousLoginBanner({ t, router, style }: IProps): import("react/jsx-runtime").JSX.Element | null;
 export default PreviousLoginBanner;

package/dist/components/header/AppMenus.d.ts

@@ -13,5 +13,5 @@ interface Props {
     router: any;
 }
 /** Grid of cross-app shortcuts (the "waffle" menu). */
-declare function AppMenus({ menuItems, setInitialState, t, appName, router }: Props): import("react").JSX.Element;
+declare function AppMenus({ menuItems, setInitialState, t, appName, router }: Props): import("react/jsx-runtime").JSX.Element;
 export default AppMenus;

package/dist/components/header/Header.d.ts

@@ -4,5 +4,5 @@ import { IHeaderProps } from './types';
  * node lives under `.ssh-scope`, so the host application's styles can neither
  * bleed in nor be overridden.
  */
-export declare function Header({ router, frontCustomComponent, endCustomComponents, totallyEndCustomComponent, userData, interFaceLangList, centerCustomComponents, updateInterfaceLang, selectedInterFaceLang, logoutHandler, logo, isNotification, extraMenuOptions, isMenu, isAccessAppMenu, notificationAccessApps, style, className, isMainLogo, isLang, handleSideToggle, t, }: IHeaderProps): import("react").JSX.Element;
+export declare function Header({ router, frontCustomComponent, endCustomComponents, totallyEndCustomComponent, userData, interFaceLangList, centerCustomComponents, updateInterfaceLang, selectedInterFaceLang, logoutHandler, logo, isNotification, extraMenuOptions, isMenu, isAccessAppMenu, notificationAccessApps, style, className, isMainLogo, isLang, handleSideToggle, t, }: IHeaderProps): import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/components/header/Language.d.ts

@@ -7,5 +7,5 @@ interface Props {
     setInitialState: SetStateAction<IState>;
     t: t;
 }
-declare function Language({ interFaceLangList, updateInterfaceLang, selectedInterFaceLang, setInitialState, t }: Props): import("react").JSX.Element;
+declare function Language({ interFaceLangList, updateInterfaceLang, selectedInterFaceLang, setInitialState, t }: Props): import("react/jsx-runtime").JSX.Element;
 export default Language;

package/dist/components/header/Logo.d.ts

@@ -2,5 +2,5 @@ import { CSSProperties } from 'react';
 interface IProps {
     style?: CSSProperties;
 }
-declare function Logo({ style }: IProps): import("react").JSX.Element;
+declare function Logo({ style }: IProps): import("react/jsx-runtime").JSX.Element;
 export default Logo;

package/dist/components/header/MainMenu.d.ts

@@ -4,5 +4,5 @@ interface IProps {
     initialState: IState;
 }
 /** Desktop horizontal nav with hover submenus; collapses to a mobile list. */
-declare function MainMenu({ headerMenuArray, initialState }: IProps): import("react").JSX.Element | null;
+declare function MainMenu({ headerMenuArray, initialState }: IProps): import("react/jsx-runtime").JSX.Element | null;
 export default MainMenu;

package/dist/components/header/Notification.d.ts

@@ -8,5 +8,5 @@ interface Props {
     }[];
     t: t;
 }
-declare function Notification({ setInitialState, notificationAccessApps, initialState, t }: Props): import("react").JSX.Element;
+declare function Notification({ setInitialState, notificationAccessApps, initialState, t }: Props): import("react/jsx-runtime").JSX.Element;
 export default Notification;

package/dist/components/header/UserProfile.d.ts

@@ -7,5 +7,5 @@ interface Props {
     t: t;
     router?: any;
 }
-declare function UserProfile({ t, userData, setInitialState, extraMenuOptions, router }: Props): import("react").JSX.Element;
+declare function UserProfile({ t, userData, setInitialState, extraMenuOptions, router }: Props): import("react/jsx-runtime").JSX.Element;
 export default UserProfile;

package/dist/constants/common.d.ts

@@ -11,7 +11,7 @@ export declare const APP_NAMES: Readonly<{
     ssoAdmin: "SSO Admin";
     cardsHome: "Cards Home";
     cardsAdmin: "Cards Admin";
-    ssoDashboard: "SSO Dashboard";
+    ssoDashboard: "Dashboard";
     thinkific: "E-Learning";
     popup: "Popup";
     resourceLibrary: "Resource Library";

package/dist/index.cjs.js

@@ -353,7 +353,7 @@ const APP_NAMES = Object.freeze({
   ssoAdmin: "SSO Admin",
   cardsHome: "Cards Home",
   cardsAdmin: "Cards Admin",
-  ssoDashboard: "SSO Dashboard",
+  ssoDashboard: "Dashboard",
   thinkific: "E-Learning",
   popup: "Popup",
   resourceLibrary: "Resource Library",
@@ -1503,7 +1503,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\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/* The hamburger / nav-menu triggers only — the three bars read much heavier at\n   32px than the bell or the app grid do, so they get a smaller glyph inside a\n   normal-sized button. Doubled class so this still wins inside the media\n   queries further down the file. */\n.ssh-icon-trigger.ssh-hamburger svg,\n.ssh-icon-trigger.ssh-menu-toggle svg {\n  width: 22px;\n  height: 22px;\n}\n\n.ssh-icon-trigger.ssh-hamburger,\n.ssh-icon-trigger.ssh-menu-toggle {\n  padding: 11px;\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-scope`-prefixed so the anchor colour beats the `.ssh-scope a` reset */\n.ssh-scope .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-scope .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-scope .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-scope .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  /* hugs its content instead of always claiming 95vh of blank white */\n  height: auto;\n  max-height: calc(100vh - 64px);\n  max-height: calc(100dvh - 64px);\n  background: var(--ssh-surface);\n  border-top: 1px solid var(--ssh-line-soft);\n  border-radius: 0 0 16px 16px;\n  box-shadow: var(--ssh-shadow-panel);\n  padding: 8px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\n  animation: ssh-pop-in 0.22s var(--ssh-ease);\n}\n\n.ssh-mobile-menu__item + .ssh-mobile-menu__item {\n  border-top: 1px solid var(--ssh-line-soft);\n}\n\n.ssh-mobile-menu__row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.ssh-scope .ssh-mobile-menu__link {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  min-width: 0;\n  padding: 13px 12px;\n  margin: 2px 0;\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 1.35;\n  color: var(--ssh-ink);\n  border-radius: 10px;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease;\n}\n\n.ssh-scope .ssh-mobile-menu__link:hover,\n.ssh-scope .ssh-mobile-menu__link:active {\n  background: var(--ssh-brand-soft);\n  color: var(--ssh-brand);\n}\n\n.ssh-scope .ssh-mobile-menu__link--active {\n  color: var(--ssh-brand);\n  background: var(--ssh-brand-soft);\n}\n\n/* caret is its own control so the parent row stays a real link */\n.ssh-mobile-menu__toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--ssh-muted);\n  cursor: pointer;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease;\n}\n\n.ssh-mobile-menu__toggle:hover {\n  background: var(--ssh-hover);\n  color: var(--ssh-brand);\n}\n\n.ssh-mobile-menu__caret {\n  width: 18px;\n  height: 18px;\n  transition: transform 0.22s var(--ssh-ease);\n}\n\n.ssh-mobile-menu__toggle--open {\n  color: var(--ssh-brand);\n}\n\n.ssh-mobile-menu__toggle--open .ssh-mobile-menu__caret {\n  transform: rotate(180deg);\n}\n\n.ssh-mobile-submenu {\n  list-style: none;\n  margin: 0 0 6px 22px;\n  padding: 2px 0 2px 10px;\n  border-left: 2px solid var(--ssh-line-soft);\n  background: transparent;\n}\n\n[dir="rtl"] .ssh-mobile-submenu {\n  margin: 0 22px 6px 0;\n  padding: 2px 10px 2px 0;\n  border-left: 0;\n  border-right: 2px solid var(--ssh-line-soft);\n}\n\n.ssh-scope .ssh-mobile-submenu__link {\n  display: block;\n  padding: 10px 12px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--ssh-muted);\n  border-radius: 8px;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease;\n}\n\n.ssh-scope .ssh-mobile-submenu__link:hover,\n.ssh-scope .ssh-mobile-submenu__link:active {\n  background: var(--ssh-brand-soft);\n  color: var(--ssh-brand);\n}\n\n.ssh-scope .ssh-mobile-submenu__link--active {\n  color: var(--ssh-brand);\n  font-weight: 500;\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: 40px;\n  height: auto;\n  aspect-ratio: 3 / 2;\n  object-fit: fill;\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: 40px;\n  height: auto;\n  aspect-ratio: 3 / 2;\n  object-fit: fill;\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: var(--ssh-muted);\n  flex-shrink: 0;\n}\n\n/* these SVGs hard-code a light grey — recolour them from the row so the\n   default, hover (brand) and danger (logout) states all read correctly */\n.ssh-profile__item-icon [stroke]:not([stroke="none"]) {\n  stroke: currentColor;\n}\n\n.ssh-profile__item-icon [fill]:not([fill="none"]):not([fill="white"]) {\n  fill: currentColor;\n}\n\n.ssh-profile__item:hover .ssh-profile__item-icon {\n  color: inherit;\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-scope`-prefixed: these are <a>s, and the boundary reset\n   `.ssh-scope a { color: inherit }` (0,1,1) out-ranks a bare `.ssh-vp__social`\n   (0,1,0) — which made the white icons inherit the dark body ink instead. */\n.ssh-scope .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-scope .ssh-vp__social:hover {\n  background: #005a8b;\n  color: #fff;\n  transform: translateY(-2px);\n}\n\n.ssh-vp__social svg {\n  width: 18px;\n  height: 18px;\n  color: currentColor;\n}\n\n.ssh-vp__social svg [stroke]:not([stroke="none"]) {\n  stroke: currentColor;\n}\n\n.ssh-vp__social svg [fill]:not([fill="none"]):not([fill="white"]) {\n  fill: currentColor;\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/* doubled class so the width wins over `--xs/--sm` regardless of rule order */\n.ssh-dialog.ssh-dialog--cp {\n  max-width: 440px;\n}\n\n.ssh-cp {\n  display: flex;\n  flex-direction: column;\n  padding: 0 28px 28px;\n}\n\n.ssh-cp__head {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.ssh-cp__badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 44px;\n  height: 44px;\n  border-radius: 12px;\n  background: var(--ssh-brand-soft);\n  color: var(--ssh-brand);\n}\n\n.ssh-cp__badge svg {\n  width: 22px;\n  height: 22px;\n}\n\n.ssh-cp__heading {\n  min-width: 0;\n}\n\n.ssh-cp__title {\n  font-size: 19px;\n  font-weight: 700;\n  line-height: 1.3;\n  color: var(--ssh-ink);\n  margin: 0;\n}\n\n.ssh-cp__subtitle {\n  font-size: 13px;\n  color: var(--ssh-muted);\n  margin: 2px 0 0;\n  overflow-wrap: anywhere;\n}\n\n.ssh-cp__fields {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 6px;\n}\n\n.ssh-cp__rules {\n  display: grid;\n  gap: 9px;\n  list-style: none;\n  margin: 20px 0 0;\n  padding: 14px 16px;\n  background: #f9fafb;\n  border: 1px solid var(--ssh-line-soft);\n  border-radius: 12px;\n}\n\n.ssh-cp__rule {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  font-size: 13px;\n  color: var(--ssh-muted);\n  transition:\n    color 0.18s ease,\n    font-weight 0.18s ease;\n}\n\n.ssh-cp__rule svg {\n  flex-shrink: 0;\n  width: 12px;\n  height: 12px;\n  padding: 3px;\n  box-sizing: content-box;\n  border-radius: 50%;\n  background: #d7dae0;\n  color: #fff;\n  transition: background 0.18s ease;\n}\n\n.ssh-cp__rule--ok {\n  color: #067647;\n  font-weight: 500;\n}\n\n.ssh-cp__rule--ok svg {\n  background: #17b26a;\n}\n\n.ssh-cp__submit {\n  height: 44px;\n  margin-top: 22px;\n  border-radius: 22px;\n  font-size: 15px;\n  font-weight: 600;\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: min(86vw, 300px);\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\n  .ssh-mobile-menu {\n    padding: 6px;\n  }\n\n  .ssh-scope .ssh-mobile-menu__link {\n    padding: 12px 10px;\n    font-size: 14.5px;\n  }\n\n  .ssh-mobile-submenu {\n    margin-left: 18px;\n  }\n\n  [dir="rtl"] .ssh-mobile-submenu {\n    margin-right: 18px;\n    margin-left: 0;\n  }\n\n  .ssh-scope .ssh-mobile-submenu__link {\n    padding: 10px;\n    font-size: 13.5px;\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/* ---- 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/* 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/* ---- motion primitives ----------------------------------------------------- */\n@keyframes ssh-fade-in {\n  from {\n    opacity: 0;\n  }\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\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\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/* ---- 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/* ---- 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/* ---- 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/* ---- 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/* The hamburger / nav-menu triggers only — the three bars read much heavier at\n   32px than the bell or the app grid do, so they get a smaller glyph inside a\n   normal-sized button. Doubled class so this still wins inside the media\n   queries further down the file. */\n.ssh-icon-trigger.ssh-hamburger svg,\n.ssh-icon-trigger.ssh-menu-toggle svg {\n  width: 22px;\n  height: 22px;\n}\n.ssh-icon-trigger.ssh-hamburger,\n.ssh-icon-trigger.ssh-menu-toggle {\n  padding: 11px;\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/* ---- 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/* ---- 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/* 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/* ---- 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-scope`-prefixed so the anchor colour beats the `.ssh-scope a` reset */\n.ssh-scope .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-scope .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-scope .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-scope .ssh-submenu__link:hover {\n  background: #f0f7fb;\n  color: var(--ssh-brand);\n  padding-left: 32px;\n}\n/* ---- mobile nav menu ------------------------------------------------------- */\n.ssh-mobile-menu {\n  position: fixed;\n  left: 0;\n  top: 64px;\n  width: 100%;\n  /* hugs its content instead of always claiming 95vh of blank white */\n  height: auto;\n  max-height: calc(100vh - 64px);\n  max-height: calc(100dvh - 64px);\n  background: var(--ssh-surface);\n  border-top: 1px solid var(--ssh-line-soft);\n  border-radius: 0 0 16px 16px;\n  box-shadow: var(--ssh-shadow-panel);\n  padding: 8px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\n  animation: ssh-pop-in 0.22s var(--ssh-ease);\n}\n.ssh-mobile-menu__item + .ssh-mobile-menu__item {\n  border-top: 1px solid var(--ssh-line-soft);\n}\n.ssh-mobile-menu__row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ssh-scope .ssh-mobile-menu__link {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  min-width: 0;\n  padding: 13px 12px;\n  margin: 2px 0;\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 1.35;\n  color: var(--ssh-ink);\n  border-radius: 10px;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease;\n}\n.ssh-scope .ssh-mobile-menu__link:hover,\n.ssh-scope .ssh-mobile-menu__link:active {\n  background: var(--ssh-brand-soft);\n  color: var(--ssh-brand);\n}\n.ssh-scope .ssh-mobile-menu__link--active {\n  color: var(--ssh-brand);\n  background: var(--ssh-brand-soft);\n}\n/* caret is its own control so the parent row stays a real link */\n.ssh-mobile-menu__toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--ssh-muted);\n  cursor: pointer;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease;\n}\n.ssh-mobile-menu__toggle:hover {\n  background: var(--ssh-hover);\n  color: var(--ssh-brand);\n}\n.ssh-mobile-menu__caret {\n  width: 18px;\n  height: 18px;\n  transition: transform 0.22s var(--ssh-ease);\n}\n.ssh-mobile-menu__toggle--open {\n  color: var(--ssh-brand);\n}\n.ssh-mobile-menu__toggle--open .ssh-mobile-menu__caret {\n  transform: rotate(180deg);\n}\n.ssh-mobile-submenu {\n  list-style: none;\n  margin: 0 0 6px 22px;\n  padding: 2px 0 2px 10px;\n  border-left: 2px solid var(--ssh-line-soft);\n  background: transparent;\n}\n[dir="rtl"] .ssh-mobile-submenu {\n  margin: 0 22px 6px 0;\n  padding: 2px 10px 2px 0;\n  border-left: 0;\n  border-right: 2px solid var(--ssh-line-soft);\n}\n.ssh-scope .ssh-mobile-submenu__link {\n  display: block;\n  padding: 10px 12px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--ssh-muted);\n  border-radius: 8px;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease;\n}\n.ssh-scope .ssh-mobile-submenu__link:hover,\n.ssh-scope .ssh-mobile-submenu__link:active {\n  background: var(--ssh-brand-soft);\n  color: var(--ssh-brand);\n}\n.ssh-scope .ssh-mobile-submenu__link--active {\n  color: var(--ssh-brand);\n  font-weight: 500;\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/* ---- 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: fill;\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: auto;\n  aspect-ratio: 3 / 2;\n  object-fit: fill;\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/* ---- 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/* ---- 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: var(--ssh-muted);\n  flex-shrink: 0;\n}\n/* these SVGs hard-code a light grey — recolour them from the row so the\n   default, hover (brand) and danger (logout) states all read correctly */\n.ssh-profile__item-icon [stroke]:not([stroke="none"]) {\n  stroke: currentColor;\n}\n.ssh-profile__item-icon [fill]:not([fill="none"]):not([fill="white"]) {\n  fill: currentColor;\n}\n.ssh-profile__item:hover .ssh-profile__item-icon {\n  color: inherit;\n}\n.ssh-profile__item-label {\n  font-size: 14px;\n  font-weight: 400;\n  margin: 0;\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/* 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/* ---- 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/* ---- 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-scope`-prefixed: these are <a>s, and the boundary reset\n   `.ssh-scope a { color: inherit }` (0,1,1) out-ranks a bare `.ssh-vp__social`\n   (0,1,0) — which made the white icons inherit the dark body ink instead. */\n.ssh-scope .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-scope .ssh-vp__social:hover {\n  background: #005a8b;\n  color: #fff;\n  transform: translateY(-2px);\n}\n.ssh-vp__social svg {\n  width: 18px;\n  height: 18px;\n  color: currentColor;\n}\n.ssh-vp__social svg [stroke]:not([stroke="none"]) {\n  stroke: currentColor;\n}\n.ssh-vp__social svg [fill]:not([fill="none"]):not([fill="white"]) {\n  fill: currentColor;\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/* ---- change password (dialog body) ---------------------------------------- */\n/* doubled class so the width wins over `--xs/--sm` regardless of rule order */\n.ssh-dialog.ssh-dialog--cp {\n  max-width: 440px;\n}\n.ssh-cp {\n  display: flex;\n  flex-direction: column;\n  padding: 0 28px 28px;\n}\n.ssh-cp__head {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n.ssh-cp__badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 44px;\n  height: 44px;\n  border-radius: 12px;\n  background: var(--ssh-brand-soft);\n  color: var(--ssh-brand);\n}\n.ssh-cp__badge svg {\n  width: 22px;\n  height: 22px;\n}\n.ssh-cp__heading {\n  min-width: 0;\n}\n.ssh-cp__title {\n  font-size: 19px;\n  font-weight: 700;\n  line-height: 1.3;\n  color: var(--ssh-ink);\n  margin: 0;\n}\n.ssh-cp__subtitle {\n  font-size: 13px;\n  color: var(--ssh-muted);\n  margin: 2px 0 0;\n  overflow-wrap: anywhere;\n}\n.ssh-cp__fields {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 6px;\n}\n.ssh-cp__rules {\n  display: grid;\n  gap: 9px;\n  list-style: none;\n  margin: 20px 0 0;\n  padding: 14px 16px;\n  background: #f9fafb;\n  border: 1px solid var(--ssh-line-soft);\n  border-radius: 12px;\n}\n.ssh-cp__rule {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  font-size: 13px;\n  color: var(--ssh-muted);\n  transition:\n    color 0.18s ease,\n    font-weight 0.18s ease;\n}\n.ssh-cp__rule svg {\n  flex-shrink: 0;\n  width: 12px;\n  height: 12px;\n  padding: 3px;\n  box-sizing: content-box;\n  border-radius: 50%;\n  background: #d7dae0;\n  color: #fff;\n  transition: background 0.18s ease;\n}\n.ssh-cp__rule--ok {\n  color: #067647;\n  font-weight: 500;\n}\n.ssh-cp__rule--ok svg {\n  background: #17b26a;\n}\n.ssh-cp__submit {\n  height: 44px;\n  margin-top: 22px;\n  border-radius: 22px;\n  font-size: 15px;\n  font-weight: 600;\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/* ---- 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/* ---- 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\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: min(86vw, 300px);\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\n  .ssh-mobile-menu {\n    padding: 6px;\n  }\n\n  .ssh-scope .ssh-mobile-menu__link {\n    padding: 12px 10px;\n    font-size: 14.5px;\n  }\n\n  .ssh-mobile-submenu {\n    margin-left: 18px;\n  }\n\n  [dir="rtl"] .ssh-mobile-submenu {\n    margin-right: 18px;\n    margin-left: 0;\n  }\n\n  .ssh-scope .ssh-mobile-submenu__link {\n    padding: 10px;\n    font-size: 13.5px;\n  }\n}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {