.nxAdminMenuWrapper,
.nxAdminMenuWrapper *,
.nxAdminMenuWrapper::before,
.nxAdminMenuWrapper::after,
.nxAdminMenuWrapper *::before,
.nxAdminMenuWrapper *::after {
    box-sizing: border-box;
}

.nxAdminMenuWrapper {
    /* Shared accents (used by the sub-menu child rows + focus ring) */
    --nx-menu-accent: var(--nx-cyan, #22d3ee);
    --nx-menu-text: var(--nx-text, #c2cedb);
    --nx-menu-bg-hover: color-mix(in srgb, var(--nx-emerald, #06d6a0) 8%, transparent);
    --nx-menu-radius: var(--nx-border-radius, 10px);
    /* NxtOrigin dark sidebar palette */
    --nx-side-bg: var(--nx-bg, #060b18);
    --nx-side-bg-raised: var(--nx-panel, #0b1329);
    --nx-side-text: var(--nx-text, #c2cedb);
    --nx-side-muted: var(--nx-text-soft, #8899ad);
    --nx-side-accent: var(--nx-emerald, #06d6a0);
    --nx-side-accent-soft: color-mix(in srgb, var(--nx-emerald, #06d6a0) 12%, transparent);
    --nx-side-hover: color-mix(in srgb, var(--nx-panel-soft, #101b35) 60%, transparent);
    --nx-side-border: var(--nx-border, #101b35);
    font-family: var(--nx-font-family, "Outfit", Inter, sans-serif);
    position: relative;
}

/* Unified Account Control & Menu Aesthetics (Matching Outer Navigation Menu) */
.nxAdminAccountTrigger {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.nxAdminAccountTrigger:hover,
.nxAdminAccountTrigger:focus-visible,
.nxAdminAccountTrigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--nx-panel-soft, #101b35) 60%, transparent) !important;
    border: 0 !important;
    color: var(--nx-text, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(194, 206, 219, 0.08) !important;
}

.nxAdminAccountMenu > .nxAdminMenuWrapper--header {
    border: 1px solid var(--nx-border, #101b35);
    border-radius: 16px;
    background: radial-gradient(circle at 90% 0, color-mix(in srgb, var(--nx-cyan, #22d3ee) 12%, transparent), transparent 30%), var(--nx-panel, #0b1329);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
    backdrop-filter: blur(28px) saturate(145%);
    box-shadow: 0 4px 0 var(--nx-bg, #030711), 0 10px 0 rgba(0, 0, 0, 0.25), 0 36px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(194, 206, 219, 0.08), inset 0 -3px 0 var(--nx-bg, #030711);
}
.nxAdminMenuList,
.nxAdminSubMenu { list-style: none; margin: 0; padding: 0; }
.nxAdminMenuItem {
    --nx-menu-role-accent: var(--nx-cyan, #22d3ee);
    --nx-menu-role-accent-soft: color-mix(in srgb, var(--nx-menu-role-accent) 12%, transparent);
    position: relative;
}
.nxAdminMenuRole--admin { --nx-menu-role-accent: #a78bfa; }
.nxAdminMenuRole--manager { --nx-menu-role-accent: var(--nx-amber-soft, #fbbf24); }
.nxAdminMenuRole--advertiser { --nx-menu-role-accent: #fb923c; }
.nxAdminMenuRole--exhibitor { --nx-menu-role-accent: var(--nx-cyan, #22d3ee); }
.nxAdminMenuRole--streamer { --nx-menu-role-accent: #f472b6; }
.nxAdminMenuRole--partner { --nx-menu-role-accent: var(--nx-emerald-soft, #34d399); }
.nxAdminMenuRole--visitor { --nx-menu-role-accent: #60a5fa; }
.nxAdminMenuRole--project { --nx-menu-role-accent: #818cf8; }
.nxAdminMenuRole--operations { --nx-menu-role-accent: #fb7185; }
.nxAdminMenuRole--shared { --nx-menu-role-accent: var(--nx-cyan, #22d3ee); }
.nxAdminMenuWrapper a,
.nxAdminSubMenuToggle {
    align-items: center;
    border-radius: var(--nx-menu-radius);
    box-sizing: border-box;
    display: flex;
    gap: 12px;
    text-decoration: none;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* ===== HEADER MENU (Vertical Sidebar - Dark Theme) ===== */
.nxAdminMenuWrapper--header {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--nx-cyan, #22d3ee) 9%, transparent), transparent 36%),
        linear-gradient(155deg, var(--nx-side-bg-raised) 0%, var(--nx-side-bg) 100%);
    border: 1px solid var(--nx-side-border);
    border-radius: 18px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    /* Never taller than the viewport: the panel sticks while the page
       scrolls. Only the LIST scrolls (rules below) - the user-card
       footer stays pinned at the panel bottom. The bottom reserve is
       generous (not just mirroring the top offset) so the panel
       bottom stays comfortably above the fold even with theme chrome
       / the WP admin bar in play. */
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 96px);
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
/* Scroll container: the menu items, not the whole panel. min-height 0
   lets the flex child actually shrink below its content height. */
.nxAdminMenuWrapper--header > .nxAdminMenuList {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--nx-border, #c2cedb) 24%, transparent) transparent;
}
.nxAdminMenuWrapper--header > .nxAdminMenuList::-webkit-scrollbar { width: 6px; }
.nxAdminMenuWrapper--header > .nxAdminMenuList::-webkit-scrollbar-track { background: transparent; }
.nxAdminMenuWrapper--header > .nxAdminMenuList::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--nx-border, #c2cedb) 20%, transparent);
    border-radius: 999px;
}
.nxAdminMenuWrapper--header > .nxAdminMenuList::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--nx-cyan, #22d3ee) 38%, transparent);
}
/* Logged-in WP admin bar (32px) eats viewport height — shift the
   sticky offset down and shrink the cap by the same amount. */
body.admin-bar .nxAdminMenuWrapper--header {
    top: 48px;
    max-height: calc(100vh - 128px);
}
.nxAdminMenuWrapper--header > .nxAdminMenuList {
    align-items: stretch;
    display: grid;
    gap: 4px;
}
.nxAdminMenuHead > a,
.nxAdminMenuHead > .nxAdminSubMenuToggle {
    color: var(--nx-side-text);
    border-radius: 12px;
    font-size: var(--nx-type-control, 14px);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
    min-height: 44px;
    padding: 11px 14px;
}
.nxAdminMenuHead > a:hover,
.nxAdminMenuHead > a:focus-visible,
.nxAdminMenuHead > .nxAdminSubMenuToggle:hover,
.nxAdminMenuHead > .nxAdminSubMenuToggle:focus-visible {
    background: var(--nx-side-hover);
    color: var(--nx-text, #ffffff);
}
/* Active top-level row: accent text + icon, soft tint, no left bar */
.nxAdminMenuWrapper--header .nxAdminMenuItemActive > a,
.nxAdminMenuWrapper--header .nxAdminMenuItemActive > .nxAdminSubMenuToggle {
    background: transparent;
    color: var(--nx-menu-role-accent);
    font-weight: 600;
}
.nxAdminMenuWrapper--header .nxAdminMenuItemActive:not(.nxAdminMenuHasChildren) > a {
    background: var(--nx-menu-role-accent-soft);
}
/* The dropdown parent is a bare <button>, which the surrounding theme
   styles (border, appearance, focus outline) — that stray chrome is
   what drew the red outline around the row. Reset it hard and pin the
   layout with !important so a theme button rule cannot beat it: the
   row is full width, the icon fixed, the label takes the free space on
   one line, and the chevron sits flush right. */
.nxAdminMenuWrapper--header .nxAdminMenuHead > a,
.nxAdminMenuWrapper--header .nxAdminMenuHead > .nxAdminSubMenuToggle {
    width: 100%;
    gap: 13px;
}
.nxAdminMenuWrapper--header .nxAdminSubMenuToggle {
    -webkit-appearance: none;
    appearance: none;
    display: flex !important;
    width: 100% !important;
    /* The theme centres bare <button> content — pin it left so the
       icon + label hug the start like the plain <a> rows do. */
    justify-content: flex-start !important;
    text-align: left !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
}
.nxAdminMenuWrapper--header .nxAdminSubMenuToggle:focus {
    outline: 0;
}
.nxAdminMenuWrapper--header .nxAdminSubMenuToggle:focus-visible {
    outline: 2px solid var(--nx-menu-accent);
    outline-offset: 2px;
}
.nxAdminMenuWrapper--header .nxAdminMenuHead > a > span:not([aria-hidden]),
.nxAdminMenuWrapper--header .nxAdminMenuHead > .nxAdminSubMenuToggle > span:not([aria-hidden]) {
    /* content-width (do NOT grow) so the label hugs the icon; the
       chevron margin-left:auto still pushes it flush right. Shrinks
       with an ellipsis only when a label is too long for the row. */
    flex: 0 1 auto !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nxAdminMenuWrapper--header .nxAdminMenuHasChildren > a::after,
.nxAdminMenuWrapper--header .nxAdminMenuHasChildren > .nxAdminSubMenuToggle::after {
    flex: 0 0 auto;
    margin-left: auto;
}

/* ===== SUB-MENU ITEM BASE (accordion child rows) =====
   The header sub-menu rules below override colour/size for the dark
   sidebar; these base rules supply width/line-height/hover-shift. */
.nxAdminMenu {
    line-height: 1.45;
    padding: 2px 0;
}
.nxAdminMenu > a,
.nxAdminMenu > .nxAdminSubMenuToggle {
    color: var(--nx-menu-text);
    font-size: var(--nx-type-control, 14px);
    font-weight: 500;
    min-height: 40px;
    padding: 10px 16px;
    width: 100%;
}
.nxAdminMenu > a:hover,
.nxAdminMenu > a:focus-visible,
.nxAdminMenu > .nxAdminSubMenuToggle:hover,
.nxAdminMenu > .nxAdminSubMenuToggle:focus-visible {
    background: var(--nx-menu-bg-hover);
    color: var(--nx-menu-accent);
    transform: translateX(4px);
}

/* ===== FOCUS STATES ===== */
.nxAdminMenuWrapper a:focus-visible,
.nxAdminSubMenuToggle:focus-visible {
    outline: 2px solid var(--nx-menu-accent);
    outline-offset: 2px;
}

/* ===== INLINE ACCORDION SUBMENU (Header Sidebar) ===== */
.nxAdminMenuWrapper--header .nxAdminSubMenu {
    display: grid;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
    margin: 2px 0 4px 20px;
    padding: 0 0 0 12px;
    border-left: 1.5px solid var(--nx-side-border);
}
.nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > a,
.nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > .nxAdminSubMenuToggle {
    color: var(--nx-side-text);
    border-radius: 10px;
    font-size: var(--nx-type-control, 14px);
    font-weight: 500;
    min-height: 40px;
    padding: 9px 14px;
}
.nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > a .nxAdminMenuIcon svg {
    color: color-mix(in srgb, var(--nx-menu-role-accent) 72%, transparent);
}
.nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > a:hover,
.nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > a:focus-visible,
.nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > .nxAdminSubMenuToggle:hover,
.nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > .nxAdminSubMenuToggle:focus-visible {
    background: var(--nx-side-hover);
    color: var(--nx-text, #ffffff);
}
.nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > a:hover .nxAdminMenuIcon svg,
.nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > a:focus-visible .nxAdminMenuIcon svg {
    color: var(--nx-menu-role-accent);
}
/* Active child renders as a filled pill (the "Badges" look) */
.nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenuItemActive > a {
    background: var(--nx-menu-role-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-menu-role-accent) 28%, transparent);
    color: var(--nx-text, #ffffff);
    font-weight: 600;
}
/* Submenus open through the JS-controlled .is-open state on click/touch.
   focus-within is intentionally not used because it would immediately reopen
   a panel when its toggle is focused. */
.nxAdminMenuWrapper--header .nxAdminMenuItem.is-open > .nxAdminSubMenu {
    max-height: none;
    opacity: 1;
    transform: translateY(0);
    padding-top: 4px;
    padding-bottom: 4px;
}

.nxAdminSubMenuToggle {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

/* ===== CHEVRON ARROWS ===== */
.nxAdminMenuHasChildren > a::after,
.nxAdminSubMenuToggle::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: auto;
    margin-right: 4px;
    opacity: 0.5;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s;
}
.nxAdminMenuHasChildren.is-open > a::after,
.nxAdminMenuHasChildren.is-open > .nxAdminSubMenuToggle::after {
    transform: rotate(-135deg);
    opacity: 0.9;
}

/* ===== ICONS ===== */
.nxAdminMenuWrapper span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 15px;
    flex: 0 0 auto;
    opacity: 0.75;
    transition: transform 0.22s ease, opacity 0.22s ease, color 0.22s ease;
}
.nxAdminMenuIcon svg {
    width: 19px;
    height: 19px;
    display: block;
}
.nxAdminMenuWrapper--header .nxAdminMenuItem > a .nxAdminMenuIcon svg,
.nxAdminMenuWrapper--header .nxAdminMenuItem > .nxAdminSubMenuToggle .nxAdminMenuIcon svg {
    color: color-mix(in srgb, var(--nx-menu-role-accent) 78%, var(--nx-side-text));
}
.nxAdminMenuWrapper--header .nxAdminMenuItem:hover > a .nxAdminMenuIcon svg,
.nxAdminMenuWrapper--header .nxAdminMenuItem:hover > .nxAdminSubMenuToggle .nxAdminMenuIcon svg,
.nxAdminMenuWrapper--header .nxAdminMenuItemActive > a .nxAdminMenuIcon svg,
.nxAdminMenuWrapper--header .nxAdminMenuItemActive > .nxAdminSubMenuToggle .nxAdminMenuIcon svg {
    color: var(--nx-menu-role-accent);
}
.nxAdminMenuItem:hover > a span[aria-hidden="true"],
.nxAdminMenuItem:hover > .nxAdminSubMenuToggle span[aria-hidden="true"],
.nxAdminMenuItemActive > a span[aria-hidden="true"],
.nxAdminMenuItemActive > .nxAdminSubMenuToggle span[aria-hidden="true"] {
    opacity: 1;
    transform: scale(1.08);
}

/* ===== SIDEBAR FOOTER (divider + user card) ===== */
.nxAdminMenuHeadFooter {
    margin-top: auto;
    padding-top: 6px;
}
.nxAdminMenuDivider {
    height: 1px;
    background: var(--nx-side-border);
    margin: 12px 6px;
}
.nxAdminUserCard {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 8px;
    border-radius: 12px;
}
/* Log out: icon button pinned on the user card (the anchor keeps the
   id from menu_css_id - the instant-logout-button JS binds to it) */
.nxAdminUserCardLogout {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--nx-side-text);
}
.nxAdminUserCardLogout:hover,
.nxAdminUserCardLogout:focus-visible {
    color: var(--nx-text, #fff);
    background: var(--nx-side-hover);
}
.nxAdminUserCardLogout .nxAdminMenuIcon svg {
    width: 19px;
    height: 19px;
    display: block;
}
.nxAdminUserCard img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1.5px solid color-mix(in srgb, var(--nx-emerald, #06d6a0) 30%, transparent);
}
.nxAdminUserCardText {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.nxAdminUserCardName {
    color: var(--nx-text, #ffffff);
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nxAdminUserCardEmail {
    color: var(--nx-side-text);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nxAdminUserCardId {
    color: var(--nx-side-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== ACCOUNT TRIGGER + FULL MENU DROPDOWN ===== */
.nxAdminAccountMenu {
    position: relative;
    width: 100%;
    z-index: 100;
    max-width: 200px;
}
.nxAdminAccountMenu--guest {
    align-items: center;
    display: flex;
    gap: 6px;
    max-width: none;
    width: auto;
}
.nxtorigin-nav-account .nxAdminAccountMenu--guest {
    max-width: none !important;
}
.nxAdminAccountMenu--guest .nxAdminAccountTrigger {
    flex: 0 0 auto;
    padding: 8px 10px;
    width: auto;
}
.nxAdminAccountSignUp {
    align-items: center;
    background: linear-gradient(135deg, var(--nx-emerald, #06d6a0), var(--nx-cyan, #22d3ee)) !important;
    border: 1px solid color-mix(in srgb, var(--nx-text, #ffffff) 30%, transparent) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--nx-emerald, #06d6a0) 20%, transparent);
    color: var(--nx-btn-text, #04111f) !important;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 750;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    white-space: nowrap;
}
.nxAdminAccountSignUp:hover {
    box-shadow: 0 10px 22px color-mix(in srgb, var(--nx-cyan, #22d3ee) 28%, transparent);
    color: var(--nx-btn-text, #04111f) !important;
    transform: translateY(-1px);
}
.nxAdminAccountSignUp:focus-visible {
    outline: 2px solid var(--nx-cyan, #22d3ee);
    outline-offset: 2px;
}
.nxAdminAccountTrigger {
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px;
    box-shadow: none !important;
    box-sizing: border-box;
    color: var(--nx-nav-soft, #c2cedb);
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap !important;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    gap: 7px;
    justify-content: flex-end;
    min-height: auto;
    padding: 8px 12px;
    text-align: right;
    text-decoration: none;
    text-transform: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap !important;
    width: 100%;
}
.nxAdminAccountTrigger:hover,
.nxAdminAccountTrigger:focus-visible,
.nxAdminAccountTrigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--nx-panel-soft, #101b35) 60%, transparent) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 0 !important;
    color: var(--nx-text, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(194, 206, 219, 0.08) !important;
}
.nxAdminAccountTrigger:focus-visible {
    outline: 2px solid var(--nx-menu-accent);
    outline-offset: 2px;
}
.nxAdminAccountTriggerContent {
    align-items: center;
    display: inline-flex !important;
    flex: 0 1 auto;
    flex-wrap: nowrap !important;
    gap: 7px;
    justify-content: flex-end;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap !important;
}
button.nxAdminAccountTrigger {
    column-gap: 7px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 15px !important;
    grid-template-rows: 1fr !important;
}
button.nxAdminAccountTrigger .nxAdminAccountTriggerContent {
    display: contents !important;
}
/* Avatar circle in trigger */
.nxAdminAccountTriggerAvatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid var(--nx-side-accent, #06d6a0);
    box-sizing: border-box;
    display: block;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
button.nxAdminAccountTrigger .nxAdminAccountTriggerAvatar {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}
.nxAdminAccountTriggerName {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
button.nxAdminAccountTrigger .nxAdminAccountTriggerName {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    max-width: 100%;
}
.nxAdminAccountChevron {
    display: block;
    flex: 0 0 auto;
    height: 15px;
    margin: 0 1px 0 0;
    opacity: 0.9;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.2s ease;
    width: 15px;
}
button.nxAdminAccountTrigger .nxAdminAccountChevron {
    align-self: center;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}
.nxAdminAccountTrigger[aria-expanded="true"] .nxAdminAccountChevron {
    transform: rotate(180deg);
}
.nxAdminAccountTrigger .nxAdminMenuIcon svg {
    display: block;
    height: 18px;
    width: 18px;
}

@media (max-width: 850px) {
    .nxAdminAccountMenu--guest .nxAdminAccountTrigger .nxAdminMenuIcon {
        display: none;
    }
    .nxAdminAccountMenu--guest .nxAdminAccountTrigger,
    .nxAdminAccountMenu--guest .nxAdminAccountSignUp {
        padding-inline: 9px;
    }
}

@media (max-width: 520px) {
    .nxAdminAccountMenu--guest {
        gap: 3px;
    }
    .nxAdminAccountMenu--guest .nxAdminAccountTrigger,
    .nxAdminAccountMenu--guest .nxAdminAccountSignUp {
        font-size: 0.75rem;
        padding-inline: 7px;
    }
}
.nxAdminAccountMenu > .nxAdminMenuWrapper--header {
    display: flex !important;
    flex-direction: column !important;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--nx-cyan, #22d3ee) 13%, transparent), transparent 36%),
        color-mix(in srgb, var(--nx-panel, #0b1329) 94%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
    backdrop-filter: blur(28px) saturate(145%);
    border-color: color-mix(in srgb, var(--nx-text, #fff) 18%, transparent);
    box-shadow: 0 30px 68px rgba(0, 0, 0, 0.54), inset 0 1px rgba(255, 255, 255, 0.16);
    left: auto !important;
    margin: 0;
    max-height: calc(100vh - 100px) !important;
    min-width: 270px;
    position: absolute !important;
    right: 0;
    top: calc(100% + 8px) !important;
    width: min(320px, calc(100vw - 24px));
    z-index: 110;
    overflow: hidden !important;
}

.nxAdminAccountProfile {
    flex: 0 0 auto;
    margin: 0 2px 10px;
    padding: 2px 8px 12px;
    border-bottom: 1px solid var(--nx-side-border);
}

.nxAdminAccountProfileDetails {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.nxAdminAccountProfileEmail,
.nxAdminAccountProfileId {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nxAdminAccountProfileEmail {
    color: var(--nx-side-text, #c2cedb);
    font-size: var(--nx-type-supporting, 12px);
}

.nxAdminAccountProfileId {
    color: var(--nx-side-muted, #8899ad);
    font-size: var(--nx-type-eyebrow, 11px);
    font-weight: 600;
}
.nxAdminAccountMenu > .nxAdminMenuWrapper--header > .nxAdminMenuList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    max-height: none !important;
}
.nxAdminAccountMenu > .nxAdminMenuWrapper--header > .nxAdminMenuHeadFooter,
.nxAdminAccountMenu > .nxAdminMenuWrapper--header > .nxAdminMenuDropdownFooter {
    flex: 0 0 auto !important;
    margin-top: auto !important;
}
.nxAdminAccountMenu > .nxAdminMenuWrapper--header::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 18px;
    background: transparent;
    pointer-events: auto;
}
.nxAdminAccountMenu > .nxAdminMenuWrapper--header[hidden] {
    display: none !important;
}

/*
 * Native event pages reserve fixed chrome at both viewport edges. Keep the
 * account panel inside that usable band even when cached markup has not yet
 * run the geometry helper. The list absorbs the reduction and scrolls; the
 * fixed Sign out footer remains visible above the advertising footer.
 */
body.nxtorigin-native-event-shell-page
    .nxAdminAccountMenu > .nxAdminMenuWrapper--header {
    max-height: calc(var(--nxtorigin-event-viewport-height, 100dvh) - 190px) !important;
}

body.admin-bar.nxtorigin-native-event-shell-page
    .nxAdminAccountMenu > .nxAdminMenuWrapper--header {
    max-height: calc(var(--nxtorigin-event-viewport-height, 100dvh) - 222px) !important;
}

body.nxtorigin-native-event-shell-page
    .nxAdminAccountMenu > .nxAdminMenuWrapper--header > .nxAdminMenuDropdownFooter {
    display: block !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
}

.nxAdminMenuDropdownFooter {
    border-top: 1px solid var(--nx-side-border);
    margin-top: 9px;
    padding-top: 9px;
}
.nxAdminMenuDropdownLogout {
    align-items: center;
    border-radius: 10px;
    color: var(--nx-side-text);
    display: flex;
    font-size: var(--nx-type-action, 13px);
    font-weight: 600;
    gap: 11px;
    min-height: 40px;
    padding: 9px 12px;
    text-decoration: none;
}
.nxAdminMenuDropdownLogout:hover,
.nxAdminMenuDropdownLogout:focus-visible {
    background: var(--nx-side-hover);
    color: var(--nx-text, #ffffff);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    .nxAdminMenuWrapper--header > .nxAdminMenuList {
        align-items: stretch;
        display: grid;
        gap: 4px;
    }
    .nxAdminMenuWrapper--header .nxAdminSubMenu {
        position: static;
        box-shadow: none;
        margin: 4px 0 8px 24px;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        max-height: none;
        border: 0;
        border-left: 1.5px solid var(--nx-side-border);
        padding-left: 12px;
        background: transparent;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > a {
        color: var(--nx-side-text);
    }
    .nxAdminMenuWrapper--header .nxAdminSubMenu .nxAdminMenu > a:hover {
        color: var(--nx-text, #ffffff);
        background: var(--nx-side-hover);
    }
}

/* Merged Outer Menu Aesthetic Parity (Borderless 3D Liquid Glass & NxtOrigin Palette) */
.nxAdminAccountTrigger {
    border: 0 !important;
    background: transparent !important;
    color: var(--nx-nav-soft, #c2cedb) !important;
    box-shadow: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nxAdminAccountTrigger:hover,
.nxAdminAccountTrigger:focus-visible,
.nxAdminAccountTrigger[aria-expanded="true"] {
    border: 0 !important;
    background: color-mix(in srgb, var(--nx-panel-soft, #101b35) 60%, transparent) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    color: var(--nx-text, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(194, 206, 219, 0.08) !important;
}

.nxAdminAccountMenu > .nxAdminMenuWrapper--header,
.nxtorigin-nav-account .nxAdminAccountMenu > .nxAdminMenuWrapper--header {
    border: 1px solid var(--nx-border, #101b35) !important;
    border-radius: 16px !important;
    background: radial-gradient(circle at 90% 0, color-mix(in srgb, var(--nx-cyan, #22d3ee) 12%, transparent), transparent 30%), var(--nx-panel, #0b1329) !important;
    -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
    backdrop-filter: blur(28px) saturate(145%) !important;
    box-shadow: 0 4px 0 var(--nx-bg, #030711),
                0 10px 0 rgba(0, 0, 0, 0.25),
                0 36px 80px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(194, 206, 219, 0.08),
                inset 0 -3px 0 var(--nx-bg, #030711) !important;
}

.nxAdminMenuWrapper--header .nxAdminMenuHead > a,
.nxAdminMenuWrapper--header .nxAdminMenuHead > .nxAdminSubMenuToggle,
.nxAdminMenuWrapper--header .nxAdminMenu > a,
.nxAdminMenuWrapper--header .nxAdminMenu > .nxAdminSubMenuToggle {
    color: var(--nx-side-text, #c2cedb) !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--nx-panel-soft, #101b35) 35%, transparent) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nxAdminMenuWrapper--header .nxAdminMenuHead > a:hover,
.nxAdminMenuWrapper--header .nxAdminMenuHead > .nxAdminSubMenuToggle:hover,
.nxAdminMenuWrapper--header .nxAdminMenu > a:hover,
.nxAdminMenuWrapper--header .nxAdminMenu > a:focus-visible,
.nxAdminMenuWrapper--header .nxAdminMenu > .nxAdminSubMenuToggle:hover,
.nxAdminMenuWrapper--header .nxAdminMenu > .nxAdminSubMenuToggle:focus-visible {
    background: color-mix(in srgb, var(--nx-emerald, #06d6a0) 10%, transparent) !important;
    color: var(--nx-text, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(6, 214, 160, 0.15) !important;
}

.nxAdminMenuWrapper--header .nxAdminMenuDivider {
    background: var(--nx-border, #101b35) !important;
    height: 1px !important;
    margin: 10px 4px !important;
}

.nxAdminMenuWrapper--header .nxAdminSubMenu {
    border-left: 1.5px solid var(--nx-border, #101b35) !important;
}

.nxAdminUserCard {
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--nx-panel-soft, #101b35) 35%, transparent) !important;
}

/* Liquid Glass Realtime Search Bar Styling */
.nxAdminMenuSearchContainer {
    position: relative !important;
    margin: 0 0 10px 0 !important;
    padding: 0 2px !important;
    flex: 0 0 auto !important;
}

.nxAdminMenuSearchIcon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--nx-side-muted, #8899ad) !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
}

.nxAdminMenuSearchIcon svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
}

.nxAdminMenuSearchInput {
    width: 100% !important;
    height: 38px !important;
    padding: 6px 32px 6px 38px !important;
    border: 1px solid var(--nx-border, #101b35) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--nx-panel-soft, #101b35) 55%, transparent) !important;
    color: var(--nx-text, #ffffff) !important;
    font-size: var(--nx-type-control, 14px) !important;
    font-weight: 500 !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

.nxAdminMenuSearchInput::placeholder {
    color: var(--nx-side-muted, #8899ad) !important;
    opacity: 0.85 !important;
}

.nxAdminMenuSearchInput:focus {
    border-color: color-mix(in srgb, var(--nx-cyan, #22d3ee) 40%, transparent) !important;
    background: color-mix(in srgb, var(--nx-panel-soft, #101b35) 80%, transparent) !important;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.nxAdminMenuSearchClear {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--nx-side-muted, #8899ad) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 4px !important;
    line-height: 1 !important;
    z-index: 2 !important;
}

.nxAdminMenuSearchClear:hover,
.nxAdminMenuSearchClear:focus {
    color: var(--nx-text, #ffffff) !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}