.cascade-menu {
    --cascade-accent: var(--sapphire-cyan, #4fd2c1);
    --cascade-warm: var(--sapphire-gold, #e3c381);
    --cascade-panel: rgba(7, 22, 34, 0.98);
    --cascade-border: rgba(139, 190, 199, 0.2);
    --cascade-panel-background:
        radial-gradient(circle at 14% 0%, rgba(227, 195, 129, 0.12), transparent 32%),
        radial-gradient(circle at 88% 100%, rgba(97, 168, 255, 0.11), transparent 36%),
        linear-gradient(118deg, rgba(8, 17, 33, 0.995), rgba(10, 28, 49, 0.99) 56%, rgba(8, 19, 36, 0.995));
    --cascade-panel-edge: rgba(227, 195, 129, 0.42);
    --cascade-panel-hover: rgba(118, 176, 245, 0.09);
    position: relative;
    z-index: 80;
    color: #edf7f8;
}

.cascade-menu :is(ul, li) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cascade-menu__list {
    display: flex;
    align-items: center;
    gap: clamp(0.35rem, 1.2vw, 1.4rem);
}

.cascade-menu__item {
    position: relative;
    min-width: 0;
}

body.sapphire-front .cascade-menu > .cascade-menu__list > .cascade-menu__item {
    margin: 0;
    padding: 0;
}

.cascade-menu--primary > .cascade-menu__list > .cascade-menu__item,
.cascade-menu--mega > .cascade-menu__list > .cascade-menu__item {
    flex: 0 0 auto;
}

.cascade-menu--primary > .cascade-menu__list > .cascade-menu__item > :is(.cascade-menu__link, .cascade-menu__trigger),
.cascade-menu--mega > .cascade-menu__list > .cascade-menu__item > :is(.cascade-menu__link, .cascade-menu__trigger) {
    white-space: nowrap;
}

.cascade-menu__link,
.cascade-menu__trigger,
.cascade-menu__group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.62rem 0.72rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
}

.cascade-menu__link,
.cascade-menu__trigger {
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.cascade-menu__link:hover,
.cascade-menu__trigger:hover,
.cascade-menu__item.is-active > :is(.cascade-menu__link, .cascade-menu__trigger) {
    background: rgba(79, 210, 193, 0.09);
    color: #fff;
    box-shadow: inset 0 -2px var(--cascade-accent);
}

.cascade-menu__link:focus-visible,
.cascade-menu__trigger:focus-visible,
.cascade-menu__toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cascade-accent) 72%, white);
    outline-offset: 3px;
}

.cascade-menu__caret {
    width: 0.55rem;
    height: 0.55rem;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
}

.cascade-menu__item.is-open > .cascade-menu__trigger .cascade-menu__caret {
    transform: rotate(225deg) translate(-1px, -1px);
}

.cascade-menu__submenu {
    position: absolute;
    inset: calc(100% + 0.35rem) auto auto 0;
    display: none;
    min-width: min(19rem, calc(100vw - 2rem));
    padding: 0.65rem;
    border: 1px solid var(--cascade-border);
    border-radius: 16px;
    background:
        radial-gradient(circle at 8% 0%, rgba(79, 210, 193, 0.1), transparent 32%),
        var(--cascade-panel);
    box-shadow: 0 24px 56px rgba(1, 10, 18, 0.34);
}

.cascade-menu__item.is-open > .cascade-menu__submenu,
.cascade-menu__submenu.show {
    display: block;
}

.cascade-menu__submenu .cascade-menu__submenu {
    inset: -0.65rem auto auto calc(100% + 0.4rem);
}

.cascade-menu__submenu .cascade-menu__link,
.cascade-menu__submenu .cascade-menu__trigger {
    width: 100%;
    min-height: 36px;
    padding: 0.48rem 0.58rem;
    color: rgba(222, 237, 241, 0.86);
    font-size: 0.91rem;
}

.cascade-menu__group {
    break-inside: avoid;
    margin-bottom: 0.8rem;
}

.cascade-menu__group-title {
    min-height: auto;
    padding-bottom: 0.35rem;
    color: #fff;
    font-weight: 750;
}

.cascade-menu__group > .cascade-menu__submenu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cascade-menu--mega > .cascade-menu__list > .cascade-menu__item {
    position: static;
}

body.sapphire-front .top-nav.sapphire-engine-menu.cascade-menu--mega > .cascade-menu__list > .cascade-menu__item {
    position: static;
}

.cascade-menu--mega > .cascade-menu__list > .cascade-menu__item > .cascade-menu__submenu {
    inset: calc(100% + 1px) 0 auto;
    width: auto;
    max-height: min(72vh, 54rem);
    padding: clamp(1.1rem, 2.4vw, 2.4rem);
    overflow: auto;
    column-count: var(--cascade-max-columns, 4);
    column-width: 13rem;
    column-gap: clamp(1.2rem, 2.8vw, 3.4rem);
    border-radius: 0 0 20px 20px;
}

.cascade-menu--mega > .cascade-menu__list > .cascade-menu__item > .cascade-menu__submenu > .cascade-menu__item {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 0.9rem;
}

@keyframes cascade-panel-reveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 901px) {
    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega) {
        isolation: isolate;
    }

    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category {
        position: static;
    }

    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category
        > .cascade-menu__submenu {
        inset: calc(100% + 1px) 0 auto;
        z-index: 140;
        grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
        align-items: start;
        gap: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3.4rem);
        width: auto;
        min-width: 0;
        max-height: min(72vh, 48rem);
        padding: clamp(1.4rem, 2.5vw, 2.5rem) max(2rem, calc((100% - 84rem) / 2));
        overflow: auto;
        border: 0;
        border-top: 1px solid var(--cascade-panel-edge);
        border-bottom: 1px solid rgba(139, 190, 199, 0.18);
        border-radius: 0 0 22px 22px;
        background: var(--cascade-panel-background);
        box-shadow: 0 30px 72px rgba(1, 7, 18, 0.48), inset 0 1px rgba(255, 255, 255, 0.025);
        backdrop-filter: blur(24px);
        transform-origin: top center;
    }

    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category.is-open
        > .cascade-menu__submenu,
    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category
        > .cascade-menu__submenu.show {
        display: grid;
        animation: cascade-panel-reveal 0.2s ease-out both;
    }

    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category.is-open
        > .cascade-menu__trigger {
        color: #fff;
        box-shadow: inset 0 -2px var(--cascade-warm);
    }

    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category
        > .cascade-menu__submenu
        > .cascade-menu__item {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        break-inside: avoid;
    }

    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category
        > .cascade-menu__submenu
        .cascade-menu__group-title {
        min-height: auto;
        margin: 0 0 0.5rem;
        padding: 0 0 0.65rem;
        border-bottom: 1px solid rgba(227, 195, 129, 0.18);
        border-radius: 0;
        color: var(--cascade-warm);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.11em;
        text-transform: uppercase;
    }

    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category
        > .cascade-menu__submenu
        .cascade-menu__group-items {
        display: grid;
        gap: 0.16rem;
    }

    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category
        > .cascade-menu__submenu
        .cascade-menu__link {
        width: 100%;
        min-height: 38px;
        padding: 0.48rem 0.58rem;
        border: 1px solid transparent;
        border-radius: 9px;
        color: rgba(225, 236, 248, 0.78);
        font-size: 0.86rem;
        box-shadow: none;
    }

    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category
        > .cascade-menu__submenu
        .cascade-menu__link:hover,
    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category
        > .cascade-menu__submenu
        .cascade-menu__link:focus-visible,
    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category
        > .cascade-menu__submenu
        .cascade-menu__item.is-active
        > .cascade-menu__link {
        border-color: rgba(139, 190, 199, 0.16);
        background: var(--cascade-panel-hover);
        color: #fff;
        box-shadow: none;
        transform: translateX(3px);
    }

    .top-nav.sapphire-engine-menu:is(.cascade-menu--primary, .cascade-menu--mega)
        > .cascade-menu__list
        > .cascade-menu__item--category
        > .cascade-menu__submenu
        .cascade-menu__link
        > i {
        color: var(--cascade-accent);
        font-size: 0.9rem;
    }
}

.cascade-menu--compact {
    width: min(100%, 28rem);
    padding: 0.55rem;
    border: 1px solid var(--cascade-border);
    border-radius: 18px;
    background: var(--cascade-panel);
    box-shadow: 0 18px 42px rgba(1, 10, 18, 0.24);
}

.cascade-menu--compact .cascade-menu__list {
    display: grid;
    gap: 0.15rem;
}

.cascade-menu--compact .cascade-menu__link,
.cascade-menu--compact .cascade-menu__trigger {
    width: 100%;
}

.cascade-menu--compact .cascade-menu__submenu {
    position: static;
    margin: 0.15rem 0 0.35rem 0.8rem;
    padding: 0.2rem 0 0.2rem 0.65rem;
    border: 0;
    border-left: 1px solid var(--cascade-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cascade-menu__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid var(--cascade-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.cascade-menu__toggle-lines,
.cascade-menu__toggle-lines::before,
.cascade-menu__toggle-lines::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.cascade-menu__toggle-lines {
    position: relative;
}

.cascade-menu__toggle-lines::before,
.cascade-menu__toggle-lines::after {
    content: "";
    position: absolute;
    left: 0;
}

.cascade-menu__toggle-lines::before { top: -6px; }
.cascade-menu__toggle-lines::after { top: 6px; }

@media (max-width: 900px) {
    .cascade-menu--primary,
    .cascade-menu--mega {
        min-height: 52px;
    }

    .cascade-menu--primary .cascade-menu__toggle,
    .cascade-menu--mega .cascade-menu__toggle {
        display: flex;
    }

    .cascade-menu--primary > .cascade-menu__list,
    .cascade-menu--mega > .cascade-menu__list {
        position: absolute;
        inset: calc(100% + 0.35rem) 0 auto;
        display: none;
        max-height: min(75vh, 46rem);
        padding: 0.75rem;
        overflow: auto;
        border: 1px solid var(--cascade-border);
        border-radius: 16px;
        background: var(--cascade-panel);
        box-shadow: 0 24px 56px rgba(1, 10, 18, 0.38);
    }

    body.sapphire-front .top-nav.sapphire-engine-menu.cascade-menu--primary > .cascade-menu__list,
    body.sapphire-front .top-nav.sapphire-engine-menu.cascade-menu--mega > .cascade-menu__list {
        inset: calc(100% + 0.35rem) 0 auto;
        width: auto;
        max-height: min(75vh, 46rem);
        padding: 0.75rem;
    }

    .cascade-menu--primary.is-mobile-open > .cascade-menu__list,
    .cascade-menu--mega.is-mobile-open > .cascade-menu__list {
        display: grid;
        gap: 0.15rem;
    }

    body.sapphire-front .top-nav.sapphire-engine-menu.cascade-menu--primary.is-mobile-open > .cascade-menu__list,
    body.sapphire-front .top-nav.sapphire-engine-menu.cascade-menu--mega.is-mobile-open > .cascade-menu__list {
        display: grid;
    }

    .cascade-menu--primary .cascade-menu__link,
    .cascade-menu--primary .cascade-menu__trigger,
    .cascade-menu--mega .cascade-menu__link,
    .cascade-menu--mega .cascade-menu__trigger {
        width: 100%;
    }

    .cascade-menu--primary > .cascade-menu__list > .cascade-menu__item > :is(.cascade-menu__link, .cascade-menu__trigger),
    .cascade-menu--mega > .cascade-menu__list > .cascade-menu__item > :is(.cascade-menu__link, .cascade-menu__trigger) {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .cascade-menu--primary .cascade-menu__submenu,
    .cascade-menu--mega .cascade-menu__submenu,
    .cascade-menu--mega > .cascade-menu__list > .cascade-menu__item > .cascade-menu__submenu {
        position: static;
        width: auto;
        min-width: 0;
        max-height: none;
        margin: 0.15rem 0 0.35rem 0.8rem;
        padding: 0.25rem 0 0.25rem 0.65rem;
        overflow: visible;
        column-count: 1;
        border: 0;
        border-left: 1px solid var(--cascade-border);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cascade-menu *,
    .cascade-menu *::before,
    .cascade-menu *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}