.user-menu {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.user-menu .top-user {
  margin-left: 0;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  padding: 7px 9px;
}

.user-menu .top-user::-webkit-details-marker { display: none; }
.user-menu .top-user:hover,
.user-menu[open] .top-user { background: #f6f5fc; }
.user-menu .top-user:focus-visible { outline: 2px solid #7365ef; outline-offset: 2px; }
.user-menu[open] .chevron { transform: rotate(180deg); }
.user-menu .chevron { transition: transform .15s ease; }

.user-menu-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 9px);
  right: 0;
  width: 170px;
  padding: 6px;
  background: #fff;
  border: 1px solid #eeeef4;
  border-radius: 12px;
  box-shadow: 0 12px 32px #28226d1c;
}

.user-menu-panel a,
.user-menu-panel button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #515065;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.user-menu-panel a:hover,
.user-menu-panel button:hover,
.user-menu-panel a:focus-visible,
.user-menu-panel button:focus-visible { background: #f6f5fc; color: #6254dc; }
.user-menu-panel form { border-top: 1px solid #f0f0f4; margin-top: 3px; padding-top: 3px; }