@media (min-width: 901px) {
  body {
    --moti-sidebar-width: 184px;
    --moti-content-gap: 28px;
  }

  .moti-shell {
    width: min(1180px, calc(100vw - var(--moti-sidebar-width) - 72px)) !important;
    margin-left: calc(var(--moti-sidebar-width) + var(--moti-content-gap)) !important;
    margin-right: auto !important;
  }

  .moti-platform[hidden] {
    display: none !important;
  }

  .moti-platform:not([hidden]) {
    display: block !important;
  }

  .platform-nav {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    z-index: 45 !important;
    width: var(--moti-sidebar-width) !important;
    height: calc(100svh - var(--moti-sidebar-footer-offset, 0px)) !important;
    min-height: 420px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 28px 14px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.92)) !important;
    box-shadow: 14px 0 54px rgba(42, 64, 108, 0.055) !important;
    overflow: hidden !important;
    --active-nav-y: 148px;
    --active-nav-height: 42px;
    --active-nav-opacity: 1;
  }

  .platform-nav::before {
    display: none !important;
  }

  .platform-nav::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    left: 14px !important;
    right: 14px !important;
    top: 0 !important;
    height: var(--active-nav-height) !important;
    display: block !important;
    border-radius: 12px !important;
    opacity: var(--active-nav-opacity) !important;
    background: linear-gradient(90deg, rgba(62, 123, 255, 0.98), rgba(79, 140, 255, 0.94) 48%, rgba(218, 234, 255, 0.88)) !important;
    box-shadow: 0 14px 28px rgba(62, 123, 255, 0.18) !important;
    transform: translate3d(0, var(--active-nav-y), 0) !important;
    transition: transform 360ms cubic-bezier(.2, .9, .2, 1), height 260ms ease, opacity 180ms ease !important;
    pointer-events: none !important;
  }

  .platform-nav-avatar {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 86px !important;
    height: 86px !important;
    margin: 0 auto 42px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 14px 38px rgba(78, 96, 132, 0.12), inset 0 0 0 4px rgba(255, 255, 255, 0.7) !important;
  }

  .platform-nav-avatar span {
    width: 74px !important;
    height: 74px !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 50% 34%, #cfd3db 0 13%, transparent 14%),
      radial-gradient(ellipse at 50% 78%, #c8ccd4 0 34%, transparent 35%),
      #f4f6fb;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.88) !important;
    color: transparent !important;
  }

  .platform-nav-avatar span.has-image {
    background-size: cover !important;
    background-position: center !important;
  }

  .platform-nav button,
  .platform-nav .platform-nav-link:not(.platform-nav-voron) {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 13px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #657389 !important;
    font-size: 0.84rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: left !important;
    text-decoration: none !important;
    overflow: visible !important;
  }

  .platform-nav button > span:not(.nav-icon),
  .platform-nav .platform-nav-link:not(.platform-nav-voron) > span:not(.nav-icon) {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    color: inherit !important;
    opacity: 1 !important;
  }

  .platform-nav .nav-icon {
    position: relative !important;
    z-index: 2 !important;
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #66758b !important;
  }

  .platform-nav .nav-icon svg {
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .platform-nav button.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(62, 123, 255, 0.98), rgba(79, 140, 255, 0.94) 48%, rgba(218, 234, 255, 0.88)) !important;
    box-shadow: 0 14px 28px rgba(62, 123, 255, 0.18) !important;
  }

  .platform-nav button.active .nav-icon {
    width: 30px !important;
    height: 30px !important;
    margin-left: -5px !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: #3e7bff !important;
    box-shadow: 0 9px 22px rgba(62, 123, 255, 0.26) !important;
  }

  .platform-nav button.active .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #fff !important;
  }

  .platform-nav button.active > span:not(.nav-icon) {
    color: #fff !important;
    font-size: 0.82rem !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .platform-nav .platform-nav-voron {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: auto 0 10px !important;
    padding: 0 12px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 9px !important;
    border: 1px solid rgba(101, 115, 137, 0.14) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 12px 30px rgba(43, 64, 114, 0.075) !important;
    color: #657389 !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-decoration: none !important;
  }

  .platform-nav .platform-nav-voron > span:not(.nav-icon) {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    color: inherit !important;
  }

  .platform-nav .platform-nav-voron .nav-icon {
    width: 30px !important;
    height: 30px !important;
    color: #3e7bff !important;
    background: rgba(62, 123, 255, 0.09) !important;
    border-radius: 9px !important;
  }

  .platform-nav .platform-nav-voron .nav-icon svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
  }

  .platform-nav .platform-nav-voron .nav-icon img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .platform-nav .platform-nav-logout {
    margin: 0 auto !important;
    width: 74px !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    border: 1px solid rgba(101, 115, 137, 0.14) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 12px 30px rgba(43, 64, 114, 0.075) !important;
  }

  .platform-nav .platform-nav-logout .nav-icon {
    color: var(--red) !important;
  }

  .platform-nav .platform-nav-logout .nav-icon svg {
    width: 28px !important;
    height: 28px !important;
  }

  .mobile-menu-toggle {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .mobile-menu-toggle {
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    left: 18px !important;
    z-index: 80 !important;
    width: 54px !important;
    height: 54px !important;
    display: grid !important;
    place-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 16px 38px rgba(42, 64, 108, 0.12) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .platform-nav {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 70 !important;
    width: 168px !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 34px 14px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.92)) !important;
    box-shadow: 18px 0 48px rgba(42, 64, 108, 0.1) !important;
    transform: translateX(-112%) !important;
    transition: transform 220ms ease !important;
    overflow: hidden !important;
  }

  body.moti-mobile-menu-open .platform-nav,
  .moti-platform.is-mobile-menu-open .platform-nav {
    transform: translateX(0) !important;
  }

  .platform-nav::before,
  .platform-nav::after {
    display: none !important;
  }

  .platform-nav-avatar,
  .platform-nav .platform-nav-logout {
    display: grid !important;
  }

  .platform-nav-avatar {
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 82px !important;
    height: 82px !important;
    margin: 0 auto 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 14px 38px rgba(78, 96, 132, 0.12), inset 0 0 0 4px rgba(255, 255, 255, 0.72) !important;
  }

  .platform-nav-avatar span {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 50% 34%, #cfd3db 0 13%, transparent 14%),
      radial-gradient(ellipse at 50% 78%, #c8ccd4 0 34%, transparent 35%),
      #f4f6fb;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.88) !important;
    color: transparent !important;
  }

  .platform-nav-avatar span.has-image {
    background-size: cover !important;
    background-position: center !important;
  }

  .platform-nav button,
  .platform-nav .platform-nav-link:not(.platform-nav-voron) {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #657389 !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: left !important;
    text-decoration: none !important;
    overflow: visible !important;
  }

  .platform-nav button > span:not(.nav-icon),
  .platform-nav .platform-nav-link:not(.platform-nav-voron) > span:not(.nav-icon) {
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    color: inherit !important;
    opacity: 1 !important;
  }

  .platform-nav .nav-icon {
    position: relative !important;
    z-index: 2 !important;
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #66758b !important;
  }

  .platform-nav .nav-icon svg {
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .platform-nav button.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(62, 123, 255, 0.98), rgba(79, 140, 255, 0.94) 48%, rgba(218, 234, 255, 0.88)) !important;
    box-shadow: 0 14px 28px rgba(62, 123, 255, 0.18) !important;
  }

  .platform-nav button.active .nav-icon {
    width: 34px !important;
    height: 34px !important;
    margin-left: -6px !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: #3e7bff !important;
    box-shadow: 0 10px 24px rgba(62, 123, 255, 0.22) !important;
  }

  .platform-nav button.active .nav-icon svg {
    width: 19px !important;
    height: 19px !important;
    stroke: #fff !important;
  }

  .platform-nav .platform-nav-voron {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: auto 0 10px !important;
    padding: 0 12px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 9px !important;
    border: 1px solid rgba(101, 115, 137, 0.14) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 12px 30px rgba(43, 64, 114, 0.075) !important;
    color: #657389 !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-decoration: none !important;
  }

  .platform-nav .platform-nav-voron > span:not(.nav-icon) {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    color: inherit !important;
  }

  .platform-nav .platform-nav-voron .nav-icon {
    width: 30px !important;
    height: 30px !important;
    color: #3e7bff !important;
    background: rgba(62, 123, 255, 0.09) !important;
    border-radius: 9px !important;
  }

  .platform-nav .platform-nav-voron .nav-icon svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
  }

  .platform-nav .platform-nav-voron .nav-icon img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .platform-nav .platform-nav-logout {
    margin: 0 auto !important;
    width: 76px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    border: 1px solid rgba(101, 115, 137, 0.14) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 12px 30px rgba(43, 64, 114, 0.075) !important;
  }

  .platform-nav .platform-nav-logout .nav-icon {
    color: var(--red) !important;
  }
}

/* Single source of truth for the Moti menu. Older mobile nav rules in moti.css
   used to leave a bottom bar behind the drawer, so this final block pins the
   real drawer behavior after every earlier override. */
.moti-platform[hidden] .platform-nav,
[hidden].mobile-menu-toggle {
  display: none !important;
}

@media (max-width: 900px) {
  .mobile-menu-toggle {
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    left: 18px !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
  }

  body > .mobile-menu-toggle {
    z-index: 2147483647 !important;
  }

  .moti-header {
    pointer-events: none !important;
  }

  .moti-header a,
  .moti-header button,
  .moti-header [role="button"] {
    pointer-events: auto !important;
  }

  .mobile-menu-toggle::before {
    content: "" !important;
    width: 22px !important;
    height: 16px !important;
    display: block !important;
    background:
      linear-gradient(#657389, #657389) 0 0 / 22px 2px no-repeat,
      linear-gradient(#657389, #657389) 0 7px / 22px 2px no-repeat,
      linear-gradient(#657389, #657389) 0 14px / 22px 2px no-repeat !important;
    transition: transform 180ms ease, background 180ms ease !important;
  }

  .mobile-menu-toggle.is-open::before {
    width: 24px !important;
    height: 24px !important;
    background:
      linear-gradient(45deg, transparent 0 46%, #3e7bff 47% 53%, transparent 54% 100%),
      linear-gradient(-45deg, transparent 0 46%, #3e7bff 47% 53%, transparent 54% 100%) !important;
    transform: none !important;
  }

  .moti-platform {
    padding-bottom: 0 !important;
  }

  .platform-nav {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 184px !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: none !important;
    padding: 34px 14px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(-112%) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    --active-nav-y: 148px;
    --active-nav-height: 42px;
    --active-nav-opacity: 1;
  }

  .platform-nav::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    left: 14px !important;
    right: 14px !important;
    top: 0 !important;
    height: var(--active-nav-height) !important;
    display: block !important;
    border-radius: 12px !important;
    opacity: var(--active-nav-opacity) !important;
    background: linear-gradient(90deg, rgba(62, 123, 255, 0.98), rgba(79, 140, 255, 0.94) 48%, rgba(218, 234, 255, 0.88)) !important;
    box-shadow: 0 14px 28px rgba(62, 123, 255, 0.18) !important;
    transform: translate3d(0, var(--active-nav-y), 0) !important;
    transition: transform 360ms cubic-bezier(.2, .9, .2, 1), height 260ms ease, opacity 180ms ease !important;
    pointer-events: none !important;
  }

  body.moti-mobile-menu-open .platform-nav,
  .moti-platform.is-mobile-menu-open .platform-nav {
    transform: translateX(0) !important;
  }

  .platform-nav button.active > span:not(.nav-icon),
  .platform-nav button.active .nav-label {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .platform-nav button.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(62, 123, 255, 0.98), rgba(79, 140, 255, 0.94) 48%, rgba(218, 234, 255, 0.88)) !important;
    box-shadow: 0 14px 28px rgba(62, 123, 255, 0.18) !important;
  }

}

/* Beta 1.38.9: keep the active nav tab fully readable while the slider settles. */
@media (min-width: 901px) {
  .platform-nav {
    overflow: visible !important;
  }

  .platform-nav button,
  .platform-nav .platform-nav-link:not(.platform-nav-voron) {
    min-width: 156px !important;
    width: 156px !important;
    flex: 0 0 auto !important;
  }

  .platform-nav button.active {
    min-width: 156px !important;
    width: 156px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    overflow: visible !important;
    opacity: 1 !important;
    color: #fff !important;
    background:
      radial-gradient(circle at 20% 24%, rgba(255, 255, 255, 0.2), transparent 36%),
      linear-gradient(90deg, #3e7bff, #6aa4ff 58%, #dbeaff) !important;
  }

  .platform-nav button.active > span:not(.nav-icon) {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 900px) {
  .platform-nav {
    width: min(82vw, 220px) !important;
    padding: 30px 14px 22px !important;
    overflow: visible !important;
  }

  .platform-nav button,
  .platform-nav .platform-nav-link:not(.platform-nav-voron) {
    min-width: 0 !important;
    width: 100% !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  .platform-nav button.active {
    width: 100% !important;
    min-width: 0 !important;
    color: #fff !important;
    background:
      radial-gradient(circle at 20% 24%, rgba(255, 255, 255, 0.2), transparent 36%),
      linear-gradient(90deg, #3e7bff, #6aa4ff 58%, #dbeaff) !important;
  }

  .platform-nav button.active > span:not(.nav-icon) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
    white-space: nowrap !important;
  }

  .platform-nav .platform-nav-voron {
    width: 100% !important;
    min-height: 52px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    font-size: 0.74rem !important;
  }

  .platform-nav .platform-nav-voron .nav-icon {
    width: 30px !important;
    height: 30px !important;
  }

  .platform-nav .platform-nav-voron > span:not(.nav-icon) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}