sixseconds-modules 3.0.25 → 3.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +15 -18
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +15 -18
- package/dist/index.es.js.map +1 -1
- package/dist/styles/critical.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -314,7 +314,7 @@ const SVG = {
|
|
|
314
314
|
RightArrow: SvgRightArrow,
|
|
315
315
|
SmallLogo: SvgSmallLogoProd
|
|
316
316
|
};
|
|
317
|
-
const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "
|
|
317
|
+
const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false, "VITE_MODULES_CARDS_ADMIN_FRONTEND_BASE_URL": "https://admin-cards.6seconds.org", "VITE_MODULES_CARDS_HOME_FRONTEND_BASE_URL": "https://cards.6seconds.org", "VITE_MODULES_CERT_FRONTEND_BASE_URL": "https://cert.6seconds.org", "VITE_MODULES_ENV": "prod", "VITE_MODULES_EVENTS_FRONTEND_BASE_URL": "https://events.6seconds.org", "VITE_MODULES_SSO_BACKEND_BASE_URL": "https://ssoapi.6seconds.org", "VITE_MODULES_SSO_FRONTEND_BASE_URL": "https://sso.6seconds.org", "VITE_MODULES_TOOLS_FRONTEND_BASE_URL": "https://newtools.6seconds.org" };
|
|
318
318
|
const commonValidation = {
|
|
319
319
|
envUrl: zod.z.string().url().min(1).regex(/[^\/]$/, { message: "Must not end with `/`" })
|
|
320
320
|
};
|
|
@@ -689,23 +689,23 @@ const HEADER_CRITICAL_CSS = `
|
|
|
689
689
|
:where(.ssh-logo--full){width:200px;max-width:200px}
|
|
690
690
|
:where(.ssh-logo--full) svg,:where(.ssh-logo--small) svg{height:40px;width:auto;max-width:100%}
|
|
691
691
|
:where(.ssh-logo--small){display:none}
|
|
692
|
-
:where(.ssh-icon-trigger){display:inline-flex;align-items:center;justify-content:center;
|
|
693
|
-
:where(.ssh-icon-trigger) svg{width:
|
|
694
|
-
:where(.ssh-
|
|
695
|
-
:where(
|
|
696
|
-
:where(
|
|
692
|
+
:where(.ssh-icon-trigger){display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px;border:0;border-radius:8px;background:transparent;color:#808080}
|
|
693
|
+
:where(.ssh-icon-trigger) svg{width:32px;height:32px}
|
|
694
|
+
:where(.ssh-hamburger) svg,:where(.ssh-menu-toggle) svg{width:22px;height:22px}
|
|
695
|
+
:where(.ssh-hamburger),:where(.ssh-menu-toggle){padding:11px}
|
|
696
|
+
:where(.ssh-lang-trigger){display:flex;align-items:center;justify-content:center;gap:5px;padding:4px;border:0;background:transparent;color:#777}
|
|
697
|
+
:where(.ssh-lang-trigger__flag){width:40px;height:auto;aspect-ratio:3/2;object-fit:fill}
|
|
697
698
|
:where(.ssh-avatar){display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#ccc;font-size:14px;font-weight:600;flex-shrink:0}
|
|
698
699
|
:where(.ssh-avatar) img{width:100%;height:100%;object-fit:cover}
|
|
699
700
|
:where(.ssh-profile){position:relative}
|
|
700
|
-
:where(.ssh-profile__trigger){display:flex;align-items:center;gap:2px;
|
|
701
|
-
:where(.ssh-profile__trigger .ssh-avatar){width:34px;height:34px;font-size:13px}
|
|
701
|
+
:where(.ssh-profile__trigger){display:flex;align-items:center;gap:2px;border:0;background:transparent}
|
|
702
702
|
:where(.ssh-nav){display:flex}
|
|
703
703
|
:where(.ssh-menu){display:flex;list-style:none;margin:0;padding:0}
|
|
704
704
|
:where(.ssh-badge){position:relative;display:inline-flex}
|
|
705
|
-
:where(.ssh-badge__count){position:absolute;top:-
|
|
705
|
+
:where(.ssh-badge__count){position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d32f2f;color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}
|
|
706
706
|
@media (max-width:1324px){:where(.ssh-nav--desktop){display:none}}
|
|
707
707
|
@media (min-width:1325px){:where(.ssh-hamburger){display:none}}
|
|
708
|
-
@media (max-width:600px){:where(.ssh-header__inner){padding:0 12px}:where(.ssh-logo--full){display:none}:where(.ssh-logo--small){display:flex}
|
|
708
|
+
@media (max-width:600px){:where(.ssh-header__inner){padding:0 12px}:where(.ssh-logo--full){display:none}:where(.ssh-logo--small){display:flex}}
|
|
709
709
|
`;
|
|
710
710
|
function CriticalStyles() {
|
|
711
711
|
return /* @__PURE__ */ jsxRuntime.jsx("style", { "data-ssh-critical": "", dangerouslySetInnerHTML: { __html: HEADER_CRITICAL_CSS } });
|
|
@@ -1109,12 +1109,8 @@ function Logo({ style }) {
|
|
|
1109
1109
|
function MainMenu({ headerMenuArray, initialState }) {
|
|
1110
1110
|
const pathname = typeof window !== "undefined" ? window.location.pathname : "";
|
|
1111
1111
|
const isMobile = useMediaQuery("(max-width: 1324px)");
|
|
1112
|
-
const [
|
|
1113
|
-
const
|
|
1114
|
-
(item) => item.children?.some((child) => child.value === pathname)
|
|
1115
|
-
);
|
|
1116
|
-
const openGroup = openIndex ?? activeGroup;
|
|
1117
|
-
const toggleGroup = (index) => setOpenIndex(openGroup === index ? -1 : index);
|
|
1112
|
+
const [collapsedGroups, setCollapsedGroups] = React.useState({});
|
|
1113
|
+
const toggleGroup = (index) => setCollapsedGroups((p) => ({ ...p, [index]: !p[index] }));
|
|
1118
1114
|
if (!isMobile) {
|
|
1119
1115
|
return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "ssh-nav", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ssh-menu ssh-nav--desktop", children: headerMenuArray.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "ssh-menu__item", children: [
|
|
1120
1116
|
/* @__PURE__ */ jsxRuntime.jsxs("a", { href: item.value || "", target: item.target, className: "ssh-menu__link", children: [
|
|
@@ -1127,7 +1123,7 @@ function MainMenu({ headerMenuArray, initialState }) {
|
|
|
1127
1123
|
if (!initialState.toggles.dropDownMenu) return null;
|
|
1128
1124
|
return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "ssh-nav", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ssh-mobile-menu", children: headerMenuArray.map((item, i) => {
|
|
1129
1125
|
const hasChildren = Boolean(item.children?.length);
|
|
1130
|
-
const isOpen = hasChildren &&
|
|
1126
|
+
const isOpen = hasChildren && !collapsedGroups[i];
|
|
1131
1127
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ssh-mobile-menu__item", children: [
|
|
1132
1128
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ssh-mobile-menu__row", children: [
|
|
1133
1129
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1452,6 +1448,7 @@ function Header({
|
|
|
1452
1448
|
isMobile && isMenu && state.isMenuIconsShow && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1453
1449
|
IconBtn,
|
|
1454
1450
|
{
|
|
1451
|
+
className: "ssh-menu-toggle",
|
|
1455
1452
|
"aria-label": "Menu",
|
|
1456
1453
|
onClick: () => setState((p) => ({ ...p, toggles: { ...p.toggles, dropDownMenu: !p.toggles.dropDownMenu } })),
|
|
1457
1454
|
children: /* @__PURE__ */ jsxRuntime.jsx(MenuIcon, {})
|
|
@@ -1506,7 +1503,7 @@ exports.Warning = Warning;
|
|
|
1506
1503
|
try {
|
|
1507
1504
|
if (typeof document != "undefined") {
|
|
1508
1505
|
var elementStyle = document.createElement("style");
|
|
1509
|
-
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 flex-shrink: 0;\n gap: 4px;\n width: 36px;\n height: 36px;\n padding: 0;\n border: 0;\n background: transparent;\n border-radius: 10px;\n cursor: pointer;\n color: var(--ssh-muted);\n transition:\n background 0.2s ease,\n color 0.2s ease;\n}\n\n.ssh-icon-trigger:hover {\n background: var(--ssh-brand-soft);\n color: var(--ssh-brand);\n}\n\n.ssh-icon-trigger svg {\n width: 20px;\n height: 20px;\n color: currentColor;\n}\n\n/* a few source SVGs ship hard-coded greys — pin them to the button\'s own colour\n so the hover/active state actually reaches the glyph */\n.ssh-icon-trigger svg [fill]:not([fill="none"]):not([fill="white"]) {\n fill: currentColor;\n}\n\n.ssh-icon-trigger svg [stroke]:not([stroke="none"]) {\n stroke: 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: -6px;\n right: -8px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n background: var(--ssh-danger);\n color: #fff;\n font-size: 10px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n /* ring keeps the count legible where it overlaps the glyph or a neighbour */\n box-shadow: 0 0 0 2px var(--ssh-surface);\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: 4px;\n height: 36px;\n padding: 0 6px;\n border: 0;\n border-radius: 10px;\n background: transparent;\n color: var(--ssh-muted);\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.ssh-lang-trigger:hover {\n background: var(--ssh-brand-soft);\n}\n\n.ssh-lang-trigger__flag {\n width: 26px;\n height: auto;\n aspect-ratio: 3 / 2;\n object-fit: cover;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\nimg.ssh-lang-trigger__flag {\n box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.1);\n}\n\n/* the globe fallback is a square glyph, not a 3:2 flag */\nsvg.ssh-lang-trigger__flag {\n width: 20px;\n aspect-ratio: 1;\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 padding: 2px 4px 2px 2px;\n border: 0;\n border-radius: 999px;\n background: transparent;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.ssh-profile__trigger:hover {\n background: var(--ssh-brand-soft);\n}\n\n/* header avatar is smaller than the dropdown/dialog ones */\n.ssh-profile__trigger .ssh-avatar {\n width: 34px;\n height: 34px;\n font-size: 13px;\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: 20px;\n height: 20px;\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 /* tighter action row so the icons never crowd each other on small screens */\n .ssh-header__actions {\n gap: 2px;\n }\n\n .ssh-icon-trigger {\n width: 34px;\n height: 34px;\n }\n\n .ssh-icon-trigger svg {\n width: 19px;\n height: 19px;\n }\n\n .ssh-lang-trigger {\n height: 34px;\n padding: 0 4px;\n }\n\n .ssh-lang-trigger__flag {\n width: 24px;\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}'));
|
|
1506
|
+
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}'));
|
|
1510
1507
|
document.head.appendChild(elementStyle);
|
|
1511
1508
|
}
|
|
1512
1509
|
} catch (e) {
|