.user-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  border-radius: 8px;
  padding: 8px;
}
.user-menu-toggle:hover,
.user-menu-toggle[aria-expanded="true"] { background: var(--wash); color: var(--teal2); }
.user-menu-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.user-menu-list {
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-color: var(--teal);
  --bs-dropdown-link-hover-bg: var(--wash);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--teal);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-divider-bg: var(--line);
  --bs-dropdown-border-radius: 10px;
  min-width: 230px;
  box-shadow: var(--shadow);
}
.user-menu-list .dropdown-item { font-size: 14px; padding: 9px 16px; }
.user-menu-list .user-menu-logout { color: var(--danger); }
.user-menu-list .user-menu-logout:hover,
.user-menu-list .user-menu-logout:focus { background: #fff0ef; color: var(--danger); }

.user-menu-list { min-width: min(290px, calc(100vw - 32px)); }
.user-menu-notifications { display: flex; align-items: center; }
.user-menu-notifications svg { flex-shrink: 0; }
.user-menu-notification-status { display: block; padding: 0 16px 8px; font-size: 11px; color: #6a7b82; max-width: 290px; white-space: normal; }
.user-menu-notification-status:empty { display: none; }