.account-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.account-menu-button {
  border: 0;
  cursor: pointer;
}

.account-menu-button:hover,
.account-menu-button:focus-visible {
  outline: 3px solid #bfe3c8;
  outline-offset: 2px;
}

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(330px, calc(100vw - 24px));
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(5, 45, 27, .2);
  z-index: 1200;
}

.account-menu[hidden] { display: none; }
.account-menu header { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.account-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--green-100); color: var(--green-900); font-weight: 900; flex: 0 0 auto; }
.account-menu header strong,
.account-menu header small { display: block; }
.account-menu header small { color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.account-menu dl { margin: 8px 0; }
.account-menu dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf1ed; font-size: .78rem; }
.account-menu dt { color: var(--muted); }
.account-menu dd { margin: 0; text-align: right; font-weight: 750; }
.account-signout { width: 100%; border: 1px solid #b9d5c0; border-radius: 9px; background: #f5faf5; color: var(--green-900); padding: 10px; font-weight: 800; cursor: pointer; }