/* ── Xtriel Shared Layout CSS ────────────────────────────────── Injected by nav.js across all protected pages. Two-state sidebar: an expanded panel (labels + sections + nested sub-nav + profile card) and a collapsed icon rail (hover flyouts). Persistent across page navigations via the MPA View Transitions API. ────────────────────────────────────────────────────────────── */ /* ── Theme Tokens ── */ [data-theme="dark"] { --bg-color: #08090a; --sidebar-bg: #0c0d0e; --card-bg: #0f1011; --card-hover: #141516; --primary: #2F6BFF; --primary-h: #4f86ff; --accent-green: #4ade80; --accent-red: #ff6b66; --accent-amber: #ffb020; --text-main: #f7f8f8; --text-muted: #8a8f98; --text-faint: #62666d; --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.05); --glass: rgba(255, 255, 255, 0.02); --nav-active-bg: rgba(255, 255, 255, 0.06); --nav-hover-bg: rgba(255, 255, 255, 0.045); --rail-line: rgba(255, 255, 255, 0.08); --flyout-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 60px -20px #000; } /* Light theme is retired: it resolves to the same Linear dark palette so any stale toggle / localStorage value is harmless. Selector kept so pages that reference [data-theme="light"] don't break. */ [data-theme="light"] { --bg-color: #08090a; --sidebar-bg: #0c0d0e; --card-bg: #0f1011; --card-hover: #141516; --primary: #2F6BFF; --primary-h: #4f86ff; --accent-green: #4ade80; --accent-red: #ff6b66; --accent-amber: #ffb020; --text-main: #f7f8f8; --text-muted: #8a8f98; --text-faint: #62666d; --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.05); --glass: rgba(255, 255, 255, 0.02); --nav-active-bg: rgba(255, 255, 255, 0.06); --nav-hover-bg: rgba(255, 255, 255, 0.045); --rail-line: rgba(255, 255, 255, 0.08); --flyout-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 60px -20px #000; } /* Sidebar geometry — one source of truth () drives BOTH the sidebar width and the content offset, so they can never desync. */ :root { --z-sidebar-w-expanded: 268px; --z-sidebar-w-collapsed: 80px; --z-sidebar-w: var(--z-sidebar-w-expanded); --z-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --z-dur: 200ms; } html[data-nav="collapsed"] { --z-sidebar-w: var(--z-sidebar-w-collapsed); } /* ── Linear-system aliases ── Same values as the legacy token names above; exposed so restyled pages can consume the new-system names directly. Do not diverge from the mapping. */ :root { --canvas: #08090a; --canvas-deep: #010102; --s1: #0f1011; --s2: #141516; --s3: #18191a; --s4: #191a1b; --tp: #f7f8f8; --ts: #d0d6e0; --tt: #8a8f98; --tq: #62666d; --accent: #2F6BFF; --accent-h: #4f86ff; --hl-micro: rgba(255, 255, 255, 0.02); --hl-sub: rgba(255, 255, 255, 0.05); --hl: rgba(255, 255, 255, 0.08); --hl-2: rgba(255, 255, 255, 0.12); --d-green: #4ade80; --d-red: #ff6b66; --d-blue: #5b8cff; --d-cyan: #36c6ff; --d-amber: #ffb020; --font: "Inter", "Inter Variable", -apple-system, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --dur-micro: 130ms; --dur-state: 200ms; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Reset */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font); font-feature-settings: "cv01", "ss03"; -webkit-font-smoothing: antialiased; background-color: var(--bg-color); color: var(--text-main); margin: 0; padding: 0; display: flex; min-height: 100vh; transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease); } /* ── Cross-page persistence (MPA View Transitions) ── Same-origin navigations cross-fade instead of hard-cutting, and the sidebar is a named element so it holds its place — it never blinks out when you move between Dashboard / xTracker / xAlmanac. */ @view-transition { navigation: auto; } /* ════════════════════════════════════════════════════════════════ SIDEBAR — shell ════════════════════════════════════════════════════════════════ */ .z-sidebar { --pad: 16px; width: var(--z-sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 18px var(--pad) 16px; position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000; overflow: visible; view-transition-name: z-sidebar; transition: width var(--z-dur) var(--z-ease), background-color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease); } /* Collapsed rail keeps the SAME icon size & tile geometry as expanded — only labels, section headers and the inline sub-nav fold away. Width comes from --z-sidebar-w (set by ), so it stays in lockstep with the content offset. */ .z-sidebar.z-collapsed { --pad: 20px; align-items: center; } /* ── Head row: logo + collapse toggle ── */ .z-sb-head { display: flex; align-items: center; gap: 10px; height: 44px; margin-bottom: 14px; } .z-sidebar.z-collapsed .z-sb-head { justify-content: center; } .z-logo { width: 40px; height: 40px; flex: 0 0 40px; background: transparent; border-radius: 10px; display: grid; place-items: center; color: var(--tp); text-decoration: none; } .z-collapse-toggle { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--glass); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; transition: 0.2s; flex: 0 0 auto; } .z-collapse-toggle:hover { color: var(--text-main); border-color: var(--text-faint); } .z-collapse-toggle svg { transition: transform var(--z-dur) var(--z-ease); } .z-sidebar.z-collapsed .z-collapse-toggle { position: absolute; top: 18px; right: -13px; background: var(--sidebar-bg); z-index: 5; } .z-sidebar.z-collapsed .z-collapse-toggle svg { transform: rotate(180deg); } /* ── Search ── */ .z-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 12px; margin-bottom: 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--glass); color: var(--text-muted); cursor: text; font: inherit; font-size: 13.5px; transition: border-color 0.2s, background 0.2s, width var(--z-dur) var(--z-ease); } .z-search:hover { border-color: var(--text-faint); } .z-search .z-search-ico { flex: 0 0 auto; display: grid; place-items: center; } .z-search-label { flex: 1; text-align: left; white-space: nowrap; } .z-kbd { display: inline-flex; gap: 4px; flex: 0 0 auto; } .z-kbd kbd { font-family: var(--mono); font-size: 10.5px; line-height: 1.4; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border-soft); background: var(--s2); color: var(--text-faint); } .z-sidebar.z-collapsed .z-search { width: 44px; height: 44px; padding: 0; justify-content: center; } /* ── Scroll region holding the nav sections ── */ .z-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .z-scroll::-webkit-scrollbar { width: 6px; } .z-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; } /* When collapsed there's nothing to scroll & flyouts must escape — let the rail overflow so the popovers aren't clipped. */ .z-sidebar.z-collapsed .z-scroll { overflow: visible; } .z-section + .z-section { margin-top: 14px; } .z-section-label { font-size: 10.5px; font-variation-settings: 'wght' 510; font-weight: 510; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-faint); margin: 6px 0 8px; padding: 0 6px; white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity 0.18s ease, height 0.2s var(--z-ease), margin 0.2s var(--z-ease); } .z-sidebar.z-collapsed .z-section-label { height: 1px; margin: 8px auto; width: 22px; text-indent: -999px; background: var(--rail-line); opacity: 0.7; } /* ── Nav items ── */ .z-nav-group { position: relative; } .z-nav-item { display: flex; align-items: center; gap: 13px; width: 100%; height: 44px; padding: 0 11px; border-radius: 10px; color: var(--text-muted); text-decoration: none; cursor: pointer; position: relative; border: none; background: none; font: inherit; font-size: 14px; font-variation-settings: 'wght' 510; font-weight: 510; text-align: left; transition: background 0.18s, color 0.18s; } .z-nav-item > svg { flex: 0 0 auto; width: 20px; height: 20px; } .z-nav-item .z-label { flex: 1; white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity 0.18s ease; } .z-nav-item:hover { background: var(--nav-hover-bg); color: var(--text-main); } .z-nav-item.active { background: var(--nav-active-bg); color: var(--text-main); } /* the active top-level row gets a subtle inset accent */ .z-nav-item.active::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 3px; background: var(--primary); opacity: 0; } .z-sidebar:not(.z-collapsed) .z-nav-item.active::before { opacity: 1; } /* caret for groups that expand */ .z-caret { flex: 0 0 auto; width: 22px; height: 22px; margin-right: -4px; border: none; background: none; color: var(--text-faint); display: grid; place-items: center; cursor: pointer; border-radius: 6px; transition: transform 0.24s var(--z-ease), background 0.15s; } .z-caret:hover { background: var(--glass); color: var(--text-main); } .z-nav-group.z-open > .z-nav-item .z-caret { transform: rotate(180deg); } /* ── Inline sub-nav (tree) ── */ .z-subnav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s var(--z-ease); position: relative; margin-left: 21px; } .z-subnav-inner { overflow: hidden; } .z-nav-group.z-open > .z-subnav { grid-template-rows: 1fr; } /* tree spine */ .z-subnav::before { content: ""; position: absolute; left: 0; top: 0; bottom: 16px; width: 1px; background: var(--rail-line); } .z-subitem { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px 0 16px; margin: 2px 0; border-radius: 9px; color: var(--text-muted); text-decoration: none; font-size: 13px; font-variation-settings: 'wght' 510; font-weight: 510; white-space: nowrap; position: relative; transition: background 0.16s, color 0.16s; } /* tree tick */ .z-subitem::before { content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 1px; background: var(--rail-line); } .z-subitem:hover { background: var(--nav-hover-bg); color: var(--text-main); } .z-subitem.active { background: var(--nav-active-bg); color: var(--text-main); } .z-subitem > svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.85; } /* ════════════════════════════════════════════════════════════════ COLLAPSED STATE — fold the labels away, center the icons ════════════════════════════════════════════════════════════════ */ .z-sidebar.z-collapsed .z-nav-item { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; margin: 0 auto 6px; } .z-sidebar.z-collapsed .z-nav-item .z-label, .z-sidebar.z-collapsed .z-nav-item .z-caret, .z-sidebar.z-collapsed .z-search-label, .z-sidebar.z-collapsed .z-kbd, .z-sidebar.z-collapsed .z-subnav, .z-sidebar.z-collapsed .z-user-meta, .z-sidebar.z-collapsed .z-user-caret { display: none; } .z-sidebar.z-collapsed .z-nav-item.active { background: var(--primary); color: #fff; } /* ── Flyout (collapsed hover popover, mirrors the inline sub-nav) ── */ .z-flyout { position: absolute; left: calc(100% + 14px); top: -6px; min-width: 182px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: var(--flyout-shadow); opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s var(--z-ease); z-index: 3000; } .z-flyout::before { /* hover bridge so the cursor can cross the gap */ content: ""; position: absolute; left: -16px; top: 0; width: 16px; height: 100%; } .z-flyout-title { font-size: 11px; font-variation-settings: 'wght' 510; font-weight: 510; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin: 4px 10px 8px; } .z-flyout a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--text-main); text-decoration: none; font-size: 13px; font-variation-settings: 'wght' 510; font-weight: 510; white-space: nowrap; } .z-flyout a svg { width: 15px; height: 15px; opacity: 0.8; flex: 0 0 auto; } .z-flyout a:hover { background: var(--nav-hover-bg); } .z-flyout a.active { background: var(--nav-active-bg); } /* Only show flyouts when collapsed, and only on hover/focus-within */ .z-sidebar.z-collapsed .z-nav-group:hover > .z-flyout, .z-sidebar.z-collapsed .z-nav-group:focus-within > .z-flyout { opacity: 1; transform: translateX(0); pointer-events: auto; } /* ── Simple tooltip for childless items when collapsed ── */ .z-tooltip { display: none; position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); background: var(--card-bg); border: 1px solid var(--border); padding: 6px 11px; border-radius: 9px; font-size: 12px; font-variation-settings: 'wght' 510; font-weight: 510; white-space: nowrap; pointer-events: none; z-index: 3000; color: var(--text-main); box-shadow: var(--flyout-shadow); } .z-sidebar.z-collapsed .z-nav-item:not(.z-has-children):hover .z-tooltip, .z-sidebar.z-collapsed .z-nav-item:not(.z-has-children):focus-visible .z-tooltip { display: block; } /* Never show tooltips/flyouts when expanded */ .z-sidebar:not(.z-collapsed) .z-tooltip, .z-sidebar:not(.z-collapsed) .z-flyout { display: none; } /* ════════════════════════════════════════════════════════════════ BOTTOM — theme toggle + profile card ════════════════════════════════════════════════════════════════ */ .z-sidebar-bottom { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; } .z-sidebar.z-collapsed .z-sidebar-bottom { flex-direction: column; border-top: none; gap: 12px; } .z-theme-toggle { /* light theme retired — single near-black system; button kept in DOM for JS compat */ display: none; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; border: 1px solid var(--border); background: var(--glass); place-items: center; cursor: pointer; color: var(--text-muted); transition: 0.2s; } .z-theme-toggle:hover { color: var(--text-main); border-color: var(--hl); } /* ── Profile card / user menu ── */ .z-user-menu { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--border); background: var(--glass); cursor: pointer; font: inherit; color: inherit; text-align: left; transition: border-color 0.2s, background 0.2s; } .z-user-menu:hover { border-color: var(--text-faint); background: var(--card-hover); } .z-sidebar.z-collapsed .z-user-menu { flex: 0 0 auto; padding: 0; border: none; background: none; width: 44px; height: 44px; justify-content: center; } .z-user-avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: var(--s3); display: grid; place-items: center; font-variation-settings: 'wght' 590; font-weight: 590; font-size: 15px; color: var(--ts); overflow: hidden; border: 1px solid var(--hl); transition: border-color var(--dur-micro) var(--ease); } .z-user-avatar.z-tier-pro, .z-user-avatar.z-tier-max { border-color: var(--hl-2); } .z-sidebar.z-collapsed .z-user-menu:hover .z-user-avatar { border-color: var(--primary); } .z-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .z-user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .z-user-name { font-size: 13px; font-variation-settings: 'wght' 510; font-weight: 510; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .z-user-role { font-size: 11px; font-variation-settings: 'wght' 510; font-weight: 510; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .z-user-caret { flex: 0 0 auto; color: var(--text-faint); display: grid; place-items: center; transition: transform 0.2s var(--z-ease); } .z-user-menu[aria-expanded="true"] .z-user-caret { transform: rotate(180deg); } /* ── User dropdown ── */ .z-user-dropdown { display: none; position: absolute; bottom: calc(100% + 10px); left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; min-width: 210px; padding: 6px; z-index: 3000; box-shadow: var(--flyout-shadow); } .z-sidebar.z-collapsed .z-user-dropdown { left: 0; right: auto; bottom: 0; margin-left: 54px; min-width: 210px; } .z-user-dropdown.open { display: block; animation: z-dd-in 0.16s var(--z-ease); } @keyframes z-dd-in { from { opacity: 0; transform: translateY(6px); } } .z-dropdown-header { padding: 10px 14px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .z-dropdown-name { font-size: 13px; font-variation-settings: 'wght' 510; font-weight: 510; color: var(--text-main); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .z-dropdown-email { font-size: 11px; color: var(--text-muted); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .z-plan { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .z-plan-badge { font-size: 10px; font-variation-settings: 'wght' 590; font-weight: 590; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 100px; } .z-plan-badge.z-plan-free { background: rgba(136, 136, 136, 0.16); color: #9aa0ad; } .z-plan-badge.z-plan-pro { background: rgba(47, 107, 255, 0.16); color: #5b8cff; } .z-plan-badge.z-plan-max { background: rgba(139, 92, 246, 0.18); color: #b39bf5; } .z-user-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; color: var(--text-main); text-decoration: none; font-size: 13px; font-variation-settings: 'wght' 510; font-weight: 510; transition: 0.15s; } .z-user-dropdown a svg { flex: 0 0 auto; width: 16px; height: 16px; } .z-user-dropdown a:hover { background: var(--glass); } .z-user-dropdown a.z-upgrade { color: var(--primary); font-variation-settings: 'wght' 510; font-weight: 510; } .z-user-dropdown .z-logout { color: var(--accent-red); border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; transition: background 0.15s, color 0.15s; } .z-user-dropdown a.z-logout:hover { background: rgba(255, 107, 102, 0.10); } /* ════════════════════════════════════════════════════════════════ COMMAND PALETTE (search) ════════════════════════════════════════════════════════════════ */ .z-cmdk { position: fixed; inset: 0; z-index: 5000; display: none; align-items: flex-start; justify-content: center; padding-top: 14vh; background: rgba(1, 1, 2, 0.6); backdrop-filter: blur(4px); } .z-cmdk.open { display: flex; animation: z-fade 0.14s ease; } @keyframes z-fade { from { opacity: 0; } } .z-cmdk-box { width: min(560px, 92vw); background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--flyout-shadow); overflow: hidden; animation: z-pop 0.16s var(--z-ease); } @keyframes z-pop { from { opacity: 0; transform: translateY(-10px) scale(0.98); } } .z-cmdk-input { width: 100%; border: none; border-bottom: 1px solid var(--border); background: none; color: var(--text-main); font: inherit; font-size: 16px; padding: 16px 18px; outline: none; } .z-cmdk-input::placeholder { color: var(--text-faint); } .z-cmdk-list { max-height: 52vh; overflow-y: auto; padding: 8px; } .z-cmdk-empty { padding: 22px; text-align: center; color: var(--text-faint); font-size: 13px; } .z-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--text-main); text-decoration: none; font-size: 13.5px; font-variation-settings: 'wght' 510; font-weight: 510; cursor: pointer; } .z-cmdk-item svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-muted); } .z-cmdk-item .z-cmdk-sub { margin-left: auto; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; } .z-cmdk-item.z-cur, .z-cmdk-item:hover { background: var(--nav-active-bg); } .z-cmdk-item.z-cur svg { color: var(--primary); } /* ── Keyboard focus + reduced motion (a11y) ── */ .z-sidebar a:focus-visible, .z-sidebar button:focus-visible, .z-cmdk-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .z-sidebar, .z-sidebar *, .z-cmdk, .z-cmdk *, .z-toasts, .z-toasts * { transition: none !important; animation: none !important; } @view-transition { navigation: none; } } /* ── Cross-page transition tuning ── */ ::view-transition-group(z-sidebar) { animation-duration: 0.22s; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; } /* Pre-paint sidebar backing. The real .z-sidebar is injected by nav.js at the end of , so on a fresh page load (every cross-page navigation in this MPA) there is a brief window where the rail has no element yet — which read as the navigation "disappearing for a split second". This fixed strip is painted by the render-blocking layout.css on the very first frame, before nav.js runs, so the rail always shows a solid, sidebar-coloured column. It also gives the view transition a constant backing under the morphing sidebar, so the nav never blinks out mid-transition. The real sidebar (z-index 1000) paints on top of it; this strip is only ever visible in that first-frame gap. Scoped to html[data-nav] (set pre-paint) so it only shows on sidebar pages. */ html[data-nav]::before { content: ""; position: fixed; top: 0; left: 0; width: var(--z-sidebar-w); height: 100vh; background: var(--sidebar-bg); border-right: 1px solid var(--border); z-index: 999; pointer-events: none; transition: width var(--z-dur) var(--z-ease); } /* ════════════════════════════════════════════════════════════════ MAIN CONTENT — offset follows the sidebar width ════════════════════════════════════════════════════════════════ */ .z-main-content, .main-content { flex: 1; min-width: 0; margin-left: var(--z-sidebar-w); width: calc(100% - var(--z-sidebar-w)); transition: margin-left var(--z-dur) var(--z-ease), width var(--z-dur) var(--z-ease); } /* default padding only for the shared wrapper; page-specific .main-content keeps its own padding */ .z-main-content { padding: 30px 35px; } /* ── Responsive ── On narrow viewports nav.js forces the collapsed rail (and keeps it forced), so the var-driven width + offset already shrink to 80px. We only hide the manual toggle here so the rail can't be expanded over a phone-width layout. */ @media (max-width: 820px) { .z-collapse-toggle { display: none; } } /* ════════════════════════════════════════════════════════════════ TOP MENU — shared app shell The class names remain .z-sidebar for compatibility with existing pages and scripts, but the rendered shell is now a fixed, horizontal top menu. ════════════════════════════════════════════════════════════════ */ :root { --z-topbar-h: 56px; --z-sidebar-w: 0px; } html[data-nav], html[data-nav="collapsed"] { --z-sidebar-w: 0px; } .z-sidebar, .z-sidebar.z-collapsed { --pad: 24px; position: fixed; inset: 0 0 auto 0; width: 100%; height: var(--z-topbar-h); min-width: 0; background: var(--sidebar-bg); background: rgba(8, 9, 10, 0.78); border-right: none; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 0 var(--pad); overflow: visible; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); transition: background-color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease); } .z-sb-head, .z-sidebar.z-collapsed .z-sb-head { flex: 0 0 auto; height: 100%; margin: 0; justify-content: flex-start; z-index: 2; } .z-logo { width: 32px; height: 32px; flex-basis: 32px; border-radius: 8px; } .z-logo svg { width: 20px; height: 20px; } .z-collapse-toggle, .z-sidebar.z-collapsed .z-collapse-toggle { display: none; } .z-search, .z-sidebar.z-collapsed .z-search { flex: 0 0 176px; width: 176px; height: 30px; margin: 0; padding: 0 10px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border-soft); background: var(--s1); font-size: 12.5px; font-variation-settings: 'wght' 510; font-weight: 510; justify-content: flex-start; cursor: pointer; } .z-sidebar.z-collapsed .z-search-label, .z-sidebar.z-collapsed .z-kbd { display: inline-flex; } .z-scroll, .z-sidebar.z-collapsed .z-scroll { position: absolute; top: 0; left: 50%; transform: translateX(-50%); flex: 0 0 auto; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; /* overflow must stay visible on BOTH axes so the Dashboard hover flyout (an absolutely-positioned descendant that opens below the bar) isn't clipped — a scroll/auto value on either axis would compute the other to auto and clip it. The inline nav is sized to fit at every width >= the drawer breakpoint, so no horizontal scroll is needed here. */ overflow: visible; z-index: 1; } .z-scroll::-webkit-scrollbar { display: none; } .z-section, .z-section + .z-section { display: flex; align-items: center; gap: 4px; margin: 0; } .z-section + .z-section { padding-left: 8px; border-left: 1px solid var(--border-soft); } /* must out-rank `.z-section + .z-section` (0,2,0) or the drawer Tools section leaks into the desktop top bar */ .z-section-tools, .z-section + .z-section.z-section-tools { display: none; } .z-section-label, .z-sidebar.z-collapsed .z-section-label { display: none; } .z-nav-group { flex: 0 0 auto; } .z-nav-item, .z-sidebar.z-collapsed .z-nav-item { width: auto; min-width: 40px; height: 32px; margin: 0; padding: 0 13px; justify-content: center; gap: 7px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: 13.5px; font-variation-settings: 'wght' 510; font-weight: 510; white-space: nowrap; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease); } .z-nav-item:hover { background: var(--s2); color: var(--text-main); } .z-nav-item > svg { width: 18px; height: 18px; } .z-section-main > .z-nav-group > .z-nav-item > svg { display: none; } .z-nav-item .z-label, .z-sidebar.z-collapsed .z-nav-item .z-label, .z-sidebar.z-collapsed .z-nav-item .z-caret { display: inline-flex; } .z-nav-item.active, .z-sidebar.z-collapsed .z-nav-item.active { background: transparent; border-color: var(--primary); color: var(--text-main); box-shadow: none; } /* the active pill carries a 1px accent border — no underline on the top bar */ .z-nav-item.active::before { left: 12px; right: 12px; top: auto; bottom: 4px; width: auto; height: 2px; transform: none; border-radius: 2px; opacity: 0; } /* Desktop top bar: active nav shows ONLY the accent border — kill the ::before underline. The expanded-sidebar rule turns it on at higher specificity, so override it with enough specificity, scoped to desktop so the mobile drawer's left accent bar (which reuses this ::before) is untouched. */ @media (min-width: 1025px) { .z-sidebar:not(.z-collapsed) .z-scroll .z-nav-item.active::before { opacity: 0; } } .z-subnav, .z-sidebar.z-collapsed .z-subnav { display: none; } .z-sidebar .z-flyout { display: block; left: 0; top: calc(100% + 10px); min-width: 210px; border-radius: 12px; transform: translateY(-4px); } .z-sidebar:not(.z-collapsed) .z-flyout { display: block; } .z-sidebar .z-flyout::before { left: 0; top: -12px; width: 100%; height: 12px; } /* The flyout opens on hover/focus only. It must NOT auto-open for the active group (.z-open) — on a top bar that would leave a dropdown hanging open over the page content. (.z-open still drives the inline sub-tree in the mobile drawer, where the flyout is display:none anyway.) */ .z-nav-group:hover > .z-flyout, .z-nav-group:focus-within > .z-flyout { opacity: 1; transform: translateY(0); pointer-events: auto; } /* On the top bar the caret should track the flyout, not the active page: keep it pointing down by default (even for the active .z-open group) and flip it up only while the flyout is open. The drawer re-rotates it for the open tree. */ .z-nav-group.z-open > .z-nav-item .z-caret { transform: none; } .z-nav-group:hover > .z-nav-item .z-caret, .z-nav-group:focus-within > .z-nav-item .z-caret { transform: rotate(180deg); } .z-tooltip { display: none !important; } .z-sidebar-bottom, .z-sidebar.z-collapsed .z-sidebar-bottom { flex: 0 0 auto; margin: 0 0 0 auto; padding: 0; border-top: none; display: flex; flex-direction: row; align-items: center; gap: 10px; z-index: 2; } .z-sidebar-bottom .z-search, .z-sidebar.z-collapsed .z-sidebar-bottom .z-search { flex: 0 0 176px; width: 176px; } .z-nav-divider { width: 1px; height: 20px; background: var(--hl); flex: none; } .z-theme-toggle { width: 32px; height: 32px; border-radius: 8px; border-color: transparent; background: transparent; } .z-theme-toggle:hover { color: var(--text-main); border-color: transparent; background: var(--s2); } .z-user-menu, .z-sidebar.z-collapsed .z-user-menu { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: none; background: none; justify-content: center; } .z-user-menu:hover { background: none; } .z-user-avatar { width: 28px; height: 28px; flex-basis: 28px; border-radius: 50%; font-size: 11.5px; } .z-user-meta, .z-user-caret, .z-sidebar.z-collapsed .z-user-meta, .z-sidebar.z-collapsed .z-user-caret { display: none; } .z-user-dropdown, .z-sidebar.z-collapsed .z-user-dropdown { top: calc(100% + 10px); right: 0; bottom: auto; left: auto; margin-left: 0; min-width: 230px; } .z-user-menu-sep { height: 1px; margin: 5px 4px; background: var(--hl-sub); } .z-user-dropdown .z-logout { border-top: none; margin-top: 0; padding-top: 10px; } html[data-nav]::before { width: 100%; height: var(--z-topbar-h); border-right: none; border-bottom: 1px solid var(--border); transition: none; } .z-main-content, .main-content { margin-left: 0; width: 100%; margin-top: var(--z-topbar-h); transition: none; } html.share-public { --z-topbar-h: 0px; } html.share-public::before { display: none; } .share-public .z-main-content, .share-public .main-content { margin-top: 0; } .z-notif-badge, .z-sidebar.z-collapsed .z-notif-badge { top: 0; left: 18px; border-color: var(--sidebar-bg); } /* Hamburger — hidden until the drawer breakpoint takes over below. */ .z-burger { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -2px; border: none; border-radius: 10px; background: none; color: var(--text-main); cursor: pointer; transition: background 0.16s; } .z-burger:hover { background: var(--nav-hover-bg); } .z-burger svg { width: 21px; height: 21px; } /* The search icon SVG has no intrinsic size — size it so the collapsed (icon-only) search button isn't an empty box. */ .z-search .z-search-ico svg { width: 15px; height: 15px; } /* Notifications bell lives in the right action cluster as an icon button. */ .z-sidebar-bottom .z-notif-trigger { width: 32px; min-width: 32px; padding: 0; justify-content: center; border-radius: 8px; } .z-sidebar-bottom .z-notif-trigger .z-label { display: none; } /* Backdrop behind the mobile drawer (only visible while it is open). */ .z-scrim { position: fixed; inset: var(--z-topbar-h) 0 0 0; z-index: 998; background: rgba(8, 10, 14, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.26s ease; } html[data-drawer="open"] .z-scrim { opacity: 1; pointer-events: auto; } @media (max-width: 1199px) { .z-sidebar, .z-sidebar.z-collapsed { --pad: 14px; gap: 10px; } .z-search, .z-sidebar.z-collapsed .z-search { flex-basis: 44px; width: 44px; padding: 0; justify-content: center; } .z-search-label, .z-kbd, .z-sidebar.z-collapsed .z-search-label, .z-sidebar.z-collapsed .z-kbd { display: none; } } /* ── Drawer mode: off-canvas vertical nav on tablet & phone ── The inline top-bar nav becomes a left slide-in panel; the hamburger and a scrim drive it. Touch devices get a real menu instead of icon-hover flyouts. */ @media (max-width: 1024px) { html[data-drawer="open"] { overflow: hidden; } .z-burger { display: inline-flex; } /* The primary nav slides in from the left. */ .z-scroll, .z-sidebar.z-collapsed .z-scroll { position: fixed; top: var(--z-topbar-h); left: 0; width: min(330px, 86vw); height: calc(100vh - var(--z-topbar-h)); height: calc(100dvh - var(--z-topbar-h)); flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 14px 14px 28px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--sidebar-bg); border-right: 1px solid var(--border); box-shadow: 26px 0 70px -28px rgba(0, 0, 0, 0.6); transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } html[data-drawer="open"] .z-scroll { transform: none; } /* Sections stack vertically with their labels restored. */ .z-section, .z-section + .z-section { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; } .z-section-tools, .z-section + .z-section.z-section-tools { display: flex; } .z-section + .z-section { margin-top: 12px; padding: 12px 0 0; border-left: none; border-top: 1px solid var(--border-soft); } .z-section-label, .z-sidebar.z-collapsed .z-section-label { display: block; margin: 2px 6px 8px; color: var(--text-muted); font-size: 11px; font-variation-settings: 'wght' 510; font-weight: 510; letter-spacing: 0.07em; text-transform: uppercase; } /* These structural overrides are scoped to the drawer (.z-scroll) so they never touch the notifications bell / theme / account buttons that live in the always-visible right action cluster (.z-sidebar-bottom). */ .z-scroll .z-nav-group { width: 100%; } .z-scroll .z-nav-item { width: 100%; height: 44px; padding: 0 12px; gap: 13px; justify-content: flex-start; font-size: 14px; border-radius: 10px; } .z-scroll .z-nav-item > svg { display: block; width: 20px; height: 20px; } .z-scroll .z-nav-item .z-label { display: inline-flex; flex: 1; } .z-scroll .z-caret { display: grid; margin-left: auto; } /* In the drawer the caret tracks the expanded inline tree, not hover. */ .z-scroll .z-nav-group.z-open > .z-nav-item .z-caret { transform: rotate(180deg); } /* Drawer rows use the wash + left accent bar, not the top-bar accent pill. */ .z-scroll .z-nav-item.active { background: var(--nav-active-bg); border-color: transparent; } /* Active row uses a left accent bar, not the desktop underline. */ .z-scroll .z-nav-item.active::before { left: 0; right: auto; top: 9px; bottom: 9px; width: 3px; height: auto; transform: none; border-radius: 0 3px 3px 0; opacity: 1; } /* Inline expandable sub-tree; suppress hover flyouts + tooltips on touch. */ .z-scroll .z-subnav { display: grid; } .z-sidebar .z-flyout, .z-sidebar:not(.z-collapsed) .z-flyout { display: none !important; } .z-tooltip { display: none !important; } } @media (max-width: 720px) { :root { --z-topbar-h: 56px; } .z-sidebar, .z-sidebar.z-collapsed { --pad: 12px; gap: 8px; } } @media (max-width: 380px) { .z-sidebar, .z-sidebar.z-collapsed { --pad: 8px; gap: 6px; } .z-search, .z-sidebar.z-collapsed .z-search { flex-basis: 38px; width: 38px; } } /* ════════════════════════════════════════════════════════════════ PAGE COMPONENT LAYER Reusable primitives so dedicated pages (Risk Rule Alerts, Settings, Notifications) share the navigation's visual language. ════════════════════════════════════════════════════════════════ */ .z-page { max-width: 920px; margin: 0 auto; padding: 6px 4px 60px; } .z-page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; } .z-page-head .z-ph-text { flex: 1; min-width: 0; } .z-page-title { font-size: 26px; font-variation-settings: 'wght' 590; font-weight: 590; letter-spacing: -0.02em; margin: 0; color: var(--text-main); } .z-page-sub { margin: 6px 0 0; font-size: 14px; color: var(--text-muted); line-height: 1.5; } .z-page-head .z-ph-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } /* ── Card ── */ .z-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 22px; margin-bottom: 18px; } .z-card-head { margin-bottom: 18px; } .z-card-title { font-size: 15px; font-variation-settings: 'wght' 510; font-weight: 510; color: var(--text-main); margin: 0; display: flex; align-items: center; gap: 9px; } .z-card-title svg { width: 18px; height: 18px; color: var(--text-muted); } .z-card-desc { margin: 5px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; } /* ── Form fields ── */ .z-field { margin-bottom: 16px; } .z-field:last-child { margin-bottom: 0; } .z-field-label { display: block; font-size: 12px; font-variation-settings: 'wght' 510; font-weight: 510; color: var(--text-muted); margin-bottom: 7px; } .z-field-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; line-height: 1.45; } .z-input, .z-select, .z-textarea { width: 100%; background: var(--glass); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text-main); font: inherit; font-size: 14px; transition: border-color 0.15s, background 0.15s; -webkit-appearance: none; appearance: none; } .z-input:focus, .z-select:focus, .z-textarea:focus { outline: none; border-color: var(--primary); background: var(--card-bg); } .z-input::placeholder, .z-textarea::placeholder { color: var(--text-faint); } .z-textarea { resize: vertical; min-height: 76px; line-height: 1.5; } .z-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; } .z-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } /* input with a leading unit/prefix */ .z-input-wrap { position: relative; } .z-input-wrap .z-prefix { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 14px; pointer-events: none; } .z-input-wrap.has-prefix .z-input { padding-left: 26px; } /* ── Toggle switch ── */ .z-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border-soft); } .z-switch-row:last-child { border-bottom: none; } .z-switch-text { min-width: 0; } .z-switch-text .z-st-title { font-size: 14px; font-variation-settings: 'wght' 510; font-weight: 510; color: var(--text-main); } .z-switch-text .z-st-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; } .z-switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; } .z-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .z-switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 100px; transition: background 0.2s; } .z-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.2s var(--z-ease); box-shadow: 0 1px 3px rgba(0,0,0,.3); } .z-switch input:checked + .z-switch-track { background: var(--primary); } .z-switch input:checked + .z-switch-track::after { transform: translateX(18px); } .z-switch input:focus-visible + .z-switch-track { outline: 2px solid var(--primary); outline-offset: 2px; } /* ── Buttons ── */ .z-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--glass); color: var(--text-main); font: inherit; font-size: 14px; font-variation-settings: 'wght' 510; font-weight: 510; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.05s; white-space: nowrap; } .z-btn:hover { background: var(--card-hover); border-color: var(--text-faint); } .z-btn:active { transform: translateY(1px); } .z-btn svg { width: 17px; height: 17px; } .z-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .z-btn-primary:hover { background: var(--primary-h); border-color: var(--primary-h); } .z-btn-danger { color: var(--accent-red); border-color: transparent; background: rgba(255, 107, 102,.1); } .z-btn-danger:hover { background: rgba(255, 107, 102,.18); border-color: transparent; } .z-btn-sm { height: 32px; padding: 0 13px; font-size: 13px; border-radius: var(--r-pill); } .z-btn-icon { width: 38px; padding: 0; } .z-btn[disabled] { opacity: .5; pointer-events: none; } /* ── Badges ── */ .z-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-variation-settings: 'wght' 510; font-weight: 510; letter-spacing: .03em; padding: 3px 9px; border-radius: 100px; text-transform: uppercase; } .z-badge-green { background: rgba(74, 222, 128,.14); color: var(--accent-green); } .z-badge-red { background: rgba(255, 107, 102,.14); color: var(--accent-red); } .z-badge-amber { background: rgba(255, 176, 32,.16); color: var(--accent-amber); } .z-badge-blue { background: rgba(47,107,255,.16); color: #5b8cff; } .z-badge-muted { background: var(--glass); color: var(--text-muted); } .z-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .z-dot-green { background: var(--accent-green); } .z-dot-red { background: var(--accent-red); } .z-dot-amber { background: var(--accent-amber); } .z-dot-muted { background: var(--text-faint); } /* ── List rows (accounts, alerts) ── */ .z-row { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--glass); } .z-row:last-child { margin-bottom: 0; } .z-row-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; display: grid; place-items: center; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); } .z-row-icon svg { width: 19px; height: 19px; } .z-row-main { flex: 1; min-width: 0; } .z-row-title { font-size: 14px; font-variation-settings: 'wght' 510; font-weight: 510; color: var(--text-main); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .z-row-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; } .z-row-actions { display: flex; gap: 8px; flex: 0 0 auto; } /* ── Segmented control ── */ .z-seg { display: inline-flex; background: var(--s1); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 3px; gap: 2px; } .z-seg button { border: none; background: none; color: var(--text-muted); font: inherit; font-size: 12.5px; font-variation-settings: 'wght' 510; font-weight: 510; padding: 5px 13px; border-radius: var(--r-pill); cursor: pointer; transition: 0.15s; } .z-seg button.active { background: var(--s3); color: var(--text-main); } /* ── Empty state ── */ .z-empty { text-align: center; padding: 44px 20px; color: var(--text-faint); } .z-empty svg { width: 38px; height: 38px; opacity: .5; margin-bottom: 12px; } .z-empty p { margin: 0; font-size: 13.5px; } /* ── Inline status line ── */ .z-status { font-size: 12.5px; font-variation-settings: 'wght' 510; font-weight: 510; } .z-status-ok { color: var(--accent-green); } .z-status-err { color: var(--accent-red); } /* ── Toast (pages) ── */ .z-toasts { position: fixed; bottom: 22px; right: 22px; z-index: 6000; display: flex; flex-direction: column; gap: 10px; } .z-toast { display: flex; align-items: center; gap: 11px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; min-width: 240px; max-width: 360px; box-shadow: var(--flyout-shadow); animation: z-toast-in 0.22s var(--z-ease); } .z-toast.z-out { animation: z-toast-out 0.2s var(--z-ease) forwards; } @keyframes z-toast-in { from { opacity: 0; transform: translateX(20px); } } @keyframes z-toast-out { to { opacity: 0; transform: translateX(20px); } } .z-toast-ico { width: 22px; height: 22px; flex: 0 0 auto; } .z-toast-ok .z-toast-ico { color: var(--accent-green); } .z-toast-err .z-toast-ico { color: var(--accent-red); } .z-toast-body .z-toast-title { font-size: 13.5px; font-variation-settings: 'wght' 510; font-weight: 510; color: var(--text-main); } .z-toast-body .z-toast-msg { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; } /* ════════════════════════════════════════════════════════════════ NOTIFICATIONS — bell badge + dropdown (lives in the sidebar) ════════════════════════════════════════════════════════════════ */ .z-notif-trigger { position: relative; } .z-notif-badge { position: absolute; top: 6px; left: 26px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 100px; background: var(--accent-red); color: #fff; font-size: 10px; font-variation-settings: 'wght' 590; font-weight: 590; display: none; align-items: center; justify-content: center; border: 2px solid var(--sidebar-bg); line-height: 1; } .z-notif-badge.show { display: flex; } .z-sidebar.z-collapsed .z-notif-badge { top: 4px; left: 24px; } /* top-bar bell badge hugs the icon's top-right corner — the base position above (top:6px; left:26px) is tuned for the wide sidebar row and overshoots the compact 32px top-bar bell, leaving the count floating off to the right */ .z-notif-badge { top: -1px; right: -1px; left: auto; } .z-notif-panel { /* Fixed — not absolute — so the panel escapes the sidebar scroll container's overflow clip (which made it invisible in the expanded rail). nav.js sets left/bottom from the bell's position when it opens. */ position: fixed; left: 0; bottom: 0; width: 340px; max-height: 460px; display: none; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--flyout-shadow); z-index: 3500; overflow: hidden; } .z-notif-panel.open { display: flex; animation: z-pop 0.16s var(--z-ease); } .z-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); } .z-notif-head h4 { margin: 0; font-size: 14px; font-variation-settings: 'wght' 590; font-weight: 590; color: var(--text-main); } .z-notif-mark { border: none; background: none; color: var(--primary); font: inherit; font-size: 12px; font-variation-settings: 'wght' 510; font-weight: 510; cursor: pointer; } .z-notif-mark[disabled] { color: var(--text-faint); cursor: default; } .z-notif-list { overflow-y: auto; flex: 1; padding: 6px; } .z-notif-item { display: flex; gap: 11px; padding: 11px 11px; border-radius: 8px; text-decoration: none; position: relative; } .z-notif-item:hover { background: var(--nav-hover-bg); } .z-notif-item.unread { background: rgba(47,107,255,.06); } .z-notif-ico { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: grid; place-items: center; background: var(--glass); } .z-notif-ico svg { width: 16px; height: 16px; } .z-notif-ico.t-red { color: var(--accent-red); background: rgba(255, 107, 102,.12); } .z-notif-ico.t-green { color: var(--accent-green); background: rgba(74, 222, 128,.12); } .z-notif-ico.t-amber { color: var(--accent-amber); background: rgba(255, 176, 32,.14); } .z-notif-ico.t-blue { color: #5b8cff; background: rgba(47,107,255,.14); } .z-notif-body { flex: 1; min-width: 0; } .z-notif-msg { font-size: 13px; color: var(--text-main); line-height: 1.4; } .z-notif-time { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; } .z-notif-foot { padding: 10px; border-top: 1px solid var(--border); } .z-notif-foot a { display: block; text-align: center; padding: 9px; border-radius: 9px; color: var(--text-main); text-decoration: none; font-size: 13px; font-variation-settings: 'wght' 510; font-weight: 510; background: var(--glass); } .z-notif-foot a:hover { background: var(--card-hover); } .z-notif-empty { padding: 36px 16px; text-align: center; color: var(--text-faint); font-size: 13px; } @media (max-width: 560px) { .z-notif-panel { width: min(340px, calc(100vw - 96px)); } .z-page-head { flex-direction: column; } } /* ════════════════════════════════════════════════════════════════ LINEAR-SYSTEM SHARED UTILITIES Copied from the approved app-redesign mockup foundation (mockups/app-redesign-2026-07/xt-app.css) so restyled pages can use them without re-declaring. Additive only — nothing above depends on these class names. ════════════════════════════════════════════════════════════════ */ /* global chrome refinements */ ::selection { background: rgba(47, 107, 255, 0.28); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 5px; border: 2px solid var(--canvas); } ::-webkit-scrollbar-thumb:hover { background: var(--s4); } ::-webkit-scrollbar-track { background: transparent; } /* typography helpers */ .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .ui { font-variation-settings: 'wght' 510; font-weight: 510; } .pos { color: var(--d-green); } .neg { color: var(--d-red); } .warn { color: var(--d-amber); } /* badges / status dots — data colors only on actual trading data */ .badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 10.5px; font-variation-settings: 'wght' 510; font-weight: 510; letter-spacing: .4px; text-transform: uppercase; background: var(--s3); border: 1px solid var(--hl-sub); color: var(--tt); } .badge.live { color: var(--d-green); background: rgba(74, 222, 128, 0.10); border-color: rgba(74, 222, 128, 0.18); } .badge.stale { color: var(--d-amber); background: rgba(255, 176, 32, 0.10); border-color: rgba(255, 176, 32, 0.18); } .badge.down { color: var(--d-red); background: rgba(255, 107, 102, 0.10); border-color: rgba(255, 107, 102, 0.18); } .badge.acc { color: var(--accent); background: rgba(47, 107, 255, 0.12); border-color: rgba(47, 107, 255, 0.22); } .badge.real { color: var(--ts); border-color: var(--hl); } .badge.demo { color: var(--tq); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tq); flex: none; } .dot.live { background: var(--d-green); animation: breathe 2.4s var(--ease) infinite; } .dot.stale { background: var(--d-amber); } .dot.down { background: var(--d-red); } @keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.28); } 50% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0); } } /* skeleton shimmer */ .skel { position: relative; overflow: hidden; background: var(--s2); border-radius: 6px; color: transparent !important; } .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent); animation: shimmer 1.4s var(--ease) infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* motion utilities — stagger with --i */ .reveal { opacity: 0; transform: translateY(4px); animation: reveal 160ms var(--ease) forwards; animation-delay: calc(var(--i, 0) * 30ms); } @keyframes reveal { to { opacity: 1; transform: none; } } .tick-up { animation: tickup 320ms var(--ease); } .tick-down { animation: tickdown 320ms var(--ease); } @keyframes tickup { 0% { color: var(--d-green); } 100% { color: inherit; } } @keyframes tickdown { 0% { color: var(--d-red); } 100% { color: inherit; } } /* sign colors must win over contextual .num color rules */ .num.pos { color: var(--d-green); } .num.neg { color: var(--d-red); } .num.warn { color: var(--d-amber); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } }